@props([
    'eyebrow',
    'title',
    'image',
    'alt',
    'checklistHeading' => null,
    'checklistItems' => [],
    'ctaLabel' => 'Schedule A Free Estimate',
    'footerContent' => null,
    'pending' => false,
])

{{-- Migración fiel de "Driveway Pavers That Match Your Outdoor Living Space"
     (mockup Figma, node 201:902): heading centrado arriba, luego 2 columnas —
     imagen cuadrada a la izquierda, texto (slot) + checklist en 2 columnas a
     la derecha. El slot son los párrafos antes/después del checklist. --}}
<section {{ $attributes }} class="bg-surface-2 py-12 lg:py-20">
  <div class="container">
    <div class="mx-auto max-w-3xl text-center">
      <x-home.section-header :eyebrow="$eyebrow" align="center" :hasHyphen="false">
        {!! $title !!}
      </x-home.section-header>
    </div>

    <div class="mt-8 lg:mt-14 grid grid-cols-1 items-center gap-6 lg:gap-8 xl:gap-10 xl:grid-cols-[440px_1fr]">
      <picture @class(['xl:h-111 lg:h-90 block h-72 overflow-hidden', 'is-pending-image' => $pending])>
        <img src="{{ $image }}" alt="{{ $alt }}" loading="lazy" decoding="async"
          class="h-full w-full object-cover" />
      </picture>

      <div>
        {{ $slot }}
        @if (count($checklistItems))
          <div class="border-line/50 mt-6 border-t pt-6">
            <p class="text-fg">{{ $checklistHeading }}</p>
            <ul class="mt-8 lg:mt-8 grid grid-cols-1 gap-x-4 gap-y-3 md:grid-cols-2 md:gap-x-6 lg:gap-x-8">
              @foreach ($checklistItems as $item)
                <li class="flex items-center gap-3">
                  <span
                    class="bg-brand-deep text-fg flex h-5 w-5 flex-none items-center justify-center rounded-full text-[0.6rem] font-semibold">
                    <x-lucide-check class="h-3 w-3" />
                  </span>
                  <span class="text-fg">{{ $item }}</span>
                </li>
              @endforeach
            </ul>
          </div>
        @endif
        @if ($footerContent)
          <div class="border-line/50 mt-6 border-t pt-6">
            <p class="text-fg">{{ $footerContent }}</p>
          </div>
        @endif
      </div>
    </div>

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