@php
    $stackBadge = $site['stack'] === 'laravel'
        ? 'bg-red-500/10 text-red-300 ring-red-500/20'
        : 'bg-emerald-500/10 text-emerald-300 ring-emerald-500/20';

    // Logo = vrai favicon du site. Prod → service DuckDuckGo (le plus fiable, renvoie
    // un vrai PNG pour tout domaine) ; local-only → /favicon.ico. Cascade de replis :
    // DuckDuckGo → /favicon.png → /favicon.ico → monogramme (les SPA renvoient du HTML
    // sur /favicon.ico, d'où la cascade qui retombe proprement sur le monogramme).
    $origin    = $site['prod_url'] ?: $site['local_url'];
    $host      = parse_url($origin, PHP_URL_HOST);
    $base      = rtrim($origin, '/');
    if (! empty($site['prod_url'])) {
        $faviconPrimary = 'https://icons.duckduckgo.com/ip3/' . $host . '.ico';
        $faviconFallb   = $base . '/favicon.png,' . $base . '/favicon.ico';
    } else {
        $faviconPrimary = $base . '/favicon.png';
        $faviconFallb   = $base . '/favicon.ico';
    }
    // Logo dédié posé à la main : public/logos/{clé}.(png|svg|jpg|webp) → prioritaire
    // sur le favicon auto (utile pour les apps privées/local sans favicon public, ex. Evio).
    foreach (['png', 'svg', 'jpg', 'jpeg', 'webp'] as $ext) {
        if (is_file(public_path("logos/{$site['key']}.$ext"))) {
            $faviconFallb   = $faviconPrimary . ',' . $faviconFallb; // l'auto devient un repli
            $faviconPrimary = asset("logos/{$site['key']}.$ext") . '?v=1';
            break;
        }
    }
    $initials = strtoupper(mb_substr(preg_replace('/[^A-Za-z0-9]/u', '', $site['name']) ?: '?', 0, 2));
    $palette  = ['#6366f1','#0ea5e9','#10b981','#f59e0b','#ef4444','#8b5cf6','#ec4899','#14b8a6','#f97316','#3b82f6'];
    $logoBg   = $palette[abs(crc32($site['key'])) % count($palette)];
    $auditable = $site['seo'] ?? true;

    // Famille / marque (config/familles.php) + rang pour le tri groupé.
    $famOrder  = config('familles.order', []);
    $famille   = config('familles.map.' . $site['key']) ?? 'Divers';
    $famRank   = array_search($famille, $famOrder);
    $famRank   = $famRank === false ? 99 : $famRank;
