@php
    $productGroups = [
        [
            'title' => 'Skincare',
            'items' => ['Barrier cleansers', 'Treatment serums', 'Night masks'],
            'image' => 'images/category/skin-care.webp',
            'href' => route('products') . '?category=skincare',
        ],
        [
            'title' => 'Hybrid Beauty',
            'items' => ['Tinted SPF', 'Lip oils', 'Glow formats'],
            'image' => 'images/category/personal-care.webp',
            'href' => route('products') . '?category=personal-care',
        ],
    ];
@endphp

<header class="fixed inset-x-0 top-0 z-50 px-5 pt-5 md:px-10 lg:px-16">
    <div class="mx-auto flex max-w-[1400px] items-center justify-between gap-4">
        <a href="{{ route('home') }}" class="relative z-20 flex shrink-0 items-center gap-3 whitespace-nowrap text-[#1f3443]">
            <span class="inline-block h-3.5 w-3.5 rounded-full rounded-bl-none bg-gradient-to-br from-[#bb7a58] to-[#8c9875] -rotate-45"></span>
            <span class="font-['DM_Sans'] text-[1.15rem] font-semibold tracking-[-0.04em]">Auravista</span>
        </a>

        <div class="hidden flex-1 justify-center lg:flex">
            <nav aria-label="Primary" class="flex items-center gap-1 rounded-full border border-black/8 bg-white/60 p-1.5 text-[#1f3443] backdrop-blur-md">
                <a
                    href="{{ route('home') }}"
                    class="{{ request()->routeIs('home') ? 'bg-[#1f3443] text-white' : 'text-[#1f3443]/72 hover:bg-black/5 hover:text-[#1f3443]' }} whitespace-nowrap rounded-full px-5 py-2.5 text-[0.84rem] font-medium transition duration-200"
                >
                    Home
                </a>

                <div class="group relative">
                    <button
                        type="button"
                        class="flex items-center gap-2 whitespace-nowrap rounded-full px-5 py-2.5 text-[0.84rem] font-medium text-[#1f3443]/72 transition duration-200 hover:bg-black/5 hover:text-[#1f3443]"
                    >
                        <span>Products</span>
                        <svg class="h-3.5 w-3.5 transition duration-200 group-hover:rotate-180" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                            <path d="M4 6.5L8 10L12 6.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>

                    <div class="pointer-events-none absolute left-1/2 top-full z-30 mt-1 w-[min(820px,calc(100vw-6rem))] -translate-x-1/2 pt-4 opacity-0 transition duration-200 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100">
                        <div class="absolute inset-x-0 top-0 h-5"></div>
                        <div class="overflow-hidden rounded-[20px] border border-[#d8cbbb] bg-[#f5ede3] p-4 shadow-[0_28px_70px_rgba(16,24,32,0.18)]">
                            <div class="grid gap-4 md:grid-cols-[1.15fr_0.9fr_0.9fr]">
                                <a href="{{ route('products') }}" class="block rounded-[16px] bg-[#203646] p-7 transition duration-200 hover:bg-[#284254]">
                                    <p class="font-['DM_Sans'] text-[1.4rem] font-medium leading-[1.25] tracking-[-0.045em] text-white">
                                        Premium categories shaped for retail-ready launches.
                                    </p>
                                    <p class="mt-4 max-w-xs text-sm leading-6 text-white/72">
                                        A tighter product system across skincare, hybrid beauty, and packaging-led presentation.
                                    </p>
                                </a>

                                @foreach ($productGroups as $group)
                                    <div class="flex h-full flex-col rounded-[16px] border border-[#ded2c4] bg-[#fbf7f1] p-5 transition duration-200 hover:bg-[#f7f0e6]">
                                        <a href="{{ $group['href'] }}" class="grid grid-cols-[3.5rem_minmax(0,1fr)] gap-x-3 gap-y-1.5">
                                            <img
                                                src="{{ asset($group['image']) }}"
                                                alt="{{ $group['title'] }} preview"
                                                class="row-span-2 aspect-square w-14 rounded-[0.9rem] border border-[#e4d8ca] object-cover"
                                            >
                                            <p class="self-end font-['DM_Sans'] text-[1.08rem] font-medium leading-[1.15] tracking-[-0.03em] text-[#1f3240]">{{ $group['title'] }}</p>
                                            <p class="self-start text-[0.8rem] leading-4 text-[#7c6d5f]">Range direction</p>
                                        </a>

                                        <ul class="mt-5 space-y-2 text-[0.88rem] text-[#5f5448]">
                                            @foreach ($group['items'] as $item)
                                                <li>
                                                    <a href="{{ $group['href'] }}" class="flex items-center gap-2.5 leading-5 transition duration-200 hover:text-[#1f3240]">
                                                        <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[#efe5d7] text-[#5d6e78]">
                                                            <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                                                <path d="M12 5v14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
                                                                <path d="M5 12h14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
                                                            </svg>
                                                        </span>
                                                        <span>{{ $item }}</span>
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <a
                    href="{{ route('about') }}"
                    class="{{ request()->routeIs('about') ? 'bg-[#1f3443] text-white' : 'text-[#1f3443]/72 hover:bg-black/5 hover:text-[#1f3443]' }} whitespace-nowrap rounded-full px-5 py-2.5 text-[0.84rem] font-medium transition duration-200"
                >
                    Story
                </a>
                <a href="{{ route('contact') }}" class="{{ request()->routeIs('contact') ? 'bg-[#1f3443] text-white' : 'text-[#1f3443]/72 hover:bg-black/5 hover:text-[#1f3443]' }} whitespace-nowrap rounded-full px-5 py-2.5 text-[0.84rem] font-medium transition duration-200">Contact</a>
            </nav>
        </div>

        <div class="relative z-20 flex shrink-0 items-center gap-3">
            <button
                type="button"
                data-quote-trigger
                aria-haspopup="dialog"
                aria-controls="quote-modal"
                class="hidden min-h-11 items-center whitespace-nowrap rounded-full bg-[#1f3443] px-6 text-sm font-medium text-white transition duration-200 hover:-translate-y-0.5 hover:bg-[#284254] lg:inline-flex"
            >
                Get a quote
            </button>

            <details class="group relative lg:hidden">
                <summary class="flex h-11 w-11 cursor-pointer list-none items-center justify-center rounded-full border border-black/8 bg-white/70 text-[#1f3443] backdrop-blur-md marker:hidden transition duration-200 hover:bg-white">
                    <span class="sr-only">Open navigation</span>
                    <div class="flex flex-col gap-1.5">
                        <span class="h-px w-4 bg-[#1f3443] transition duration-200 group-open:translate-y-[3.5px] group-open:rotate-45"></span>
                        <span class="h-px w-4 bg-[#1f3443] transition duration-200 group-open:opacity-0"></span>
                        <span class="h-px w-4 bg-[#1f3443] transition duration-200 group-open:-translate-y-[3.5px] group-open:-rotate-45"></span>
                    </div>
                </summary>

                <div class="absolute right-0 top-full mt-3 w-[min(22rem,calc(100vw-2.5rem))] rounded-[18px] border border-[#d8cbbb] bg-[#f5ede3] p-4 shadow-[0_24px_70px_rgba(16,24,32,0.16)]">
                    <div class="space-y-2">
                        <a href="{{ route('home') }}" class="block rounded-2xl bg-white px-4 py-3 text-sm font-medium text-[#173851]">Home</a>
                        <details class="group rounded-[16px] border border-[#ddd0c2] bg-[#fbf7f1]">
                            <summary class="flex cursor-pointer list-none items-center justify-between px-4 py-3 text-sm font-medium text-[#1f3240] marker:hidden">
                                <span>Products</span>
                                <svg class="h-4 w-4 transition duration-200 group-open:rotate-180" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                                    <path d="M4 6.5L8 10L12 6.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </summary>
                            <div class="space-y-3 px-4 pb-4">
                                @foreach ($productGroups as $group)
                                    <div class="rounded-[14px] border border-[#e0d4c6] bg-[#f7f0e6] p-3">
                                        <a href="{{ $group['href'] }}" class="grid grid-cols-[2.75rem_minmax(0,1fr)] gap-x-3 gap-y-1">
                                            <img
                                                src="{{ asset($group['image']) }}"
                                                alt="{{ $group['title'] }} preview"
                                                class="row-span-2 h-11 w-11 rounded-2xl border border-[#e0d4c6] object-cover"
                                            >
                                            <p class="self-end font-['DM_Sans'] text-sm font-medium leading-5 text-[#1f3240]">{{ $group['title'] }}</p>
                                            <p class="self-start text-xs leading-4 text-[#7c6d5f]">Range direction</p>
                                        </a>
                                        <ul class="mt-2 space-y-1.5 text-[0.82rem] text-[#6a5d51]">
                                            @foreach ($group['items'] as $item)
                                                <li>
                                                    <a href="{{ $group['href'] }}" class="flex items-center gap-2">
                                                        <span class="h-1.5 w-1.5 rounded-full bg-[#8a7868]"></span>
                                                        <span>{{ $item }}</span>
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endforeach
                            </div>
                        </details>
                        <a href="{{ route('about') }}" class="block rounded-2xl px-4 py-3 text-sm font-medium text-[#334954] transition duration-200 hover:bg-[#ede3d6]">Story</a>
                        <a href="{{ route('contact') }}" class="block rounded-2xl px-4 py-3 text-sm font-medium text-[#334954] transition duration-200 hover:bg-[#ede3d6]">Contact</a>
                        <button type="button" data-quote-trigger aria-haspopup="dialog" aria-controls="quote-modal" class="mt-2 inline-flex min-h-11 w-full items-center justify-center rounded-full bg-white px-5 text-sm font-medium text-[#173851] transition duration-200 hover:bg-[#f5eee7]">Get a quote</button>
                    </div>
                </div>
            </details>
        </div>
    </div>
</header>