@props(['footer', 'socials', 'navLinks', 'pagesLegales', 'contact'])

@php
    $socialIcons = [
        'linkedin' => '<path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.95v5.66H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.28 2.38 4.28 5.47v6.27zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.44c.98 0 1.79-.77 1.79-1.72V1.72C24 .77 23.19 0 22.22 0z"/>',
        'facebook' => '<path d="M22.68 0H1.32C.59 0 0 .59 0 1.32v21.36C0 23.41.59 24 1.32 24h11.5v-9.29H9.69V11.1h3.13V8.41c0-3.1 1.89-4.79 4.66-4.79 1.32 0 2.46.1 2.79.14v3.24h-1.92c-1.5 0-1.79.71-1.79 1.76v2.31h3.59l-.47 3.62h-3.12V24h6.12c.73 0 1.32-.59 1.32-1.32V1.32C24 .59 23.41 0 22.68 0z"/>',
        'instagram' => '<rect x="2" y="2" width="20" height="20" rx="5" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="4.2" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="17.5" cy="6.5" r="1.2"/>',
        'youtube' => '<path d="M23.5 6.2s-.23-1.65-.94-2.38c-.9-.94-1.9-.95-2.36-1C16.9 2.5 12 2.5 12 2.5s-4.9 0-8.2.32c-.46.05-1.46.06-2.36 1C.73 4.55.5 6.2.5 6.2S.26 8.14.26 10.09v1.82c0 1.95.24 3.89.24 3.89s.23 1.65.94 2.38c.9.94 2.08.91 2.6 1.01 1.88.18 8 .32 8 .32s4.9-.01 8.2-.32c.46-.06 1.46-.06 2.36-1 .71-.73.94-2.38.94-2.38s.24-1.94.24-3.89v-1.82c0-1.95-.24-3.9-.24-3.9zM9.7 14.14V7.36l6.36 3.4L9.7 14.15z"/>',
    ];

    $legalPayload = collect(['cgu', 'confidentialite'])
        ->map(fn ($slug) => $pagesLegales->get($slug))
        ->filter()
        ->map(fn ($page) => [
            'slug' => $page->pgl_slug,
            'titre' => $page->trad('titre'),
            'contenu' => (string) str($page->trad('contenu') ?? '')->sanitizeHtml(),
        ])
        ->values();
@endphp

<footer class="relative overflow-hidden border-t border-gold/15" x-data="{ legalOpen: null, pages: @js($legalPayload) }">
    <div aria-hidden="true" class="pointer-events-none absolute inset-0 opacity-60" style="background: radial-gradient(ellipse at center bottom, oklch(0.72 0.13 78 / 0.15), transparent 70%);"></div>
    <div class="relative mx-auto grid max-w-7xl grid-cols-1 gap-12 px-6 py-16 md:grid-cols-[1.4fr_1fr_1fr]">
        <div>
            <div class="flex items-center gap-2">
                <img src="{{ asset('assets/logo.png') }}" alt="Obvious Way" class="h-22 w-auto -my-5 object-contain" width="64" height="64" loading="lazy" />
                <span class="font-serif text-xl text-cream">Obvious <em class="text-gradient-gold not-italic">Way</em></span>
            </div>
            <p class="mt-5 max-w-sm text-sm leading-relaxed text-cream/65">{{ $footer->trad('tagline') }}</p>
            <p class="mt-3 text-xs uppercase tracking-[0.2em] text-cream/50">{{ $footer->trad('localisation') }}</p>
        </div>

        <nav aria-label="Navigation du pied de page">
            <div class="text-[11px] uppercase tracking-[0.22em] text-gold">{{ lpick('Navigation', 'Navigation', 'Navigation') }}</div>
            <ul class="mt-5 space-y-2.5">
                @foreach ($navLinks as $link)
                    <li><a href="{{ $link->nav_ancre }}" class="animated-underline text-sm text-cream/70 hover:text-gold">{{ $link->trad('label') }}</a></li>
                @endforeach
            </ul>
        </nav>

        <div>
            <div class="text-[11px] uppercase tracking-[0.22em] text-gold">Contact</div>
            <ul class="mt-5 space-y-2.5 text-sm text-cream/70">
                <li><a href="mailto:{{ $contact->ctc_email }}" class="animated-underline hover:text-gold">{{ $contact->ctc_email }}</a></li>
                <li><a href="{{ $contact->ctc_whatsapp_url }}" class="animated-underline hover:text-gold">{{ $contact->ctc_whatsapp }}</a></li>
                <li><a href="{{ $footer->ftr_site_url }}" class="animated-underline hover:text-gold">obvious-way.com</a></li>
            </ul>

            <div class="mt-6 text-[11px] uppercase tracking-[0.22em] text-gold">{{ lpick('Suivez-nous', 'Follow us', 'Folgen Sie uns') }}</div>
            <div class="mt-4 flex gap-2">
                @foreach ($socials as $social)
                    <a href="{{ $social->soc_url }}" target="_blank" rel="noreferrer" aria-label="{{ ucfirst($social->soc_plateforme) }}" class="grid h-10 w-10 place-items-center rounded-full border border-gold/25 text-cream/70 transition-all duration-500 hover:-translate-y-1 hover:border-gold hover:text-gold hover:shadow-[0_10px_30px_-10px_oklch(0.72_0.13_78/0.6)]">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">{!! $socialIcons[$social->soc_plateforme] ?? '' !!}</svg>
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    <div class="relative border-t border-gold/10">
        <div class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-32 py-6 text-xs text-cream/50">
            <span>{{ $footer->trad('copyright') }}</span>
            @foreach (['cgu', 'confidentialite'] as $slug)
                @continue(! $pagesLegales->has($slug))
                <span
                    class="animated-underline cursor-pointer hover:text-gold"
                    @click="legalOpen = '{{ $slug }}'"
                >{{ $pagesLegales->get($slug)->trad('titre') }}</span>
            @endforeach
        </div>
    </div>

    {{-- Modales : pages légales (CGU, confidentialité) --}}
    <template x-for="page in pages" :key="page.slug">
        <div
            x-show="legalOpen === page.slug"
            x-cloak
            x-transition.opacity
            class="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-8"
            role="dialog"
            aria-modal="true"
        >
            <div class="absolute inset-0 bg-navy-deep/90" @click="legalOpen = null"></div>

            <div
                x-show="legalOpen === page.slug"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-4 scale-95"
                x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                class="relative flex max-h-[90vh] w-full max-w-4xl flex-col overflow-y-auto rounded-2xl bg-white p-8 shadow-2xl md:p-12"
                data-lenis-prevent
            >
                <button
                    type="button"
                    @click="legalOpen = null"
                    aria-label="{{ lpick('Fermer', 'Close', 'Schließen') }}"
                    class="absolute right-5 top-5 grid h-9 w-9 place-items-center rounded-full border border-navy-deep/15 text-navy-deep transition-colors hover:bg-navy-deep/5"
                >
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>

                <h3 class="pr-10 font-serif text-2xl leading-tight text-navy-deep md:text-3xl" x-text="page.titre"></h3>
                <div class="article-content mt-8 text-sm text-navy-deep/80" x-html="page.contenu"></div>
            </div>
        </div>
    </template>
</footer>

<button id="back-to-top" aria-label="{{ lpick('Retour en haut', 'Back to top', 'Nach oben') }}">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
</button>