{{-- Avertissement affiché à la première visite, avec case à cocher obligatoire.
     Le choix est mémorisé sur l'appareil ; la fenêtre n'apparaît qu'une fois.
     Le contenu reste accessible à tout moment sur la page /avertissement. --}}
<div data-avertissement hidden
     class="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4"
     role="dialog" aria-modal="true" aria-labelledby="avertissement-titre">
    <div class="w-full max-w-xl overflow-hidden rounded-xl border border-line bg-surface shadow-2xl">
        <div class="encart encart--alerte rounded-none border-0 border-b border-line px-6 py-4">
            <div class="encart-titre">À lire avant d'utiliser ce site</div>
            <h2 id="avertissement-titre" class="mt-1 font-sans text-xl font-bold text-title">
                Information générale, non personnalisée
            </h2>
        </div>

        <div class="px-6 py-5">
            <p class="text-[15px] leading-relaxed text-ink">
                Ce site publie de l'information juridique générale sur les difficultés des entreprises.
                Il <strong>ne délivre aucun conseil juridique personnalisé</strong> et ne remplace ni un avocat,
                ni un administrateur ou mandataire judiciaire, ni le tribunal.
            </p>

            <ul class="mt-4 space-y-2 text-[14.5px] leading-relaxed text-ink">
                @foreach ([
                    "Les textes cités sont reproduits depuis **Légifrance** et datés ; vérifiez toujours leur version en vigueur.",
                    "Les exemples chiffrés sont **illustratifs** et ne préjugent pas de votre situation.",
                    "Une **décision engageant votre entreprise** doit être prise avec un professionnel.",
                ] as $point)
                    <li class="flex items-start gap-2">
                        <span class="mt-0.5 flex-none font-bold text-rep-blue" aria-hidden="true">&#10003;</span>
                        <span>{!! preg_replace('/\*\*(.+?)\*\*/u', '<strong>$1</strong>', e($point)) !!}</span>
                    </li>
                @endforeach
            </ul>

            <a href="{{ route('page.avertissement') }}" class="mt-4 inline-block text-sm link-blue">
                Lire l'avertissement complet
            </a>

            <label class="mt-5 flex cursor-pointer items-start gap-3 rounded-md border border-line bg-paper px-4 py-3">
                <input type="checkbox" data-avertissement-case class="mt-0.5 h-4 w-4 shrink-0 accent-[var(--color-rep-blue)]">
                <span class="text-[14.5px] leading-relaxed text-ink">
                    J'ai pris connaissance de ces informations et je comprends que ce site
                    <strong>ne constitue pas un conseil juridique personnalisé</strong>.
                </span>
            </label>
        </div>

        <div class="flex flex-wrap items-center justify-between gap-3 border-t border-line px-6 py-4">
            <span class="text-xs text-muted">Votre choix est conservé sur cet appareil.</span>
            <button type="button" data-avertissement-valider disabled
                    class="rounded-md bg-primary px-5 py-2.5 text-sm font-semibold text-white transition disabled:cursor-not-allowed disabled:opacity-40">
                J'ai compris, accéder au site
            </button>
        </div>
    </div>
</div>