@php
    use App\Models\Setting;

    $whatsapp = Setting::config('social.whatsapp_number');
    $facebook = Setting::config('social.facebook');
    // No Instagram URL has been supplied yet — the icon still renders (per
    // request) with a "#" placeholder so it's visually in place; swap the
    // href the moment a profile URL exists, either here or via the admin
    // Settings screen (Setting::config('social.instagram') already wins
    // over this fallback the instant it's set).
    // TODO: add Instagram profile URL — replace the '#' fallback below.
    $instagramHref = Setting::config('social.instagram') ?: '#';
    // Mirrors Instagram above — always show the icon so the row never looks
    // incomplete, and swap in the real chat link the moment a number is set
    // (here or via the admin Settings screen). Previously this hid the icon
    // entirely whenever no number was configured, which is why WhatsApp was
    // "missing" next to Facebook and Instagram.
    $waHref = $whatsapp ? 'https://wa.me/'.preg_replace('/[^0-9]/', '', $whatsapp) : '#';
@endphp

<footer class="no-print relative overflow-hidden bg-gradient-luxury text-cream/70">
    {{-- Newsletter band --}}
    <div class="relative border-b border-white/10">
        <div class="pointer-events-none absolute inset-0 opacity-40" style="background: radial-gradient(circle at 20% 20%, rgb(201 166 97 / 0.15), transparent 45%), radial-gradient(circle at 80% 60%, rgb(201 166 97 / 0.1), transparent 40%);"></div>
        <div class="relative mx-auto max-w-7xl px-6 py-12 text-center" data-reveal-self>
            <p class="font-display text-2xl text-ivory">Stay in the Loop</p>
            <p class="mx-auto mt-2 max-w-md text-sm text-cream/60">
                Be first to know about new arrivals, flash sales, and exclusive drops.
            </p>

            <form method="POST" action="{{ route('newsletter.subscribe') }}" class="mx-auto mt-6 flex max-w-md gap-2">
                @csrf
                <input
                    type="email" name="email" required placeholder="Your email address" value="{{ old('email') }}"
                    class="focus-premium w-full rounded-xl border border-white/15 bg-white/5 px-4 py-2.5 text-sm text-ivory placeholder-cream/40"
                >
                <button type="submit" class="btn btn-accent btn-sm shrink-0">
                    Subscribe
                </button>
            </form>
            @error('email')
                <p class="mt-2 text-xs text-red-300">{{ $message }}</p>
            @enderror
            @if (session('subscribed'))
                <p class="mt-2 text-xs text-champagne-light">{{ session('subscribed') }}</p>
            @endif
        </div>
    </div>

    {{-- Link columns --}}
    <div class="relative mx-auto grid max-w-7xl grid-cols-2 gap-10 px-6 py-16 sm:grid-cols-4">
        <div class="col-span-2 sm:col-span-1">
            <p class="font-display text-xl text-ivory">{{ config('niyarasa.brand_name') }}</p>
            <p class="mt-3 text-sm text-cream/50">{{ config('niyarasa.brand_tagline') }}</p>
            <div class="mt-4 flex items-center gap-2.5">
                @if ($facebook)
                    <x-icon-button
                        :href="$facebook" target="_blank" rel="noopener noreferrer" label="Facebook"
                        name="brand-facebook" variant="chip" icon-class="h-3.5 w-3.5"
                        class="icon-chip--facebook min-h-9! min-w-9!"
                    />
                @endif
                <x-icon-button
                    href="{{ $instagramHref }}" target="_blank" rel="noopener noreferrer" label="Instagram"
                    name="brand-instagram" variant="chip" icon-class="h-3.5 w-3.5" gradient
                    class="icon-chip--instagram min-h-9! min-w-9!"
                />
                <x-icon-button
                    href="{{ $waHref }}" target="_blank" rel="noopener noreferrer" label="Chat on WhatsApp"
                    name="brand-whatsapp" variant="chip" icon-class="h-3.5 w-3.5"
                    class="icon-chip--whatsapp min-h-9! min-w-9!"
                />
            </div>
        </div>

        <div>
            <p class="heading-accent text-xs font-semibold uppercase tracking-wider text-cream/40">Shop</p>
            <ul class="mt-4 space-y-2.5 text-sm">
                <li><x-frontend.nav-link route="shop.index" label="All Products" class="!text-cream/60 hover:!text-champagne-light" /></li>
                <li><x-frontend.nav-link route="categories.index" label="Categories" class="!text-cream/60 hover:!text-champagne-light" /></li>
                <li><x-frontend.nav-link route="shop.new-arrivals" label="New Arrivals" class="!text-cream/60 hover:!text-champagne-light" /></li>
                <li><x-frontend.nav-link route="shop.sale" label="Sale" class="!text-cream/60 hover:!text-champagne-light" /></li>
            </ul>
        </div>

        <div>
            <p class="heading-accent text-xs font-semibold uppercase tracking-wider text-cream/40">Customer Care</p>
            <ul class="mt-4 space-y-2.5 text-sm">
                <li><x-frontend.nav-link route="pages.about" label="About Us" class="!text-cream/60 hover:!text-champagne-light" /></li>
                <li><x-frontend.nav-link route="pages.contact" label="Contact Us" class="!text-cream/60 hover:!text-champagne-light" /></li>
                <li><x-frontend.nav-link route="account.orders" label="Track Order" class="!text-cream/60 hover:!text-champagne-light" /></li>
            </ul>
        </div>

        <div>
            <p class="heading-accent text-xs font-semibold uppercase tracking-wider text-cream/40">Get in Touch</p>
            <ul class="mt-4 space-y-2.5 text-sm text-cream/60">
                @if (Setting::config('contact.email'))
                    <li class="flex items-center gap-2"><x-icon name="mail" class="h-3.5 w-3.5 shrink-0 text-champagne-light/70" />{{ Setting::config('contact.email') }}</li>
                @endif
                @if (Setting::config('contact.phone'))
                    <li class="flex items-center gap-2"><x-icon name="phone" class="h-3.5 w-3.5 shrink-0 text-champagne-light/70" />{{ Setting::config('contact.phone') }}</li>
                @endif
                <li class="flex items-center gap-2"><x-icon name="map-pin" class="h-3.5 w-3.5 shrink-0 text-champagne-light/70" />Karachi, Pakistan</li>
            </ul>

            <div class="mt-6">
                <x-frontend.payment-badges />
            </div>
        </div>
    </div>

    {{-- Bottom bar --}}
    <div class="border-t border-white/10">
        <div class="mx-auto flex max-w-7xl flex-col items-center justify-between gap-3 px-6 py-5 text-xs text-cream/40 sm:flex-row">
            <p>&copy; {{ now()->year }} {{ config('niyarasa.brand_name') }}. All rights reserved.</p>
        </div>
    </div>
</footer>
