@props([
  'steps' => [],
  'ctaLabel' => 'Get A Free Estimate',
])

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

{{-- Migración fiel de how-it-work.astro (to-migrate/). El slot es el heading
     (section-header lo define la página, no el componente), pasos centrados en
     mobile/sm y alineados a la izquierda desde sm, círculo con bg-surface para
     tapar la línea conectora, y el mismo bloque de CTA que why-choose-us. --}}
<section class="bg-surface-2 py-12 lg:py-20">
  <div class="container">
    {{ $slot }}

    <ol class="mt-14 grid grid-cols-1 gap-y-12 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-14 lg:grid-cols-4 lg:gap-x-0 lg:gap-y-0">
      @foreach ($steps as $i => $step)
        <li class="flex flex-col items-center text-center lg:items-start lg:text-left">
          <div class="flex w-full items-center justify-center lg:justify-start">
            <span class="bg-surface flex size-15 lg:size-11 flex-none items-center justify-center rounded-full border-2 border-brand text-[18px] font-medium text-brand-light">
              {{ $step['n'] }}
            </span>
            @if ($i < count($steps) - 1)
              <span class="hidden h-0.5 flex-1 bg-brand-light lg:block"></span>
            @endif
          </div>
          <h3 class="mt-5 text-base lg:text-sm font-semibold uppercase tracking-[0.12em] text-fg">
            {{ $step['title'] }}
          </h3>
          <p class="mt-2 max-w-60 text-sm leading-relaxed text-fg/45">
            {{ $step['body'] }}
          </p>
        </li>
      @endforeach
    </ol>

    <div class="md:mt-20 mt-16 flex justify-center md:flex-col md:items-center gap-2 md:gap-6">
      <a href="{{ route('estimate') }}" class="btn btn-primary">
        <span class="uppercase">{{ $ctaLabel }}</span>
        <span class="text-white hidden md:block">
          <x-lucide-arrow-right class="w-4 h-4" />
        </span>
      </a>
      <a href="{{ $phone['href'] }}" class="text-fg transition-colors md:flex justify-center gap-2 items-center hidden">
        <em>Or</em>
        <span>Call {{ $phone['label'] }}</span>
      </a>
      <a href="{{ $phone['href'] }}" class="btn px-3 md:px-6 flex-none md:hidden text-accent-50 bg-muted/45">
        <x-lucide-phone class="w-4 h-4" fill="currentColor" stroke="currentColor" />
        <span>Call</span>
      </a>
    </div>
  </div>
</section>