<!DOCTYPE html>
<html lang="en" :class="{ 'dark': $store.theme.dark }" x-data>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="description" content="Sign up With {{ $settings->site_name }} to join thousands of investors">
    <meta name="author" content="{{ $settings->site_name }}">
    <meta name="theme-color" content="#E31937">
    <title>{{ $settings->site_name }} - @yield('title', 'Invest. Trade. Drive.')</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="{{ asset('storage/app/public/photos/'.$settings->favicon) }}" type="image/x-icon">
    <link rel="apple-touch-icon-precomposed" href="{{ asset('storage/app/public/photos/'.$settings->favicon) }}">

    <!-- Inter Font -->
    <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&display=swap" rel="stylesheet">

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        // Default to light mode if no preference is set
        if (!localStorage.getItem('theme')) {
            localStorage.setItem('theme', 'light');
        }
        if (localStorage.getItem('theme') === 'dark') {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'sans-serif'] },
                    colors: {
                        primary: {
                            50: '#FDECEE', 100: '#FAD7DB', 200: '#F5B0B8', 300: '#EF8894',
                            400: '#E85F70', 500: '#E31937', 600: '#C9142F', 700: '#A51026',
                            800: '#7E0C1D', 900: '#590713',
                        },
                        red: {
                            50: '#FDECEE', 100: '#FAD7DB', 200: '#F5B0B8', 300: '#EF8894',
                            400: '#E85F70', 500: '#E31937', 600: '#C9142F', 700: '#A51026',
                            800: '#7E0C1D', 900: '#590713',
                        },
                        gray: {
                            50: '#FFFFFF', 100: '#F5F5F5', 200: '#E5E5E5', 300: '#D4D4D4',
                            400: '#A3A3A3', 500: '#737373', 600: '#525252', 700: '#404040',
                            800: '#262626', 900: '#0F0F0F',
                        },
                    },
                }
            }
        }
    </script>

    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.store('theme', {
                dark: localStorage.getItem('theme') === 'dark',
                toggle() {
                    this.dark = !this.dark;
                    localStorage.setItem('theme', this.dark ? 'dark' : 'light');
                    document.documentElement.classList.toggle('dark', this.dark);
                }
            });
        });
    </script>

    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>

    <style>
        .goog-te-banner-frame.skiptranslate { display: none !important; }
        body { top: 0 !important; }
        [x-cloak] { display: none !important; }
    </style>
    @yield('styles')
</head>

