@php
    use App\Support\MetaPeriodComparison;

    $metrics = $metrics ?? [];
    $comparison = $comparison ?? [];
@endphp

<section class="rounded-2xl border border-rose-200 bg-white p-5 shadow-sm">
    <div class="flex flex-wrap items-end justify-between gap-3">
        <div>
            <h3 class="text-lg font-semibold text-slate-900">Video & Reels</h3>
            <p class="mt-1 text-xs text-slate-500">Metriques video synchronisees depuis Facebook Insights.</p>
        </div>
    </div>

    <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        @include('engagement-metrics.partials.metric-card', [
            'label' => 'Vues video (3s)',
            'value' => $metrics['video_views'] ?? 0,
            'change' => $comparison['video_views']['change'] ?? null,
            'color' => 'violet',
        ])
        @include('engagement-metrics.partials.metric-card', [
            'label' => 'Vues 10 secondes',
            'value' => $metrics['video_views_10s'] ?? 0,
            'change' => $comparison['video_views_10s']['change'] ?? null,
            'color' => 'sky',
        ])
        @include('engagement-metrics.partials.metric-card', [
            'label' => 'Vues 30 secondes+',
            'value' => $metrics['video_complete_views_30s'] ?? 0,
            'change' => $comparison['video_complete_views_30s']['change'] ?? null,
            'color' => 'indigo',
        ])
        @include('engagement-metrics.partials.metric-card', [
            'label' => 'Duree de vue',
            'value' => MetaPeriodComparison::formatWatchTime((int) ($metrics['video_view_time'] ?? 0)),
            'change' => $comparison['video_view_time']['change'] ?? null,
            'color' => 'amber',
        ])
    </div>
</section>