{{--
    Mockup statique du Kanban de Joseph pour la landing page — pas une vraie
    capture d'écran (aucun pipeline fiable pour en exporter une depuis l'outil
    de navigation utilisé ici), mais une reconstitution fidèle aux mêmes
    classes/couleurs que `resources/views/livewire/*/kanban*.blade.php` :
    plus nette à toute résolution, et sans avoir à maintenir une image à
    chaque évolution du design réel.
--}}
<div class="overflow-hidden rounded-2xl">
    {{-- Barre de fenêtre, pour ancrer le mockup dans "une app" --}}
    <div class="flex items-center gap-1.5 border-b border-gray-950/5 bg-gray-50/80 px-4 py-3 dark:border-white/10 dark:bg-white/5">
        <span class="h-2.5 w-2.5 rounded-full bg-red-400/70"></span>
        <span class="h-2.5 w-2.5 rounded-full bg-amber-400/70"></span>
        <span class="h-2.5 w-2.5 rounded-full bg-green-400/70"></span>
        <span class="ml-3 rounded-full bg-white px-3 py-0.5 text-[11px] text-gray-400 dark:bg-gray-800 dark:text-gray-500">joseph.app / refonte-site-vitrine</span>
    </div>

    <div class="grid grid-cols-3 gap-3 p-4">
        {{-- À faire --}}
        <div class="flex flex-col gap-2">
            <div class="flex items-center gap-1.5 px-1">
                <span class="h-1.5 w-1.5 rounded-full bg-gray-400"></span>
                <span class="text-[11px] font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">À faire</span>
            </div>

            <div class="rounded-lg border border-gray-950/5 bg-white p-2.5 shadow-sm dark:border-white/10 dark:bg-gray-800">
                <p class="text-xs font-medium text-gray-800 dark:text-gray-100">Intégration front des maquettes</p>
                <div class="mt-2 flex items-center justify-between">
                    <span class="rounded-full bg-primary-50 px-1.5 py-0.5 text-[10px] font-semibold text-primary-700 dark:bg-primary-500/10 dark:text-primary-300">Tâche</span>
                    <span class="flex h-5 w-5 items-center justify-center rounded-full bg-primary-200 text-[9px] font-bold text-primary-800 dark:bg-primary-500/30 dark:text-primary-200">MK</span>
                </div>
            </div>

            <div class="rounded-lg border border-gray-950/5 bg-white p-2.5 shadow-sm dark:border-white/10 dark:bg-gray-800">
                <p class="text-xs font-medium text-gray-800 dark:text-gray-100">Formulaire de contact + RGPD</p>
                <div class="mt-2 flex items-center justify-between">
                    <span class="rounded-full bg-primary-50 px-1.5 py-0.5 text-[10px] font-semibold text-primary-700 dark:bg-primary-500/10 dark:text-primary-300">Tâche</span>
                    <span class="flex h-5 w-5 items-center justify-center rounded-full bg-amber-200 text-[9px] font-bold text-amber-800 dark:bg-amber-500/30 dark:text-amber-200">TB</span>
                </div>
            </div>
        </div>

        {{-- En cours --}}
        <div class="flex flex-col gap-2">
            <div class="flex items-center gap-1.5 px-1">
                <span class="h-1.5 w-1.5 rounded-full bg-blue-400"></span>
                <span class="text-[11px] font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">En cours</span>
            </div>

            <div class="rounded-lg border border-gray-950/5 bg-white p-2.5 shadow-sm dark:border-white/10 dark:bg-gray-800">
                <p class="text-xs font-medium text-gray-800 dark:text-gray-100">Maquettes page d'accueil</p>
                <div class="mt-2 flex items-center justify-between">
                    <span class="rounded-full bg-primary-50 px-1.5 py-0.5 text-[10px] font-semibold text-primary-700 dark:bg-primary-500/10 dark:text-primary-300">Tâche</span>
                    <span class="flex h-5 w-5 items-center justify-center rounded-full bg-rose-200 text-[9px] font-bold text-rose-800 dark:bg-rose-500/30 dark:text-rose-200">LB</span>
                </div>
                <div class="mt-2 h-1 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-white/10">
                    <div class="h-full w-2/3 rounded-full bg-primary-500"></div>
                </div>
            </div>
        </div>

        {{-- Bloqué --}}
        <div class="flex flex-col gap-2">
            <div class="flex items-center gap-1.5 px-1">
                <span class="h-1.5 w-1.5 rounded-full bg-red-400"></span>
                <span class="text-[11px] font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Bloqué</span>
            </div>

            <div class="rounded-lg border border-gray-950/5 bg-white p-2.5 shadow-sm dark:border-white/10 dark:bg-gray-800">
                <p class="text-xs font-medium text-gray-800 dark:text-gray-100">Valider la charte avec la direction</p>
                <div class="mt-2 flex items-center justify-between">
                    <span class="rounded-full bg-danger-50 px-1.5 py-0.5 text-[10px] font-semibold text-danger-700 dark:bg-danger-500/10 dark:text-danger-300">Bloqué</span>
                    <span class="flex h-5 w-5 items-center justify-center rounded-full bg-primary-200 text-[9px] font-bold text-primary-800 dark:bg-primary-500/30 dark:text-primary-200">CR</span>
                </div>
            </div>

            <div class="rounded-lg border border-dashed border-gray-950/10 p-2.5 text-center dark:border-white/10">
                <span class="text-[10px] text-gray-400 dark:text-gray-500">+ 1 autre</span>
            </div>
        </div>
    </div>
</div>