{{-- Newsletter band --}}
<section class="border-t border-cream-200 bg-cream-100">
    <div class="container-shop flex flex-col items-center gap-6 py-14 text-center lg:flex-row lg:justify-between lg:text-left">
        <div>
            <p class="eyebrow mb-2">Stay in the loop</p>
            <h2 class="section-title">Join the Divine Drops family</h2>
            <p class="mt-2 text-sm text-ink-500">Skincare tips, early access to launches and members-only offers. No spam, ever.</p>
        </div>
        <form class="flex w-full max-w-md" action="#" method="post" onsubmit="return false">
            <label for="newsletter-email" class="sr-only">Email address</label>
            <input id="newsletter-email" type="email" autocomplete="email" placeholder="Your email address" class="field-input flex-1 !border-r-0">
            <button type="submit" class="btn-primary shrink-0">Subscribe</button>
        </form>
    </div>
</section>

{{-- Main footer --}}
<footer class="bg-moss-800 text-moss-100">
    <div class="container-shop grid grid-cols-2 gap-10 py-14 md:grid-cols-4 lg:grid-cols-5">
        <div class="col-span-2 md:col-span-4 lg:col-span-2 lg:pr-12">
            <a href="{{ route('home') }}" class="inline-flex items-center" aria-label="Divine Drops — home">
                <img src="{{ asset('images/logo.png') }}" alt="Divine Drops" class="h-12 w-auto bg-white p-2 rounded-lg">
            </a>
            <p class="mt-4 max-w-sm text-sm leading-relaxed text-moss-100/80">
                Farm-fresh skincare and haircare, made with pure organic ingredients, tested for Indian skin and weather.
            </p>
            <div class="mt-6 flex gap-3">
                <a href="#" class="flex h-9 w-9 items-center justify-center rounded-full border border-moss-500 text-moss-100 transition-colors hover:bg-moss-700" aria-label="Instagram"><x-icon name="instagram" class="h-4 w-4" /></a>
                <a href="#" class="flex h-9 w-9 items-center justify-center rounded-full border border-moss-500 text-moss-100 transition-colors hover:bg-moss-700" aria-label="Facebook"><x-icon name="facebook" class="h-4 w-4" /></a>
                <a href="#" class="flex h-9 w-9 items-center justify-center rounded-full border border-moss-500 text-moss-100 transition-colors hover:bg-moss-700" aria-label="YouTube"><x-icon name="youtube" class="h-4 w-4" /></a>
            </div>
        </div>

        <nav aria-label="Shop links">
            <h3 class="mb-4 text-xs font-semibold tracking-[0.2em] text-white uppercase">Shop</h3>
            <ul class="space-y-2.5 text-sm text-moss-100/80">
                @foreach (config('shop.categories', []) as $category)
                    <li><a href="{{ route('shop', $category['slug'] ?? null) }}" class="transition-colors hover:text-white">{{ $category['name'] ?? '' }}</a></li>
                @endforeach
                <li><a href="{{ route('shop') }}" class="transition-colors hover:text-white">Shop All</a></li>
            </ul>
        </nav>

        <nav aria-label="Help links">
            <h3 class="mb-4 text-xs font-semibold tracking-[0.2em] text-white uppercase">Customer Care</h3>
            <ul class="space-y-2.5 text-sm text-moss-100/80">
                <li><a href="{{ route('order.track') }}" class="transition-colors hover:text-white font-semibold text-white">🚚 Track Your Order</a></li>
                <li><a href="{{ route('contact') }}" class="transition-colors hover:text-white">Contact Us</a></li>
                <li><a href="{{ route('contact') }}" class="transition-colors hover:text-white">Shipping & Returns</a></li>
                <li><a href="{{ route('contact') }}" class="transition-colors hover:text-white">FAQs & Assistance</a></li>
                <li><a href="{{ route('login') }}" class="transition-colors hover:text-white">My Customer Account</a></li>
            </ul>
        </nav>

        <nav aria-label="Company links">
            <h3 class="mb-4 text-xs font-semibold tracking-[0.2em] text-white uppercase">About Divine Drops</h3>
            <ul class="space-y-2.5 text-sm text-moss-100/80">
                <li><a href="{{ route('about') }}" class="transition-colors hover:text-white font-bold text-white">Our Story & Vision</a></li>
                <li><a href="{{ route('blog') }}" class="transition-colors hover:text-white font-bold text-white">Skincare Journal & Blog</a></li>
                <li><a href="{{ route('about') }}" class="transition-colors hover:text-white">Formulation Philosophy</a></li>
                <li><a href="{{ route('about') }}" class="transition-colors hover:text-white">Careers & Press</a></li>
            </ul>
        </nav>
    </div>

    <div class="border-t border-moss-700">
        <div class="container-shop flex flex-col items-center justify-between gap-4 py-6 text-xs text-moss-100/70 sm:flex-row">
            <p>&copy; {{ date('Y') }} Divine Drops. All rights reserved.</p>
            <div class="flex items-center gap-2" aria-label="Accepted payment methods">
                @foreach (['VISA', 'MASTERCARD', 'UPI', 'GPAY', 'COD'] as $method)
                    <span class="border border-moss-600 px-2 py-1 text-[10px] font-semibold tracking-wider text-moss-100/80">{{ $method }}</span>
                @endforeach
            </div>
        </div>
    </div>
</footer>