@props([
  'image' => null,
  'alt' => '',
  'title' => '',
  'subtitle' => '',
  'badge' => null,
  'pending' => false,
])

{{-- Hero de páginas de servicio (general y ciudad): imagen full-bleed + overlay,
     título de 2 partes (serif + serif itálica), subtítulo corto, y un badge/pill
     inferior con el precio de arranque. Sin slider, sin CTAs — variante más simple
     que heroes/home.blade.php.

     MISMA estructura que heroes/gallery-v2.blade.php (imagen estática + overlay +
     contenido en container/flex-1/justify-center/pb-12), sin el nav de categorías.
     El offset bajo el header fixed lo resuelven el spacer de heroes.base + el
     margen negativo de [data-hero] (app.css) — sin pt-[--nav-h] propio. --}}
<x-heroes.base {{ $attributes }} class="hero-service items-stretch">
  @if ($image)
    {{-- El <picture> solo envuelve cuando la imagen está marcada como pendiente:
         es el ancla del ::after que pinta la franja (ver .is-pending-image en
         app.css). Sin el flag, el markup queda idéntico al de siempre. --}}
    @if ($pending)
      <picture class="is-pending-image absolute inset-0 block h-full w-full">
    @endif
    <img
      src="{{ $image }}"
      alt="{{ $alt }}"
      class="absolute inset-0 h-full w-full object-cover"
      fetchpriority="high"
      decoding="async"
    />
    @if ($pending)
      </picture>
    @endif
  @endif
  <div class="absolute inset-0 bg-linear-to-r from-surface via-surface/85 to-surface/20 lg:to-transparent"></div>

  <div class="container relative z-10 flex flex-1 flex-col justify-center pb-12">
    <h1 class="hero-title leading-[1.05] font-serif text-cream-2">
      {{ $title ?? '' }}
    </h1>

    @if ($subtitle)
      <p class="mt-4 text-base font-light text-muted">{{ $subtitle }}</p>
    @endif

    @if ($badge)
      <div class="mt-8 btn btn-muted max-w-100">
        {{ $badge }}
      </div>
    @endif
  </div>
</x-heroes.base>