<?php
use Livewire\Component;
?>

<footer class="bg-blue-500 text-white shadow-inner mt-12">
    <!-- Section principale -->
    <div class="container px-4 py-12 mx-auto">
        <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">

            <!-- Informations du shop -->
            <div class="space-y-3">
                <h3 class="text-xl font-bold text-white">
                    {{ $shop->name }}
                </h3>
                <div class="space-y-2 text-sm text-blue-100">
                    <p class="flex items-start gap-2">
                        <x-icon name="o-map-pin" class="w-5 h-5 mt-0.5 text-blue-200 shrink-0" />
                        <span>{{ $shop->address }}</span>
                    </p>
                    <p class="flex items-center gap-2">
                        <x-icon name="o-phone" class="w-5 h-5 text-blue-200 shrink-0" />
                        <a href="tel:{{ $shop->phone }}" class="hover:text-white transition-colors">
                            {{ $shop->phone }}
                        </a>
                    </p>
                    <p class="flex items-center gap-2">
                        <x-icon name="o-envelope" class="w-5 h-5 text-blue-200 shrink-0" />
                        <a href="mailto:{{ $shop->email }}" class="hover:text-white transition-colors">
                            {{ $shop->email }}
                        </a>
                    </p>
                </div>
            </div>

            <!-- Liens légaux -->
            <div>
                <h6 class="mb-4 text-xs font-bold tracking-wider uppercase text-blue-200">
                    {{ __('Informations légales') }}
                </h6>
                <ul class="space-y-2 text-sm">
                    <li>
                        <a href="{{ route('pages', ['page' => 'mentions-legales']) }}"
                           class="text-blue-100 hover:text-white transition-colors hover:underline">
                            {{ __('Mentions légales') }}
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('pages', ['page' => 'conditions-generales-de-vente']) }}"
                           class="text-blue-100 hover:text-white transition-colors hover:underline">
                            {{ __('Conditions générales de vente') }}
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('pages', ['page' => 'politique-de-confidentialite']) }}"
                           class="text-blue-100 hover:text-white transition-colors hover:underline">
                            {{ __('Politique de confidentialité') }}
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Services -->
            <div>
                <h6 class="mb-4 text-xs font-bold tracking-wider uppercase text-blue-200">
                    {{ __('Services & Infos') }}
                </h6>
                <ul class="space-y-2 text-sm">
                    <li>
                        <a href="{{ route('pages', ['page' => 'livraisons']) }}"
                           class="text-blue-100 hover:text-white transition-colors hover:underline">
                            {{ __('Livraisons') }}
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('pages', ['page' => 'respect-environnement']) }}"
                           class="text-blue-100 hover:text-white transition-colors hover:underline">
                            {{ __('Respect de l\'environnement') }}
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('pages', ['page' => 'mandat-administratif']) }}"
                           class="text-blue-100 hover:text-white transition-colors hover:underline">
                            {{ __('Mandat administratif') }}
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Réseaux sociaux & Newsletter -->
            <div>
                <h6 class="mb-4 text-xs font-bold tracking-wider uppercase text-blue-200">
                    {{ __('Suivez-nous') }}
                </h6>

                <!-- Réseaux sociaux avec fond légèrement contrasté -->
                <div class="flex items-center gap-2 mb-6">
                    @if($shop->facebook)
                        <a href="{{ $shop->facebook }}"
                           target="_blank"
                           rel="noopener noreferrer"
                           class="btn btn-circle btn-ghost btn-sm bg-white/10 hover:bg-white/20 text-white">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="fill-current">
                                <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/>
                            </svg>
                        </a>
                    @endif

                    @if($shop->linkedin ?? false)
                        <a href="{{ $shop->linkedin }}"
                           target="_blank"
                           rel="noopener noreferrer"
                           class="btn btn-circle btn-ghost btn-sm bg-white/10 hover:bg-white/20 text-white">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="fill-current">
                                <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                            </svg>
                        </a>
                    @endif
                </div>

                <!-- Newsletter -->
                <div class="space-y-2">
                    <p class="text-xs text-blue-200 font-semibold uppercase tracking-wider">
                        {{ __('Newsletter') }}
                    </p>
                    <x-button
                        label="{!! __('S\'abonner à la lettre d\'information') !!}"
                        icon-right="o-arrow-top-right-on-square"
                        link="/"
                        external
                        class="bg-white hover:bg-blue-50 text-blue-600 border-none btn-xs font-bold"
                    />
                </div>
            </div>
        </div>
    </div>

    <!-- Copyright -->
    <div class="border-t border-blue-400/30 bg-blue-600/30">
        <div class="container flex flex-col items-center justify-between px-4 py-4 mx-auto text-xs text-blue-100 md:flex-row">
            <span>&copy; {{ date('Y') }} {{ $shop->name }}. {{ __('Tous droits réservés.') }}</span>
        </div>
    </div>
</footer>