<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Home') · Fashion Grace</title>
    <meta name="description" content="Fashion Grace — beauty pageants, fashion shows, award shows and film making. Elegance. Style. Confidence.">
    <link rel="icon" href="{{ asset('logo.jpeg') }}">

    <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=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..600&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
    <link href="{{ asset('css/site.css') }}" rel="stylesheet">
    @stack('head')
</head>
<body>

    @php
        $navItems = [
            ['Home', route('home'), request()->routeIs('home')],
            ['About', route('about'), request()->routeIs('about')],
            ['Services', route('services'), request()->routeIs('services')],
            ['Contact', route('contact.create'), request()->routeIs('contact.*')],
        ];
    @endphp

    {{-- Top bar --}}
    <div class="topbar" id="topbar">
        <div class="container">
            <span>Talent &amp; Modeling Agency · New Delhi</span>
            <span>
                <a href="mailto:fashiongrace111@gmail.com" class="me-3"><i class="bi bi-envelope me-1"></i>fashiongrace111@gmail.com</a>
                <a href="tel:+918910747245"><i class="bi bi-telephone me-1"></i>+91 8910747245</a>
            </span>
        </div>
    </div>

    {{-- Navbar --}}
    <nav class="fg-nav over-hero" id="fgNav">
        <div class="container">
            <div class="bar">
                <a href="{{ route('home') }}" class="brand">
                    <img src="{{ asset('logo.jpeg') }}" alt="Fashion Grace" onerror="this.style.display='none'">
                    <span>Fashion Grace</span>
                </a>

                <ul class="menu desktop">
                    @foreach($navItems as [$label, $url, $active])
                        <li><a class="nav-link {{ $active ? 'active' : '' }}" href="{{ $url }}">{{ $label }}</a></li>
                    @endforeach
                </ul>

                <div class="nav-cta desktop">
                    <a class="btn btn-gold" href="{{ route('registration.create') }}">Register</a>
                </div>

                <button class="hamburger" id="navToggle" aria-label="Open menu" aria-expanded="false">
                    <span></span><span></span><span></span>
                </button>
            </div>
        </div>
    </nav>

    {{-- Mobile drawer --}}
    <div class="nav-backdrop" id="navBackdrop"></div>
    <aside class="nav-drawer" id="navDrawer" aria-hidden="true">
        <div class="d-brand">Fashion Grace</div>
        <div class="d-sub">Talent &amp; Modeling Agency</div>
        <nav>
            @foreach($navItems as [$label, $url, $active])
                <a class="d-link {{ $active ? 'active' : '' }}" href="{{ $url }}">{{ $label }}</a>
            @endforeach
        </nav>
        <div class="d-cta">
            <a class="btn btn-gold w-100 text-center" href="{{ route('registration.create') }}">Register Now</a>
            <div class="d-contact">
                <a href="mailto:fashiongrace111@gmail.com"><i class="bi bi-envelope text-gold me-2"></i>fashiongrace111@gmail.com</a>
                <a href="tel:+918910747245"><i class="bi bi-telephone text-gold me-2"></i>+91 8910747245</a>
                <span><i class="bi bi-geo-alt text-gold me-2"></i>New Delhi, India</span>
            </div>
            <div class="d-social">
                <a href="#"><i class="bi bi-instagram"></i></a>
                <a href="#"><i class="bi bi-facebook"></i></a>
                <a href="#"><i class="bi bi-youtube"></i></a>
            </div>
        </div>
    </aside>

    @yield('content')

    {{-- Footer --}}
    <footer class="fg-footer">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-4">
                    <div class="brand mb-3">Fashion Grace</div>
                    <p class="mb-4" style="max-width:330px">Make it Fashion. Make it Grace. Shaping new talent across pageantry, runway, award shows and film.</p>
                    <div class="d-flex gap-2">
                        <a href="#" class="soc"><i class="bi bi-instagram"></i></a>
                        <a href="#" class="soc"><i class="bi bi-facebook"></i></a>
                        <a href="#" class="soc"><i class="bi bi-youtube"></i></a>
                    </div>
                </div>
                <div class="col-6 col-lg-2">
                    <h6>Explore</h6>
                    <ul class="list-unstyled d-grid gap-2">
                        <li><a href="{{ route('home') }}">Home</a></li>
                        <li><a href="{{ route('about') }}">About</a></li>
                        <li><a href="{{ route('services') }}">Services</a></li>
                        <li><a href="{{ route('registration.create') }}">Registration</a></li>
                        <li><a href="{{ route('contact.create') }}">Contact</a></li>
                    </ul>
                </div>
                <div class="col-6 col-lg-3">
                    <h6>What We Do</h6>
                    <ul class="list-unstyled d-grid gap-2">
                        <li>Beauty Pageant</li>
                        <li>Fashion Show</li>
                        <li>Award Show</li>
                        <li>Film Making</li>
                    </ul>
                </div>
                <div class="col-lg-3">
                    <h6>Visit · Contact</h6>
                    <ul class="list-unstyled d-grid gap-2">
                        <li><i class="bi bi-geo-alt text-gold me-2"></i>New Delhi, India</li>
                        <li><a href="mailto:fashiongrace111@gmail.com"><i class="bi bi-envelope text-gold me-2"></i>fashiongrace111@gmail.com</a></li>
                        <li><a href="tel:+918910747245"><i class="bi bi-telephone text-gold me-2"></i>+91 8910747245</a></li>
                    </ul>
                </div>
            </div>
            <div class="copyright d-flex flex-column flex-md-row justify-content-between gap-2">
                <span>© {{ date('Y') }} Fashion Grace. All rights reserved.</span>
                <span>Beauty Pageant · Fashion Show · Award Show · Film Making</span>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
    <script src="{{ asset('js/site.js') }}"></script>
    @stack('scripts')
</body>
</html>
