@php
  $phone = config('company.phone');

  // Slides del hero (array inline, patrón del repo). Ahora ITERA TODO el content
  // por slide: eyebrow + headline (3 partes: lead/emph/tail, tail siempre
  // "Finished Right.") + description + CTA. El `theme` viaja como clase en el
  // <img> del slide; el CSS `:has(.swiper-slide-active img.<theme>)` de
  // .banner-gradient resuelve el color del gradiente (ver app.css). El bloque
  // completo rota por slide con cross-fade (ver hero-slider.js + .hero-slide en
  // app.css). Cada slide tiene su PROPIA imagen en hero-slides/ (slide-N.webp),
  // desacoplada de las cards del home aunque alguna sea visualmente igual.
  // TODO: los `cta.href` son placeholder '#' hasta definir destinos; la
  // imagen del slide 4 (pool deck) es placeholder hasta tener la definitiva.
  $slides = [
      [
          'theme' => 'pool',
          'eyebrow' => 'Pool Renovations',
          'headline' => ['lead' => 'Refresh Your Pool.', 'emph' => 'Restore The Whole Look.', 'tail' => 'Finished Right.'],
          'description' =>
              'Update an aging pool with professional resurfacing, waterline tile, coping, lighting, sunshelf options, and custom renovation details designed to make your backyard feel cleaner, newer, and more inviting.',
          'cta' => ['label' => 'Explore Pool Renovations', 'href' => route('services.pool-renovation')],
          'image' => 'resources/images/home/hero-slides/slide-1.webp',
          'alt' => 'Freshly renovated resort-style swimming pool with travertine deck',
      ],
      [
          'theme' => 'driveway',
          'eyebrow' => 'Paver Driveways',
          'headline' => ['lead' => 'Upgrade Your Driveway.', 'emph' => 'Curb Appeal That Lasts.', 'tail' => 'Finished Right.'],
          'description' =>
              'Make a stronger first impression with professionally installed driveway pavers designed to improve curb appeal, drainage, durability, and the overall look of your home.',
          'cta' => ['label' => 'View Driveway Pavers', 'href' => route('services.paver-driveways')],
          'image' => 'resources/images/home/hero-slides/slide-2.webp',
          'alt' => 'Luxury home driveway paved in a herringbone clay brick pattern',
      ],
      [
          'theme' => 'patio',
          'eyebrow' => 'Patio Transformations',
          'headline' => ['lead' => 'Outdoor Patios.', 'emph' => 'Built For Florida Living.', 'tail' => 'Finished Right.'],
          'description' =>
              'Create a more inviting backyard with professionally installed patio pavers, travertine, and outdoor living surfaces designed for beauty, durability, and everyday use in Palm Beach & Broward homes.',
          'cta' => ['label' => 'Explore Patio Upgrades', 'href' => route('services.paver-patios-walkways')],
          'image' => 'resources/images/home/hero-slides/slide-3.webp',
          'alt' => 'Elegant paver patio lounge with a pergola and fire pit',
      ],
      [
          'theme' => 'pooldeck',
          'eyebrow' => 'Pool Deck Renovations',
          'headline' => ['lead' => 'Upgrade Your Pool Deck.', 'emph' => 'More Beautiful. More Usable.', 'tail' => 'Finished Right.'],
          'description' =>
              'Transform the space around your pool with pavers, travertine, marble, or decorative concrete overlays designed for comfort, slip resistance, drainage, and South Florida outdoor living.',
          'cta' => ['label' => 'View Pool Deck Options', 'href' => route('services.paver-pool-decks')],
          'image' => 'resources/images/home/hero-slides/slide-4.webp',
          'alt' => 'Renovated pool deck with travertine pavers around a swimming pool',
      ],
      [
          'theme' => 'overlay',
          'eyebrow' => 'Concrete Overlays',
          'headline' => ['lead' => 'Refresh Your Concrete.', 'emph' => 'Without Tearing It Out.', 'tail' => 'Finished Right.'],
          'description' =>
              'Upgrade worn driveways, patios, and pool decks with decorative concrete overlays that improve the look of your outdoor surfaces while keeping the existing concrete foundation in place.',
          'cta' => ['label' => 'View Overlay Options', 'href' => route('services.concrete-overlay-pool-decks')],
          'image' => 'resources/images/home/hero-slides/slide-5.webp',
          'alt' => 'Decorative textured concrete overlay pool deck',
      ],
  ];
