@props([
    'cases',
])

@php
    $slots = collect([
        ['label' => 'Eventos sociais', 'tall' => true],
        ['label' => 'Celebrações', 'tall' => false],
        ['label' => 'Detalhes', 'tall' => false],
        ['label' => 'Sociais', 'tall' => false],
        ['label' => 'Corporativo', 'tall' => false],
        ['label' => 'Produção', 'tall' => false],
    ]);
    $cases = $cases->take(6)->values();
@endphp

<section id="portfolio" aria-labelledby="about-portfolio-heading" class="border-b border-amare-border bg-amare-bg" data-about-portfolio>
    <div class="container-amare py-16 md:py-24" data-reveal-group>
        <div class="grid gap-10 lg:grid-cols-12 lg:items-end" data-reveal data-reveal-from="up">
            <div class="lg:col-span-5">
                <p class="text-xs font-semibold uppercase tracking-[0.14em] text-amare-accent">Seleção de trabalhos</p>
                <h2 id="about-portfolio-heading" class="mt-3 text-headline font-medium text-amare-text">Portfólio em destaque</h2>
            </div>
            <div class="lg:col-span-6 lg:col-start-7">
                <p class="max-w-xl text-amare-text-muted">Uma composição de eventos sociais e corporativos para apresentar a versatilidade da Amare.</p>
                <a href="{{ route('portfolio.index') }}" class="btn btn-ghost mt-5 min-h-0 px-0 text-xs font-bold uppercase tracking-[0.09em] text-amare-accent hover:bg-transparent hover:text-amare-accent-deep">
                    <span class="link-editorial">Ver portfólio completo</span>
                </a>
            </div>
        </div>

        <div class="mt-12 grid grid-cols-1 gap-[14px] sm:grid-cols-2 lg:grid-cols-[1.2fr_0.8fr_0.8fr]" aria-label="Projetos em destaque" 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'],
                    ])
                    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>