Footer

@props([
    'brand' => 'Acme',
    'newsletterHeading' => 'Stay in the loop',
    'newsletterSubheading' => 'Product updates, new blocks, and the occasional deep dive — delivered to your inbox. No spam.',
    'newsletterCta' => 'Subscribe',
    'newsletterAction' => '#',
    'columns' => null,
    'social' => null,
    'copyright' => null,
])

@php
    $columns ??= [
        ['heading' => 'Product', 'links' => [['label' => 'Components', 'href' => '#'], ['label' => 'Blocks', 'href' => '#'], ['label' => 'Templates', 'href' => '#'], ['label' => 'Pricing', 'href' => '#']]],
        ['heading' => 'Company', 'links' => [['label' => 'About', 'href' => '#'], ['label' => 'Blog', 'href' => '#'], ['label' => 'Careers', 'href' => '#'], ['label' => 'Contact', 'href' => '#']]],
        ['heading' => 'Resources', 'links' => [['label' => 'Documentation', 'href' => '#'], ['label' => 'Guides', 'href' => '#'], ['label' => 'Changelog', 'href' => '#'], ['label' => 'Support', 'href' => '#']]],
        ['heading' => 'Legal', 'links' => [['label' => 'Privacy', 'href' => '#'], ['label' => 'Terms', 'href' => '#'], ['label' => 'Security', 'href' => '#'], ['label' => 'Cookies', 'href' => '#']]],
    ];

    $social ??= ['x', 'github', 'linkedin'];
    // Network keys map onto social-links marks; the older `twitter` key still resolves.
    $socialLinks = array_map(fn (string $network) => ['platform' => $network === 'twitter' ? 'x' : $network], $social);

    $copyright ??= '© '.date('Y').' '.$brand.'. '.__('All rights reserved.');
@endphp

<footer {{ $attributes->merge(['class' => 'border-t border-border bg-background text-foreground']) }}>
    <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
        {{-- Newsletter row --}}
        <div class="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
            <div class="max-w-md">
                <h2 class="text-2xl font-bold tracking-tight sm:text-3xl">{{ __($newsletterHeading) }}</h2>
                <p class="mt-4 text-pretty text-muted-foreground">{{ __($newsletterSubheading) }}</p>
            </div>

            <form method="POST" action="{{ $newsletterAction }}" class="w-full max-w-md lg:w-auto" aria-label="{{ __('Newsletter signup') }}">
                @csrf
                <x-ui.field class="flex flex-col gap-4 sm:flex-row sm:items-end">
                    <div class="flex-1 space-y-2">
                        <x-ui.label for="footer-newsletter-email" class="sr-only">{{ __('Email address') }}</x-ui.label>
                        <x-ui.input
                            id="footer-newsletter-email"
                            type="email"
                            name="email"
                            autocomplete="email"
                            required
                            placeholder="{{ __('you@example.com') }}"
                            class="sm:min-w-72"
                        />
                    </div>
                    <x-ui.button type="submit" class="w-full sm:w-auto">{{ __($newsletterCta) }}</x-ui.button>
                </x-ui.field>
            </form>
        </div>

        <x-ui.separator class="my-12" />

        {{-- Link columns + brand --}}
        <div class="grid gap-10 lg:grid-cols-[1.5fr_3fr]">
            <div class="max-w-xs">
                <x-ui.brand href="#" :label="$brand" />
                <p class="mt-4 text-sm text-muted-foreground">{{ __('Build polished, token-themeable interfaces you own end to end.') }}</p>
            </div>

            <div class="grid grid-cols-2 gap-8 sm:grid-cols-4">
                @foreach ($columns as $column)
                    <div>
                        <h3 class="text-sm font-semibold">{{ __($column['heading']) }}</h3>
                        <ul class="mt-4 space-y-4 text-sm">
                            @foreach ($column['links'] as $link)
                                <li>
                                    <a href="{{ $link['href'] }}" class="text-muted-foreground transition-colors hover:text-foreground focus-visible:text-foreground focus-visible:outline-none">{{ __($link['label']) }}</a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endforeach
            </div>
        </div>

        <x-ui.separator class="my-10" />

        {{-- Bottom bar --}}
        <div class="flex flex-col items-center justify-between gap-4 sm:flex-row">
            <p class="text-sm text-muted-foreground">{{ $copyright }}</p>

            @if (! empty($socialLinks))
                <x-ui.social-links :links="$socialLinks" />
            @endif
        </div>
    </div>
</footer>