<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-sans antialiased">

    <!-- Ticker Bar -->
    <div class="bg-gray-900 dark:bg-black border-b border-gray-800 overflow-hidden" x-data="{ offset: 0 }" x-init="setInterval(() => offset -= 1, 30)">
        <div class="py-2 flex items-center whitespace-nowrap animate-marquee" style="animation: marquee 30s linear infinite;">
            <span class="inline-flex items-center mx-4 text-xs text-gray-400">
                <i data-lucide="trending-up" class="w-3 h-3 mr-1 text-green-500"></i> XAUUSD <span class="text-green-500 ml-1">1478.81</span>
            </span>
            <span class="inline-flex items-center mx-4 text-xs text-gray-400">
                <i data-lucide="trending-down" class="w-3 h-3 mr-1 text-red-500"></i> GBPUSD <span class="text-red-500 ml-1">1.3191</span>
            </span>
            <span class="inline-flex items-center mx-4 text-xs text-gray-400">
                <i data-lucide="trending-down" class="w-3 h-3 mr-1 text-red-500"></i> EURUSD <span class="text-red-500 ml-1">1.1159</span>
            </span>
            <span class="inline-flex items-center mx-4 text-xs text-gray-400">
                <i data-lucide="trending-up" class="w-3 h-3 mr-1 text-green-500"></i> USDJPY <span class="text-green-500 ml-1">109.59</span>
            </span>
            <span class="inline-flex items-center mx-4 text-xs text-gray-400">
                <i data-lucide="trending-up" class="w-3 h-3 mr-1 text-green-500"></i> USDCAD <span class="text-green-500 ml-1">1.3172</span>
            </span>
            <span class="inline-flex items-center mx-4 text-xs text-gray-400">
                <i data-lucide="trending-up" class="w-3 h-3 mr-1 text-green-500"></i> USDCHF <span class="text-green-500 ml-1">0.9776</span>
            </span>
            <span class="inline-flex items-center mx-4 text-xs text-gray-400">
                <i data-lucide="trending-down" class="w-3 h-3 mr-1 text-red-500"></i> AUDUSD <span class="text-red-500 ml-1">0.67064</span>
            </span>
            <span class="inline-flex items-center mx-4 text-xs text-gray-400">
                <i data-lucide="trending-up" class="w-3 h-3 mr-1 text-green-500"></i> GBPJPY <span class="text-green-500 ml-1">141.91</span>
            </span>
            <!-- Duplicate for seamless loop -->
            <span class="inline-flex items-center mx-4 text-xs text-gray-400">
                <i data-lucide="trending-up" class="w-3 h-3 mr-1 text-green-500"></i> XAUUSD <span class="text-green-500 ml-1">1478.81</span>
            </span>
            <span class="inline-flex items-center mx-4 text-xs text-gray-400">
                <i data-lucide="trending-down" class="w-3 h-3 mr-1 text-red-500"></i> GBPUSD <span class="text-red-500 ml-1">1.3191</span>
            </span>
            <span class="inline-flex items-center mx-4 text-xs text-gray-400">
                <i data-lucide="trending-down" class="w-3 h-3 mr-1 text-red-500"></i> EURUSD <span class="text-red-500 ml-1">1.1159</span>
            </span>
            <span class="inline-flex items-center mx-4 text-xs text-gray-400">
                <i data-lucide="trending-up" class="w-3 h-3 mr-1 text-green-500"></i> USDJPY <span class="text-green-500 ml-1">109.59</span>
            </span>
        </div>
    </div>
    <style>
        @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .animate-marquee { display: flex; width: max-content; }
    </style>

    <!-- Navigation -->
    <header class="sticky top-0 z-50 bg-white/95 dark:bg-gray-900/95 backdrop-blur-md border-b border-gray-200 dark:border-gray-800" x-data="{ mobileOpen: false }">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <a href="{{ route('home') }}" class="flex-shrink-0">
                    <img src="{{ asset('storage/app/public/'.$settings->logo)}}" alt="{{ $settings->site_name }}" class="h-8 w-auto">
                </a>

                <!-- Desktop Nav -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="{{ route('home') }}" class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">Home</a>
                    <a href="{{ route('cars.index') }}" class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">Inventory</a>
                    @auth
                        <a href="{{ route('mplans') }}" class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">Invest</a>
                    @else
                        <a href="{{ route('login') }}" class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">Invest</a>
                    @endauth
                    <a href="{{ route('about') }}" class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">About</a>
                    <a href="{{ route('contact') }}" class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">Contact</a>
                    <a href="{{ route('faq') }}" class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">FAQ</a>
                </nav>

                <!-- Right Side -->
                <div class="hidden md:flex items-center space-x-4">
                    <!-- Dark Mode Toggle -->
                    <button @click="$store.theme.toggle()" class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                        <i data-lucide="sun" class="w-5 h-5 block dark:hidden"></i>
                        <i data-lucide="moon" class="w-5 h-5 hidden dark:block"></i>
                    </button>
                    @auth
                        <span class="text-sm text-gray-700 dark:text-gray-300">{{ Auth::user()->name }}</span>
                        <a href="{{ route('dashboard') }}" class="inline-flex items-center px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white text-sm font-medium rounded-lg transition-colors">
                            Dashboard
                        </a>
                    @else
                        <a href="{{ route('login') }}" class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary-500 transition-colors">Login</a>
                        <a href="{{ route('register') }}" class="inline-flex items-center px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white text-sm font-medium rounded-lg transition-colors">
                            Sign Up
                        </a>
                    @endauth
                </div>

                <!-- Mobile Menu Button -->
                <div class="flex items-center md:hidden space-x-2">
                    <button @click="$store.theme.toggle()" class="p-2 rounded-lg text-gray-500 dark:text-gray-400">
                        <i data-lucide="sun" class="w-5 h-5 block dark:hidden"></i>
                        <i data-lucide="moon" class="w-5 h-5 hidden dark:block"></i>
                    </button>
                    <button @click="mobileOpen = !mobileOpen" class="p-2 rounded-lg text-gray-500 dark:text-gray-400">
                        <i data-lucide="menu" class="w-6 h-6" x-show="!mobileOpen"></i>
                        <i data-lucide="x" class="w-6 h-6" x-show="mobileOpen" x-cloak></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Mobile Menu -->
        <div x-show="mobileOpen" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-2" class="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
            <div class="px-4 py-4 space-y-2">
                <a href="{{ route('home') }}" class="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Home</a>
                <a href="{{ route('cars.index') }}" class="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Inventory</a>
                @auth
                    <a href="{{ route('mplans') }}" class="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Invest</a>
                @else
                    <a href="{{ route('login') }}" class="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Invest</a>
                @endauth
                <a href="{{ route('about') }}" class="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">About</a>
                <a href="{{ route('contact') }}" class="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">Contact</a>
                <a href="{{ route('faq') }}" class="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">FAQ</a>
                <div class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4 flex space-x-3">
                    @auth
                        <a href="{{ route('dashboard') }}" class="flex-1 text-center px-4 py-2 bg-primary-500 text-white rounded-lg font-medium">Dashboard</a>
                    @else
                        <a href="{{ route('login') }}" class="flex-1 text-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg font-medium">Login</a>
                        <a href="{{ route('register') }}" class="flex-1 text-center px-4 py-2 bg-primary-500 text-white rounded-lg font-medium">Sign Up</a>
                    @endauth
                </div>
            </div>
        </div>
    </header>

    @include('layouts.lang')

    <!-- Page Content -->
    <main>
        @yield('content')
    </main>

    <!-- Activity Alert Popup -->
    <div id="fake-alert" class="fixed bottom-5 left-5 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4 z-50 max-w-xs border border-gray-200 dark:border-gray-700 transition-all duration-500" style="display:none; opacity:0;">
        <div class="flex items-center space-x-3">
            <div class="flex-shrink-0 w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
                <i data-lucide="check-circle" class="w-4 h-4 text-green-600 dark:text-green-400"></i>
            </div>
            <span id="alert-text" class="text-sm text-gray-700 dark:text-gray-300"></span>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-400 mt-auto">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Brand -->
                <div class="lg:col-span-1">
                    <img src="{{ asset('storage/app/public/'.$settings->logo)}}" alt="{{ $settings->site_name }}" class="h-8 w-auto mb-4 brightness-200">
                    <p class="text-sm text-gray-500 mb-4">{{ $settings->contact_email }}</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-500 hover:text-white transition-colors"><i data-lucide="youtube" class="w-5 h-5"></i></a>
                        <a href="#" class="text-gray-500 hover:text-white transition-colors"><i data-lucide="facebook" class="w-5 h-5"></i></a>
                        <a href="#" class="text-gray-500 hover:text-white transition-colors"><i data-lucide="instagram" class="w-5 h-5"></i></a>
                        <a href="#" class="text-gray-500 hover:text-white transition-colors"><i data-lucide="twitter" class="w-5 h-5"></i></a>
                    </div>
                </div>
                <!-- Company -->
                <div>
                    <h4 class="text-white font-semibold text-sm uppercase tracking-wider mb-4">Company</h4>
                    <ul class="space-y-2">
                        <li><a href="{{ route('about') }}" class="text-sm hover:text-white transition-colors">About</a></li>
                        <li><a href="{{ route('contact') }}" class="text-sm hover:text-white transition-colors">Contact</a></li>
                        <li><a href="{{ route('faq') }}" class="text-sm hover:text-white transition-colors">FAQ</a></li>
                    </ul>
                </div>
                <!-- Legal -->
                <div>
                    <h4 class="text-white font-semibold text-sm uppercase tracking-wider mb-4">Legal</h4>
                    <ul class="space-y-2">
                        <li><a href="{{ route('terms') }}" class="text-sm hover:text-white transition-colors">Terms &amp; Conditions</a></li>
                        <li><a href="{{ route('privacy') }}" class="text-sm hover:text-white transition-colors">Privacy Policy</a></li>
                        <li><a href="{{ route('risk') }}" class="text-sm hover:text-white transition-colors">Key Information</a></li>
                    </ul>
                </div>
                <!-- Support -->
                <div>
                    <h4 class="text-white font-semibold text-sm uppercase tracking-wider mb-4">Support</h4>
                    <ul class="space-y-2">
                        <li><a href="{{ route('safety') }}" class="text-sm hover:text-white transition-colors">Safety of Funds</a></li>
                        <li><a href="{{ route('service') }}" class="text-sm hover:text-white transition-colors">Services</a></li>
                        <li><a href="{{ route('trading') }}" class="text-sm hover:text-white transition-colors">Trading Conditions</a></li>
                    </ul>
                </div>
            </div>

            <!-- Key Information -->
            <div class="mt-12 pt-8 border-t border-gray-800">
                <div class="bg-gray-800/50 rounded-lg p-4 mb-8">
                    <h5 class="text-xs font-semibold text-gray-300 uppercase tracking-wider mb-2">Key Information</h5>
                    <p class="text-xs text-gray-500">Trading and investment products are designed for individuals who understand financial markets and associated opportunities. We recommend reviewing our Product Disclosure Statement (PDS) and Financial Services Guide (FSG) available on our website before making any financial decisions. Independent advice may be sought to ensure these products align with your personal financial goals and circumstances.
                    </p>
                </div>
                <div class="flex flex-col sm:flex-row items-center justify-between">
                    <p class="text-sm text-gray-500">&copy; {{ $settings->site_name }} {{ date('Y') }}. All rights reserved.</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Activity Alert Script -->
    <script>
    const alerts = [
        "John from New York just withdrew $500",
        "Alice from London just invested $1,000",
        "Michael from Texas withdrew $200",
        "Sandra from Berlin invested $2,000",
        "Rahul from Mumbai just invested $750",
        "Sophia from Dubai just withdrew $1,200",
        "Liam from Sydney invested $1,500",
        "Emma from Paris just withdrew $300",
        "David from Toronto invested $2,200",
        "Aisha from Lagos just invested $900",
        "Carlos from Madrid withdrew $700",
        "Mia from Cape Town just invested $1,300",
        "Kenji from Tokyo withdrew $600",
        "Olga from Moscow just invested $850",
        "Amir from Cairo just withdrew $450",
        "Lucas from S���o Paulo just invested $1,000",
        "Emily from Dublin just withdrew $250",
        "Noah from Johannesburg just invested $1,100",
        "Hassan from Islamabad just withdrew $950",
        "Natalie from Rome just invested $1,400",
        "Jason from Chicago just withdrew $800",
        "Zara from Kuala Lumpur just invested $670",
        "Chen from Beijing just withdrew $720",
        "Fatima from Riyadh just invested $890",
        "Mark from Los Angeles just withdrew $560"
    ];
    function showFakeAlert() {
        const alertBox = document.getElementById("fake-alert");
        const alertText = document.getElementById("alert-text");
        const randomAlert = alerts[Math.floor(Math.random() * alerts.length)];
        alertText.textContent = randomAlert;
        alertBox.style.display = "block";
        setTimeout(() => { alertBox.style.opacity = 1; }, 10);
        setTimeout(() => {
            alertBox.style.opacity = 0;
            setTimeout(() => { alertBox.style.display = "none"; }, 500);
        }, 5000);
    }
    setInterval(showFakeAlert, 15000);
    setTimeout(showFakeAlert, 5000);
    </script>

    <!-- Lucide Icons Init -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof lucide !== 'undefined') lucide.createIcons();
        });
    </script>

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