Footer

@props([
    'brand' => 'Acme',
    'tagline' => 'Build polished, token-themeable interfaces and ship them into your own Laravel codebase.',
    'version' => 'v2.0',
    'columns' => null,
    'socials' => null,
    'locale' => 'English (US)',
    'locales' => null,
    'copyright' => null,
])

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

    $socials ??= [
        ['label' => 'X', 'href' => '#', 'icon' => 'x'],
        ['label' => 'GitHub', 'href' => '#', 'icon' => 'github'],
        ['label' => 'LinkedIn', 'href' => '#', 'icon' => 'linkedin'],
        ['label' => 'YouTube', 'href' => '#', 'icon' => 'youtube'],
    ];

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

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

    $locales ??= ['English (US)', 'English (UK)', 'Español', 'Français', 'Deutsch'];
@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">
        <div class="grid grid-cols-2 gap-x-8 gap-y-12 md:grid-cols-4 lg:grid-cols-12 lg:gap-8">
            {{-- Brand column --}}
            <div class="col-span-2 md:col-span-4 lg:col-span-4">
                <div class="flex items-center gap-2">
                    <x-ui.brand href="#" :label="$brand" size="lg" />
                    @if ($version)
                        <x-ui.badge variant="secondary">{{ $version }}</x-ui.badge>
                    @endif
                </div>

                <p class="mt-4 max-w-sm text-pretty text-sm text-muted-foreground">{{ __($tagline) }}</p>

                <div class="mt-8">
                    <p class="text-sm font-semibold">{{ __('Get the app') }}</p>
                    <div class="mt-4 flex max-w-xs flex-col gap-4">
                        <x-ui.button href="#" variant="outline" size="lg" aria-label="{{ __('Download on the App Store') }}" class="w-full justify-start gap-4 block">
                            <svg class="size-6 text-foreground" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                <path d="M16.365 1.43c0 1.14-.42 2.21-1.25 3.04-.94.94-2.07 1.5-3.31 1.4-.05-1.17.45-2.31 1.18-3.06.83-.85 2.18-1.43 3.38-1.42v.04Zm3.95 16.06c-.4.92-.59 1.33-1.1 2.14-.71 1.13-1.71 2.54-2.95 2.55-1.1.01-1.39-.72-2.89-.71-1.5.01-1.81.73-2.91.72-1.24-.01-2.19-1.28-2.9-2.41-1.99-3.16-2.2-6.86-.97-8.83.87-1.4 2.24-2.22 3.53-2.22 1.32 0 2.15.72 3.24.72 1.06 0 1.71-.72 3.24-.72 1.15 0 2.37.63 3.24 1.71-2.85 1.56-2.39 5.63.37 6.79l.1-.0Z"/>
                            </svg>
                            <span class="flex flex-col items-start leading-tight">
                                <span class="text-2xs font-normal text-muted-foreground">{{ __('Download on the') }}</span>
                                <span class="text-sm font-semibold">{{ __('App Store') }}</span>
                            </span>
                        </x-ui.button>
                        <x-ui.button href="#" variant="outline" size="lg" aria-label="{{ __('Get it on Google Play') }}" class="w-full justify-start gap-4 block">
                            <svg class="size-6 text-foreground" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                <path d="M3.6 2.3c-.2.21-.32.53-.32.95v17.5c0 .42.12.74.33.94l.06.06 9.8-9.8v-.23L3.66 2.24l-.06.06Zm13.2 13.06-3.27-3.27v-.18l3.27-3.27.07.04 3.87 2.2c1.1.63 1.1 1.65 0 2.28l-3.87 2.2-.07.0Zm-.66.66-3.34-3.34-9.86 9.86c.36.39.96.43 1.64.05l11.56-6.57Zm0-9.96L4.58 1.47c-.68-.39-1.28-.34-1.64.05l9.86 9.85 3.34-3.31Z"/>
                            </svg>
                            <span class="flex flex-col items-start leading-tight">
                                <span class="text-2xs font-normal text-muted-foreground">{{ __('Get it on') }}</span>
                                <span class="text-sm font-semibold">{{ __('Google Play') }}</span>
                            </span>
                        </x-ui.button>
                    </div>
                </div>
            </div>

            {{-- Link group columns --}}
            @foreach ($columns as $column)
                <div class="lg:col-span-2">
                    <h2 class="text-sm font-semibold">{{ __($column['heading']) }}</h2>
                    <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>

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

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

            <div class="flex items-center gap-4">
                <x-ui.social-links :links="$socialLinks" label="Social media" />

                {{-- Language / region selector: a dropdown menu, current locale checked --}}
                <div data-slot="footer-locale-select" x-data="{ current: {{ Js::from($locale) }} }" class="relative">
                    <x-ui.dropdown>
                        <x-ui.dropdown.trigger
                            :aria-label="__('Change language, currently :locale', ['locale' => $locale])"
                            class="group inline-flex h-control-h-sm items-center gap-2 rounded-md border border-border bg-background px-control-x-sm text-sm font-semibold text-foreground shadow-xs transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring focus-visible:ring-offset-[length:var(--ring-offset-width)] focus-visible:ring-offset-background"
                        >
                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <circle cx="12" cy="12" r="10" />
                                <path d="M2 12h20" />
                                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10Z" />
                            </svg>
                            <span x-text="current"></span>
                            <svg class="size-4 text-muted-foreground transition-transform group-aria-expanded:rotate-180 motion-reduce:transition-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="m6 9 6 6 6-6" />
                            </svg>
                        </x-ui.dropdown.trigger>

                        <x-ui.dropdown.content align="end" class="w-44">
                            <x-ui.dropdown.radio-group :label="__('Select language')">
                                @foreach ($locales as $option)
                                    <x-ui.dropdown.radio-item
                                        :checked="$option === $locale"
                                        ::aria-checked="(current === {{ Js::from($option) }}).toString()"
                                        x-on:click="current = {{ Js::from($option) }}; closeAndFocus()"
                                    >{{ __($option) }}</x-ui.dropdown.radio-item>
                                @endforeach
                            </x-ui.dropdown.radio-group>
                        </x-ui.dropdown.content>
                    </x-ui.dropdown>
                </div>
            </div>
        </div>
    </div>
</footer>