@extends('layouts.app')

@section('title', 'Sistem Antrian Puskesmas - Beranda')

@section('content')
    @if (session('success'))
        <div id="success-alert"
            class="fixed top-4 right-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded shadow-lg z-50 transition-all duration-300 transform translate-x-0 opacity-100">
            <div class="flex items-center">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                        clip-rule="evenodd"></path>
                </svg>
                {{ session('success') }}
            </div>
        </div>
    @endif

    <!-- Navigation -->
    <nav class="bg-white shadow-lg sticky top-0 z-40">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <h1 class="text-xl md:text-2xl font-bold text-primary">🏥 Puskesmas</h1>
                    </div>
                </div>
                <div class="hidden md:flex items-center space-x-4">
                    <a href="#layanan"
                        class="text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-200">Layanan</a>
                    <a href="#tentang"
                        class="text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-200">Tentang</a>
                    <a href="{{ route('display') }}"
                        class="text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-200">Display</a>
                    <a href="{{ route('login') }}"
                        class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">Login</a>
                </div>
                <!-- Mobile menu button -->
                <div class="md:hidden flex items-center">
                    <button id="mobile-menu-button" class="text-gray-700 hover:text-primary">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div>
            </div>
            <!-- Mobile menu -->
            <div id="mobile-menu" class="hidden md:hidden">
                <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t">
                    <a href="#layanan"
                        class="text-gray-700 hover:text-primary block px-3 py-2 rounded-md text-base font-medium transition duration-200">Layanan</a>
                    <a href="#tentang"
                        class="text-gray-700 hover:text-primary block px-3 py-2 rounded-md text-base font-medium transition duration-200">Tentang</a>
                    <a href="{{ route('display') }}"
                        class="text-gray-700 hover:text-primary block px-3 py-2 rounded-md text-base font-medium transition duration-200">Display</a>
                    <a href="{{ route('login') }}"
                        class="bg-primary hover:bg-secondary text-white block px-3 py-2 rounded-md text-base font-medium transition duration-200">Login</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <div class="bg-gradient-to-r from-primary via-blue-600 to-secondary text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
            <div class="text-center animate-fade-in">
                <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
                    Puskesmas Mlandingan
                </h1>
                <p class="text-xl md:text-2xl mb-8 text-blue-100 max-w-4xl mx-auto">
                    Antrian digital yang memudahkan pelayanan kesehatan masyarakat
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="{{ route('register') }}"
                        class="bg-white text-primary hover:bg-gray-100 px-8 py-4 rounded-xl text-lg font-semibold inline-block transition duration-200 transform hover:scale-105 shadow-lg">
                        Daftar Antrian
                    </a>
                    <a href="#layanan"
                        class="border-2 border-white text-white hover:bg-white hover:text-primary px-8 py-4 rounded-xl text-lg font-semibold inline-block transition duration-200 transform hover:scale-105">
                        Lihat Layanan
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Section -->
    <div id="layanan" class="py-16 md:py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12 md:mb-16 animate-slide-up">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Layanan Kami</h2>
                <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">Berbagai layanan kesehatan yang tersedia</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
                <div
                    class="bg-white p-6 md:p-8 rounded-2xl shadow-xl border border-gray-200 hover:shadow-2xl transition duration-300 transform hover:-translate-y-2 animate-slide-up">
                    <div class="text-4xl md:text-5xl mb-4 flex justify-center">
                        <svg class="w-12 h-12 md:w-16 md:h-16 text-red-600" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl md:text-2xl font-semibold mb-3">Poli Umum</h3>
                    <p class="text-gray-600 text-sm md:text-base">Layanan pemeriksaan kesehatan umum untuk semua usia</p>
                </div>

                <div class="bg-white p-6 md:p-8 rounded-2xl shadow-xl border border-gray-200 hover:shadow-2xl transition duration-300 transform hover:-translate-y-2 animate-slide-up"
                    style="animation-delay: 0.1s;">
                    <div class="text-4xl md:text-5xl mb-4 flex justify-center">
                        <svg class="w-12 h-12 md:w-16 md:h-16 text-blue-600" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                            </path>
                        </svg>
                    </div>
                    <h3 class="text-xl md:text-2xl font-semibold mb-3">Poli Gigi</h3>
                    <p class="text-gray-600 text-sm md:text-base">Layanan perawatan dan pengobatan kesehatan gigi dan mulut
                    </p>
                </div>

                <div class="bg-white p-6 md:p-8 rounded-2xl shadow-xl border border-gray-200 hover:shadow-2xl transition duration-300 transform hover:-translate-y-2 animate-slide-up"
                    style="animation-delay: 0.2s;">
                    <div class="text-4xl md:text-5xl mb-4 flex justify-center">
                        <svg class="w-12 h-12 md:w-16 md:h-16 text-purple-600" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z">
                            </path>
                        </svg>
                    </div>
                    <h3 class="text-xl md:text-2xl font-semibold mb-3">Poli Kesehatan Jiwa</h3>
                    <p class="text-gray-600 text-sm md:text-base">Layanan konsultasi dan terapi kesehatan mental</p>
                </div>

                <div class="bg-white p-6 md:p-8 rounded-2xl shadow-xl border border-gray-200 hover:shadow-2xl transition duration-300 transform hover:-translate-y-2 animate-slide-up"
                    style="animation-delay: 0.3s;">
                    <div class="text-4xl md:text-5xl mb-4 flex justify-center">
                        <svg class="w-12 h-12 md:w-16 md:h-16 text-green-600" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M9 1v6m6-6v6"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl md:text-2xl font-semibold mb-3">Poli Kesehatan Tradisional</h3>
                    <p class="text-gray-600 text-sm md:text-base">Layanan pengobatan tradisional dan herbal</p>
                </div>
            </div>
        </div>
    </div>

    <!-- How It Works -->
    <div class="py-16 md:py-24 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12 md:mb-16 animate-slide-up">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Cara Kerja</h2>
                <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">Langkah-langkah menggunakan sistem antrian
                    digital</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
                <div class="text-center animate-slide-up">
                    <div
                        class="bg-primary text-white rounded-full w-16 h-16 md:w-20 md:h-20 flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-lg">
                        1</div>
                    <h3 class="text-lg md:text-xl font-semibold mb-3">Daftar Online</h3>
                    <p class="text-gray-600 text-sm md:text-base">Isi formulir pendaftaran dengan data lengkap</p>
                </div>

                <div class="text-center animate-slide-up" style="animation-delay: 0.1s;">
                    <div
                        class="bg-primary text-white rounded-full w-16 h-16 md:w-20 md:h-20 flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-lg">
                        2</div>
                    <h3 class="text-lg md:text-xl font-semibold mb-3">Dapatkan Nomor</h3>
                    <p class="text-gray-600 text-sm md:text-base">Sistem akan memberikan nomor antrian</p>
                </div>

                <div class="text-center animate-slide-up" style="animation-delay: 0.2s;">
                    <div
                        class="bg-primary text-white rounded-full w-16 h-16 md:w-20 md:h-20 flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-lg">
                        3</div>
                    <h3 class="text-lg md:text-xl font-semibold mb-3">Tunggu Panggilan</h3>
                    <p class="text-gray-600 text-sm md:text-base">Monitor layar atau tunggu panggilan</p>
                </div>

                <div class="text-center animate-slide-up" style="animation-delay: 0.3s;">
                    <div
                        class="bg-primary text-white rounded-full w-16 h-16 md:w-20 md:h-20 flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-lg">
                        4</div>
                    <h3 class="text-lg md:text-xl font-semibold mb-3">Layanan</h3>
                    <p class="text-gray-600 text-sm md:text-base">Dapatkan pelayanan kesehatan</p>
                </div>
            </div>
        </div>
    </div>

    <!-- About Section -->
    <div id="tentang" class="py-16 md:py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
                <div class="animate-slide-up">
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Tentang Kami</h2>
                    <p class="text-lg md:text-xl text-gray-600 mb-4">
                        Puskesmas kami berkomitmen untuk memberikan pelayanan kesehatan yang berkualitas
                        kepada masyarakat dengan sistem antrian digital yang modern dan efisien.
                    </p>
                    <p class="text-lg md:text-xl text-gray-600 mb-8">
                        Dengan teknologi terkini, kami memastikan proses antrian berjalan lancar
                        dan mengurangi waktu tunggu pasien.
                    </p>
                    <div class="space-y-3">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-primary rounded-full mr-4"></div>
                            <span class="text-gray-700 text-base md:text-lg">Pelayanan 24/7</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-primary rounded-full mr-4"></div>
                            <span class="text-gray-700 text-base md:text-lg">Sistem Antrian Digital</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-primary rounded-full mr-4"></div>
                            <span class="text-gray-700 text-base md:text-lg">Tim Medis Profesional</span>
                        </div>
                    </div>
                </div>
                <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-8 md:p-12 animate-slide-up"
                    style="animation-delay: 0.2s;">
                    <div class="text-center">
                        <div class="text-6xl md:text-8xl mb-6">🏥</div>
                        <h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Puskesmas Modern</h3>
                        <p class="text-gray-600 text-base md:text-lg">Melayani dengan teknologi terkini</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
                <div>
                    <h3 class="text-xl md:text-2xl font-bold mb-4">🏥 Puskesmas</h3>
                    <p class="text-gray-400 text-sm md:text-base">Sistem antrian digital untuk pelayanan kesehatan yang
                        lebih baik.</p>
                </div>
                <div>
                    <h4 class="text-lg md:text-xl font-semibold mb-4">Layanan</h4>
                    <ul class="space-y-2 text-gray-400 text-sm md:text-base">
                        <li>Poli Umum</li>
                        <li>Poli Gigi</li>
                        <li>Poli Kesehatan Jiwa</li>
                        <li>Poli Kesehatan Tradisional</li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg md:text-xl font-semibold mb-4">Kontak</h4>
                    <div class="space-y-3 text-gray-400 text-sm md:text-base">
                        <div class="flex items-center space-x-3">
                            <svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
                                </path>
                            </svg>
                            <span>(62) 812-4901-0290</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                                </path>
                            </svg>
                            <span>pkmmlandinganeksotik@gmail.com</span>
                        </div>
                        <div class="flex items-start space-x-3">
                            <svg class="w-5 h-5 text-gray-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
                                </path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                            <span>Jalan Raya Mandingan No.437, Pesisir, Mlandingan Kulon, Kec. Mlandingan, Kabupaten
                                Situbondo, Jawa Timur 68353</span>
                        </div>
                    </div>
                </div>
                <div>
                    <h4 class="text-lg md:text-xl font-semibold mb-4">Jam Operasional</h4>
                    <ul class="space-y-2 text-gray-400 text-sm md:text-base">
                        <li>Senin - Kamis: 08:00 - 12:00</li>
                        <li>Jumat: 08:00 - 10:00</li>
                        <li>Sabtu: 08:00 - 11:30</li>
                        <li>Minggu: Tutup</li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 md:mt-12 pt-8 text-center text-gray-400">
                <p class="text-sm md:text-base">&copy; 2025 Sistem Antrian Puskesmas. All rights reserved.</p>
            </div>
        </div>
    </footer>

    @push('scripts')
        <script>
            // Mobile menu toggle
            document.getElementById('mobile-menu-button').addEventListener('click', function() {
                const mobileMenu = document.getElementById('mobile-menu');
                mobileMenu.classList.toggle('hidden');
            });

            // Smooth scrolling for anchor links
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            });

            // Auto-hide success alert after 3 seconds
            @if (session('success'))
                setTimeout(function() {
                    const successAlert = document.getElementById('success-alert');
                    if (successAlert) {
                        // Add fade out animation
                        successAlert.classList.add('translate-x-full', 'opacity-0');

                        // Remove element after animation completes
                        setTimeout(function() {
                            successAlert.remove();
                        }, 300);
                    }
                }, 3000);
            @endif

            // Show SweetAlert2 for error messages
            @if (session('error'))
                @if (str_contains(session('error'), 'sistem'))
                    Swal.fire({
                        icon: 'error',
                        title: 'Error Sistem!',
                        text: '{{ session('error') }}',
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#EF4444',
                        timer: 5000,
                        timerProgressBar: true,
                        showCloseButton: true,
                        allowOutsideClick: true,
                        allowEscapeKey: true
                    });
                @else
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: '{{ session('error') }}',
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#EF4444',
                        timer: 4000,
                        timerProgressBar: true,
                        showCloseButton: true,
                        allowOutsideClick: true,
                        allowEscapeKey: true
                    });
                @endif
            @endif

            // Intersection Observer for animations
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate-fade-in');
                    }
                });
            }, observerOptions);

            // Observe all sections
            document.querySelectorAll('section, .animate-slide-up').forEach(el => {
                observer.observe(el);
            });
        </script>
    @endpush
@endsection