@props([
    'ctaLabel' => 'Get A Free Estimate',
    'align' => 'left',
    'variant' => 'column',
    'color' => 'primary',
    'class' => '',
])

@php
  $phone = config('company.phone');
  $btnVariants = [
      'primary' => 'btn btn-primary',
      'warm' => 'btn btn-warm',
      'muted' => 'btn btn-muted',
  ];
@endphp

@if ($variant === 'column')
  {{-- Par de CTAs reusable (botón primario + "Or Call" + botón call mobile), el
     mismo bloque repetido en why-choose-us / how-it-works / cada sección de
     servicio del mockup de Figma. --}}
  <div
    class="{{ $align === 'center' ? 'flex justify-center' : 'flex' }} {{ $class }} mt-8 gap-2 md:mt-10 md:flex-col md:items-center md:gap-6">
    <a href="{{ route('estimate') }}" class="{{ $btnVariants[$color] }}">
      <span class="uppercase">{{ $ctaLabel }}</span>
      <span class="hidden text-white md:block">
        <x-lucide-arrow-right class="h-4 w-4" />
      </span>
    </a>
    <a href="{{ $phone['href'] }}" class="text-fg hidden items-center justify-center gap-2 transition-colors md:flex">
      <em>Or</em>
      <span>Call {{ $phone['label'] }}</span>
    </a>
    <a href="{{ $phone['href'] }}" class="btn text-accent-50 bg-muted/45 flex-none px-3 md:hidden md:px-6">
      <x-lucide-phone class="h-4 w-4" fill="currentColor" stroke="currentColor" />
      <span>Call</span>
    </a>
  </div>
@elseif ($variant === 'row')
  <div class="{{ $class }} flex flex-col gap-4 md:flex-row md:gap-6 w-full justify-center">
    <a href="{{ route('estimate') }}" class="{{ $btnVariants[$color] }}">
      <span class="uppercase">Schedule A Free Estimate</span>
    </a>
    <a href="{{ config('company.phone.href') }}" class="btn btn-muted flex-none px-3 md:px-6">
      <x-lucide-phone class="h-4 w-4" fill="currentColor" stroke="currentColor" />
      <span>Call {{ config('company.phone.label') }}</span>
    </a>
  </div>
@endif