@php
    $navItems = [
        ['route' => 'admin.dashboard', 'active' => 'admin.dashboard', 'label' => 'Dashboard', 'icon' => 'M3 12l9-9 9 9M5 10v10h14V10'],
        ['route' => 'admin.enquiries.index', 'active' => 'admin.enquiries.*', 'label' => 'Enquiries', 'icon' => 'M4 4h16v12H5.2L4 17.2z'],
        ['route' => 'admin.testimonials.index', 'active' => 'admin.testimonials.*', 'label' => 'Testimonials', 'icon' => 'M8 15h8M8 11h8M21 5H3v14l4-4h14z'],
        ['route' => 'admin.services.index', 'active' => 'admin.services.*', 'label' => 'Services', 'icon' => 'M4 5h16M4 12h16M4 19h16'],
        ['route' => 'admin.team.index', 'active' => 'admin.team.*', 'label' => 'Team', 'icon' => 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM23 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.7'],
    ];
    $unread = \App\Models\Enquiry::query()->where('is_read', false)->count();
@endphp
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('page_title', 'Admin') — {{ config('site.name') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="min-h-screen bg-slate-100 font-sans text-ink">
<div class="flex min-h-screen">
    {{-- Sidebar --}}
    <aside data-admin-sidebar class="fixed inset-y-0 left-0 z-40 hidden w-64 -translate-x-full flex-col bg-ink text-slate-300 transition-transform lg:flex lg:translate-x-0">
        <div class="flex h-16 items-center gap-2 border-b border-white/10 px-6">
            <span class="text-lg font-bold tracking-[0.14em] text-white">SHAR<span class="text-brand-400">AUSSIE</span></span>
        </div>
        <nav class="flex-1 space-y-1 overflow-y-auto p-4">
            @foreach ($navItems as $item)
                @php $isActive = request()->routeIs($item['active']); @endphp
                <a href="{{ route($item['route']) }}"
                   class="flex items-center justify-between gap-3 rounded-xl px-4 py-3 text-sm font-medium transition-colors {{ $isActive ? 'bg-brand-600 text-white' : 'text-slate-400 hover:bg-white/5 hover:text-white' }}">
                    <span class="flex items-center gap-3">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="{{ $item['icon'] }}"/></svg>
                        {{ $item['label'] }}
                    </span>
                    @if ($item['label'] === 'Enquiries' && $unread > 0)
                        <span class="grid h-5 min-w-5 place-items-center rounded-full bg-white px-1.5 text-xs font-bold text-brand-700">{{ $unread }}</span>
                    @endif
                </a>
            @endforeach
        </nav>
        <div class="border-t border-white/10 p-4">
            <a href="{{ route('home') }}" target="_blank" class="flex items-center gap-3 rounded-xl px-4 py-2.5 text-sm text-slate-400 hover:text-white">
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/></svg>
                View website
            </a>
        </div>
    </aside>

    {{-- Sidebar backdrop (mobile) --}}
    <div data-admin-backdrop class="fixed inset-0 z-30 hidden bg-ink/50 lg:hidden"></div>

    {{-- Main --}}
    <div class="flex min-h-screen flex-1 flex-col lg:pl-64">
        <header class="sticky top-0 z-20 flex h-16 items-center justify-between gap-4 border-b border-slate-200 bg-white/90 px-5 backdrop-blur sm:px-8">
            <div class="flex items-center gap-3">
                <button type="button" data-admin-toggle class="grid h-10 w-10 place-items-center rounded-lg border border-slate-200 lg:hidden" aria-label="Toggle menu">
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
                </button>
                <h1 class="text-lg font-bold text-ink">@yield('page_title', 'Dashboard')</h1>
            </div>
            <div class="flex items-center gap-3">
                <span class="hidden text-sm text-slate-500 sm:block">{{ auth()->user()?->name }}</span>
                <span class="grid h-9 w-9 place-items-center rounded-full bg-brand-100 text-sm font-bold text-brand-700">{{ strtoupper(substr(auth()->user()?->name ?? 'A', 0, 1)) }}</span>
                <form action="{{ route('admin.logout') }}" method="POST">
                    @csrf
                    <button type="submit" class="rounded-full border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600 transition-colors hover:border-brand-300 hover:text-brand-700">Logout</button>
                </form>
            </div>
        </header>

        <main class="flex-1 p-5 sm:p-8">
            @if (session('status'))
                <div class="mb-6 flex items-start gap-3 rounded-2xl border border-emerald-100 bg-emerald-50 p-4 text-sm text-emerald-800">
                    <svg class="mt-0.5 h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5"/></svg>
                    <span>{{ session('status') }}</span>
                </div>
            @endif

            @yield('content')
        </main>
    </div>
</div>
@stack('scripts')
</body>
</html>
