@props([
    'ctaLabel' => 'Get A Free Estimate',
    'images' => [],
    'hideOnMobile' => false,
])

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

{{-- v2: migración fiel del WhyChooseUs.astro original (to-migrate/WhyChooseUs.astro).
     El slot es el bloque de contenido izquierdo; $images son las 3 fotos del collage
     (grid 2 cols x 2 rows, la primera en row-span-2), igual que el componente Astro. --}}
<section {{ $attributes }} class="bg-surface-2 py-12 lg:py-20">
  <div class="container mx-auto grid grid-cols-1 gap-6 md:gap-12 xl:grid-cols-[650px_1fr] xl:gap-16">
    {{-- Left: Content --}}
    {{ $slot }}

    {{-- Right: material tiles --}}
    <div class="max-h-150 grid grid-cols-2 grid-rows-2 gap-2 overflow-hidden">
      <picture @class(['relative row-span-2 flex flex-col', 'is-pending-image' => $images[0]['pending'] ?? false])>
        <img src="{{ $images[0]['image'] }}" alt="{{ $images[0]['alt'] }}" loading="lazy" decoding="async"
          class="h-full w-full object-cover" />
      </picture>
      <picture @class(['relative flex flex-col', 'is-pending-image' => $images[1]['pending'] ?? false])>
        <img src="{{ $images[1]['image'] }}" alt="{{ $images[1]['alt'] }}" loading="lazy" decoding="async"
          class="h-full w-full object-cover" />
      </picture>
      <picture @class(['relative flex', 'is-pending-image' => $images[2]['pending'] ?? false])>
        <img src="{{ $images[2]['image'] }}" alt="{{ $images[2]['alt'] }}" loading="lazy" decoding="async"
          class="h-full w-full object-cover" />
      </picture>
    </div>
  </div>

  @if (!empty($ctaLabel))
    <div class="container mt-8 lg:mt-14 flex justify-center gap-2 md:flex-col md:items-center md:gap-6 {{ $hideOnMobile ? 'xl:hidden' : '' }}">
      <a href="{{ route('estimate') }}" class="btn btn-primary px-3 md:px-5 flex-1">
        <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>
  @endif
</section>