Store Footer

@props([
    'brand'             => 'Monogram',
    'brandHref'         => '/',
    'brandBlurb'        => 'Designed to last. Carried with purpose. Made for those who know that true luxury lies in the details that endure.',
    'newsletterHeading' => 'Straight to your next carry',
    'newsletterSubcopy' => 'Join the list for early access to new arrivals, private sales, and the occasional well-considered note.',
    'columns'           => null,
    'socials'           => null,
    'paymentMethods'    => null,
    'locales'           => null,
    'copyright'         => '© 2026 Monogram. All rights reserved.',
])

@php
    $columns ??= [
        [
            'heading' => 'Shop',
            'links'   => [
                ['label' => 'New Arrivals', 'href' => '#'],
                ['label' => 'Collections',  'href' => '#'],
                ['label' => 'Lookbook',     'href' => '#'],
                ['label' => 'Sale',         'href' => '#'],
            ],
        ],
        [
            'heading' => 'Company',
            'links'   => [
                ['label' => 'About',   'href' => '#'],
                ['label' => 'Journal', 'href' => '#'],
                ['label' => 'Stores',  'href' => '#'],
                ['label' => 'Contact', 'href' => '#'],
            ],
        ],
        [
            'heading' => 'Information',
            'links'   => [
                ['label' => 'FAQs',      'href' => '#'],
                ['label' => 'Shipping',  'href' => '#'],
                ['label' => 'Returns',   'href' => '#'],
                ['label' => 'Documents', 'href' => '#'],
            ],
        ],
    ];

    $socials ??= [
        ['label' => 'Instagram', 'href' => '#'],
        ['label' => 'Facebook',  'href' => '#'],
        ['label' => 'Pinterest', 'href' => '#'],
        ['label' => 'YouTube',   'href' => '#'],
    ];

    $paymentMethods ??= ['Visa', 'Mastercard', 'Amex', 'PayPal', 'Apple Pay'];

    $locales ??= [
        ['value' => 'en-usd', 'label' => 'United States — USD'],
        ['value' => 'en-gbp', 'label' => 'United Kingdom — GBP'],
        ['value' => 'fr-eur', 'label' => 'France — EUR'],
        ['value' => 'jp-jpy', 'label' => 'Japan — JPY'],
    ];

    // 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

{{--
    store-footer-02 — "Minimal / Editorial" Monogram storefront footer.
    Structurally distinct from store-footer (the mega-footer): an editorial,
    whitespace-led layout — a large centered `font-heading` wordmark + brand line,
    a centered newsletter invitation row, an UPPERCASE wide-tracked multi-column
    link grid, then a quiet bottom bar (locale select, payment chips, social
    icons, copyright).
    Composes <x-ui.input>, <x-ui.button>, <x-ui.separator>.
    Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
<footer
    {{ $attributes->merge(['class' => 'bg-background text-foreground']) }}
    data-slot="store-footer"
>
    <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">

        {{-- ── Editorial brand mark ── --}}
        <div class="flex flex-col items-center gap-4 pt-16 text-center md:pt-20">
            <a
                href="{{ $brandHref }}"
                class="font-heading text-lg uppercase tracking-[0.3em] text-foreground transition-opacity hover:opacity-70 sm:text-xl"
                aria-label="{{ __(':brand home', ['brand' => $brand]) }}"
            >
                {{ $brand }}
            </a>
            <p class="max-w-xl font-body text-sm leading-relaxed text-muted-foreground">
                {{ __($brandBlurb) }}
            </p>
        </div>

        {{-- ── Newsletter invitation ── --}}
        <div class="mx-auto mt-12 max-w-md text-center">
            <h2 class="font-heading text-lg uppercase tracking-widest text-foreground">
                {{ __($newsletterHeading) }}
            </h2>
            <p class="mt-2 font-body text-sm text-muted-foreground">
                {{ __($newsletterSubcopy) }}
            </p>
            <form class="mt-6 flex flex-col gap-2 sm:flex-row" method="POST" action="#" novalidate>
                @csrf
                <label for="store-footer-02-email" class="sr-only">{{ __('Email address') }}</label>
                <x-ui.input
                    id="store-footer-02-email"
                    type="email"
                    name="email"
                    :placeholder="__('you@example.com')"
                    autocomplete="email"
                    required
                    class="min-w-0 flex-1"
                />
                <x-ui.button type="submit">
                    {{ __('Subscribe') }}
                </x-ui.button>
            </form>
        </div>

        <x-ui.separator class="mt-16" />

        {{-- ── Link columns ── --}}
        <nav
            class="grid grid-cols-2 gap-x-8 gap-y-10 py-12 text-center sm:grid-cols-3 sm:text-start"
            aria-label="{{ __('Footer') }}"
        >
            @foreach ($columns as $column)
                <div>
                    <h3 class="font-body text-xs font-semibold uppercase tracking-widest text-foreground">
                        {{ __($column['heading']) }}
                    </h3>
                    <ul class="mt-4 space-y-4" role="list">
                        @foreach ($column['links'] as $link)
                            <li>
                                <a
                                    href="{{ $link['href'] }}"
                                    class="font-body text-xs uppercase tracking-widest text-muted-foreground transition-colors hover:text-foreground"
                                >
                                    {{ __($link['label']) }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </nav>

        <x-ui.separator />

        {{-- ── Bottom bar ── --}}
        <div class="flex flex-col items-center gap-6 py-8 md:flex-row md:items-center md:justify-between">

            {{-- Locale + payment cluster --}}
            <div class="flex flex-col items-center gap-4 sm:flex-row sm:gap-6">
                <div>
                    <label for="store-footer-02-locale" class="sr-only">{{ __('Country and currency') }}</label>
                    <x-ui.select size="sm" id="store-footer-02-locale" name="locale" class="w-max font-body uppercase tracking-widest" aria-label="{{ __('Country and currency') }}">
                        @foreach ($locales as $locale)
                            <option value="{{ $locale['value'] }}">{{ __($locale['label']) }}</option>
                        @endforeach
                    </x-ui.select>
                </div>

                <ul
                    class="flex flex-wrap items-center justify-center gap-2"
                    aria-label="{{ __('Accepted payment methods') }}"
                    role="list"
                >
                    @foreach ($paymentMethods as $method)
                        <li>
                            <x-ui.badge variant="outline" size="sm" class="font-body uppercase tracking-widest text-muted-foreground">{{ $method }}</x-ui.badge>
                        </li>
                    @endforeach
                </ul>
            </div>

            {{-- Social icons --}}
            <x-ui.social-links :links="$socialLinks" variant="outline" size="sm" label="Social media" />
        </div>

        {{-- Copyright --}}
        <div class="border-t border-border py-6 text-center">
            <p class="font-body text-xs uppercase tracking-widest text-muted-foreground">{{ __($copyright) }}</p>
        </div>
    </div>
</footer>