@props(['eyebrow', 'title', 'intro' => null, 'features' => [], 'ctaLabel' => 'Schedule A Free Estimate'])

{{-- Migración fiel de "Brick Driveways, Concrete Pavers & Custom Driveway
     Designs" (mockup Figma, node 196:731): heading + intro centrado, luego N
     filas de imagen pequeña + título + párrafo, CTAs centrados al final.
     Cada item de `features` es ['image', 'alt', 'title', 'body']. --}}
<section {{ $attributes }} class="bg-deep-1 py-12 lg:py-20">
  <div class="container text-center">
    <div class="mx-auto max-w-3xl">
      <x-home.section-header :eyebrow="$eyebrow" align="center" :hasHyphen="false">
        {!! $title !!}
      </x-home.section-header>
      @if ($intro)
        <p class="text-muted mt-6 text-base font-light leading-relaxed">
          {{ $intro }}
        </p>
      @endif
    </div>


    <ul class="mt-8 lg:mt-14 space-y-10 text-left">
      @foreach ($features as $feature)
        <li class="flex flex-col gap-5 lg:flex-row">
          <picture class="block w-full h-60 lg:h-auto lg:max-h-none lg:w-auto lg:max-w-3xs flex-none overflow-hidden">
            <img src="{{ $feature['image'] }}" alt="{{ $feature['alt'] }}" loading="lazy" decoding="async"
              class="h-full w-full object-cover" />
          </picture>
          <div>
            <h3 class="card-title text-fg font-semibold">{{ $feature['title'] }}</h3>
            <p class="text-muted mt-2 leading-relaxed font-light">{{ $feature['body'] }}</p>
          </div>
        </li>
      @endforeach
    </ul>

    <div class="mt-8 lg:mt-14 flex justify-center">
      <x-home.cta-buttons :cta-label="$ctaLabel" align="center" variant="row" color="warm" />
    </div>
  </div>
</section>