@props([
    'id' => 'page-hero-title',
    'variant' => 'default',
    'eyebrowIcon' => null,
    'eyebrow' => null,
    'title',
    'titleAccent' => null,
    'subtitle' => null,
    'chips' => [],
    'image',
    'imagePosition' => '68% center',
])

<section
    class="hero page-hero page-hero--{{ $variant }}"
    aria-labelledby="{{ $id }}"
    style="--page-hero-image: url('{{ $image }}'); --page-hero-position: {{ $imagePosition }};"
>
    <div class="hero-bg page-hero-bg" aria-hidden="true"></div>

    <div class="hero-inner">
        <div class="hero-content reveal">
            @if ($eyebrow)
                <div class="hero-eyebrow{{ $eyebrowIcon ? ' hero-eyebrow--with-icon' : '' }}">
                    @if ($eyebrowIcon)
                        <span class="hero-eyebrow-icon" aria-hidden="true"><x-icon :name="$eyebrowIcon" /></span>
                    @endif
                    <span class="hero-eyebrow-text">{{ $eyebrow }}</span>
                </div>
            @endif

            <h1 class="hero-title" id="{{ $id }}">
                {{ $title }}
                @if ($titleAccent)
                    <em>{{ $titleAccent }}</em>
                @endif
            </h1>

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

            @if (count($chips))
                <div class="page-hero-chips" aria-label="Highlights">
                    @foreach ($chips as $chip)
                        <span>{{ $chip }}</span>
                    @endforeach
                </div>
            @endif

            {{ $slot }}
        </div>
    </div>
</section>