Footer

@props([
    'brand' => 'Acme',
    'heading' => 'Ready to ship faster?',
    'subheading' => 'Drop polished, token-themeable interfaces into your Laravel app and launch in days, not months.',
    'tagline' => 'The Laravel-native UI system you copy straight into your codebase.',
    'columns' => null,
    'socials' => null,
    'legal' => null,
    'copyright' => null,
])

@php
    $columns ??= [
        ['heading' => 'Product', 'links' => [['label' => 'Components', 'href' => '#'], ['label' => 'Blocks', 'href' => '#'], ['label' => 'Pricing', 'href' => '#'], ['label' => 'Changelog', 'href' => '#']]],
        ['heading' => 'Resources', 'links' => [['label' => 'Documentation', 'href' => '#'], ['label' => 'Guides', 'href' => '#'], ['label' => 'Community', 'href' => '#']]],
        ['heading' => 'Company', 'links' => [['label' => 'About', 'href' => '#'], ['label' => 'Blog', 'href' => '#'], ['label' => 'Careers', 'href' => '#']]],
    ];

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

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

    $legal ??= [
        ['label' => 'Privacy', 'href' => '#'],
        ['label' => 'Terms', 'href' => '#'],
        ['label' => 'Cookies', 'href' => '#'],
    ];

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

<footer data-slot="footer-cta" {{ $attributes->merge(['class' => 'border-t border-border bg-card text-card-foreground']) }}>
    <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
        {{-- Oversized CTA --}}
        <div class="flex flex-col items-start gap-8 lg:flex-row lg:items-center lg:justify-between">
            <div class="max-w-2xl">
                <h2 class="text-pretty text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">{{ __($heading) }}</h2>
                <p class="mt-4 text-pretty text-sm text-muted-foreground sm:text-base">{{ __($subheading) }}</p>
            </div>
            <div class="flex flex-col gap-4 sm:flex-row lg:shrink-0">
                <x-ui.button size="lg" class="gap-2">
                    {{ __('Get started') }}
                    <svg class="size-4 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M5 12h14" />
                        <path d="m12 5 7 7-7 7" />
                    </svg>
                </x-ui.button>
                <x-ui.button variant="ghost" size="lg">{{ __('Book a demo') }}</x-ui.button>
            </div>
        </div>

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

        {{-- Brand + link columns --}}
        <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-5">
                <x-ui.brand href="#" :label="$brand" size="lg" />

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

                <x-ui.social-links :links="$socialLinks" label="Social media" class="mt-6" />
            </div>

            {{-- Link group columns --}}
            @foreach ($columns as $column)
                <div class="lg:col-span-2 lg:col-start-auto">
                    <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>

        {{-- Oversized brand wordmark flourish --}}
        <div class="mt-16 select-none overflow-hidden" aria-hidden="true">
            <span class="block text-pretty text-[18vw] font-bold leading-none tracking-tighter text-muted-foreground lg:text-[12rem]">{{ $brand }}</span>
        </div>

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

            <nav aria-label="{{ __('Legal') }}">
                <ul class="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
                    @foreach ($legal 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>
            </nav>
        </div>
    </div>
</footer>