{{--
    Second mockup, en arrière-plan du Kanban dans le hero — un aperçu de
    planning Gantt, volontairement plus schématique puisqu'il n'est vu qu'en
    partie. Même logique que `kanban-mock.blade.php` : reconstitution stylée,
    pas une capture.
--}}
<div class="p-5">
    <div class="flex flex-col gap-2.5">
        @foreach ([
            ['label' => 'Maquettes & identité visuelle', 'offset' => 4, 'width' => 34, 'shade' => 'bg-primary-700'],
            ['label' => 'Benchmark concurrents', 'offset' => 4, 'width' => 14, 'shade' => 'bg-primary-400'],
            ['label' => 'Moodboard et palette', 'offset' => 16, 'width' => 12, 'shade' => 'bg-primary-400'],
            ['label' => 'Développement', 'offset' => 38, 'width' => 40, 'shade' => 'bg-primary-700'],
            ['label' => 'Intégration front', 'offset' => 40, 'width' => 22, 'shade' => 'bg-primary-400'],
            ['label' => 'Mise en ligne', 'offset' => 80, 'width' => 3, 'shade' => 'bg-amber-500'],
        ] as $row)
            <div class="flex items-center gap-3">
                <span class="w-28 shrink-0 truncate text-[10px] text-gray-500 dark:text-gray-400">{{ $row['label'] }}</span>
                <div class="relative h-2.5 w-full rounded-full bg-gray-100 dark:bg-white/5">
                    <div
                        class="absolute top-0 h-full rounded-full {{ $row['shade'] }}"
                        style="left: {{ $row['offset'] }}%; width: {{ $row['width'] }}%"
                    ></div>
                </div>
            </div>
        @endforeach
    </div>
</div>