@php
    $socialIcons = [
        [
            'id' => '01',
            'href' => '#',
            'text' => 'Linkedin',
            'icon' =>
                '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="size-6" viewBox="0 0 256 256"><path d="M216,24H40A16,16,0,0,0,24,40V216a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V40A16,16,0,0,0,216,24Zm0,192H40V40H216V216ZM96,112v64a8,8,0,0,1-16,0V112a8,8,0,0,1,16,0Zm88,28v36a8,8,0,0,1-16,0V140a20,20,0,0,0-40,0v36a8,8,0,0,1-16,0V112a8,8,0,0,1,15.79-1.78A36,36,0,0,1,184,140ZM100,84A12,12,0,1,1,88,72,12,12,0,0,1,100,84Z"></path></svg>',
        ],
        [
            'id' => '01',
            'href' => '#',
            'text' => 'twitter',
            'icon' =>
                '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="size-6" viewBox="0 0 256 256"><path d="M214.75,211.71l-62.6-98.38,61.77-67.95a8,8,0,0,0-11.84-10.76L143.24,99.34,102.75,35.71A8,8,0,0,0,96,32H48a8,8,0,0,0-6.75,12.3l62.6,98.37-61.77,68a8,8,0,1,0,11.84,10.76l58.84-64.72,40.49,63.63A8,8,0,0,0,160,224h48a8,8,0,0,0,6.75-12.29ZM164.39,208,62.57,48h29L193.43,208Z"></path></svg>',
        ],
        [
            'id' => '01',
            'href' => '#',
            'text' => 'Facebook',
            'icon' =>
                '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="size-6" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"></path></svg>',
        ],
    ];

    $footerItems = [
        [
            'id' => '01',
            'group' => 'Navigation',
            'items' => [
                [
                    'id' => '01',
                    'href' => '/about-us',
                    'text' => 'About Us',
                ],
                [
                    'id' => '02',
                    'href' => '/services',
                    'text' => 'Services',
                ],
                [
                    'id' => '03',
                    'href' => '/contact-us',
                    'text' => 'Contact Us',
                ],
                [
                    'id' => '04',
                    'text' => 'Our Approach',
                    'href' => '/our-approach',
                ],
            ],
        ],
        [
            'id' => '02',
            'group' => 'About Us',
            'items' => [
                [
                    'id' => '01',
                    'href' => '/about-us#who-we-are',
                    'text' => 'Who we are',
                ],
                [
                    'id' => '02',
                    'href' => '/about-us#core-values',
                    'text' => 'Our core values',
                ],
                [
                    'id' => '03',
                    'href' => '/about-us#mission-vision',
                    'text' => 'Our mission',
                ],
            ],
        ],
        [
            'id' => '03',
            'group' => 'Resources',
            'items' => [
                [
                    'id' => '01',
                    'href' => '/contact-us',
                    'text' => 'Get In touch',
                ],
                [
                    'id' => '02',
                    'href' => '#faqs',
                    'text' => 'Faqs',
                ],
            ],
        ],
    ];
@endphp
<footer class="mt-20 pt-10 pb-6 flex flex-col">
    <x-atoms.container
        class="border-t border-dashed border-gray-300 pt-14 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-16">
        <div class="flex flex-col gap-6 col-span-2 md:col-span-full lg:col-span-2">
            <a href="/" class="text-2xl font-bold">
                <img src="/logo_def.png" alt="Logo columna" class="h-12 w-auto">
            </a>
            <div class="flex flex-wrap gap-2">
                @foreach ($socialIcons as $socialIcon)
                    <a wire:key="social-icon-{{ $socialIcon['id'] }}" href="{{ $socialIcon['href'] }}"
                        aria-label="Link to {{ $socialIcon['text'] }}"
                        class="btn btn-icon-md rounded-xl btn-outline btn-outline-gray">
                        {!! $socialIcon['icon'] !!}
                    </a>
                @endforeach
            </div>
        </div>
        @foreach ($footerItems as $footerItem)
            <nav wire:key="footer-item-{{ $footerItem['id'] }}" class="flex flex-col gap-8">
                <h3 class="font-medium text-gray-900">
                    {{ $footerItem['group'] }}
                </h3>
                <ul class="space-y-3">
                    @foreach ($footerItem['items'] as $item)
                        <li wire:key="item-{{ $item['id'] }}">
                            <a href="{{ $item['href'] }}"
                                class="text-gray-600 hover:text-primary-900 transition-colors duration-300"
                                wire:navigate>
                                {{ $item['text'] }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </nav>
        @endforeach

        <div class="col-span-full p-2 rounded-xl bg-white shadow-sm shadow-gray-200/50 border border-gray-200/70">
            <div class="text-center justify-center gap-4 tex">
                <p class="text-sm text-gray-600">
                    © {{ date('Y') }} Columna. All rights reserved.
                </p>
            </div>
        </div>
    </x-atoms.container>
</footer>