<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <title>@yield('title', 'ThrillWiki')</title>

    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <!-- Prevent flash of wrong theme -->
    <script>
      let theme = localStorage.getItem("theme");
      if (!theme) {
        theme = window.matchMedia("(prefers-color-scheme: dark)").matches
          ? "dark"
          : "light";
        localStorage.setItem("theme", theme);
      }
      if (theme === "dark") {
        document.documentElement.classList.add("dark");
      }
    </script>

    <!-- HTMX -->
    <script src="https://unpkg.com/htmx.org@1.9.6"></script>

    <!-- Scripts and Styles (loaded via Vite) -->
    @vite(['resources/js/app.js', 'resources/css/app.css'])

    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />

    <style>
      .dropdown-menu {
        position: absolute;
        right: 0;
        margin-top: 0.5rem;
        width: 12rem;
        border-radius: 0.375rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
          0 4px 6px -2px rgba(0, 0, 0, 0.05);
        z-index: 50;
        overflow: hidden;
      }
      .htmx-indicator {
        display: none;
      }
      .htmx-request .htmx-indicator {
        display: block;
      }
      .htmx-request.htmx-indicator {
        display: block;
      }
    </style>

    @stack('styles')
  </head>
  <body
    class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-blue-950 dark:to-purple-950 dark:text-white"
  >
    <!-- Header -->
    <header class="sticky top-0 z-40 bg-gray-900 shadow-lg">
      <nav class="container mx-auto">
        <div class="flex items-center justify-between h-20 px-6">
          <!-- Logo -->
          <div class="flex items-center">
            <a href="{{ route('home') }}" class="text-2xl font-bold text-white transition-transform hover:scale-105">
              <span class="text-gradient">ThrillWiki</span>
            </a>
          </div>

          <!-- Navigation Links (Always Visible) -->
          <div class="hidden lg:flex items-center space-x-8">
            <a href="{{ route('parks.index') }}" class="nav-link">
              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2L2 9L12 16L22 9L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 9V20L12 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M22 9V20L12 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <span>Parks</span>
            </a>
            <a href="{{ route('rides.index') }}" class="nav-link">
              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 12H18L15 21L9 3L6 12H2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <span>Rides</span>
            </a>
          </div>

          <!-- Search Bar -->
          <div class="flex-1 max-w-xl mx-8 hidden lg:block">
            <form action="{{ route('search') }}" method="get" class="w-full">
              <div class="relative">
                <input
                  type="text"
                  name="q"
                  placeholder="Search parks and rides..."
                  class="w-full px-4 py-2 text-gray-200 bg-gray-800/50 border border-gray-700/50 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary placeholder-gray-400"
                />
                <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
                  <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
                    <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </button>
              </div>
            </form>
          </div>

          <!-- Right Side Menu -->
          <div class="flex items-center space-x-6">
            <!-- Theme Toggle -->
            <livewire:theme-toggle-component />

            <!-- User Menu -->
            @auth
                @if(auth()->user()->can('access-moderation'))
                <a href="{{ route('moderation.dashboard') }}" class="flex items-center gap-2 text-gray-300 hover:text-white">
                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <span>Moderation</span>
                </a>
                @endif
                <livewire:user-menu-component />
            @else
                <livewire:auth-menu-component />
            @endauth

            <!-- Mobile Menu -->
            <livewire:mobile-menu-component />
          </div>
        </div>
      </nav>
    </header>

    <!-- Flash Messages -->
    @if (session('status'))
        <div class="fixed top-0 right-0 z-50 p-4 space-y-4">
            <div class="alert alert-success">
                {{ session('status') }}
            </div>
        </div>
    @endif

    <!-- Main Content -->
    <main class="container flex-grow px-6 py-8 mx-auto">
        {{ $slot }}
    </main>

    <!-- Footer -->
    <footer
        class="mt-auto border-t bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
    >
        <div class="container px-6 py-6 mx-auto">
            <div class="flex items-center justify-between">
                <div class="text-gray-600 dark:text-gray-400">
                    <p>&copy; {{ date('Y') }} ThrillWiki. All rights reserved.</p>
                </div>
                <div class="space-x-4">
                    <a
                        href="{{ route('terms') }}"
                        class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
                    >Terms</a>
                    <a
                        href="{{ route('privacy') }}"
                        class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
                    >Privacy</a>
                </div>
            </div>
        </div>
    </footer>

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