@props([
    'title' => '',
    'subTitle' => '',
    'imageUrl' => '',
    'imageAlt' => '',
])

<div class="mb-8 text-center">
  @if ($title)
    <h2 class="title-section-blue-variant mb-6">{{ $title }}</h2>
  @endif
  <div class="bg-primary mx-auto mb-8 h-1 w-24"></div>
  @if ($subTitle !== '')
    <p class="mx-auto mb-6 max-w-3xl text-xl italic text-gray-700 md:text-[22px]">{{ $subTitle }}</p>
  @endif
  <picture class="mx-auto block w-full max-w-5xl overflow-x-hidden" title="{!! $imageAlt . ' - ' . config('company.name') !!}">
    <img src="{{ $imageUrl }}" width="800" height="600" alt="{{ $imageAlt }}"
      class="aspect-video h-full max-h-[400px] w-full object-cover object-center md:max-h-[50vh]" loading="lazy"
      decoding="async" />
  </picture>
  @if ($slot->isNotEmpty())
    {{ $slot }}
  @endif
</div>
<div class="mt-14 flex flex-col items-center justify-center gap-2 md:flex-row">
  <a href="{{ route('estimate') }}" target="_blank" class="btn btn-secondary px-4 py-2 text-lg">
    Get a Free Estimate Now
  </a>
  <span>or</span>
  <p class="hidden whitespace-nowrap md:inline-block">
    Call Us <a href="tel:+17722385594" target="_blank" class="text-primary underline">772-238-5594</a>
  </p>
  <a href="tel:+17722385594" target="_blank"
    class="btn btn-primary btn-outline flex items-center justify-center gap-2 px-4 py-2 text-base md:hidden">
    <i class="fa-regular fa-phone filter-shadow-sm filter-shadow-sm" aria-hidden="true"></i>
    <span>Call Us Today</span>
  </a>
</div>