@php
    $title = 'Mouvement — On ne lâche rien';
    $description = "L'esprit du mouvement porté par Te Litho Tenge Didier : constance, proximité et détermination.";
@endphp
<x-layout :title="$title" :description="$description">

    {{-- HERO --}}
    <section class="relative overflow-hidden border-b border-ink-900/10 bg-congo-950 py-24 text-paper">
        <x-brand-watermark tone="gold" class="left-1/2 top-1/2 h-[40rem] w-[40rem] -translate-x-1/2 -translate-y-1/2" />
        <div class="container-page relative max-w-3xl text-center">
            <img src="/images/brand/logo-160.png" alt="Emblème « On ne lâche rien » de Te Litho Tenge Didier" width="96" height="96" class="mx-auto h-20 w-20 rounded-full object-cover shadow-2xl ring-1 ring-paper/20">
            <p class="eyebrow mt-6 text-gold-300">Mouvement</p>
            <h1 class="h-signature mt-3 font-semibold">On ne lâche rien&nbsp;!</h1>
            <p class="mt-6 leading-relaxed text-paper/75">
                Plus qu'un slogan, une ligne de conduite : rester sur le terrain quel que soit le contexte,
                poursuivre le service quels que soient les changements de fonction, défendre une vision durable pour
                Kinshasa avec constance et discipline.
            </p>
            <div class="mt-9 flex flex-wrap justify-center gap-3">
                <a href="{{ route('rejoindre.index') }}" class="btn-gold">Rejoindre le mouvement</a>
                <a href="{{ route('atl') }}" class="btn-secondary !border-paper/30 !text-paper hover:!bg-paper/10">Découvrir ATL</a>
            </div>
        </div>
    </section>

    {{-- POURQUOI CE MOUVEMENT EXISTE --}}
    <section class="container-page py-24">
        <div class="mx-auto max-w-3xl">
            <p class="eyebrow reveal text-center">Pourquoi ce mouvement existe</p>
            <h2 class="h-section reveal mt-3 text-center font-semibold text-ink-900">Une constance, plus qu'un slogan</h2>
            <div class="reveal reveal-delay-1 mt-8 space-y-6 leading-relaxed text-ink-700">
                <p>
                    Autour de Te Litho Tenge Didier s'est constitué, au fil des années, un réseau de soutien connu sous le
                    nom d'« ATL — Les Amis de Tenge Litho ». Ce site présente ce réseau tel qu'il apparaît dans les
                    sources publiques disponibles, sans lui attribuer de statut associatif ou juridique qui n'aurait pas
                    été confirmé.
                </p>
                <p>
                    La devise « On ne lâche rien&nbsp;! » traverse chaque étape documentée de son parcours : le salongo
                    hebdomadaire à Kintambo, la ténacité dans les fonctions successives, jusqu'au message public publié le
                    7 août 2025 — « On Ne Lâche Rien&nbsp;! On Ne Lâchera Rien&nbsp;! » — à la veille de l'annonce d'un
                    remaniement gouvernemental qui mettra fin à ses fonctions ministérielles.
                </p>
            </div>
        </div>
    </section>

    {{-- SES VALEURS --}}
    <section class="border-y border-ink-900/10 bg-paper-dim py-24">
        <div class="container-page">
            <p class="eyebrow reveal text-center">Son esprit</p>
            <h2 class="h-section reveal mt-3 text-center font-semibold text-ink-900">Les valeurs qui portent le mouvement</h2>
            <div class="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ([
                    ['title' => 'Constance', 'text' => "Ne jamais lâcher, quels que soient les changements de fonction ou de contexte."],
                    ['title' => 'Proximité', 'text' => "Rester sur le terrain, au contact direct des habitants et de leurs préoccupations."],
                    ['title' => 'Service', 'text' => "Poursuivre l'action publique comme une continuité, au-delà des titres occupés."],
                    ['title' => 'Détermination', 'text' => "Défendre une vision durable pour Kinshasa avec discipline et ténacité."],
                ] as $i => $value)
                    <div class="reveal reveal-delay-{{ min(3, $i) }} rounded-2xl border border-ink-900/10 bg-white/70 p-6 text-center">
                        <p class="devise-mark text-2xl text-gold-600">{{ $i + 1 }}</p>
                        <h3 class="h-display mt-2 font-semibold text-ink-900">{{ $value['title'] }}</h3>
                        <p class="mt-2 text-sm leading-relaxed text-ink-500">{{ $value['text'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    @if($quotes->isNotEmpty())
    <section class="container-page py-24">
        <p class="eyebrow reveal text-center">Dans ses mots</p>
        <h2 class="h-section reveal mt-3 text-center font-semibold text-ink-900">Une conviction, redite dans le temps</h2>
        <div class="mx-auto mt-12 max-w-2xl space-y-8">
            @foreach ($quotes as $i => $q)
                <blockquote class="reveal reveal-delay-{{ min(3, $i) }} relative overflow-hidden rounded-2xl bg-gold-100 p-8 text-center">
                    <p class="devise-mark text-xl text-congo-950">« {{ $q->quote_text }} »</p>
                    @if($q->context)<p class="mt-2 text-xs uppercase tracking-wide text-ink-500">{{ $q->context }}</p>@endif
                    @if($q->source_url)
                        <a href="{{ $q->source_url }}" target="_blank" rel="noopener noreferrer" class="mt-2 inline-block text-xs text-congo-800 underline">{{ $q->source_label }}</a>
                    @endif
                </blockquote>
            @endforeach
        </div>
    </section>
    @endif

    @if($media->isNotEmpty())
    <section class="bg-paper-dim py-24">
        <div class="container-page">
            <p class="eyebrow reveal text-center">En images</p>
            <h2 class="h-section reveal mt-3 text-center font-semibold text-ink-900">Le mouvement, sur le terrain</h2>
            <div class="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-4">
                @foreach ($media as $i => $item)
                    <div class="reveal reveal-delay-{{ min(3, $i % 4) }} 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>
        </div>
    </section>
    @endif

    {{-- APPEL FINAL --}}
    <section class="relative overflow-hidden bg-congo-950 py-24 text-paper">
        <x-brand-watermark tone="gold" class="-left-24 -bottom-24 h-[34rem] w-[34rem]" />
        <div class="container-page relative mx-auto max-w-2xl text-center">
            <h2 class="h-section font-semibold">Faites vivre « On ne lâche rien&nbsp;! » à vos côtés</h2>
            <p class="mt-4 text-paper/70">
                Suivez l'actualité du mouvement, et si vous le souhaitez, demandez également votre adhésion à
                ATL — Les Amis de Tenge Litho. Deux engagements distincts, réunis dans un seul formulaire.
            </p>
            <div class="mt-8 flex flex-wrap justify-center gap-3">
                <a href="{{ route('rejoindre.index') }}" class="btn-gold">Rejoindre le mouvement</a>
                <a href="{{ route('atl') }}" class="btn-secondary !border-paper/30 !text-paper hover:!bg-paper/10">En savoir plus sur ATL</a>
            </div>
        </div>
    </section>
</x-layout>