@php
  $checklist = [
    'Free in-person site visit & measurement',
    'Written, itemized quote — no surprises',
    'No obligation, no high-pressure sales',
  ];
@endphp

{{-- Ready for your New Outdoor Project?: pitch + checklist a la izquierda; box
     oscuro con CTA cálido a /estimate + franja "discounts" aparte a la derecha. --}}
<section class="bg-surface py-12 lg:py-20">
  <div class="container grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-16">
    {{-- Pitch --}}
    <div>
      <x-home.section-header
        eyebrow="Free Estimate"
        lead="Ready for your"
        emph="New Outdoor Project?"
      />
      <p class="mt-6 max-w-md text-base leading-relaxed font-light text-muted">
        Fill out the form and we'll contact you within 2 hours to schedule your free, no-pressure
        in-person consultation. We'll walk you through every option for your backyard.
      </p>

      <ul class="mt-8 space-y-3">
        @foreach ($checklist as $item)
          <li class="flex items-center gap-3">
            <span
              class="flex h-5 w-5 flex-none items-center justify-center rounded-full bg-brand text-[0.6rem] font-bold text-surface"
            >
              <x-lucide-check class="h-3 w-3" />
            </span>
            <span class="text-sm text-fg">{{ $item }}</span>
          </li>
        @endforeach
      </ul>
    </div>

    {{-- Box oscuro con CTA cálido + franja discounts --}}
    <div class="flex flex-col gap-4">
      <div
        class="flex flex-col items-center justify-center rounded-2xl border border-line/50 bg-surface-2 px-9 py-14 text-center md:px-11"
      >
        <h3 class="section-title font-bold text-fg">Get Your Free Quote</h3>
        <a href="{{ route('estimate') }}" class="btn-warm mt-8 w-full max-w-md">
          Send My Free Estimate Request
          <span class="flex h-6 w-6 items-center justify-center rounded-full bg-white/20 text-cream">
            <x-lucide-arrow-right class="h-4 w-4" />
          </span>
        </a>
      </div>

      <div class="rounded-xl border border-brand/40 bg-brand/5 px-6 py-4">
        <p class="flex items-start gap-2 text-xs leading-relaxed text-fg/70">
          <x-lucide-zap class="mt-0.5 h-4 w-4 flex-none text-brand-light" />
          <span>
            <span class="font-semibold text-brand-light">Discounts available.</span>
            Our build crews are booking out fast — submit today to hold your spot on the calendar.
          </span>
        </p>
      </div>
    </div>
  </div>
</section>