@props([
  'ctaLabel' => 'Build My Estimate',
  'headlineLead' => 'Your',
  'headlineEmph' => 'dream project',
  'headlineTail' => 'is a quote away',
])

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

{{-- Migración fiel de LeadForm-v1b.astro: pitch a la izquierda vía slot, y a la
     derecha un box con headline (énfasis en `headlineEmph`) + CTA (botón + "Or
     Call" + botón call mobile) + franja de urgencia con ⚡. No es un formulario:
     el CTA lleva a /estimate. --}}
<section id="estimate" class="bg-surface-2 py-12 lg:py-20">
  <div class="grid grid-cols-1 gap-12 container lg:grid-cols-2 lg:gap-16">
    {{-- Left: pitch --}}
    <div class="order-first">
      {{ $slot }}
    </div>

    {{-- Right: CTA card --}}
    <div class="order-last flex flex-col gap-8">
      <div class="bg-surface p-7 md:px-12 text-center rounded overflow-hidden flex-1 flex flex-col justify-center gap-4 md:gap-9">
        <p class="text-3xl leading-[1.05] md:text-4xl text-fg font-bold">
          {{ $headlineLead }}
          <span class="text-brand-light whitespace-nowrap">{{ $headlineEmph }}</span>
          {{ $headlineTail }}
        </p>
        <div class="flex justify-center flex-col md:items-center gap-2 md:gap-6 mt-4 md:mt-0">
          <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>

      <div class="mt-8 rounded border border-brand/40 bg-brand/10 p-4 md:px-8">
        <p class="leading-relaxed text-fg/80">
          {{-- Mes dinámico: el fallback ya es server-rendered (Laravel corre en cada
               request, no es SSG), pero el <script> lo reescribe client-side por si
               la página quedara cacheada. Réplica del patrón de las landings Astro. --}}
          <span class="font-semibold text-brand">⚡ Limited <span data-current-month>{{ now()->format('F') }}</span> availability.</span>
          Our install crews are booking out fast — submit today to hold your spot on the calendar.
        </p>
      </div>

      @once
        @push('scripts')
          <script>
            // Reescribe el mes actual client-side (defensa ante HTML cacheado).
            (function () {
              var month = new Date().toLocaleDateString('en-US', { month: 'long' });
              document.querySelectorAll('[data-current-month]').forEach(function (el) {
                el.textContent = month;
              });
            })();
          </script>
        @endpush
      @endonce
    </div>
  </div>
</section>