@props([
    'hasLocation' => true,
])
<footer class="border-secondary border-t-[3px] bg-[#0d74b9] py-12 text-white">
  <section class="container mx-auto px-4">
    <h2 class="visuallyhidden">Footer</h2>
    <!-- Logo -->
    <div class="mb-6 flex justify-start gap-4">
      <a href="{{ route('home') }}">
        <picture class="block">
          <source media="(max-width: 768px)" srcset="/img/logos/apex-pavers-badge.png?width=103&height=48&format=webp"
            type="image/webp">
          <img class="h-auto max-h-12 w-full md:max-h-14" src="{{ asset('images/logos/apex-pavers-badge.png') }}"
            alt="Company badge logo" height="80" loading="lazy" />
        </picture>
      </a>
    </div>
    <div class="grid grid-rows-[1fr_auto_auto] gap-x-4 xl:grid-cols-2 xl:gap-x-0">
      <!-- Información de contacto -->
      <div class="xs:col-end-2 col-start-1 col-end-3 row-start-1 row-end-2 mb-4 md:mb-0">
        <p class="mb-4 font-semibold">SHOWROOM</p>
        @if ($hasLocation)
          <p id="postaladdress" class="mb-2 font-light md:mb-6">
            725 SE Monterey Rd<br />
            Stuart, FL 34994
          </p>
        @endif
        <p class="mb-0 font-light">Monday - Friday: 8:00am - 5:00pm</p>
        <p class="mb-0 font-light">Saturday: 9:00am - 12:00pm or by appointment</p>
        {{-- <a href="{{ route('services.areas') }}" class="mb-0 font-light mt-6 flex items-center justify-start gap-2">
          <i class="fa-solid fa-location-dot text-white"></i>
          <span class="underline">Service Areas</span>
        </a> --}}
      </div>
      <!-- Call Us -->
      <div class="xs:col-start-2 xs:row-start-1 xs:row-end-2 col-start-1 col-end-3 row-start-2 row-end-3 mb-4 flex flex-col items-start gap-12 sm:gap-4 md:mb-0 md:flex-row">
        <div class="flex-1">
          <p class="mb-4 font-semibold">CALL US</p>
          <p class="flex gap-2 text-white">
            <span>Palm Beach</span>
            <a href="tel:1{{ str_replace('-', '', config('company.phones.palm_beach')) }}" class="no-underline whitespace-nowrap">
              <strong>{{ config('company.phones.palm_beach') }}</strong>
            </a>
          </p>
          <p class="flex gap-2 text-white">
            <span>Treasure Coast</span>
            <a href="tel:1{{ str_replace('-', '', config('company.phones.treasure_coast')) }}" class="no-underline whitespace-nowrap">
              <strong>{{ config('company.phones.treasure_coast') }}</strong>
            </a>
          </p>
          @if ($hasLocation)
            <p class="mb-0 mt-2 font-light">Serving Martin, Palm Beach, St. Lucie,</p>
            <p class="mb-0 font-light">Indian River and Okeechobee Counties</p>
          @endif
        </div>
        <x-landing.footer.desktop-logos />
      </div>
      <hr class="xs:block col-start-1 col-end-3 row-start-2 row-end-3 my-4 hidden border-[#0085df] md:my-8" />
      <!-- Sección inferior: Licensed, Top Rated y Follow Us -->
      <div
        class="licensed col-start-1 col-end-3 row-start-3 row-end-4 flex flex-col text-left md:col-end-2 md:flex-row md:items-center md:justify-between">
        <hr class="xs:hidden col-start-1 col-end-3 row-start-2 row-end-3 my-8 block border-[#0085df]" />
        <!-- Licensed y Copyright -->
        <div class="mb-6 md:mb-0">
          <p class="mb-1 text-sm font-semibold">
            Licensed &amp; Insured: CPB #4701, U-20589, CPC1458696
          </p>
          <p class="mb-1 text-sm font-light">
            Copyright 2025 Apex Pavers, Inc. DBA Apex Pavers & Pools. All rights reserved.
          </p>
          <p class="mb-0 text-sm font-light">
            <a href="{{ route('legal.privacy') }}" target="_blank" class="underline">Privacy Policy</a>
          </p>
        </div>
      </div>
      <div
        class="col-start-1 col-end-3 row-start-4 row-end-5 flex flex-col gap-4 md:col-start-2 md:row-start-3 md:row-end-4 lg:flex-row lg:items-center lg:gap-6">
        {{-- Logos --}}
        <div class="block md:hidden">
          <x-landing.footer.mobile-logos />
        </div>
        <!-- Top Rated -->
        <div class="top-rated mt-4 flex flex-col items-center justify-start gap-3 md:mt-0 md:flex-row">
          <p
            class="lg:min-w-auto mb-0 min-w-28 whitespace-nowrap text-center text-sm font-bold leading-tight md:text-left">
            TOP RATED ON</p>
          <div class="logos flex grow gap-4 md:gap-2 lg:grid lg:grid-cols-[1fr_auto_1fr]">
            <a target="_blank" class="block"
              href="https://www.google.com/search?q=Apex+Pavers+%26+Pools&oq=apex+pave&gs_lcrp=EgZjaHJvbWUqBggAEEUYOzIGCAAQRRg7Mg0IARAuGK8BGMcBGIAEMgcIAhAAGIAEMgYIAxBFGDkyBggEEEUYQDIGCAUQRRg8MgYIBhBFGDwyBggHEEUYPNIBCDQ0ODJqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8#mpd=~8127018954630913551/customers/reviews">
              <figure class="mb-0 flex max-h-[30px] items-center justify-start lg:min-w-24 lg:justify-center">
                <img src="/images/logos/google-white.svg" alt="Google icon" width="100" height="30"
                  class="max-h-[30px] object-contain" loading="lazy" />
              </figure>
            </a>
            <a target="_blank" class="block"
              href="https://www.angi.com/companylist/us/fl/stuart/apex-pavers-and-pools-reviews-4807978.htm">
              <figure class="mb-0 flex max-h-[30px] items-center justify-start lg:min-w-24 lg:justify-center">
                <img src="/images/logos/angi-white.svg" alt="Angi icon" width="70" height="30"
                  class="max-h-[30px] object-contain" loading="lazy" />
              </figure>
            </a>
            <a target="_blank" class="block"
              href="https://www.houzz.com/professionals/swimming-pool-builders/apex-pavers-and-pools-pfvwus-pf~1292993969">
              <figure class="mb-0 flex max-h-[30px] items-center justify-start lg:min-w-24 lg:justify-center">
                <img src="/images/logos/houzz-white.svg" alt="Houzz icon" width="100" height="30"
                  class="max-h-[30px] object-contain" loading="lazy" />
              </figure>
            </a>
          </div>
        </div>
        <!-- Follow Us -->
        <div class="follow-us flex flex-auto flex-col items-center gap-3 md:flex-row lg:justify-end">
          <p
            class="lg:min-w-auto mb-0 min-w-28 whitespace-nowrap text-center text-sm font-bold leading-tight md:text-left">
            FOLLOW US
          </p>
          <div class="logos flex gap-2">
            <a href="https://www.facebook.com/apexpaversandpools/" target="_blank" class="block text-white">
              <figure class="mb-0 min-w-[25px]">
                <img src="/images/icons/fb-white.svg" alt="Facebook icon" width="25" height="25"
                  class="max-h-[25px] object-contain" loading="lazy" />
              </figure>
            </a>
            <a href="https://www.instagram.com/apexpaversandpools/" target="_blank" class="block text-white">
              <figure class="mb-0 min-w-[25px]">
                <img src="/images/icons/ig-white.svg" alt="Instagram icon" width="25" height="25"
                  class="max-h-[25px] object-contain" loading="lazy" />
              </figure>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</footer>
<script src="https://kit.fontawesome.com/abcfd7b469.js" crossorigin="anonymous"></script>
@include('estimates.includes.chat')