<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Dark Mode Initialization (prevents flash) -->
    <script>
        (function() {
            const storedTheme = localStorage.getItem('theme');
            const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

            let isDark = false;

            if (storedTheme === 'dark') {
                isDark = true;
            } else if (storedTheme === 'light') {
                isDark = false;
            } else {
                // Default to system preference or light
                isDark = prefersDark;
            }

            if (isDark) {
                document.documentElement.classList.add('dark');
            } else {
                document.documentElement.classList.remove('dark');
            }

            // Store initial system decision if no preference saved
            if (!storedTheme) {
                localStorage.setItem('theme', prefersDark ? 'dark' : 'light');
            }
        })();
    </script>

    <!-- Browser Tab Title -->
    @php
        if (request()->routeIs('home')) {
            // Homepage is 100% controlled from Admin (SEO Settings)
            $pageTitle = \App\Models\Setting::get('seo_home_title') 
                ?: \App\Models\Setting::get('site_name') 
                ?: 'My Website';
        } else {
            // Other pages: use whatever the page itself sets in @section('title')
            // We prefix it with the Site Name from General Settings
            $currentSiteName = $siteName 
                ?? \App\Models\Setting::get('site_name') 
                ?? 'My Website';

            $childTitle = trim($title ?? '');

            $pageTitle = $childTitle 
                ? $currentSiteName . ' - ' . $childTitle 
                : $currentSiteName;
        }
    @endphp

    <title>{{ $pageTitle }}</title>
    <meta name="description" content="@yield('description', 'Book amazing tourism packages and experiences')">
    <meta name="keywords" content="@yield('keywords', 'tourism, travel, booking')">

    <!-- Favicon -->
    @if($siteFavicon)
        <link rel="icon" href="{{ asset('storage/' . $siteFavicon) }}">
        <link rel="shortcut icon" href="{{ asset('storage/' . $siteFavicon) }}">
    @else
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
    @endif

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;700;900&display=swap" rel="stylesheet">

    <!-- Tailwind CSS -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Feather Icons -->
    <script src="https://unpkg.com/feather-icons"></script>

    <!-- Custom CSS -->
    <style>
        :root {
            --primary-color: #3B82F6;
            --secondary-color: #10B981;
            --accent-color: #F59E0B;
            --dark-color: #1F2937;
            --light-color: #F9FAFB;
        }

        body {
            font-family: 'Inter', sans-serif;
        }

        .font-display {
            font-family: 'Playfair Display', serif;
        }

        .hero-gradient {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(16, 185, 129, 0.9) 100%);
        }

        .card-hover {
            transition: all 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
        }

        .text-gradient {
            background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .scroll-smooth {
            scroll-behavior: smooth;
        }

        .parallax {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.6s ease-out;
        }

        .loading-spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--primary-color);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>

    @stack('styles')
