{{-- Methodology Phases Section — 4 detailed phase cards with images --}}
@php
$phaseKeys = ['observation', 'analyse', 'intervention', 'evaluation'];
$icons = ['eye', 'line-chart', 'wrench', 'award'];
$images = [
'images/approach/visite.webp',
'images/heros/approach_hero.webp',
'images/approach/plan.webp',
'images/approach/evaluation.webp',
];
@endphp

<div class="w-full px-4">
    <div class="w-full bg-background px-4 rounded-lg py-20">
        @foreach($phaseKeys as $index => $key)
        @php
        $phase = __("approach.phases.{$key}");
        @endphp

        <div class="max-w-7xl mx-auto mb-16 last:mb-0">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                {{-- Content --}}
                <div>
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-16 h-16 flex items-center justify-center rounded-full bg-primary/10" data-appear-from-bottom>
                            <x-atoms.icon :name="$icons[$index]" class="w-6 h-6 text-primary" />
                        </div>
                        <div>
                            <x-atoms.subject data-appear-from-bottom>{{ $phase['subject'] }}</x-atoms.subject>
                            <h3 class="text-4xl font-bold" data-appear-from-bottom>{{ $phase['title'] }}</h3>
                        </div>
                    </div>

                    <div class="mt-8">
                        <p class="text-lg font-semibold mb-3" data-appear-from-bottom>{{ $phase['subtitle'] }}</p>
                        <p class="text-muted-foreground mb-6" data-appear-from-bottom>{{ $phase['description'] }}</p>
                    </div>

                    @if(!empty($phase['actions']))
                    <div class="my-12">
                        <ul class="space-y-2">
                            @foreach($phase['actions'] as $action)
                            <li class="flex items-start gap-2 bg-glassmorphism border border-gray-200 rounded-md px-4 py-2 w-fit" data-appear-from-bottom>
                                <span class="text-green-500 mt-1">
                                    <x-atoms.icon name="plus" class="w-4 h-4" />
                                </span>
                                <span class="text-muted-foreground">{{ $action }}</span>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                </div>

                {{-- Image --}}
                <div data-appear-from-bottom>
                    <div class="relative rounded-2xl overflow-hidden aspect-video bg-muted">
                        <img
                            src="{{ asset($images[$index]) }}"
                            alt="{{ $phase['image_alt'] }}"
                            class="w-full h-full object-cover"
                            loading="lazy" />
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>