@php
    $title = 'ATL — Les Amis de Tenge Litho';
    $description = "ATL, le réseau de soutien qui accompagne Te Litho Tenge Didier autour de la devise « On ne lâche rien ! ». Découvrez le réseau et demandez à le rejoindre.";
@endphp
<x-layout :title="$title" :description="$description">

    {{-- HERO ATL --}}
    <section class="relative overflow-hidden bg-congo-950 text-paper">
        <div class="absolute inset-0">
            @if($hero)
                <img src="{{ $hero->variant('large','jpg') }}" alt="" class="h-full w-full object-cover opacity-30" loading="eager">
            @endif
            <div class="absolute inset-0 bg-gradient-to-t from-congo-950 via-congo-950/90 to-congo-950/60"></div>
        </div>
        <div class="pointer-events-none absolute -left-16 -top-16 h-[30rem] w-[30rem] rounded-full bg-gold-500/10 blur-3xl" aria-hidden="true"></div>

        <div class="container-page relative py-24 sm:py-32">
            <div class="max-w-2xl text-center sm:text-left">
                <img src="/images/brand/atl-320.png" alt="Logo ATL — Les Amis de Tenge Litho" width="260" height="138" class="mx-auto h-auto w-56 drop-shadow-2xl sm:mx-0 sm:w-64">
                <p class="eyebrow mt-8 text-gold-300">Une communauté, une conviction</p>
                <h1 class="h-signature mt-3 font-semibold">ATL — Les Amis de Tenge Litho</h1>
                <p class="mt-6 max-w-xl text-lg leading-relaxed text-paper/80">
                    Autour de Te Litho Tenge Didier s'est réuni un réseau de femmes et d'hommes qui
                    partagent une même conviction : rester présents, rester constants, ne rien
                    lâcher — « On ne lâche rien&nbsp;! »
                </p>
                <div class="mt-9 flex flex-wrap justify-center gap-3 sm:justify-start">
                    <a href="{{ route('rejoindre.index') }}" class="btn-gold">Rejoindre le mouvement</a>
                    <a href="https://fb.me/AmisdeTengeLitho" target="_blank" rel="noopener noreferrer" class="btn-secondary !border-paper/30 !text-paper hover:!bg-paper/10">Page Facebook ATL ↗</a>
                </div>
            </div>
        </div>
    </section>

    {{-- PRESENTATION --}}
    <section class="container-page py-24">
        <div class="grid gap-12 lg:grid-cols-12">
            <div class="reveal lg:col-span-7">
                <p class="eyebrow">Présentation</p>
                <h2 class="h-section mt-3 font-semibold text-ink-900">Un réseau au service d'une conviction</h2>
                <p class="mt-5 leading-relaxed text-ink-700">
                    ATL — Les Amis de Tenge Litho — désigne le réseau de soutien réuni autour de
                    Te Litho Tenge Didier. Le site officiel de Te Litho Tenge Didier y consacre
                    une rubrique dédiée, avec des sections « Activités », « Adhésion » et
                    « Contact » — signe d'une volonté affirmée de structurer ce réseau autour
                    d'une véritable dynamique d'adhésion.
                </p>
                <p class="mt-4 leading-relaxed text-ink-700">
                    L'esprit du réseau se résume dans la devise portée par Te Litho Tenge Didier
                    tout au long de son parcours : <strong>« On ne lâche rien&nbsp;! »</strong> —
                    une invitation à rester constant, présent sur le terrain, et engagé pour
                    Kinshasa quelles que soient les circonstances.
                </p>
                <div class="mt-6 rounded-xl bg-paper-dim p-5 text-sm text-ink-600">
                    <p>
                        Ce site présente ATL avec sobriété, à partir des informations publiques
                        réellement disponibles. Certains éléments (historique précis, structure
                        juridique, activités propres à ATL) restent à faire valider par l'équipe —
                        voir <a href="{{ route('legal.credits') }}" class="underline hover:text-congo-800">la page crédits</a>
                        pour la méthodologie.
                    </p>
                </div>
            </div>
            <div class="reveal reveal-delay-1 lg:col-span-5">
                <blockquote class="relative overflow-hidden rounded-2xl bg-congo-900 p-8 text-center text-paper">
                    <x-brand-watermark tone="gold" class="left-1/2 top-1/2 h-72 w-72 -translate-x-1/2 -translate-y-1/2 opacity-[0.08]" />
                    <p class="devise-mark relative text-2xl font-semibold text-gold-300">« On ne lâche rien&nbsp;! »</p>
                    <p class="relative mt-3 text-sm text-paper/70">La devise qui anime ATL et tout le parcours de Te Litho Tenge Didier.</p>
                </blockquote>
            </div>
        </div>
    </section>

    {{-- ACTIONS / GALERIE --}}
    @if ($gallery->isNotEmpty())
    <section class="bg-paper-dim py-24">
        <div class="container-page">
            <p class="eyebrow reveal">En images</p>
            <h2 class="h-section reveal mt-3 font-semibold text-ink-900">Une communauté, en archives</h2>
            <p class="reveal mt-3 max-w-2xl text-ink-600">Une sélection de photographies déjà présentes dans nos archives, en lien avec l'identité du mouvement.</p>

            @php $atlFeature = $gallery->first(); $atlRest = $gallery->slice(1)->take(8); @endphp

            <div class="reveal mt-12 overflow-hidden rounded-3xl shadow-xl">
                <x-media-picture :media="$atlFeature" size="large" img-class="aspect-[16/9] w-full object-cover sm:aspect-[21/9]" />
            </div>

            @if ($atlRest->isNotEmpty())
                <div class="mt-6 grid grid-cols-3 gap-4 sm:grid-cols-4 lg:grid-cols-8">
                    @foreach ($atlRest as $i => $item)
                        <div class="reveal reveal-delay-{{ min(3, $i % 4 + 1) }} overflow-hidden rounded-xl">
                            <x-media-picture :media="$item" size="medium" img-class="aspect-square w-full object-cover transition duration-500 hover:scale-105" />
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </section>
    @endif

    {{-- POURQUOI REJOINDRE --}}
    <section class="container-page py-24">
        <p class="eyebrow reveal text-center">Pourquoi rejoindre</p>
        <h2 class="h-section reveal mt-3 text-center font-semibold text-ink-900">Ce que vous rejoignez, concrètement</h2>
        <div class="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ([
                ['title' => 'Suivre les activités', 'text' => "Restez informé des actions et prises de parole de Te Litho Tenge Didier."],
                ['title' => 'Recevoir les informations', 'text' => "Recevez, si vous le souhaitez, les actualités du mouvement par e-mail ou WhatsApp."],
                ['title' => 'Participer aux initiatives', 'text' => "Soyez informé des occasions de vous impliquer sur le terrain."],
                ['title' => 'Soutenir la dynamique', 'text' => "Faites vivre « On ne lâche rien ! » à vos côtés, et demandez l'adhésion à ATL si vous le souhaitez."],
            ] as $i => $reason)
                <div class="reveal reveal-delay-{{ min(3, $i) }} rounded-2xl border border-ink-900/10 bg-white/60 p-6 transition hover:border-gold-500/40 hover:shadow-lg">
                    <span class="flex h-10 w-10 items-center justify-center rounded-full bg-gold-500/15 text-sm font-semibold text-gold-600">{{ $i + 1 }}</span>
                    <h3 class="h-display mt-4 font-semibold text-ink-900">{{ $reason['title'] }}</h3>
                    <p class="mt-2 text-sm leading-relaxed text-ink-500">{{ $reason['text'] }}</p>
                </div>
            @endforeach
        </div>
    </section>

    {{-- APPEL A REJOINDRE --}}
    <section class="relative overflow-hidden bg-congo-950 py-24 text-paper">
        <x-brand-watermark tone="gold" class="-right-24 -top-24 h-[36rem] w-[36rem]" />
        <div class="container-page relative">
            <div class="mx-auto max-w-2xl text-center">
                <p class="eyebrow reveal text-gold-300">Deux façons de vous engager</p>
                <h2 class="h-section reveal mt-3 font-semibold">Suivre, ou vous engager pleinement</h2>
                <div class="mt-10 grid gap-6 sm:grid-cols-2">
                    <div class="reveal rounded-2xl bg-paper/5 p-7 text-left ring-1 ring-paper/10">
                        <p class="h-display text-lg font-semibold text-gold-300">1. Suivre le mouvement</p>
                        <p class="mt-2 text-sm text-paper/70">
                            Inscrivez-vous pour rester informé de l'actualité de Te Litho Tenge
                            Didier et du mouvement « On ne lâche rien&nbsp;! ».
                        </p>
                    </div>
                    <div class="reveal reveal-delay-1 rounded-2xl bg-paper/5 p-7 text-left ring-1 ring-paper/10">
                        <p class="h-display text-lg font-semibold text-gold-300">2. Demander l'adhésion à ATL</p>
                        <p class="mt-2 text-sm text-paper/70">
                            Cochez une simple case dans le même formulaire pour demander à
                            rejoindre ATL. Votre demande sera examinée par l'équipe — ce n'est pas
                            une adhésion automatique.
                        </p>
                    </div>
                </div>
                <a href="{{ route('rejoindre.index') }}" class="btn-gold mt-10 inline-flex">Accéder au formulaire</a>

                <div class="mt-16 border-t border-paper/10 pt-10">
                    <p class="eyebrow text-gold-300">Réseaux sociaux</p>
                    <p class="mt-3 text-sm text-paper/70">La communauté ATL se retrouve aussi sur Facebook.</p>
                    <a href="https://fb.me/AmisdeTengeLitho" target="_blank" rel="noopener noreferrer" class="btn-secondary mt-5 inline-flex !border-paper/30 !text-paper hover:!bg-paper/10">Page Facebook officielle ATL ↗</a>
                </div>
            </div>
        </div>
    </section>
</x-layout>