@endphp

{{-- Hero de la Home: SLIDER Swiper full-bleed (4 servicios) + overlay de lectura
     con gradiente que cambia por tema del slide + bloque de contenido FIJO
     (H2 3 partes serif/Anton/serif-italic + CTA + teléfono) con un eyebrow que
     rota por slide. El H1 de la página no está acá: es sr-only (el titular visible
     rota, así que no sirve como <h1>) y lo inyecta el slot `page-heading` del
     layout — ver home.blade.php. Consume el contenedor base compartido
     (heroes.base); la clase
     `banner-gradient` sobre el <section data-hero> es la que dispara el `:has()`.
     El init JS vive en resources/js/hero-slider.js. Sin video, sin GSAP. --}}
{{-- Altura ACOTADA (patrón de referencia Protexiones): flex items-center + dvh con
     max-h, NUNCA 100vh (evita el "100vh menos navbar"). pt = --nav-h (altura real del
     navbar fixed, ver nav-sticky.js) + respiro, para que el contenido quede centrado
     en la franja BAJO la píldora (la sección ya sube bajo ella por el margen negativo
     de [data-hero] en app.css). --}}
<x-heroes.base class="hero-home banner-gradient items-center">
  {{-- Fondo: Swiper con una imagen por slide. `fetchpriority=high` solo en el
       primer slide (LCP); el resto lazy. El tema va como clase del <img>. --}}
  <div class="hero-swiper swiper absolute inset-0" data-hero-swiper>
    <div class="swiper-wrapper">
      @foreach ($slides as $i => $slide)
        <div class="swiper-slide">
          <img src="{{ Vite::asset($slide['image']) }}" alt="{{ $slide['alt'] }}" @class([
              'absolute inset-0 h-full w-full object-cover object-center',
              $slide['theme'],
          ])
            decoding="async"
            @if ($i === 0) fetchpriority="high"
            @else
              loading="lazy" @endif />
        </div>
      @endforeach
    </div>
  </div>

  {{-- Overlay de lectura + tinte por tema (ver .hero-tint en app.css) --}}
  <div class="hero-tint absolute inset-0"></div>

  <div class="container relative z-10 flex flex-1 pb-12">
    {{-- Bloque de contenido que ROTA COMPLETO por slide: eyebrow + headline (3
         partes) + description + CTA. Los bloques se apilan en absoluto dentro de
         `.hero-slides` y solo el `.is-active` es visible (cross-fade por opacidad;
         el toggle por `data-index` lo hace hero-slider.js, mismo hook que antes
         usaba solo el eyebrow). El wrapper es `relative` para contener el apilado
         y darle alto al hero. --}}
    <div class="hero-slides relative w-full max-w-3xl self-center">
      @foreach ($slides as $i => $slide)
        <div @class(['hero-slide flex flex-col justify-center', 'is-active' => $i === 0]) data-hero-text
          data-index="{{ $i }}">
          <span class="eyebrow md:mb-4 mb-2 block">{{ $slide['eyebrow'] }}</span>

          {{-- Titular del slide: <h2>, no <h1>: hay uno por presentación. --}}
          <h2 class="leading-tight">
            <span class="hero-title-lead text-fg block font-serif">{{ $slide['headline']['lead'] }}</span>
            <span class="hero-title-emph font-display text-deep-muted block uppercase tracking-wide">
              {{ $slide['headline']['emph'] }}
            </span>
            <span class="hero-title-tail text-brand block font-serif italic">{{ $slide['headline']['tail'] }}</span>
          </h2>

          <p class="text-fg/80 mt-6 w-full max-w-md text-base font-light leading-relaxed">
            {{ $slide['description'] }}
          </p>

          {{-- CTA por slide. TODO: href '#' es placeholder hasta definir destinos. --}}
          <a href="{{ $slide['cta']['href'] }}"
            class="text-fg/80 hover:text-honey mt-6 flex items-center gap-1 no-underline hover:underline hover:underline-offset-4">
            {{ $slide['cta']['label'] }}
            <x-lucide-arrow-right class="h-4 w-4" />
          </a>
        </div>
      @endforeach
    </div>
  </div>
  {{-- Bullets numerados + botón pausa/play (renderizados por hero-slider.js).
       z-20 para quedar por encima del overlay .hero-tint y ser clickeables. --}}
  <div class="hero-pagination swiper-pagination container h-12"></div>
</x-heroes.base>