@php
    $footerNavigation = [
        [
            'title' => 'Navigate',
            'links' => [
                ['label' => 'Home', 'href' => route('home')],
                ['label' => 'About', 'href' => route('about')],
                ['label' => 'Categories', 'href' => route('home') . '#featured-categories'],
                ['label' => 'Products', 'href' => route('products')],
            ],
        ],
        [
            'title' => 'Product Focus',
            'links' => [
                ['label' => 'Skincare', 'href' => route('products') . '?category=skincare'],
                ['label' => 'Hybrid Beauty', 'href' => route('products') . '?category=personal-care'],
                ['label' => 'Sun Care', 'href' => route('products') . '?category=haircare'],
            ],
        ],
        [
            'title' => 'Approach',
            'links' => [
                ['label' => 'Shelf-ready systems', 'href' => route('about')],
                ['label' => 'Product range', 'href' => route('products')],
                ['label' => 'Process', 'href' => route('home')],
            ],
        ],
    ];
@endphp

<footer class="bg-[#1f3443] text-[#f8f3ee]">
    <div class="mx-auto max-w-[1560px] px-5 md:px-10 lg:px-16">
        <div class="grid gap-12 border-t border-white/10 py-14 md:py-16 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1.2fr)] lg:gap-20">
            <div class="max-w-[30rem]">
                <a href="{{ route('home') }}" class="inline-flex items-center gap-3 text-[#f8f3ee]">
                    <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.2rem] font-semibold tracking-[-0.04em]">Auravista</span>
                </a>

                <p class="mt-5 max-w-[27rem] text-[0.97rem] leading-8 text-white/68">
                    Private-label cosmetics shaped into tighter product systems across formulation,
                    packaging direction, and launch presentation.
                </p>

                <div class="mt-7 flex flex-wrap gap-3">
                    <a
                        href="{{ route('products') }}"
                        class="inline-flex min-h-11 items-center justify-center rounded-full bg-white px-5 text-[0.84rem] font-semibold text-[#1f3443] transition duration-200 hover:-translate-y-0.5 hover:bg-[#f5ede3]"
                    >
                        View Product Range
                    </a>
                    <a
                        href="{{ route('about') }}"
                        class="inline-flex min-h-11 items-center justify-center rounded-full border border-white/16 px-5 text-[0.84rem] font-semibold text-white transition duration-200 hover:-translate-y-0.5 hover:border-white/30 hover:bg-white/5"
                    >
                        About Auravista
                    </a>
                </div>
            </div>

            <div class="grid gap-8 sm:grid-cols-3">
                @foreach ($footerNavigation as $group)
                    <div>
                        <h2 class="font-['DM_Sans'] text-[1rem] font-medium tracking-[-0.03em] text-white">{{ $group['title'] }}</h2>
                        <ul class="mt-4 space-y-3">
                            @foreach ($group['links'] as $link)
                                <li>
                                    <a
                                        href="{{ $link['href'] }}"
                                        class="text-[0.88rem] leading-6 text-white/62 transition duration-200 hover:text-white"
                                    >
                                        {{ $link['label'] }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="flex flex-col gap-3 border-t border-white/10 py-5 text-[0.78rem] text-white/48 sm:flex-row sm:items-center sm:justify-between">
            <p>Built for private-label skincare, hybrid beauty, and shelf-ready launches.</p>
            <p>&copy; {{ now()->year }} Auravista. All rights reserved.</p>
        </div>
    </div>
</footer>