Store Footer

@props([
    'brand'           => 'Lumière',
    'brandBlurb'      => 'Thoughtfully designed pieces for everyday living.',
    'newsletterHeading' => 'Get 10% off your first order',
    'newsletterSubcopy' => 'Subscribe to receive style tips, new arrivals, and exclusive offers.',
    'columns' => [
        [
            'heading' => 'Shop',
            'links'   => [
                ['label' => 'Women',     'href' => '#'],
                ['label' => 'Men',       'href' => '#'],
                ['label' => 'Kids',      'href' => '#'],
                ['label' => 'Home',      'href' => '#'],
                ['label' => 'Sale',      'href' => '#'],
            ],
        ],
        [
            'heading' => 'Customer Service',
            'links'   => [
                ['label' => 'Help Centre',       'href' => '#'],
                ['label' => 'Returns & Exchanges','href' => '#'],
                ['label' => 'Order Tracking',    'href' => '#'],
                ['label' => 'Size Guide',        'href' => '#'],
            ],
        ],
        [
            'heading' => 'Company',
            'links'   => [
                ['label' => 'About Us',     'href' => '#'],
                ['label' => 'Careers',      'href' => '#'],
                ['label' => 'Press',        'href' => '#'],
                ['label' => 'Sustainability','href' => '#'],
            ],
        ],
        [
            'heading' => 'Legal',
            'links'   => [
                ['label' => 'Privacy Policy',  'href' => '#'],
                ['label' => 'Terms of Service','href' => '#'],
                ['label' => 'Cookie Policy',   'href' => '#'],
                ['label' => 'Accessibility',   'href' => '#'],
            ],
        ],
    ],
    'socials' => [
        ['label' => 'Instagram', 'href' => '#'],
        ['label' => 'Pinterest',  'href' => '#'],
        ['label' => 'X',          'href' => '#'],
    ],
    'paymentMethods' => ['Visa', 'Mastercard', 'Amex', 'PayPal', 'Apple Pay'],
    'copyright'      => '© 2025 Lumière. All rights reserved.',
])

{{--
    store-footer — Commerce mega-footer with newsletter + payment badges.
    Top: newsletter row.
    Middle: brand column + 4 link-grid columns.
    Bottom bar: copyright, locale select, payment-method chips.
    Composes <x-ui.input>, <x-ui.button> and <x-ui.social-links>.
    Semantic tokens only, logical spacing, RTL-safe, WCAG AA.
--}}
@php
    // Map the block's `socials` contract onto social-links: `platform` (or the older
    // `icon` key / a label) picks the mark; a raw `path` becomes a custom `icon`.
    $socialLinks = array_map(fn (array $s) => [
        'platform' => $s['platform'] ?? (isset($s['icon']) && ! str_contains($s['icon'], '<') ? $s['icon'] : strtolower(str_replace('.', '', $s['label'] ?? 'x'))),
        'label' => $s['label'] ?? null,
        'href' => $s['href'] ?? '#',
        'icon' => isset($s['path']) ? '<path d="'.$s['path'].'"/>' : (isset($s['icon']) && str_contains($s['icon'], '<') ? $s['icon'] : null),
    ], $socials);
@endphp

<x-ui.section space="none" {{ $attributes }}>
    <footer>
        {{-- ── Newsletter band ── --}}
        <div class="border-b border-border bg-card">
            <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
                <div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
                    <div class="max-w-sm">
                        <h2 class="text-xl font-semibold text-foreground">{{ __($newsletterHeading) }}</h2>
                        <p class="mt-2 text-sm text-muted-foreground">{{ __($newsletterSubcopy) }}</p>
                    </div>
                    <form
                        class="flex w-full max-w-md flex-col gap-2 sm:flex-row"
                        method="POST"
                        action="#"
                        novalidate
                    >
                        @csrf
                        <label for="footer-email" class="sr-only">{{ __('Email address') }}</label>
                        <x-ui.input
                            id="footer-email"
                            type="email"
                            name="email"
                            :placeholder="__('your@email.com')"
                            autocomplete="email"
                            required
                            class="min-w-0 flex-1"
                        />
                        <x-ui.button type="submit">
                            {{ __('Subscribe') }}
                        </x-ui.button>
                    </form>
                </div>
            </div>
        </div>

        {{-- ── Link grid ── --}}
        <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-5">

                {{-- Brand column --}}
                <div class="col-span-2 sm:col-span-3 lg:col-span-1">
                    <a href="#" class="text-xl font-bold tracking-tight text-foreground">
                        {{ $brand }}
                    </a>
                    <p class="mt-4 max-w-xs text-sm leading-relaxed text-muted-foreground">
                        {{ __($brandBlurb) }}
                    </p>

                    {{-- Social icon buttons --}}
                    <x-ui.social-links :links="$socialLinks" variant="outline" size="sm" class="mt-4" />
                </div>

                {{-- Link columns --}}
                @foreach ($columns as $column)
                    <div>
                        <h3 class="mb-4 text-sm font-semibold text-foreground">{{ __($column['heading']) }}</h3>
                        <ul class="space-y-4" role="list">
                            @foreach ($column['links'] as $link)
                                <li>
                                    <a
                                        href="{{ $link['href'] }}"
                                        class="text-sm text-muted-foreground transition-colors hover:text-foreground"
                                    >
                                        {{ __($link['label']) }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- ── Bottom bar ── --}}
        <div class="border-t border-border">
            <div class="mx-auto flex max-w-7xl flex-col items-center gap-4 px-4 py-6 sm:px-6 sm:flex-row sm:justify-between lg:px-8">

                {{-- Copyright --}}
                <p class="text-sm text-muted-foreground">{{ __($copyright) }}</p>

                {{-- Locale select --}}
                <div class="flex items-center gap-2">
                    <label for="footer-locale" class="sr-only">{{ __('Language and currency') }}</label>
                    <x-ui.select size="sm" id="footer-locale" name="locale" class="w-max" aria-label="{{ __('Language and currency') }}">
                        <option value="en-usd">{{ __('English / USD') }}</option>
                        <option value="en-gbp">{{ __('English / GBP') }}</option>
                        <option value="fr-eur">{{ __('Français / EUR') }}</option>
                    </x-ui.select>
                </div>

                {{-- Payment method chips --}}
                <div class="flex flex-wrap items-center gap-2" aria-label="{{ __('Accepted payment methods') }}" role="list">
                    @foreach ($paymentMethods as $method)
                        <x-ui.badge variant="outline" size="sm" role="listitem" class="text-muted-foreground">{{ $method }}</x-ui.badge>
                    @endforeach
                </div>
            </div>
        </div>
    </footer>
</x-ui.section>