@props(['sections' => []])

@foreach ($sections as $section)
    @php
        $type = is_array($section) ? ($section['type'] ?? null) : null;
    @endphp

    @if ($type === 'heading')
        <h2 class="font-serif text-h2 font-normal uppercase leading-[0.95] text-on-surface">{{ $section['content'] ?? '' }}</h2>
    @elseif ($type === 'rich_text')
        <div class="font-sans text-body text-on-surface-muted">{!! $section['content'] ?? '' !!}</div>
    @elseif ($type === 'process_steps')
        <ol class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4" data-animate-group>
            @foreach ($section['items'] ?? [] as $index => $step)
                <li class="rounded-none border border-line bg-surface-raised p-7 shadow-soft transition-all duration-base ease-out-soft hover:-translate-y-0.5 hover:shadow-lift">
                    <p class="font-mono text-sm text-accent-text">Paso {{ $index + 1 }}</p>
                    <h3 class="mt-2 font-serif text-h3 text-on-surface">{{ $step['title'] ?? '' }}</h3>
                    <p class="mt-2 font-sans text-sm text-on-surface-muted">{{ $step['description'] ?? '' }}</p>
                </li>
            @endforeach
        </ol>
    @elseif ($type === 'differentiators')
        <ul class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4" data-animate-group>
            @foreach ($section['items'] ?? [] as $item)
                @php
                    $title = is_array($item) ? ($item['title'] ?? '') : $item;
                    $description = is_array($item) ? ($item['description'] ?? null) : null;
                @endphp
                <li class="rounded-none border border-line bg-surface-raised p-6 shadow-soft">
                    <h3 class="font-serif text-h3 text-on-surface">{{ $title }}</h3>
                    @if (filled($description))
                        <p class="mt-2 font-sans text-sm text-on-surface-muted">{{ $description }}</p>
                    @endif
                </li>
            @endforeach
        </ul>
    @elseif ($type === 'image')
        @php
            $src = \App\Support\MediaPath::extract($section['image'] ?? null);

            if (filled($src) && ! str_starts_with($src, 'http') && ! str_starts_with($src, '/')) {
                $src = is_file(public_path($src)) ? asset($src) : asset('storage/'.$src);
            }
        @endphp

        @if (filled($src))
            <figure class="overflow-hidden">
                <x-image
                    :src="$src"
                    :alt="$section['alt'] ?? ''"
                    :width="1600"
                    :height="1000"
                    wrapper-class="aspect-[16/10] w-full"
                    data-image-reveal
                />

                @if (filled($section['caption'] ?? null))
                    <figcaption class="mt-3 font-sans text-sm text-on-surface-muted">{{ $section['caption'] }}</figcaption>
                @endif
            </figure>
        @endif
    @elseif ($type === 'faq')
        <dl class="space-y-4">
            @foreach ($section['items'] ?? [] as $item)
                <div class="rounded-none border border-line bg-surface-raised p-6">
                    <dt class="font-serif text-h3 text-on-surface">{{ $item['question'] ?? '' }}</dt>
                    <dd class="mt-2 font-sans text-sm text-on-surface-muted">{{ $item['answer'] ?? '' }}</dd>
                </div>
            @endforeach
        </dl>
    @endif
@endforeach