@props([
    'src' => null,
    'alt' => '',
    'reverse' => false,      // put the media on the left instead of the right
    'ratio' => '4/3',
    'eyebrow' => null,
    'caption' => null,       // technical caption pinned to the image corner
    'tone' => 'light',       // light | dark
    'eager' => false,
])

{{--
    Split-screen layout: editorial image on one side, copy on the other.
    Used for the About introduction and any alternating narrative band.
    The image wipes in on scroll (clip-path) rather than sliding, which reads as
    a print reveal instead of a web animation.
--}}
<div {{ $attributes->merge(['class' => 'grid items-center gap-12 lg:grid-cols-2 lg:gap-16']) }}>
    <div @class(['lg:order-2' => ! $reverse])>
        @if ($eyebrow)
            <p @class(['eyebrow mb-4', 'text-white/60' => $tone === 'dark'])>{{ $eyebrow }}</p>
        @endif

        {{ $slot }}
    </div>

    <div @class(['relative', 'lg:order-1' => ! $reverse])>
        <x-image :src="$src" :alt="$alt" :ratio="$ratio" :eager="$eager" :thumb="false" data-mask-reveal />

        @if ($caption)
            <p class="meta-label mt-4 flex items-center gap-2">
                <span class="h-px w-6 bg-border"></span>{{ $caption }}
            </p>
        @endif
    </div>
</div>