@props([
    'settings',
    'eyebrow' => '04 — Amare Corporate',
    'heading' => 'Projetos corporativos tratados como experiência, não apenas operação.',
    'meta' => 'No MVP, esta frente pode apresentar claramente o que a Amare oferece mesmo sem inventar um portfólio corporativo que ainda não existe.',
    'steps' => null,
    'showMeta' => true,
    'ctaLabel' => 'Falar sobre um evento corporativo',
    'ctaHref' => '#contato',
    'showAside' => true,
])

@php
    $steps = $steps ?? ($settings->corporate_steps ?? []);
@endphp

<section
    aria-labelledby="corporate-heading"
    class="home-chapter border-b border-amare-border bg-amare-bg"
    data-chapter="corporate"
    id="corporate"
>
    <div class="container-amare grid gap-12 py-16 md:py-24 @if ($showAside) lg:grid-cols-2 lg:gap-[70px] @endif" data-reveal-group>
        <div class="flex flex-col gap-8">
            <div class="space-y-4" data-reveal data-reveal-from="up">
                <p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent-deep">{{ $eyebrow }}</p>
                <h2 id="corporate-heading" class="text-[clamp(2.375rem,5vw,4rem)] font-medium leading-[1.05] tracking-[-0.02em] text-amare-text">{{ $heading }}</h2>
            </div>

            @if ($showMeta && filled($meta))
                <p class="max-w-[760px] text-[clamp(1.1875rem,2vw,1.5rem)] leading-[1.55] text-amare-text-muted" data-reveal data-reveal-from="up">
                    {{ $meta }}
                </p>
            @endif

            <div class="border-t border-amare-border" data-reveal data-reveal-from="up">
                @foreach ($steps as $index => $step)
                    <div class="flex gap-8 border-b border-amare-border py-[23px]">
                        <p class="w-[44px] shrink-0 text-xs font-bold uppercase tracking-[0.16em] text-amare-accent">{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}</p>
                        <div class="space-y-1">
                            <h3 class="text-xl font-medium text-amare-text">{{ $step['title'] }}</h3>
                            <p class="text-amare-text-muted">{{ $step['body'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>

            <a href="{{ $ctaHref }}" class="btn btn-primary mt-7 self-start text-xs font-bold uppercase tracking-[0.09em]" data-reveal data-reveal-from="up">
                {{ $ctaLabel }}
            </a>
        </div>

        @if ($showAside)
            <div class="flex min-h-[420px] flex-col items-center justify-center gap-4 bg-amare-bg-deep p-10 text-center" data-reveal data-reveal-from="up">
                <p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent-deep">Portfólio Corporate</p>
                <h3 class="text-[clamp(1.5625rem,2.7vw,2.125rem)] font-medium leading-tight text-amare-text">Conteúdo em construção</h3>
                <p class="max-w-sm text-amare-text-muted">Em vez de usar fotografias genéricas como se fossem cases, a página assume com elegância que o portfólio será construído com projetos reais.</p>
            </div>
        @endif
    </div>
</section>