</head>
<body class="bg-gray-50 dark:bg-gray-950 text-gray-800 dark:text-gray-200 scroll-smooth" x-data="{ mobileMenu: false, searchOpen: false }">

    <!-- Maintenance Mode -->
    @if($maintenanceMode ?? false)
        <div class="fixed inset-0 bg-gray-900/95 dark:bg-black/95 z-50 flex items-center justify-center">
            <div class="text-center text-white p-8">
                <i data-feather="tool" class="w-16 h-16 mx-auto mb-4 text-yellow-400"></i>
                <h2 class="text-2xl font-bold mb-4">Under Maintenance</h2>
                <p class="text-gray-300">{{ $maintenanceMessage ?? 'We are currently under maintenance. Please check back soon.' }}</p>
            </div>
        </div>
    @endif

    <!-- Navigation -->
    <nav class="fixed top-0 w-full z-40 transition-all duration-300 backdrop-blur-md bg-white/80 dark:bg-gray-900/80 border-b border-gray-100 dark:border-gray-800" x-data="{ scrolled: false }"
         x-init="window.addEventListener('scroll', () => { scrolled = window.pageYOffset > 50 })"
         :class="scrolled ? 'py-2 shadow-sm' : 'py-4'">

        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">

                <!-- Logo -->
                <a href="{{ route('home') }}" class="flex items-center group">
                    @if($siteLogo)
                        <img src="{{ asset('storage/' . $siteLogo) }}"
                             alt="{{ $companyName }} Logo"
                             class="h-10 w-auto max-w-[200px] object-contain"
                             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                        <div class="w-10 h-10 bg-gradient-to-r from-orange-500 to-orange-600 rounded-lg items-center justify-center transform group-hover:rotate-12 transition-transform shadow-lg hover:shadow-orange-500/50 hidden">
                            <i data-feather="compass" class="w-6 h-6 text-white"></i>
                        </div>
                    @else
                        <div class="w-10 h-10 bg-gradient-to-r from-orange-500 to-orange-600 rounded-lg flex items-center justify-center transform group-hover:rotate-12 transition-transform shadow-lg hover:shadow-orange-500/50">
                            <i data-feather="compass" class="w-6 h-6 text-white"></i>
                        </div>
                        <span class="ml-3 text-xl font-bold text-gray-800 font-display">{{ \App\Models\Setting::get('company_name') ?: \App\Models\Setting::get('site_name') ?: 'Tourism' }}</span>
                    @endif
                </a>

                <!-- Desktop Navigation -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="{{ route('home') }}" class="text-[#0c2340] dark:text-gray-200 hover:text-[#c9a84c] dark:hover:text-[#c9a84c] transition-colors font-medium relative group">
                        {{ __('Home') }}
                        <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#c9a84c] transition-all group-hover:w-full"></span>
                    </a>
                    <a href="{{ route('destinations') }}" class="text-[#0c2340] dark:text-gray-200 hover:text-[#c9a84c] dark:hover:text-[#c9a84c] transition-colors font-medium relative group">
                        {{ __('Destinations') }}
                        <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#c9a84c] transition-all group-hover:w-full"></span>
                    </a>
                    <a href="{{ route('packages.index') }}" class="text-[#0c2340] dark:text-gray-200 hover:text-[#c9a84c] dark:hover:text-[#c9a84c] transition-colors font-medium relative group">
                        {{ __('Packages') }}
                        <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#c9a84c] transition-all group-hover:w-full"></span>
                    </a>
                    <a href="{{ route('about') }}" class="text-[#0c2340] dark:text-gray-200 hover:text-[#c9a84c] dark:hover:text-[#c9a84c] transition-colors font-medium relative group">
                        {{ __('About') }}
                        <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#c9a84c] transition-all group-hover:w-full"></span>
                    </a>
                    <a href="{{ route('contact') }}" class="text-[#0c2340] dark:text-gray-200 hover:text-[#c9a84c] dark:hover:text-[#c9a84c] transition-colors font-medium relative group">
                        {{ __('Contact') }}
                        <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#c9a84c] transition-all group-hover:w-full"></span>
                    </a>

                    <!-- Dark Mode Toggle (Desktop) -->
                    <div x-data="{
                        isDark: document.documentElement.classList.contains('dark'),
                        toggleDarkMode() {
                            this.isDark = !this.isDark;
                            if (this.isDark) {
                                document.documentElement.classList.add('dark');
                                localStorage.setItem('theme', 'dark');
                            } else {
                                document.documentElement.classList.remove('dark');
                                localStorage.setItem('theme', 'light');
                            }
                            // Re-render feather icons after DOM change
                            setTimeout(() => feather.replace(), 10);
                        }
                    }">
                        <button @click="toggleDarkMode()"
                                class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                                :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'">
                            <i x-show="!isDark" data-feather="moon" class="w-5 h-5"></i>
                            <i x-show="isDark" data-feather="sun" class="w-5 h-5"></i>
                        </button>
                    </div>

                    @if(auth()->check())
                        <div class="relative" x-data="{ dropdownOpen: false }">
                            <button @click="dropdownOpen = !dropdownOpen" class="flex items-center space-x-2 text-[#0c2340] dark:text-gray-200 hover:text-[#c9a84c] dark:hover:text-[#c9a84c] transition-colors font-medium">
                                <i data-feather="user" class="w-4 h-4"></i>
                                <span>{{ auth()->user()->name }}</span>
                                <i data-feather="chevron-down" class="w-4 h-4"></i>
                            </button>

                            <div x-show="dropdownOpen" @click.away="dropdownOpen = false"
                                 x-transition:enter="transition ease-out duration-200"
                                 x-transition:enter-start="opacity-0 transform scale-95"
                                 x-transition:enter-end="opacity-100 transform scale-100"
                                 x-transition:leave="transition ease-in duration-75"
                                 x-transition:leave-start="opacity-100 transform scale-100"
                                 x-transition:leave-end="opacity-0 transform scale-95"
                                 class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-xl py-2 z-50 border border-gray-100 dark:border-gray-700">

                                @if(auth()->user()->is_admin)
                                    <a href="{{ route('admin.dashboard') }}" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                                        <i data-feather="settings" class="w-4 h-4 inline mr-2"></i> {{ __('Admin Panel') }}
                                    </a>
                                @endif

                                <a href="{{ route('user.dashboard') }}" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                                    <i data-feather="layout" class="w-4 h-4 inline mr-2"></i> {{ __('Dashboard') }}
                                </a>
                                <a href="{{ route('user.bookings') }}" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                                    <i data-feather="calendar" class="w-4 h-4 inline mr-2"></i> {{ __('My Bookings') }}
                                </a>
                                <a href="{{ route('user.profile') }}" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                                    <i data-feather="user" class="w-4 h-4 inline mr-2"></i> {{ __('Profile') }}
                                </a>
                                <hr class="my-2 border-gray-200 dark:border-gray-700">
                                <form action="{{ route('logout') }}" method="POST">
                                    @csrf
                                    <button type="submit" class="block w-full text-left px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                                        <i data-feather="log-out" class="w-4 h-4 inline mr-2"></i> {{ __('Logout') }}
                                    </button>
                                </form>
                            </div>
                        </div>
                    @else
                        <div class="flex items-center space-x-4">
                            <a href="{{ route('login') }}" class="text-[#0c2340] dark:text-gray-200 hover:text-[#c9a84c] dark:hover:text-[#c9a84c] transition-colors font-medium">{{ __('Login') }}</a>
                            <a href="{{ route('register') }}" class="bg-[#0c2340] dark:bg-gray-700 text-white hover:bg-[#c9a84c] hover:text-[#0c2340] dark:hover:bg-gray-600 dark:hover:text-white transition-colors px-6 py-2 rounded-full font-medium">
                                {{ __('Register') }}
                            </a>
                        </div>
                    @endif
                </div>

                <!-- Mobile Menu Button -->
                <button @click="mobileMenu = !mobileMenu" class="md:hidden text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">
                    <i data-feather="menu" class="w-6 h-6"></i>
                </button>

            </div>
        </div>

        <!-- Mobile Navigation -->
        <div x-show="mobileMenu" x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 transform -translate-y-2"
             x-transition:enter-end="opacity-100 transform translate-y-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 transform translate-y-0"
             x-transition:leave-end="opacity-0 transform -translate-y-2"
             class="md:hidden bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">

            <div class="container mx-auto px-4 py-4 space-y-3">
                <!-- Dark Mode Toggle (Mobile) -->
                <div x-data="{
                    isDark: document.documentElement.classList.contains('dark'),
                    toggleDarkMode() {
                        this.isDark = !this.isDark;
                        if (this.isDark) {
                            document.documentElement.classList.add('dark');
                            localStorage.setItem('theme', 'dark');
                        } else {
                            document.documentElement.classList.remove('dark');
                            localStorage.setItem('theme', 'light');
                        }
                        setTimeout(() => feather.replace(), 10);
                    }
                }" class="flex items-center justify-between py-2">
                    <span class="text-gray-700 dark:text-gray-200 font-medium">Dark Mode</span>
                    <button @click="toggleDarkMode()"
                            class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors">
                        <i x-show="!isDark" data-feather="moon" class="w-5 h-5"></i>
                        <i x-show="isDark" data-feather="sun" class="w-5 h-5"></i>
                    </button>
                </div>

                <a href="{{ route('home') }}" class="block text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors font-medium py-2">{{ __('Home') }}</a>
                <a href="{{ route('destinations') }}" class="block text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors font-medium py-2">{{ __('Destinations') }}</a>
                <a href="{{ route('packages.index') }}" class="block text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors font-medium py-2">{{ __('Packages') }}</a>
                <a href="{{ route('about') }}" class="block text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors font-medium py-2">{{ __('About') }}</a>
                <a href="{{ route('contact') }}" class="block text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors font-medium py-2">{{ __('Contact') }}</a>

                @if(auth()->check())
                    <hr class="my-3">
                    <div class="space-y-2">
                        @if(auth()->user()->is_admin)
                            <a href="{{ route('admin.dashboard') }}" class="block text-gray-700 hover:text-blue-500 transition-colors font-medium py-2">
                                <i data-feather="settings" class="w-4 h-4 inline mr-2"></i> {{ __('Admin Panel') }}
                            </a>
                        @endif

                        <a href="{{ route('user.dashboard') }}" class="block text-gray-700 hover:text-blue-500 transition-colors font-medium py-2">
                            <i data-feather="layout" class="w-4 h-4 inline mr-2"></i> {{ __('Dashboard') }}
                        </a>
                        <a href="{{ route('user.bookings') }}" class="block text-gray-700 hover:text-blue-500 transition-colors font-medium py-2">
                            <i data-feather="calendar" class="w-4 h-4 inline mr-2"></i> {{ __('My Bookings') }}
                        </a>
                        <a href="{{ route('user.profile') }}" class="block text-gray-700 hover:text-blue-500 transition-colors font-medium py-2">
                            <i data-feather="user" class="w-4 h-4 inline mr-2"></i> {{ __('Profile') }}
                        </a>
                        <form action="{{ route('logout') }}" method="POST">
                            @csrf
                            <button type="submit" class="block w-full text-left text-gray-700 hover:text-blue-500 transition-colors font-medium py-2">
                                <i data-feather="log-out" class="w-4 h-4 inline mr-2"></i> {{ __('Logout') }}
                            </button>
                        </form>
                    </div>
                @else
                    <hr class="my-3 border-gray-200 dark:border-gray-700">
                    <div class="space-y-2">
                        <a href="{{ route('login') }}" class="block text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors font-medium py-2">{{ __('Login') }}</a>
                        <a href="{{ route('register') }}" class="bg-[#0c2340] dark:bg-gray-700 text-white hover:bg-[#c9a84c] hover:text-[#0c2340] dark:hover:bg-gray-600 px-6 py-2 rounded-full font-medium inline-block text-center transition-colors">
                            {{ __('Register') }}
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="pt-16">
        @yield('content')
    </main>

    <!-- Footer -->
    <footer class="bg-[#0c2340] dark:bg-gray-950 text-white">
        <div class="container mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">

                <!-- Company Info -->
                <div>
                    <div class="flex items-center mb-4">
                        @if($siteLogo)
                            <img src="{{ asset('storage/' . $siteLogo) }}"
                                 alt="{{ $companyName }} Logo"
                                 class="h-10 w-auto max-w-[180px] object-contain"
                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                            <div class="w-10 h-10 bg-[#c9a84c] rounded-lg items-center justify-center hidden">
                                <i data-feather="compass" class="w-6 h-6 text-[#0c2340]"></i>
                            </div>
                        @else
                            <div class="w-10 h-10 bg-[#c9a84c] rounded-lg flex items-center justify-center">
                                <i data-feather="compass" class="w-6 h-6 text-[#0c2340]"></i>
                            </div>
                            <span class="ml-3 text-xl font-bold font-display">{{ \App\Models\Setting::get('company_name') ?: \App\Models\Setting::get('site_name') ?: 'Tourism Company' }}</span>
                        @endif
                    </div>
                    <p class="text-gray-400 dark:text-gray-400 mb-4">{{ $siteDescription ?? 'Book your dream vacation with us' }}</p>
                    <div class="flex space-x-4">
                        @if($socialFacebook)
                            <a href="{{ $socialFacebook }}" class="text-gray-400 hover:text-white transition-colors">
                                <i data-feather="facebook" class="w-5 h-5"></i>
                            </a>
                        @endif
                        @if($socialTwitter)
                            <a href="{{ $socialTwitter }}" class="text-gray-400 hover:text-white transition-colors">
                                <i data-feather="twitter" class="w-5 h-5"></i>
                            </a>
                        @endif
                        @if($socialInstagram)
                            <a href="{{ $socialInstagram }}" class="text-gray-400 hover:text-white transition-colors">
                                <i data-feather="instagram" class="w-5 h-5"></i>
                            </a>
                        @endif
                        @if($socialYoutube)
                            <a href="{{ $socialYoutube }}" class="text-gray-400 hover:text-white transition-colors">
                                <i data-feather="youtube" class="w-5 h-5"></i>
                            </a>
                        @endif
                    </div>
                </div>

                <!-- Quick Links -->
                <div>
                    <h3 class="text-lg font-semibold mb-4">{{ __('Quick Links') }}</h3>
                    <ul class="space-y-2">
                        <li><a href="{{ route('home') }}" class="text-gray-400 hover:text-white transition-colors">{{ __('Home') }}</a></li>
                        <li><a href="{{ route('destinations') }}" class="text-gray-400 hover:text-white transition-colors">{{ __('Destinations') }}</a></li>
                        <li><a href="{{ route('packages.index') }}" class="text-gray-400 hover:text-white transition-colors">{{ __('Packages') }}</a></li>
                        <li><a href="{{ route('about') }}" class="text-gray-400 hover:text-white transition-colors">{{ __('About Us') }}</a></li>
                        <li><a href="{{ route('contact') }}" class="text-gray-400 hover:text-white transition-colors">{{ __('Contact') }}</a></li>
                        <li><a href="{{ route('login') }}" class="text-gray-400 hover:text-white transition-colors">{{ __('Login') }}</a></li>
                        <li><a href="{{ route('register') }}" class="text-gray-400 hover:text-white transition-colors">{{ __('Register') }}</a></li>
                    </ul>
                </div>

                <!-- Contact Info -->
                <div>
                    <h3 class="text-lg font-semibold mb-4">{{ __('Contact Info') }}</h3>
                    <ul class="space-y-3">
                        <li class="flex items-center space-x-3">
                            <i data-feather="mail" class="w-5 h-5 text-blue-400"></i>
                            <span class="text-gray-400">{{ $siteEmail ?? 'info@tourism.com' }}</span>
                        </li>
                        <li class="flex items-center space-x-3">
                            <i data-feather="phone" class="w-5 h-5 text-green-400"></i>
                            <span class="text-gray-400">{{ $sitePhone ?? '+1234567890' }}</span>
                        </li>
                        <li class="flex items-center space-x-3">
                            <i data-feather="map-pin" class="w-5 h-5 text-red-400"></i>
                            <span class="text-gray-400">{{ $siteAddress ?? '123 Tourism Street, City, Country' }}</span>
                        </li>
                        <li class="flex items-center space-x-3">
                            <i data-feather="message-circle" class="w-5 h-5 text-green-400"></i>
                            <span class="text-gray-400">{{ $whatsappNumber ?? '+1234567890' }}</span>
                        </li>
                    </ul>
                </div>

                <!-- Newsletter -->
                <div>
                    <h3 class="text-lg font-semibold mb-4">{{ __('Newsletter') }}</h3>
                    <p class="text-white/70 mb-4">{{ __('Subscribe to get special offers and travel tips') }}</p>
                    <form class="space-y-3">
                        <input type="email" placeholder="{{ __('Enter your email') }}"
                               class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:border-[#c9a84c] text-white">
                        <button type="submit" class="w-full bg-[#c9a84c] text-[#0c2340] px-6 py-3 rounded-lg font-bold hover:bg-white focus:outline-none transition-colors shadow-lg">
                            {{ __('Subscribe') }}
                        </button>
                    </form>
                </div>

            </div>

            <div class="border-t border-gray-800 mt-8 pt-8 text-center">
                <p class="text-gray-400">
                    &copy; {{ date('Y') }} {{ \App\Models\Setting::get('company_name') ?: \App\Models\Setting::get('site_name') ?: 'Tourism Company' }}. {{ __('All rights reserved.') }}
                </p>
            </div>
        </div>
    </footer>

    <!-- WhatsApp Float Button -->
    @if($whatsappNumber)
        <a href="https://wa.me/{{ str_replace(['+', '-', ' ', '(', ')'], '', $whatsappNumber) }}?text={{ urlencode(__('Hello, I would like to inquire about your tourism packages.')) }}"
           target="_blank"
           class="fixed bottom-6 right-6 bg-orange-500 text-white p-4 rounded-full shadow-lg hover:bg-orange-600 transition-all hover:scale-110 z-30">
            <i data-feather="message-circle" class="w-6 h-6"></i>
        </a>
    @endif

    <!-- Flash Messages -->
    @if(session()->has('success'))
        <div class="fixed top-20 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 animate-fade-in-up">
            <div class="flex items-center space-x-2">
                <i data-feather="check-circle" class="w-5 h-5"></i>
                <span>{{ session('success') }}</span>
            </div>
        </div>
    @endif

    @if(session()->has('error'))
        <div class="fixed top-20 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 animate-fade-in-up">
            <div class="flex items-center space-x-2">
                <i data-feather="x-circle" class="w-5 h-5"></i>
                <span>{{ session('error') }}</span>
            </div>
        </div>
    @endif

    @if($errors->any())
        <div class="fixed top-20 right-4 bg-yellow-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 animate-fade-in-up max-w-md">
            <div class="flex items-center space-x-2 mb-2">
                <i data-feather="alert-triangle" class="w-5 h-5"></i>
                <span class="font-semibold">{{ __('Please fix the following errors:') }}</span>
            </div>
            <ul class="space-y-1 text-sm">
                @foreach($errors->all() as $error)
                    <li>• {{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Scripts -->
    <script>
        // Initialize Feather Icons
        feather.replace();

        // Smooth scroll 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 flash messages after 5 seconds
        setTimeout(() => {
            const flashMessages = document.querySelectorAll('.animate-fade-in-up');
            flashMessages.forEach(message => {
                message.style.opacity = '0';
                setTimeout(() => message.remove(), 300);
            });
        }, 5000);

        // Form validation
        const forms = document.querySelectorAll('form');
        forms.forEach(form => {
            form.addEventListener('submit', function(e) {
                const requiredFields = this.querySelectorAll('[required]');
                let isValid = true;

                requiredFields.forEach(field => {
                    if (!field.value.trim()) {
                        isValid = false;
                        field.classList.add('border-red-500');
                    } else {
                        field.classList.remove('border-red-500');
                    }
                });

                if (!isValid) {
                    e.preventDefault();
                    // Show error message
                    const errorDiv = document.createElement('div');
                    errorDiv.className = 'fixed top-20 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 animate-fade-in-up';
                    errorDiv.innerHTML = `
                        <div class="flex items-center space-x-2">
                            <i data-feather="x-circle" class="w-5 h-5"></i>
                            <span>{{ __('Please fill in all required fields.') }}</span>
                        </div>
                    `;
                    document.body.appendChild(errorDiv);
                    feather.replace();

                    setTimeout(() => {
                        errorDiv.style.opacity = '0';
                        setTimeout(() => errorDiv.remove(), 300);
                    }, 5000);
                }
            });
        });
    </script>

    @stack('scripts')
</body>
</html>
