@php
    $title = 'Vision pour Kinshasa';
    $description = "La vision d'une ville mieux gouvernée, portée par l'expérience de terrain de Te Litho Tenge Didier.";
@endphp
<x-layout :title="$title" :description="$description">

    <section class="border-b border-ink-900/10 bg-congo-950 py-20 text-paper">
        <div class="container-page max-w-3xl">
            <p class="eyebrow text-gold-300">Vision</p>
            <h1 class="h-display mt-3 text-4xl font-semibold sm:text-5xl">Pour une ville forte, sécurisée, entreprenante, écologique et innovante</h1>
            <p class="mt-5 leading-relaxed text-paper/75">
                Cette page ne présente pas un programme de candidature officielle. Elle expose la lecture que
                Te Litho Tenge Didier porte de la gouvernance urbaine, telle qu'elle transparaît de son parcours et
                de ses prises de position publiques documentées — une expérience qui permet d'envisager ce qu'il
                pourrait apporter à une fonction publique de plus grande ampleur.
            </p>
        </div>
    </section>

    <div class="container-page py-16">
        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($pillars as $pillar)
                <div class="rounded-2xl border border-ink-900/10 bg-white/60 p-7">
                    <h2 class="h-display text-lg font-semibold text-ink-900">{{ $pillar['title'] }}</h2>
                    <p class="mt-3 text-sm leading-relaxed text-ink-600">{{ $pillar['text'] }}</p>
                </div>
            @endforeach
        </div>
    </div>

    @if($quotes->isNotEmpty())
    <section class="bg-paper-dim py-16">
        <div class="container-page max-w-2xl text-center">
            @foreach ($quotes as $q)
                <blockquote class="h-display text-2xl font-semibold text-congo-950">« {{ $q->quote_text }} »</blockquote>
                @if($q->context)<p class="mt-2 text-sm text-ink-500">{{ $q->context }}</p>@endif
            @endforeach
        </div>
    </section>
    @endif

    <section class="container-page py-16 text-center">
        <h2 class="h-display text-2xl font-semibold text-ink-900">Une expérience au service de la transformation urbaine</h2>
        <p class="mx-auto mt-3 max-w-2xl text-ink-600">
            Dix ans de gestion communale, un passage à l'Environnement et à l'Intérieur provincial, une responsabilité
            nationale sur la politique de la ville : ce parcours forme la base d'une vision, pas une promesse.
        </p>
        <div class="mt-8 flex justify-center gap-3">
            <a href="{{ route('parcours') }}" class="btn-primary">Voir le parcours complet</a>
            <a href="{{ route('actions.index') }}" class="btn-secondary">Voir les domaines d'action</a>
        </div>
    </section>
</x-layout>