@php
  $steps = [
    [
      'n' => '1',
      'title' => 'Free Estimate',
      'body' =>
        'We visit your property, assess your space, and deliver a clear written quote — at no cost to you.',
    ],
    [
      'n' => '2',
      'title' => 'Design & Material Selection',
      'body' =>
        'Choose your project shape, size, finish, and features. We walk you through every option.',
    ],
    [
      'n' => '3',
      'title' => 'Expert Installation',
      'body' =>
        'Our crew handles everything — excavation, base prep, installation, cleanup.',
    ],
    [
      'n' => '4',
      'title' => 'Walkthrough & Warranty',
      'body' =>
        'We inspect every inch with you at final walkthrough and hand you a written warranty before we leave.',
    ],
  ];
@endphp

{{-- How It Works: 4 pasos con círculo outline cyan + línea conectora + CTA cálido. --}}
<section class="bg-surface-2 py-12 lg:py-20">
  <div class="container">
    <x-home.section-header eyebrow="How It Works" lead="Simple Process." emph="Stunning Results." />

    <ol class="mt-14 grid grid-cols-1 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 lg:gap-x-0">
      @foreach ($steps as $i => $step)
        <li>
          <div class="flex items-center">
            <span
              class="flex h-11 w-11 flex-none items-center justify-center rounded-full border-2 border-brand bg-transparent text-lg font-medium text-brand-light"
            >
              {{ $step['n'] }}
            </span>
            @if ($i < count($steps) - 1)
              <span class="ml-3 hidden h-px flex-1 bg-brand/40 lg:block"></span>
            @endif
          </div>
          <h3 class="mt-5 text-xs font-semibold tracking-widest text-fg uppercase">
            {{ $step['title'] }}
          </h3>
          <p class="mt-2 max-w-60 text-xs leading-relaxed text-fg/55">{{ $step['body'] }}</p>
        </li>
      @endforeach
    </ol>

    <div class="mt-16 flex justify-center">
      <a href="{{ route('estimate') }}" class="btn-warm">
        Get My Free Project Estimate <x-lucide-arrow-right class="h-4 w-4" />
      </a>
    </div>
  </div>
</section>