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

    @include('partials.seo-head', [
        'title' => $title ?? 'Blog',
        'seoMetaTitle' => $seoMetaTitle ?? null,
        'seoDescription' => $seoDescription ?? null,
        'seoCanonical' => $seoCanonical ?? null,
        'seoImage' => $seoImage ?? null,
        'seoKeywords' => $seoKeywords ?? null,
        'seoOgType' => $seoOgType ?? null,
        'seoJsonLd' => $seoJsonLd ?? null,
    ])

    <!-- Favicon -->
    <link rel="icon" href="{{ $settings['site_favicon'] ?? '/favicon.ico' }}" sizes="any">
    <link rel="icon" href="{{ $settings['site_favicon'] ?? '/favicon.ico' }}" type="image/svg+xml">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700&family=source-serif-4:400,400italic,600,600italic,700&display=swap" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- Temporary runtime Tailwind fallback for environments where build workers are restricted -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        lime: {
                            50: '#e8f0fe',
                            100: '#d2e3fc',
                            200: '#aecbfa',
                            300: '#8ab4f8',
                            400: '#669df6',
                            500: '#4285f4',
                            600: '#1a73e8',
                            700: '#1967d2',
                            800: '#185abc',
                            900: '#174ea6',
                            950: '#0d47a1',
                        },
                    },
                },
            },
        };
    </script>
    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    
    <!-- Livewire Styles -->
    @fluxAppearance
    @livewireStyles
</head>
<body
    class="h-full bg-[#f8f9fa] dark:bg-zinc-900 font-sans antialiased"
    style="--color-accent: #4285f4; --color-accent-content: #4285f4; --color-accent-foreground: #ffffff;"
