Footer code

@props([
    'groups' => [],
    'copyright' => null,
])

@php
    /*
    | Site footer with optional link columns. Pass `groups` as:
    |   ['Product' => ['Features' => '#', 'Pricing' => '#'], ...]
    | Use the `brand` slot for a logo + tagline and `social` for social icons.
    |
    | Usage:
    |   <x-ui.footer :groups="$groups" copyright="© 2026 Acme Inc.">
    |       <x-slot:brand>...</x-slot:brand>
    |   </x-ui.footer>
    */
    $copyright ??= '© '.date('Y').' '.config('app.name').'. All rights reserved.';
@endphp

<footer {{ $attributes->merge(['class' => 'border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950']) }}>
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
        <div class="grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-6">
            @isset($brand)
                <div class="col-span-2">{{ $brand }}</div>
            @endisset

            @foreach ($groups as $heading => $items)
                <div>
                    <h4 class="text-sm font-semibold text-gray-900 dark:text-white">{{ $heading }}</h4>
                    <ul class="mt-4 space-y-3">
                        @foreach ($items as $label => $href)
                            <li>
                                <a href="{{ $href }}" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition">{{ $label }}</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </div>

        <div class="mt-12 flex flex-col items-center justify-between gap-4 border-t border-gray-200 dark:border-gray-800 pt-8 sm:flex-row">
            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $copyright }}</p>
            @isset($social)
                <div class="flex items-center gap-1">{{ $social }}</div>
            @endisset
        </div>
    </div>
</footer>