@endphp
<div data-key="{{ $site['key'] }}"
     data-name="{{ \Illuminate\Support\Str::lower($site['name']) }}"
     data-port="{{ (int) parse_url($site['local_url'], PHP_URL_PORT) }}"
     data-group="{{ $site['group'] ?? 'Sites' }}"
     data-famille="{{ $famille }}"
     data-forder="{{ $famRank }}"
     class="site-card rounded-xl border border-slate-800 bg-slate-900/60 hover:border-slate-700 p-5 flex flex-col gap-4 transition {{ $site['up'] ? '' : 'opacity-60' }}">

    {{-- En-tête : logo + nom + état --}}
    <div class="flex items-start gap-3">
        <div class="relative h-11 w-11 shrink-0 rounded-lg overflow-hidden ring-1 ring-slate-700 flex items-center justify-center" style="background: {{ $logoBg }}">
            <span class="text-sm font-bold text-white/90 select-none">{{ $initials }}</span>
            <img src="{{ $faviconPrimary }}" alt="" loading="lazy" data-fb="{{ $faviconFallb }}"
                 class="absolute inset-0 h-full w-full object-contain bg-white p-1"
                 style="opacity:0; transition:opacity .2s"
                 onload="this.style.opacity=1"
                 onerror="var f=(this.dataset.fb||'').split(',').filter(Boolean); if(f.length){this.src=f.shift();this.dataset.fb=f.join(',');}else{this.remove();}">
        </div>
        <div class="min-w-0 flex-1">
            <div class="flex items-center gap-2">
                <h3 class="font-semibold truncate uppercase">{{ $site['name'] }}</h3>
                <span class="shrink-0 text-[9px] uppercase tracking-wide rounded px-1.5 py-0.5 ring-1 {{ $stackBadge }}">{{ $site['stack'] }}</span>
            </div>
            <div class="flex items-center gap-2 mt-1">
                <span data-dot class="h-2 w-2 rounded-full {{ $site['up'] ? 'bg-emerald-400 shadow-[0_0_8px] shadow-emerald-400/60' : 'bg-red-500' }}"></span>
                <span data-label class="text-xs {{ $site['up'] ? 'text-emerald-400' : 'text-red-400' }}">
                    {{ $site['up'] ? 'en ligne · '.$site['status'] : ($site['status'] ? 'erreur '.$site['status'] : 'hors ligne') }}
                </span>
                @if (!empty($site['has_leads']))
                    <a href="{{ route('prospects') }}" class="text-[11px] text-slate-500 hover:text-indigo-300 transition" data-leads-text>· …</a>
                @endif
            </div>
        </div>
        <button type="button" onclick="openSite('{{ $site['key'] }}')" title="Fiche détaillée : identité, accès, git, audit, prospects"
                class="shrink-0 -mt-1 -mr-1 h-7 w-7 grid place-items-center rounded-lg text-slate-500 hover:text-slate-100 hover:bg-slate-800 transition text-sm">ⓘ</button>
    </div>

    {{-- Accès aux supports --}}
    <div class="flex flex-wrap items-center gap-1.5 text-xs">
        @if ($site['admin_url'])
            <a href="{{ $site['admin_url'] }}" target="_blank" rel="noopener"
               title="Back-office / tableau de bord d'administration de {{ $site['name'] }} — {{ $site['admin_url'] }}"
               class="rounded-lg bg-indigo-600 hover:bg-indigo-500 px-2.5 py-1 font-medium transition">Admin →</a>
        @endif
        <a href="{{ $site['local_url'] }}" target="_blank" rel="noopener"
           title="Ouvrir le serveur de développement local — {{ $site['local_url'] }}"
           class="rounded-lg bg-slate-800 hover:bg-slate-700 px-2.5 py-1 transition">Local ↗</a>
        @if ($site['prod_url'])
            <a href="{{ $site['prod_url'] }}" target="_blank" rel="noopener"
               title="Ouvrir le site en ligne (production) — {{ $site['prod_url'] }}"
               class="rounded-lg bg-slate-800 hover:bg-slate-700 px-2.5 py-1 transition">Prod ↗</a>
        @else
            <span class="rounded-lg bg-slate-900 text-slate-600 px-2.5 py-1" title="Aucune URL de production connue pour ce site">Prod —</span>
        @endif
    </div>

    {{-- Pastilles git : orange = à faire, gris = à jour --}}
    <div data-git="{{ $site['key'] }}" class="flex flex-wrap items-center gap-1"></div>

    {{-- Incidents récents (7 j) : muet quand il n'y a rien à signaler.
         alerts.json est un journal d'événements : on annonce « il s'est passé
         quelque chose », l'état réel du site est donné par la pastille ci-dessous. --}}
    @php
        $siteAlerts = ($alerts ?? [])[$site['key']] ?? [];
        $critCount  = count(array_filter($siteAlerts, fn ($a) => ($a['level'] ?? '') === 'crit'));
        $tone       = $critCount ? 'text-red-400' : 'text-amber-400';
        $icons      = ['down' => '🔴', 'ssl' => '🔒', 'seo' => '📉', 'lead' => '📥'];
    @endphp
    @if ($siteAlerts)
        <details class="group/al text-xs">
            <summary class="cursor-pointer list-none flex items-center gap-1.5 {{ $tone }} hover:brightness-125 select-none py-0.5">
                <span class="h-1.5 w-1.5 rounded-full shrink-0 {{ $critCount ? 'bg-red-500' : 'bg-amber-500' }}"></span>
                <span class="font-semibold">{{ count($siteAlerts) }} incident{{ count($siteAlerts) > 1 ? 's' : '' }}</span>
                <span class="text-slate-600 text-[11px]">7 j{{ $critCount ? ' · ' . $critCount . ' critique' . ($critCount > 1 ? 's' : '') : '' }}</span>
                <span class="ml-auto text-slate-600 transition-transform group-open/al:rotate-90">›</span>
            </summary>
            <div class="mt-1.5 pl-2.5 border-l border-slate-800 space-y-1">
                @foreach (array_slice($siteAlerts, 0, 5) as $a)
                    <div class="flex items-start gap-1.5 leading-tight">
                        <span class="shrink-0 text-[10px]">{{ $icons[$a['type'] ?? ''] ?? '⚠️' }}</span>
                        <span class="min-w-0 flex-1 {{ ($a['level'] ?? '') === 'crit' ? 'text-red-300/90' : 'text-slate-400' }} text-[11px]">{{ $a['message'] ?? '' }}</span>
                        <span class="shrink-0 text-slate-600 text-[10px] tabular-nums">{{ \Illuminate\Support\Carbon::parse($a['at'])->format('d/m H\hi') }}</span>
                    </div>
                @endforeach
                @if (count($siteAlerts) > 5)
                    <a href="{{ route('alertes') }}" class="block text-[10px] text-slate-500 hover:text-slate-300">+ {{ count($siteAlerts) - 5 }} autre(s) · tout voir ›</a>
                @endif
            </div>
        </details>
    @endif

    {{-- Disponibilité : menu déroulant (état + historique des coupures, agent VPS 24/7) --}}
    <details class="group/up text-xs -mt-1">
        <summary class="cursor-pointer list-none flex items-center gap-1.5 text-slate-500 hover:text-slate-300 select-none py-0.5">
            <span data-uptime-dot="{{ $site['key'] }}" class="h-1.5 w-1.5 rounded-full bg-slate-600 shrink-0"></span>
            <span>Disponibilité</span>
            <span data-uptime-sum="{{ $site['key'] }}" class="text-slate-600 text-[11px]"></span>
            <span class="ml-auto text-slate-600 transition-transform group-open/up:rotate-90">›</span>
        </summary>
        <div data-uptime-body="{{ $site['key'] }}" class="mt-1.5 pl-2.5 border-l border-slate-800"></div>
    </details>

    {{-- Sauvegarde : dernière + historique. Muet si le site n'a rien à sauvegarder
         (site statique sans base) ; rouge si trop ancienne ou en échec. --}}
    @php
        $bkHist = array_reverse(($backups ?? [])[$site['key']] ?? []);   // plus récente d'abord
        $bkLast = $bkHist[0] ?? null;
        // diffInHours() renvoie un FLOTTANT (Carbon 3) : sans cast, l'écran
        // affichait « il y a 2.2240379897222 h ».
        $bkAge  = $bkLast && ! empty($bkLast['at']) ? (int) \Illuminate\Support\Carbon::parse($bkLast['at'])->diffInHours(now()) : null;
        $bkBad  = $bkLast && (! ($bkLast['ok'] ?? true) || ($bkAge !== null && $bkAge > 48));
        $bkTone = $bkBad ? 'text-red-400' : 'text-slate-500';
        $bkDot  = $bkBad ? 'bg-red-500' : 'bg-emerald-500';
    @endphp
    @if ($bkLast)
        <details class="group/bk text-xs">
            <summary class="cursor-pointer list-none flex items-center gap-1.5 {{ $bkTone }} hover:text-slate-300 select-none py-0.5">
                <span class="h-1.5 w-1.5 rounded-full shrink-0 {{ $bkDot }}"></span>
                <span>Sauvegarde</span>
                <span class="text-slate-600 text-[11px]">
                    {{ $bkAge !== null ? ($bkAge < 1 ? "à l'instant" : ($bkAge < 24 ? "il y a {$bkAge} h" : 'il y a ' . intdiv($bkAge, 24) . ' j')) : '—' }}
                    @if (! empty($bkLast['size_mb'])) · {{ $bkLast['size_mb'] }} Mo @endif
                </span>
                <span class="ml-auto text-slate-600 transition-transform group-open/bk:rotate-90">›</span>
            </summary>
            <div class="mt-1.5 pl-2.5 border-l border-slate-800 space-y-0.5">
                @foreach (array_slice($bkHist, 0, 6) as $b)
                    <div class="flex items-center gap-1.5 text-[11px] leading-tight">
                        <span class="shrink-0">{{ ($b['ok'] ?? true) ? '✅' : '❌' }}</span>
                        <span class="text-slate-500 tabular-nums">{{ \Illuminate\Support\Carbon::parse($b['at'])->format('d/m H\hi') }}</span>
                        <span class="text-slate-600 tabular-nums">{{ ! empty($b['size_mb']) ? $b['size_mb'] . ' Mo' : '' }}</span>
                        @if (! empty($b['items'])) <span class="text-slate-700">{{ implode(', ', $b['items']) }}</span> @endif
                        @if (! empty($b['error'])) <span class="text-red-400/80 truncate">{{ $b['error'] }}</span> @endif
                    </div>
                @endforeach
                @if (! empty($bkLast['server']))
                    <div class="text-[10px] text-slate-700 pt-0.5">serveur : {{ $bkLast['server'] }}</div>
                @endif
            </div>
        </details>
    @endif

    {{-- Rapport mensuel du site (généré par hub:monthly-report) --}}
    @php $siteReports = ($reports ?? [])[$site['key']] ?? []; @endphp
    @if ($siteReports)
        <div class="flex items-center gap-1.5 text-xs text-slate-500">
            <span class="h-1.5 w-1.5 rounded-full bg-slate-600 shrink-0"></span>
            <span>Rapport</span>
            <a href="{{ route('reports.show', $siteReports[0]) }}" target="_blank" rel="noopener"
               class="text-[11px] text-indigo-400 hover:text-indigo-300 hover:underline">
                {{ \Illuminate\Support\Carbon::createFromFormat('Y-m', preg_replace('/^mensuel-.+-(\d{4}-\d{2})\.html$/', '$1', $siteReports[0]))->translatedFormat('F Y') }} ›
            </a>
            @if (count($siteReports) > 1)
                <span class="text-slate-700 text-[10px]">+{{ count($siteReports) - 1 }} précédent(s)</span>
            @endif
        </div>
    @endif

    {{-- Pied : adresses (publique + locale) + note d'audit --}}
    <div class="flex items-end justify-between gap-3 mt-auto pt-1">
        <div class="text-[11px] min-w-0 leading-tight space-y-0.5">
            @if ($site['prod_url'])
                <div class="flex items-center gap-1.5 min-w-0" title="Adresse publique en ligne">
                    <span class="text-[9px] uppercase tracking-wide text-slate-600 shrink-0">web</span>
                    <a href="{{ $site['prod_url'] }}" target="_blank" rel="noopener" class="text-slate-400 hover:text-indigo-300 truncate transition">{{ str_replace(['https://','http://'], '', rtrim($site['prod_url'], '/')) }}</a>
                </div>
            @endif
            <div class="flex items-center gap-1.5 min-w-0" title="Adresse locale (serveur de dev)">
                <span class="text-[9px] uppercase tracking-wide text-slate-600 shrink-0">local</span>
                <a href="{{ $site['local_url'] }}" target="_blank" rel="noopener" class="text-slate-500 hover:text-indigo-300 truncate transition">{{ str_replace(['http://','https://'], '', $site['local_url']) }}</a>
            </div>
        </div>
        @if ($auditable)
            <button type="button" onclick="openAudit('{{ $site['key'] }}')" data-audit-btn
                    class="group flex items-center gap-2 rounded-lg border border-slate-700 hover:border-indigo-500/60 hover:bg-slate-800/60 pl-2.5 pr-2 py-1 transition shrink-0">
                <div class="text-right leading-tight">
                    <div class="text-[9px] uppercase tracking-wide text-slate-500">audit</div>
                    <div data-audit-score class="text-base font-bold text-slate-400 tabular-nums">…</div>
                </div>
                <span data-audit-grade class="h-7 w-7 rounded-md grid place-items-center text-xs font-bold bg-slate-800 text-slate-500">–</span>
                <span class="text-sm group-hover:scale-110 transition leading-none" title="Comment atteindre 100 %">👁</span>
            </button>
        @else
            <span class="text-[11px] text-slate-600 italic shrink-0">app privée</span>
        @endif
    </div>
</div>