<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', config('company.name'))</title>

    <!-- Brand icons -->
    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('assets/brand/favicon-32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('assets/brand/favicon-16.png') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('assets/brand/apple-touch-icon.png') }}">

    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    @vite(['resources/css/app.css','resources/js/app.js'])
</head>
<body class="font-sans text-slate-900 antialiased bg-slate-950 @yield('body_class')">

<div class="min-h-screen flex flex-col">
    <!-- Top bar -->
    <div class="bg-slate-950/80 border-b border-white/10">
        <div class="max-w-6xl mx-auto px-4 py-2 flex flex-wrap items-center justify-between gap-2 text-xs text-white/70">
            <div class="flex items-center gap-4">
                <span class="inline-flex items-center gap-2">
                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92V21a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.86 19.86 0 0 1 1 4.18 2 2 0 0 1 3 2h4.09a2 2 0 0 1 2 1.72c.12.81.31 1.6.57 2.36a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.72-1.72a2 2 0 0 1 2.11-.45c.76.26 1.55.45 2.36.57A2 2 0 0 1 22 16.92z"/></svg>
                    <a class="hover:text-white" href="tel:{{ config('company.phone') }}">{{ config('company.phone') }}</a>
                </span>
                <span class="inline-flex items-center gap-2">
                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0Z"/><path d="M12 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/></svg>
                    <span>{{ config('company.address') }}</span>
                </span>
            </div>
            <div class="flex items-center gap-3">
                <a class="hover:text-white" href="mailto:{{ config('company.email') }}">{{ config('company.email') }}</a>
                <span class="text-white/20">|</span>
                @auth
                    <a class="hover:text-white" href="{{ route('dashboard') }}">Dashboard</a>
                @else
                    <a class="hover:text-white" href="{{ route('login') }}">Login</a>
                @endauth
            </div>
        </div>
    </div>

    <!-- Nav -->
    <header x-data="{ mobileMenuOpen: false }" class="sticky top-0 z-30 bg-slate-950/70 backdrop-blur border-b border-white/10">
        <div class="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
            <a href="{{ route('home') }}" class="flex items-center gap-3">
                <img src="{{ asset('assets/brand/logo.png') }}" alt="{{ config('company.name') }}" width="40" height="40" loading="eager" decoding="async" class="h-10 w-10 rounded-full ring-2 ring-white/15 bg-white object-contain p-1" />
                <div class="leading-tight">
                    <div class="text-white font-semibold tracking-wide">{{ config('company.name') }}</div>
                    <div class="text-white/60 text-xs">{{ config('company.tagline') }}</div>
                </div>
            </a>

            <nav class="hidden md:flex items-center gap-6 text-sm">
                <a href="{{ route('home') }}" class="text-white/80 hover:text-white {{ request()->routeIs('home') ? 'text-white' : '' }}">Home</a>
                <a href="{{ route('about') }}" class="text-white/80 hover:text-white {{ request()->routeIs('about') ? 'text-white' : '' }}">About</a>
                <a href="{{ route('services') }}" class="text-white/80 hover:text-white {{ request()->routeIs('services') ? 'text-white' : '' }}">Services</a>
                <a href="{{ route('visa.requirements') }}" class="text-white/80 hover:text-white {{ request()->routeIs('visa.requirements') ? 'text-white' : '' }}">Visa Requirements</a>
                <a href="{{ route('contact') }}" class="text-white/80 hover:text-white {{ request()->routeIs('contact') ? 'text-white' : '' }}">Contact</a>
            </nav>

            <div class="flex items-center gap-2">
                <a href="{{ route('contact') }}" class="hidden sm:inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold bg-emerald-500/90 hover:bg-emerald-500 text-white shadow">Get Support</a>
                <button type="button"
                        class="md:hidden inline-flex h-10 w-10 items-center justify-center rounded-xl bg-white/10 text-white ring-1 ring-white/15 hover:bg-white/15"
                        @click="mobileMenuOpen = ! mobileMenuOpen"
                        :aria-expanded="mobileMenuOpen.toString()"
                        aria-controls="mobile-navigation"
                        aria-label="Toggle navigation">
                    <svg x-show="!mobileMenuOpen" x-cloak class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
                    <svg x-show="mobileMenuOpen" x-cloak class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg>
                </button>
            </div>
        </div>

        <nav id="mobile-navigation" x-show="mobileMenuOpen" x-cloak @click.outside="mobileMenuOpen = false" class="md:hidden border-t border-white/10 bg-slate-950/95">
            <div class="max-w-6xl mx-auto px-4 py-3 grid gap-2 text-sm">
                <a href="{{ route('home') }}" class="mobile-public-link {{ request()->routeIs('home') ? 'mobile-public-link-active' : '' }}">Home</a>
                <a href="{{ route('about') }}" class="mobile-public-link {{ request()->routeIs('about') ? 'mobile-public-link-active' : '' }}">About</a>
                <a href="{{ route('services') }}" class="mobile-public-link {{ request()->routeIs('services') ? 'mobile-public-link-active' : '' }}">Services</a>
                <a href="{{ route('visa.requirements') }}" class="mobile-public-link {{ request()->routeIs('visa.requirements') ? 'mobile-public-link-active' : '' }}">Visa Requirements</a>
                <a href="{{ route('contact') }}" class="mobile-public-link {{ request()->routeIs('contact') ? 'mobile-public-link-active' : '' }}">Contact</a>
                <a href="{{ route('contact') }}" class="mt-1 inline-flex items-center justify-center rounded-xl px-4 py-2.5 font-semibold bg-emerald-500/90 text-white shadow">Get Support</a>
            </div>
        </nav>
    </header>

    <main class="flex-1">
        @yield('content')
    </main>

    <footer class="border-t border-white/10 bg-slate-950">
        <div class="max-w-6xl mx-auto px-4 py-10 grid md:grid-cols-3 gap-8 text-sm text-white/70">
            <div>
                <div class="text-white font-semibold">{{ config('company.name') }}</div>
                <div class="mt-2">{{ config('company.tagline') }}</div>
                <div class="mt-4 text-xs text-white/50">© {{ date('Y') }} {{ config('company.name') }}. All rights reserved.</div>
            </div>
            <div>
                <div class="text-white font-semibold">Quick links</div>
                <div class="mt-2 space-y-2">
                    <a class="block hover:text-white" href="{{ route('about') }}">About</a>
                    <a class="block hover:text-white" href="{{ route('services') }}">Services</a>
                    <a class="block hover:text-white" href="{{ route('contact') }}">Contact</a>
                </div>
            </div>
            <div>
                <div class="text-white font-semibold">Contact</div>
                <div class="mt-2 space-y-2">
                    <div><span class="text-white/50">Phone:</span> <a class="hover:text-white" href="tel:{{ config('company.phone') }}">{{ config('company.phone') }}</a></div>
                    <div><span class="text-white/50">WhatsApp:</span> <a class="hover:text-white" href="https://wa.me/{{ preg_replace('/\D+/', '', config('company.whatsapp')) }}" target="_blank">{{ config('company.whatsapp') }}</a></div>
                    <div><span class="text-white/50">Email:</span> <a class="hover:text-white" href="mailto:{{ config('company.email') }}">{{ config('company.email') }}</a></div>
                    <div><span class="text-white/50">Address:</span> {{ config('company.address') }}</div>
                </div>
            </div>
        </div>
    </footer>
</div>
</body>
</html>
