{{-- Performance Optimization — Monitoring section --}}
@php
$cards = __('solutions.performance_optimization.monitoring.cards');
@endphp

<section class="w-full mx-auto max-w-7xl p-4 flex flex-col py-20">
    <x-atoms.title
        :title="__('solutions.performance_optimization.monitoring.title')"
        :subtitle="[__('solutions.performance_optimization.monitoring.description')]"
        align="center"
        class="max-w-[800px] mx-auto mb-16" />

    <div class="w-full mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl" data-display-wrapped>
        {{-- Card 1: Mesure en continu (bar chart placeholder) --}}
        <x-molecules.card-border :transparent="true" class="flex flex-col h-full bg-glassmorphism">
            <h3 class="text-center text-lg font-semibold mb-4">{{ $cards[0]['title'] }}</h3>
            <div class="flex-1 flex flex-col justify-between">
                <div class="px-4 py-6">
                    {{-- Chart placeholder — enhanced by GSAP/JS in Epic 4 --}}
                    <div class="h-40 mb-4 flex items-end justify-center gap-2" data-chart="bar" aria-label="{{ $cards[0]['title'] }}">
                        @foreach([40, 50, 35, 20, 30] as $i => $val)
                        <div class="flex flex-col gap-0.5 items-center">
                            <div class="w-8 rounded-t bg-primary/70" style="height: {{ $val * 1.5 }}px"></div>
                            <div class="w-8 bg-secondary/70" style="height: {{ [10, 20, 25, 30, 30][$i] * 1.5 }}px"></div>
                            <div class="w-8 rounded-b bg-tertiary/70" style="height: {{ [10, 15, 12, 18, 13][$i] * 1.5 }}px"></div>
                            <span class="text-xs text-muted-foreground mt-1">{{ ['08:00', '10:00', '12:00', '14:00', '16:00'][$i] }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>
                <p class="text-center text-sm text-muted-foreground">{{ $cards[0]['description'] }}</p>
            </div>
        </x-molecules.card-border>

        {{-- Card 2: Détection de dérives (line chart placeholder) --}}
        <x-molecules.card-border :transparent="true" class="flex flex-col h-full bg-glassmorphism">
            <h3 class="text-center text-lg font-semibold mb-4">{{ $cards[1]['title'] }}</h3>
            <div class="flex-1 flex flex-col justify-between">
                <div class="px-4 py-2">
                    <div class="border border-red-500 rounded-lg relative mb-4 p-4" data-chart="line" aria-label="{{ $cards[1]['title'] }}">
                        {{-- Alert icon --}}
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute -top-3 right-3 text-red-500 bg-card rounded-full p-0.5">
                            <circle cx="12" cy="12" r="10" />
                            <line x1="12" y1="8" x2="12" y2="12" />
                            <line x1="12" y1="16" x2="12.01" y2="16" />
                        </svg>
                        {{-- SVG line chart placeholder --}}
                        <svg viewBox="0 0 200 80" class="w-full h-40" preserveAspectRatio="none" aria-hidden="true">
                            {{-- Threshold line --}}
                            <line x1="0" y1="55" x2="200" y2="55" stroke="var(--color-danger, #ef4444)" stroke-width="1.5" stroke-dasharray="5 5" />
                            {{-- Purity line --}}
                            <polyline points="10,20 50,20 100,30 150,52 190,58" fill="none" stroke="var(--color-primary, #2563eb)" stroke-width="2" />
                            {{-- Data points --}}
                            <circle cx="10" cy="20" r="3" fill="var(--color-primary, #2563eb)" />
                            <circle cx="50" cy="20" r="3" fill="var(--color-primary, #2563eb)" />
                            <circle cx="100" cy="30" r="3" fill="var(--color-primary, #2563eb)" />
                            <circle cx="150" cy="52" r="3" fill="var(--color-primary, #2563eb)" />
                            <circle cx="190" cy="58" r="3" fill="var(--color-primary, #2563eb)" />
                        </svg>
                    </div>
                </div>
                <p class="text-center text-sm text-muted-foreground">{{ $cards[1]['description'] }}</p>
            </div>
        </x-molecules.card-border>

        {{-- Card 3: Détection d'anomalies critiques (image) --}}
        <x-molecules.card-border :transparent="true" class="flex flex-col h-full bg-glassmorphism">
            <h3 class="text-center text-lg font-semibold mb-4">{{ $cards[2]['title'] }}</h3>
            <div class="flex-1 flex flex-col justify-between">
                <div class="px-4 py-2">
                    <img
                        src="{{ asset('images/solutions/performance-optimization/cluttered_area.webp') }}"
                        alt="{{ $cards[2]['image_alt'] }}"
                        class="w-full h-48 object-cover rounded-lg border mb-4"
                        loading="lazy">
                </div>
                <p class="text-center text-sm text-muted-foreground">{{ $cards[2]['description'] }}</p>
            </div>
        </x-molecules.card-border>
    </div>
</section>