@php
    $title = 'Te Litho Tenge Didier';
    $description = "Une histoire de terrain, de service et de détermination : parcours, chronologie et archives de Te Litho Tenge Didier au service de Kintambo, de Kinshasa et de la RDC.";
    $structuredData = [
        '@context' => 'https://schema.org',
        '@type' => 'Person',
        'name' => 'Te Litho Tenge Didier',
        'alternateName' => ['Tenge Te Litho', 'Didier Tenge'],
        'description' => 'Personnalité politique et homme de terrain en République démocratique du Congo, ancien Bourgmestre de Kintambo.',
        'url' => url('/'),
        'image' => $heroImages->first()?->largeUrlAbsolute() ?? (request()->getSchemeAndHttpHost().\Illuminate\Support\Facades\Storage::disk('public')->url('media/large/img-05109.jpg')),
        'nationality' => 'Congolaise (RDC)',
        'sameAs' => [
            'https://telithotenge.cd/',
            'https://www.facebook.com/tengedidier.telitho',
            'https://x.com/Didiertenge1',
            'https://www.youtube.com/@telithotenge73',
        ],
    ];
    $ogImage = $heroImages->first()?->largeUrlAbsolute();
@endphp

<x-layout :title="$title" :description="$description" :structured-data="$structuredData" :og-image="$ogImage">

    {{-- HERO --}}
    <section class="relative overflow-hidden bg-congo-950 text-paper">
        {{-- Lumiere et profondeur : vignette douce + lueur or au-dessus du carrousel --}}
        <div class="pointer-events-none absolute inset-0" aria-hidden="true">
            <div class="absolute -right-24 -top-24 h-[32rem] w-[32rem] rounded-full bg-gold-500/10 blur-3xl"></div>
            <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-congo-950 via-transparent to-transparent"></div>
        </div>
        <x-brand-watermark tone="gold" class="-right-16 -top-20 hidden h-[34rem] w-[34rem] lg:block" />

        <div class="container-page relative py-20 sm:py-24 lg:py-32">
            <div class="grid items-center gap-14 lg:grid-cols-12">
                <div class="lg:col-span-7">
                    <div class="flex items-center gap-4">
                        <picture>
                            <source srcset="/images/brand/logo-160.webp" type="image/webp">
                            <img src="/images/brand/logo-160.png" alt="Emblème « On ne lâche rien » de Te Litho Tenge Didier" width="72" height="72" class="h-16 w-16 rounded-full object-cover shadow-2xl ring-1 ring-paper/20 sm:h-[4.5rem] sm:w-[4.5rem]" loading="eager" fetchpriority="high">
                        </picture>
                        <p class="eyebrow text-gold-300">Une histoire de terrain, de service et de détermination</p>
                    </div>

                    <h1 class="h-signature mt-6 font-semibold text-paper">Te Litho<br class="hidden sm:block"> Tenge Didier</h1>
                    <p class="mt-6 max-w-xl text-lg leading-relaxed text-paper/75">
                        De Kintambo aux responsabilités provinciales et nationales — le parcours, les actions
                        documentées et la vision d'un homme de terrain engagé au service de Kinshasa et de ses
                        habitants.
                    </p>

                    <p class="devise-mark mt-9 text-3xl font-semibold text-gold-300">« On ne lâche rien&nbsp;! »</p>

                    <div class="mt-10 flex flex-wrap gap-3">
                        <a href="{{ route('parcours') }}" class="btn-gold">Découvrir son parcours</a>
                        <a href="{{ route('galerie.index') }}" class="btn-secondary !border-paper/30 !text-paper hover:!bg-paper/10">Explorer les archives</a>
                        <a href="{{ route('vision') }}" class="btn-secondary !border-paper/30 !text-paper hover:!bg-paper/10">Voir sa vision</a>
                    </div>
                </div>

                <div class="lg:col-span-5">
                    @if ($heroImages->isNotEmpty())
                        @php
                            $narrativeChapters = ["L'homme", 'Le terrain', 'La population', 'La responsabilité', 'La vision'];
                        @endphp
                        <div
                            id="hero-carousel"
                            class="relative overflow-hidden rounded-3xl bg-ink-900/40 shadow-2xl ring-1 ring-paper/10"
                            role="region"
                            aria-roledescription="carrousel"
                            aria-label="Photographies de Te Litho Tenge Didier"
                            data-interval="6500"
                            tabindex="0"
                        >
                            <div class="relative aspect-[4/5] sm:aspect-[16/11] lg:aspect-[4/5]">
                                @foreach ($heroImages as $i => $img)
                                    <figure
                                        class="hero-slide absolute inset-0 transition-opacity duration-700 ease-in-out {{ $i === 0 ? 'z-10 opacity-100' : 'z-0 opacity-0' }}"
                                        data-index="{{ $i }}"
                                        aria-hidden="{{ $i === 0 ? 'false' : 'true' }}"
                                    >
                                        <picture>
                                            <source srcset="{{ $img->variant('large', 'webp') }}" type="image/webp">
                                            <img
                                                src="{{ $img->variant('large', 'jpg') }}"
                                                alt="{{ $img->hero_title ? $img->hero_title.' — Te Litho Tenge Didier' : ($img->alt ?: 'Te Litho Tenge Didier') }}"
                                                width="{{ $img->width }}"
                                                height="{{ $img->height }}"
                                                style="{{ $img->focalPointCss() }}"
                                                class="h-full w-full object-cover"
                                                loading="{{ $i === 0 ? 'eager' : 'lazy' }}"
                                                fetchpriority="{{ $i === 0 ? 'high' : 'auto' }}"
                                                decoding="async"
                                            >
                                        </picture>
                                        <figcaption class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-ink-900/90 via-ink-900/30 to-transparent p-5 pt-14">
                                            <p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-gold-400">
                                                {{ sprintf('%02d', $i + 1) }} — {{ $narrativeChapters[$i % 5] }}
                                            </p>
                                            @if ($img->hero_caption)
                                                <p class="mt-1 text-sm font-medium text-paper">{{ $img->hero_caption }}</p>
                                            @endif
                                        </figcaption>
                                    </figure>
                                @endforeach
                            </div>

                            @if ($heroImages->count() > 1)
                                <button type="button" class="hero-prev absolute left-3 top-1/2 z-20 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-ink-900/40 text-paper backdrop-blur transition hover:bg-ink-900/70" aria-label="Photo précédente">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
                                </button>
                                <button type="button" class="hero-next absolute right-3 top-1/2 z-20 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-ink-900/40 text-paper backdrop-blur transition hover:bg-ink-900/70" aria-label="Photo suivante">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                                </button>
                                <div class="absolute bottom-3 left-1/2 z-20 flex -translate-x-1/2 gap-2" role="tablist" aria-label="Sélection de la photo">
                                    @foreach ($heroImages as $i => $img)
                                        <button
                                            type="button"
                                            class="hero-dot h-2 w-2 rounded-full transition {{ $i === 0 ? 'bg-gold-400' : 'bg-paper/40' }}"
                                            data-index="{{ $i }}"
                                            role="tab"
                                            aria-selected="{{ $i === 0 ? 'true' : 'false' }}"
                                            aria-label="Aller à la photo {{ $i + 1 }} sur {{ $heroImages->count() }}"
                                        ></button>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- INTRO --}}
    <section class="container-page py-20">
        <div class="grid gap-12 lg:grid-cols-12">
            <div class="lg:col-span-5">
                <p class="eyebrow">L'homme de Kintambo</p>
                <h2 class="h-display mt-3 text-3xl font-semibold text-ink-900">Un juriste devenu homme de terrain</h2>
                <p class="mt-5 leading-relaxed text-ink-700">
                    Juriste de formation, Te Litho Tenge Didier a construit un parcours institutionnel bâti sur la
                    proximité : dix années à la tête de la commune de Kintambo, un passage par l'Assemblée provinciale
                    et l'exécutif de Kinshasa, puis une responsabilité nationale consacrée à la politique de la ville.
                </p>
                <p class="mt-4 leading-relaxed text-ink-700">
                    Ce site rassemble, pour la première fois, les archives documentées de ce parcours : des milliers
                    de photographies de terrain, des décisions administratives, une chronologie sourcée — la mémoire
                    numérique d'un engagement continu pour Kinshasa.
                </p>
                <a href="{{ route('parcours') }}" class="btn-primary mt-8">Lire le parcours complet</a>
            </div>
            <div class="lg:col-span-7">
                <ol class="space-y-6 border-l-2 border-gold-500/40 pl-6">
                    @foreach ($periods as $period)
                        <li>
                            <a href="{{ route('chronologie.show', $period) }}" class="group block">
                                <p class="text-xs font-semibold uppercase tracking-widest text-gold-600">
                                    {{ $period->start_year }}{{ $period->end_year ? '–'.$period->end_year : ' — aujourd\'hui' }}
                                </p>
                                <h3 class="h-display mt-1 text-xl font-semibold text-ink-900 group-hover:text-congo-800">{{ $period->title }}</h3>
                                <p class="mt-1 text-sm text-ink-500">{{ $period->summary }}</p>
                            </a>
                        </li>
                    @endforeach
                </ol>
                <a href="{{ route('chronologie.index') }}" class="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-congo-800 hover:text-congo-900">
                    Explorer la chronologie complète
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                </a>
            </div>
        </div>
    </section>

    {{-- GALERIE DE TERRAIN --}}
    <section class="bg-paper-dim py-24">
        <div class="container-page">
            <div class="flex flex-wrap items-end justify-between gap-4">
                <div class="reveal">
                    <p class="eyebrow">L'homme de terrain</p>
                    <h2 class="h-section mt-3 font-semibold text-ink-900">Archives de proximité</h2>
                </div>
                <a href="{{ route('galerie.index') }}" class="btn-secondary">Voir toute la galerie</a>
            </div>

            @if ($terrainGallery->isNotEmpty())
                @php $feature = $terrainGallery->first(); $rest = $terrainGallery->slice(1); @endphp

                {{-- Grande image mise en scene, avec legende reelle (evenement, lieu, date) --}}
                <a href="{{ route('galerie.index', ['categorie' => $feature->category]) }}"
                   class="reveal group relative mt-14 block overflow-hidden rounded-3xl bg-ink-900/5 shadow-xl">
                    <x-media-picture :media="$feature" size="large" img-class="aspect-[16/9] w-full object-cover transition duration-700 ease-out group-hover:scale-[1.02] sm:aspect-[21/9]" />
                    <div class="absolute inset-0 bg-gradient-to-t from-ink-900/85 via-ink-900/10 to-transparent"></div>
                    @if ($feature->event || $feature->date || $feature->location)
                        <div class="absolute inset-x-0 bottom-0 p-6 sm:p-8">
                            @if ($feature->date)
                                <p class="text-xs font-semibold uppercase tracking-[0.2em] text-gold-400">{{ $feature->date->translatedFormat('d F Y') }}</p>
                            @endif
                            @if ($feature->event)
                                <p class="h-display mt-1 text-xl font-semibold text-paper sm:text-2xl">{{ $feature->event }}</p>
                            @endif
                            @if ($feature->location)
                                <p class="mt-1 text-sm text-paper/70">{{ $feature->location }}</p>
                            @endif
                        </div>
                    @endif
                </a>

                {{-- Respiration, puis quelques moments plus discrets --}}
                @if ($rest->isNotEmpty())
                    <div class="mt-8 grid grid-cols-2 gap-5 sm:grid-cols-4">
                        @foreach ($rest as $i => $media)
                            <a href="{{ route('galerie.index', ['categorie' => $media->category]) }}"
                               class="reveal reveal-delay-{{ min(3, $i + 1) }} group relative block overflow-hidden rounded-xl bg-ink-900/5">
                                <x-media-picture :media="$media" size="medium" img-class="aspect-square w-full object-cover transition duration-500 group-hover:scale-105" />
                                @if ($media->event)
                                    <div class="absolute inset-0 flex items-end bg-gradient-to-t from-ink-900/75 via-transparent to-transparent p-3 opacity-0 transition group-hover:opacity-100">
                                        <p class="text-xs font-medium text-paper">{{ $media->event }}</p>
                                    </div>
                                @endif
                            </a>
                        @endforeach
                    </div>
                @endif
            @endif
        </div>
    </section>

    {{-- DOMAINES D'ACTION --}}
    <section class="container-page py-20">
        <p class="eyebrow">Domaines d'action documentés</p>
        <h2 class="h-display mt-3 text-3xl font-semibold text-ink-900">Une méthode, appliquée sur le terrain</h2>

        <div class="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($domains as $domain)
                <a href="{{ route('actions.show', $domain) }}" class="group rounded-2xl border border-ink-900/10 bg-white/60 p-6 transition hover:border-congo-800/30 hover:shadow-lg">
                    <h3 class="h-display text-lg font-semibold text-ink-900 group-hover:text-congo-800">{{ $domain->title }}</h3>
                    <p class="mt-2 text-sm leading-relaxed text-ink-500">{{ \Illuminate\Support\Str::limit($domain->context, 130) }}</p>
                    <span class="mt-4 inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-gold-600">
                        Découvrir
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-3.5 w-3.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                    </span>
                </a>
            @endforeach
        </div>
        <a href="{{ route('actions.index') }}" class="mt-8 inline-block btn-secondary">Tous les domaines d'action</a>
    </section>

    {{-- UN PARCOURS EN QUELQUES CHIFFRES --}}
    <section class="border-y border-ink-900/10 bg-paper-dim py-20">
        <div class="container-page">
            <p class="eyebrow text-center">Un parcours en quelques chiffres</p>
            <h2 class="h-section mt-3 text-center font-semibold text-ink-900">Ce que documente ce site, aujourd'hui</h2>

            <dl class="reveal mt-14 grid grid-cols-2 gap-x-6 gap-y-12 sm:grid-cols-3 lg:grid-cols-5">
                @foreach ($stats as $stat)
                    <div class="text-center">
                        <dt class="h-display text-4xl font-semibold text-congo-900 sm:text-5xl">
                            <span data-counter data-counter-target="{{ $stat['value'] }}" data-counter-suffix="{{ $stat['suffix'] }}">{{ number_format($stat['value'], 0, ',', ' ') }}{{ $stat['suffix'] }}</span>
                        </dt>
                        <dd class="mt-2 text-xs uppercase tracking-wide text-ink-500 sm:text-sm">{{ $stat['label'] }}</dd>
                    </div>
                @endforeach
            </dl>
        </div>
    </section>

    {{-- DEVISE --}}
    <section class="relative overflow-hidden bg-congo-900 py-24 text-paper">
        <x-brand-watermark tone="gold" class="left-1/2 top-1/2 h-[46rem] w-[46rem] -translate-x-1/2 -translate-y-1/2 opacity-[0.04]" />
        <div class="container-page relative max-w-3xl text-center">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="mx-auto h-8 w-8 text-gold-400"><path d="M7.17 6A5.17 5.17 0 002 11.17V18h6.83v-6.83H4.5a2.67 2.67 0 012.67-2.67V6zm10 0a5.17 5.17 0 00-5.17 5.17V18H18.8v-6.83h-4.33a2.67 2.67 0 012.67-2.67V6z"/></svg>
            <blockquote class="h-display mt-6 text-3xl font-semibold sm:text-4xl">{{ $quote->quote_text ?? 'On ne lâche rien !' }}</blockquote>
            @if($quote)
                <p class="mt-4 text-sm text-paper/60">{{ $quote->context }}</p>
            @endif
            <p class="mx-auto mt-6 max-w-xl text-paper/70">
                Ne rien lâcher face aux difficultés, rester proche du terrain, poursuivre le service malgré les
                changements de fonction — une constance revendiquée, y compris dans les moments les plus incertains.
            </p>
        </div>
    </section>

    {{-- VIDEO --}}
    @if($video)
    <section class="container-page py-24">
        <p class="eyebrow reveal">En images</p>
        <h2 class="h-section reveal mt-3 font-semibold text-ink-900">Regarder ses interventions</h2>
        <div class="mt-10 grid gap-8 lg:grid-cols-12">
            <div class="reveal lg:col-span-8">
                <x-youtube-facade :video="$video" class="aspect-video w-full rounded-2xl" />
                <h3 class="h-display mt-4 text-xl font-semibold text-ink-900">{{ $video->title }}</h3>
                @if ($video->description)
                    <p class="mt-1 text-sm text-ink-500">{{ $video->description }}</p>
                @endif
            </div>
            <div class="reveal reveal-delay-1 flex flex-col justify-center rounded-2xl bg-paper-dim p-8 lg:col-span-4">
                <p class="h-display text-lg font-semibold text-ink-900">Chaîne officielle YouTube</p>
                <p class="mt-2 text-sm text-ink-600">Discours, interviews et archives de terrain, publiés sur la chaîne @telithotenge73.</p>
                <a href="https://www.youtube.com/@telithotenge73" target="_blank" rel="noopener noreferrer" class="btn-primary mt-6">Voir la chaîne</a>
                <a href="{{ route('videos.index') }}" class="mt-3 text-center text-sm font-semibold text-congo-800 hover:underline">Toutes les vidéos</a>
            </div>
        </div>
    </section>
    @endif

    {{-- CONTACT CTA --}}
    <section class="container-page pb-24">
        <div class="flex flex-col items-start justify-between gap-6 rounded-3xl bg-gold-100 p-10 sm:flex-row sm:items-center">
            <div>
                <h2 class="h-display text-2xl font-semibold text-congo-950">Une question, une invitation, un projet ?</h2>
                <p class="mt-2 text-sm text-ink-600">L'équipe institutionnelle reste joignable via le formulaire de contact.</p>
            </div>
            <a href="{{ route('contact.index') }}" class="btn-primary">Contacter l'équipe</a>
        </div>
    </section>
</x-layout>