@props([
    'src' => 'images/real/galeria/fachada/7.jpg',
    'alt' => 'Muro revestido con piedra laja natural en fachada',
    'width' => 1020,
    'height' => 765,
])

@php
    /*
     | Realistic natural-laja wall (lead media for "Nosotros").
     |
     | The previous version drew the wall as procedural SVG polygons, which read
     | as fake. This ships a real bundled photograph from `public/images/real`
     | and lets code suggest the wall being built: `buildStoneWall`
     | (resources/js/animations.js) reveals it with a bottom-to-top clip-path
     | (`inset(100% 0 0 0)` → `inset(0 0 0 0)`) plus a subtle scale settle
     | (1.08 → 1), anchored at the base so the wall rises into place.
     |
     | Progressive enhancement: the photo is rendered visible by default with no
     | inline hidden state, so it is fully shown with JavaScript disabled and
     | under `prefers-reduced-motion` (the motion catalog never builds there).
     | The wrapper keeps the previous `max-h`/aspect so the wall still does not
     | dominate the column.
     */
@endphp

<div data-stone-wall
     {{ $attributes->merge(['class' => 'relative block w-full max-h-[24rem] overflow-hidden bg-brand-900 aspect-[4/3]']) }}>
    <img data-stone-wall-image
         src="{{ \App\Support\MediaPath::url($src) }}"
         alt="{{ $alt }}"
         width="{{ $width }}"
         height="{{ $height }}"
         loading="eager"
         decoding="async"
         class="h-full w-full object-cover" />
</div>