>
    <div class="h-1 w-full shrink-0 bg-[linear-gradient(90deg,#4285F4_0%_25%,#EA4335_25%_50%,#FBBC05_50%_75%,#34A853_75%_100%)]" aria-hidden="true"></div>
    <!-- Header -->
    <header id="header" class="sticky top-0 left-0 right-0 z-50 border-b border-zinc-200/70 dark:border-zinc-800 bg-[#f8f9fa]/95 dark:bg-slate-950/95 backdrop-blur">
        <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center gap-3 h-16">
                <a href="{{ route('home') }}" class="flex items-center gap-2 shrink-0">
                    <img src="{{ $settings['site_logo'] ?? config('branding.default_site_logo') }}" alt="{{ $settings['site_name'] ?? config('app.name') }}" class="w-auto h-7">
                </a>

                <nav class="hidden lg:flex items-center gap-5 ml-2">
                    <a href="{{ route('home') }}" class="text-sm font-semibold text-zinc-700 dark:text-zinc-200 hover:text-lime-600 dark:hover:text-lime-400 transition-colors">
                        Blog
                    </a>
                    <a href="{{ route('blog') }}" class="text-sm font-semibold text-zinc-700 dark:text-zinc-200 hover:text-lime-600 dark:hover:text-lime-400 transition-colors">
                        All posts
                    </a>
                    <a href="{{ route('websites.index') }}" class="inline-flex items-center gap-1.5 text-sm font-semibold text-zinc-700 dark:text-zinc-200 hover:text-lime-600 dark:hover:text-lime-400 transition-colors">
                        <i class="fas fa-shield-halved shrink-0 text-xs opacity-90" aria-hidden="true"></i>
                        <span>Trust checks</span>
                    </a>
                    <a href="https://about.google/products/" target="_blank" rel="noopener noreferrer" class="text-sm font-semibold text-zinc-700 dark:text-zinc-200 hover:text-lime-600 dark:hover:text-lime-400 transition-colors">
                        Resources
                    </a>
                </nav>

                <div class="hidden lg:block flex-1 min-w-0" aria-hidden="true"></div>

                <div class="ml-auto flex items-center gap-2">
                    <div class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors">
                        @livewire('dark-mode-toggle')
                    </div>
                    <a href="https://about.google/products/" target="_blank" rel="noopener noreferrer" class="hidden md:inline-flex h-10 w-10 items-center justify-center rounded-xl border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors" aria-label="Resources">
                        <i class="fas fa-book-open text-sm"></i>
                    </a>
                    <button
                        class="mobile-menu-btn md:hidden inline-flex h-10 w-10 items-center justify-center rounded-xl border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
                        onclick="toggleMobileMenu()"
                        aria-label="Open menu"
                    >
                        <i class="fas fa-bars text-base"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- Search + Filter Strip -->
    <div class="border-b border-zinc-200/70 dark:border-zinc-800 bg-[#f8f9fa]/95 dark:bg-slate-950/95 backdrop-blur">
        <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
            <div class="flex items-center gap-2 overflow-x-auto no-scrollbar">
                <a
                    href="{{ route('blog') }}"
                    class="shrink-0 rounded-full border px-4 py-1.5 text-sm transition-colors {{ (request()->routeIs('home') || request()->routeIs('blog')) ? 'border-lime-500 dark:border-lime-500 bg-lime-500 text-white dark:bg-lime-500 dark:text-white font-semibold hover:bg-lime-400' : 'border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-200 font-medium hover:bg-lime-50 dark:hover:bg-zinc-800' }}"
                >
                    All posts
                </a>
                @foreach ($blogNavCategories as $cat)
                    <a
                        href="{{ route('blog.category', $cat->slug) }}"
                        class="shrink-0 rounded-full border px-4 py-1.5 text-sm transition-colors {{ request()->routeIs('blog.category') && request()->route('categorySlug') === $cat->slug ? 'border-lime-500 dark:border-lime-500 bg-lime-500 text-white dark:bg-lime-500 dark:text-white font-semibold hover:bg-lime-400' : 'border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-200 font-medium hover:bg-lime-50 dark:hover:bg-zinc-800' }}"
                    >
                        {{ $cat->name }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Mobile Navigation Menu -->
    <div id="mobileMenu" class="fixed left-0 top-0 bottom-0 z-50 w-[86%] max-w-sm bg-white dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700 transform -translate-x-full transition-transform duration-300 ease-out shadow-2xl overflow-y-auto">
        <div class="relative p-5 border-b border-zinc-200 dark:border-zinc-700 bg-gradient-to-r from-lime-50 to-white dark:from-zinc-900 dark:to-zinc-900">
            <div class="absolute -top-12 -right-10 h-32 w-32 rounded-full bg-lime-300/25 blur-2xl"></div>
            <div class="relative flex items-center justify-between">
                <a href="{{ route('home') }}" class="flex items-center gap-2" onclick="toggleMobileMenu()">
                    <img src="{{ $settings['site_logo'] ?? config('branding.default_site_logo') }}" alt="{{ $settings['site_name'] ?? config('app.name') }}" class="w-auto h-8">
                </a>
                <button
                    onclick="toggleMobileMenu()"
                    class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-zinc-300 dark:border-zinc-700 text-zinc-600 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white hover:bg-white/70 dark:hover:bg-zinc-800 transition-colors"
                    aria-label="Close menu"
                >
                    <i class="fas fa-times text-base"></i>
                </button>
            </div>
            <p class="relative mt-3 text-xs text-zinc-600 dark:text-zinc-400">Long-form articles, curated resources, and deep dives for readers who want to go further.</p>
        </div>

        <div class="p-5 space-y-5">
            <nav class="space-y-4">
                <div>
                    <p class="text-[11px] uppercase tracking-wider font-semibold text-zinc-500 dark:text-zinc-400 mb-2">Main</p>
                    <div class="space-y-1">
                        <a href="{{ route('home') }}" onclick="toggleMobileMenu()" class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-zinc-700 dark:text-zinc-200 hover:bg-lime-50 dark:hover:bg-zinc-800 transition-colors">
                            <i class="fas fa-house w-4 text-lime-500"></i>
                            <span class="font-medium">Blog</span>
                        </a>
                        <a href="{{ route('blog') }}" onclick="toggleMobileMenu()" class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-zinc-700 dark:text-zinc-200 hover:bg-lime-50 dark:hover:bg-zinc-800 transition-colors">
                            <i class="fas fa-list w-4 text-lime-500"></i>
                            <span class="font-medium">All posts</span>
                        </a>
                        <a href="{{ route('websites.index') }}" onclick="toggleMobileMenu()" class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-zinc-700 dark:text-zinc-200 hover:bg-lime-50 dark:hover:bg-zinc-800 transition-colors">
                            <i class="fas fa-shield-halved w-4 shrink-0 text-center text-lime-500" aria-hidden="true"></i>
                            <span class="font-medium">Trust checks</span>
                        </a>
                        <a href="https://about.google/products/" target="_blank" rel="noopener noreferrer" onclick="toggleMobileMenu()" class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-zinc-700 dark:text-zinc-200 hover:bg-lime-50 dark:hover:bg-zinc-800 transition-colors">
                            <i class="fas fa-book-open w-4 text-lime-500"></i>
                            <span class="font-medium">Resources</span>
                        </a>
                    </div>
                </div>

                @if ($blogNavCategories->isNotEmpty())
                    <div>
                        <p class="text-[11px] uppercase tracking-wider font-semibold text-zinc-500 dark:text-zinc-400 mb-2">Topics</p>
                        <div class="space-y-1">
                            @foreach ($blogNavCategories as $cat)
                                <a href="{{ route('blog.category', $cat->slug) }}" onclick="toggleMobileMenu()" class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-zinc-700 dark:text-zinc-200 hover:bg-lime-50 dark:hover:bg-zinc-800 transition-colors">
                                    <i class="fas fa-folder-open w-4 text-lime-500"></i>
                                    <span class="font-medium">{{ $cat->name }}</span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </nav>
        </div>
    </div>

    <!-- Mobile Menu Overlay -->
    <div id="mobileMenuOverlay" class="fixed inset-0 z-40 bg-black/55 backdrop-blur-[1px]" style="display: none;" onclick="toggleMobileMenu()"></div>

    <!-- Main Content -->
    <main class="flex-1">
        {{ $slot }}
    </main>

    <!-- Footer -->
    <footer class="bg-[#202124] text-white">
        <div class="h-1 w-full shrink-0 bg-[linear-gradient(90deg,#4285F4_0%_25%,#EA4335_25%_50%,#FBBC05_50%_75%,#34A853_75%_100%)]" aria-hidden="true"></div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
                <div class="md:col-span-1">
                    <div class="flex items-center space-x-2 mb-4">
                        <img src="{{ $settings['site_logo'] ?? config('branding.default_site_logo') }}" alt="{{ $settings['site_name'] ?? config('app.name') }}" class="w-auto h-8 max-w-[140px] object-contain object-left">
                    </div>
                    <p class="text-zinc-400 text-sm leading-relaxed">
                        A blog-first site: essays, guides, and editorial coverage you can trust.
                    </p>
                </div>

                <div>
                    <h3 class="inline-block text-sm font-semibold uppercase tracking-wide mb-4 bg-[linear-gradient(90deg,#4285F4,#EA4335,#FBBC05,#34A853)] bg-clip-text text-transparent">Discover</h3>
                    <ul class="space-y-2">
                        <li><a href="{{ route('websites.index') }}" class="text-zinc-400 hover:text-[#8AB4F8] transition-colors">Trust directory</a></li>
                        <li><a href="{{ route('licensing') }}" class="text-zinc-400 hover:text-[#8AB4F8] transition-colors">Licensing</a></li>
                        <li><a href="{{ route('faq') }}" class="text-zinc-400 hover:text-[#8AB4F8] transition-colors">Help & FAQ</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="inline-block text-sm font-semibold uppercase tracking-wide mb-4 bg-[linear-gradient(90deg,#EA4335,#FBBC05,#34A853,#4285F4)] bg-clip-text text-transparent">Resources</h3>
                    <ul class="space-y-2">
                        <li><a href="{{ route('blog') }}" class="text-zinc-400 hover:text-[#8AB4F8] transition-colors">Blog</a></li>
                        <li><a href="{{ route('guides') }}" class="text-zinc-400 hover:text-[#8AB4F8] transition-colors">Guides</a></li>
                        <li><a href="{{ route('contact') }}" class="text-zinc-400 hover:text-[#8AB4F8] transition-colors">Support</a></li>
                        <li><a href="https://about.google/" target="_blank" rel="noopener noreferrer" class="text-zinc-400 hover:text-[#8AB4F8] transition-colors">About</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="inline-block text-sm font-semibold uppercase tracking-wide mb-4 bg-[linear-gradient(90deg,#34A853,#4285F4,#EA4335,#FBBC05)] bg-clip-text text-transparent">Legal</h3>
                    <ul class="space-y-2">
                        <li><a href="{{ route('terms') }}" class="text-zinc-400 hover:text-[#8AB4F8] transition-colors">Terms of Service</a></li>
                        <li><a href="{{ route('privacy') }}" class="text-zinc-400 hover:text-[#8AB4F8] transition-colors">Privacy Policy</a></li>
                        <li><a href="{{ route('refund-policy') }}" class="text-zinc-400 hover:text-[#8AB4F8] transition-colors">Refund Policy</a></li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-white/10 mt-10 pt-6 flex flex-col md:flex-row items-center justify-between gap-4">
                <p class="text-zinc-500 text-sm">© {{ date('Y') }} {{ $settings['site_name'] ?? config('app.name') }}. All rights reserved.</p>
                <div class="flex items-center space-x-3">
                    <a href="https://x.com/Google" target="_blank" rel="noopener noreferrer" class="group w-9 h-9 bg-zinc-900/80 border border-zinc-600 rounded-lg flex items-center justify-center transition-colors hover:border-[#4285F4]" aria-label="Google on X">
                        <svg class="w-4 h-4 text-zinc-300 transition-colors group-hover:text-[#8AB4F8]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                        </svg>
                    </a>
                    <a href="https://www.youtube.com/google" target="_blank" rel="noopener noreferrer" class="group w-9 h-9 bg-zinc-900/80 border border-zinc-600 rounded-lg flex items-center justify-center transition-colors hover:border-[#EA4335]" aria-label="Google on YouTube">
                        <svg class="w-4 h-4 text-zinc-300 transition-colors group-hover:text-[#F28B82]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                        </svg>
                    </a>
                    <a href="https://www.linkedin.com/company/google/" target="_blank" rel="noopener noreferrer" class="group w-9 h-9 bg-zinc-900/80 border border-zinc-600 rounded-lg flex items-center justify-center transition-colors hover:border-[#FBBC05]" aria-label="Google on LinkedIn">
                        <svg class="w-4 h-4 text-zinc-300 transition-colors group-hover:text-[#FDD663]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Livewire Scripts -->
    @fluxScripts
    @livewireScripts

    <style>
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
    </style>

    <!-- Mobile Menu JavaScript -->
    <script>
        function toggleMobileMenu() {
            const mobileMenu = document.getElementById('mobileMenu');
            const overlay = document.getElementById('mobileMenuOverlay');
            
            if (mobileMenu.classList.contains('-translate-x-full')) {
                // Open menu
                mobileMenu.classList.remove('-translate-x-full');
                overlay.style.display = 'block';
                document.body.style.overflow = 'hidden';
            } else {
                // Close menu
                mobileMenu.classList.add('-translate-x-full');
                overlay.style.display = 'none';
                document.body.style.overflow = 'auto';
            }
        }

        // Header remains fixed for consistent blog layout.
    </script>
</body>
</html>
