@props([
    'title',
    'subtitle' => null,
    'breadcrumbs' => [],
    'compact' => true,
    'image' => null,
    'imageAlt' => '',
    'variant' => 'default', // default | immersive | split
])

@php
    $isImmersive = $variant === 'immersive' && $image;
    $isSplit = $variant === 'split' && $image;
@endphp

@if($isImmersive)
    <section class="detail-hero detail-hero--immersive">
        <div class="detail-hero__media" aria-hidden="true">
            <img
                src="{{ $image }}"
                alt=""
                width="1600"
                height="900"
                class="detail-hero__img"
                fetchpriority="high"
                decoding="async"
            >
            <div class="detail-hero__shade"></div>
        </div>

        <div class="container-page detail-hero__inner">
            @if(count($breadcrumbs))
                <x-breadcrumbs :items="$breadcrumbs" :dark="true" class="detail-hero__crumbs mb-6 !px-0 !py-0" />
            @endif

            @if(isset($eyebrow) && ! $eyebrow->isEmpty())
                <div class="mb-3">{{ $eyebrow }}</div>
            @endif

            <h1 class="detail-hero__title">{{ $title }}</h1>

            @if($subtitle)
                <p class="detail-hero__lead">{{ $subtitle }}</p>
            @endif

            @if(isset($actions) && ! $actions->isEmpty())
                <div class="home-hero-actions mt-8">{{ $actions }}</div>
            @endif
        </div>
    </section>
@elseif($isSplit)
    <section class="detail-hero detail-hero--split">
        <div class="container-page">
            @if(count($breadcrumbs))
                <x-breadcrumbs :items="$breadcrumbs" class="mb-6 !px-0 !py-0" />
            @endif

            <div class="detail-hero__split-grid">
                <div class="detail-hero__copy min-w-0">
                    @if(isset($eyebrow) && ! $eyebrow->isEmpty())
                        <div class="mb-3">{{ $eyebrow }}</div>
                    @endif

                    <h1 class="detail-hero__title detail-hero__title--dark">{{ $title }}</h1>

                    @if($subtitle)
                        <p class="detail-hero__lead detail-hero__lead--dark">{{ $subtitle }}</p>
                    @endif

                    @if(isset($actions) && ! $actions->isEmpty())
                        <div class="home-hero-actions mt-8">{{ $actions }}</div>
                    @endif
                </div>

                <figure class="detail-hero__figure">
                    <img
                        src="{{ $image }}"
                        alt="{{ $imageAlt }}"
                        width="720"
                        height="900"
                        class="detail-hero__figure-img"
                        fetchpriority="high"
                        decoding="async"
                    >
                </figure>
            </div>
        </div>
    </section>
@else
    <section @class([
        'home-section bg-white border-b border-slate-100',
        'home-section--hero' => ! $compact,
        'py-10 md:py-12' => $compact,
    ])>
        <div class="container-page">
            @if(count($breadcrumbs))
                <x-breadcrumbs :items="$breadcrumbs" class="mb-6 !px-0 !py-0" />
            @endif

            <div class="home-split home-split--equal home-split--center">
                <div class="min-w-0">
                    @if(isset($badges) && ! $badges->isEmpty())
                        <div class="mb-4 flex flex-wrap gap-2">
                            {{ $badges }}
                        </div>
                    @endif

                    @if(isset($eyebrow) && ! $eyebrow->isEmpty())
                        <div class="mb-3">{{ $eyebrow }}</div>
                    @endif

                    <h1 class="home-hero-title !text-[clamp(1.75rem,3.5vw,2.75rem)]">{{ $title }}</h1>

                    @if($subtitle)
                        <p class="home-lead mt-4 !max-w-none">{{ $subtitle }}</p>
                    @endif

                    @if(isset($actions) && ! $actions->isEmpty())
                        <div class="home-hero-actions mt-8">{{ $actions }}</div>
                    @endif
                </div>

                @if(isset($aside) && ! $aside->isEmpty())
                    <aside class="premium-card p-6 lg:p-7">
                        {{ $aside }}
                    </aside>
                @endif
            </div>
        </div>
    </section>
@endif