@props([
    'eyebrow' => null,
    'title',
    'subtitle' => null,
    'dark' => false,
    'breadcrumbs' => [],
    'compact' => false,
    'centered' => false,
])

@php
    $isDark = filter_var($dark, FILTER_VALIDATE_BOOLEAN);
@endphp

<section @class([
    'relative isolate overflow-hidden',
    'home-section home-section--hero bg-white border-b border-slate-100' => ! $isDark && ! $compact,
    'home-section bg-white border-b border-slate-100 py-10 md:py-12' => ! $isDark && $compact,
    'bg-[#030712] text-white public-hero' => $isDark && ! $compact,
    'bg-[#030712] text-white public-hero-sm py-10 md:py-12' => $isDark && $compact,
])>
    @if($isDark)
        <div class="home-hero-mesh pointer-events-none absolute inset-0" aria-hidden="true">
            <div class="home-orb home-orb-1 opacity-40"></div>
            <div class="home-orb home-orb-2 opacity-25"></div>
            <div class="home-grid absolute inset-0 opacity-10"></div>
        </div>
    @endif

    <div @class(['container-page relative z-10', 'text-center' => $centered && ! $isDark])>
        @if(count($breadcrumbs))
            <x-breadcrumbs :items="$breadcrumbs" :dark="$isDark" class="mb-6 !px-0 !py-0" />
        @endif

        @if($eyebrow)
            @if($isDark)
                <span class="home-eyebrow-dark">{{ $eyebrow }}</span>
            @else
                <p class="home-kicker">{{ $eyebrow }}</p>
            @endif
        @endif

        <h1 @class([
            $isDark ? 'font-bold tracking-tight text-white' : 'home-hero-title',
            $eyebrow && $isDark ? 'mt-6' : '',
            $compact && $isDark ? 'text-[clamp(2rem,4vw,3rem)]' : '',
            $compact && ! $isDark ? '!text-[clamp(1.75rem,3.5vw,2.5rem)]' : '',
            $centered && ! $isDark ? 'mx-auto max-w-3xl' : '',
        ])>{{ $title }}</h1>

        @if($subtitle)
            <p @class([
                $isDark ? 'mt-5 max-w-2xl text-lg leading-relaxed text-slate-400' : 'home-lead',
                $centered && ! $isDark ? 'home-lead--center' : '',
                ! $centered && ! $isDark ? 'max-w-2xl' : '',
            ])>{{ $subtitle }}</p>
        @endif

        @if(isset($slot) && ! $slot->isEmpty())
            <div @class(['mt-8', 'flex flex-wrap justify-center gap-4' => $centered && ! $isDark])>{{ $slot }}</div>
        @endif
    </div>
</section>