@props([
    'src' => null,
    'alt' => '',
    'height' => 'md',        // sm | md | lg
    'overlay' => 'dark',     // dark | brand | light
    'zoom' => true,          // slow scale across the scroll range
    'parallax' => '0.08',
])

@php
    $heights = [
        'sm' => 'min-h-[18rem] sm:min-h-[22rem]',
        'md' => 'min-h-[24rem] sm:min-h-[30rem]',
        'lg' => 'min-h-[32rem] sm:min-h-[40rem]',
    ][$height] ?? 'min-h-[24rem] sm:min-h-[30rem]';

    $overlays = [
        'dark' => 'bg-gradient-to-t from-dark/85 via-dark/45 to-dark/15',
        'brand' => 'bg-gradient-to-r from-dark/92 via-dark/65 to-secondary-600/25',
        'light' => 'bg-gradient-to-t from-dark/60 to-transparent',
    ][$overlay] ?? 'bg-gradient-to-t from-dark/85 via-dark/45 to-dark/15';
@endphp

{{--
    Full-bleed imagery band — drone and site photography shown at the scale the
    work deserves. The image drifts and grows slightly against the scroll; both
    are disabled under reduced motion by motion.js.
--}}
<section {{ $attributes->merge(['class' => 'relative isolate overflow-hidden bg-dark']) }} data-parallax-scope>
    <div class="absolute inset-0 -z-10 scale-110">
        <img src="{{ image_url($src) }}" alt="{{ $alt }}" loading="lazy" decoding="async"
             class="size-full object-cover"
             @if ($parallax) data-parallax="{{ $parallax }}" @endif
             @if ($zoom) data-zoom-scroll @endif>
    </div>

    <div class="absolute inset-0 -z-10 {{ $overlays }}"></div>

    <div class="container-page relative flex {{ $heights }} flex-col justify-end py-14">
        {{ $slot }}
    </div>
</section>