@props([
    'cases',
])

<section
    aria-labelledby="portfolio-heading"
    class="home-chapter border-b border-amare-border bg-amare-bg"
    data-chapter="portfolio"
    id="portfolio"
>
    <div class="container-amare py-16 md:py-24" data-reveal-group>
        <div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between" data-reveal data-reveal-from="up">
            <h2 id="portfolio-heading" class="max-w-2xl text-[clamp(2.375rem,5vw,4rem)] font-medium leading-[1.05] tracking-[-0.02em] text-amare-text">Trabalhos que carregam a assinatura Amare.</h2>
            <p class="max-w-[600px] text-amare-text-muted">Priorizar fotografias reais e uma curadoria pequena. O portfólio não precisa explicar tudo: deve provar cuidado, execução e consistência visual.</p>
        </div>

        @php
            $slots = collect([
                ['label' => 'FOTO DE CASAMENTO 01', 'tall' => true],
                ['label' => 'FOTO 02', 'tall' => false],
                ['label' => 'FOTO 03', 'tall' => false],
                ['label' => 'FOTO 04', 'tall' => false],
                ['label' => 'FOTO 05', 'tall' => false],
            ]);
            $cases = $cases->take(5)->values();
        @endphp

        <div class="mt-12 grid grid-cols-1 gap-[14px] sm:grid-cols-2 lg:grid-cols-[1.2fr_0.8fr_0.8fr]" data-editorial-portfolio data-reveal-group>
            @foreach ($slots as $index => $slot)
                @php
                    $case = $cases->get($index);
                @endphp
                <div
                    @class([
                        'overflow-hidden bg-amare-bg-deep',
                        'sm:col-span-2 sm:min-h-[420px] lg:col-span-1 lg:row-span-2 lg:min-h-[634px]' => $slot['tall'],
                        'min-h-[220px] sm:min-h-[310px]' => ! $slot['tall'],
                    ])
                    @if ($slot['tall']) data-editorial-portfolio-item="feature" @endif
                    data-reveal
                    data-reveal-from="up"
                >
                    @if ($case && filled($case->cover_image_path))
                        <a href="{{ route('portfolio.show', $case) }}" class="block h-full w-full" aria-label="{{ $case->title }}">
                            <x-media.image :path="$case->cover_image_path" :alt="$case->cover_image_alt ?: $case->title" sizes="(max-width: 1023px) 100vw, 33vw" class="img-editorial h-full w-full object-cover transition-opacity hover:opacity-90" />
                        </a>
                    @else
                        <div class="flex h-full w-full items-center justify-center">
                            <p class="px-4 text-center text-xs font-semibold uppercase tracking-[0.16em] text-amare-muted">{{ $slot['label'] }}</p>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
</section>