@extends('frontend.app')

@section('title', 'Welcome Page')

@section('frontend_app')
<!-- Main Content -->
    <main>
      <section class="relative w-full mb-48 md:mb-40 lg:mb-44">
        <figure class="relative z-0">
          <img
            draggable="false"
            class="w-full h-[458px] md:h-[508px] object-cover object-center"
            src="https://img.freepik.com/free-photo/cityscape_1127-3754.jpg?t=st=1753176973~exp=1753180573~hmac=9c2ab389eea2cbff0ff0b5c729d3d49c5abe921ddbbc44f35d626dc8569a77a6&w=1380"
            alt=""
          />
        </figure>
        <div
          class="bg-[var(--soft-white)] shadow-sm mx-auto w-full max-w-sm md:max-w-3xl lg:max-w-5xl rounded-md p-5 md:p-9 absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 z-10"
        >
          <h1
            class="text-lg md:text-xl lg:text-2xl font-bold mb-5 line-clamp-2"
          >
            Unlock the Door to Ultra‑Luxury Homes—Find Yours Now
          </h1>
          <form
            id="searchForm"
            method="post"
            action=""
            class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-4 items-end select-none"
          >
            
            <!-- Location (States) -->
            <div class="relative space-y-1">
                <label for="location" class="opacity-60 ps-1 text-sm md:text-base">Location</label>
                <select
                    id="location"
                    name="location"
                    required
                    class="font-medium block w-full appearance-none bg-[var(--soft-white)] border border-gray-300 rounded-md px-4 py-3 pr-8 focus:outline-none cursor-pointer"
                >
                    <option value="">Select Location</option>
                    @foreach($data['states'] as $state)
                        <option value="{{ $state }}">{{ $state }}</option>
                    @endforeach
                </select>
                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-end px-2 pb-4">
                    <svg class="fill-current text-gray-500 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M5.293 7.293L10 12l4.707-4.707-1.414-1.414L10 9.172 6.707 5.879z" />
                    </svg>
                </div>
            </div>

            <!-- Property Type -->
            <div class="relative space-y-1">
                <label for="propertyType" class="opacity-60 ps-1 text-sm md:text-base">Property Type</label>
                <select
                    id="propertyType"
                    name="propertyType"
                    required
                    class="font-medium block w-full appearance-none bg-[var(--soft-white)] border border-gray-300 rounded-md px-4 py-3 pr-8 focus:outline-none cursor-pointer"
                >
                    <option value="">Select Property Type</option>
                    @foreach($data['property_types'] as $type)
                        @if($type)
                            <option value="{{ $type }}">{{ $type }}</option>
                        @endif
                    @endforeach
                </select>
                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-end px-2 pb-4">
                    <svg class="fill-current text-gray-500 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M5.293 7.293L10 12l4.707-4.707-1.414-1.414L10 9.172 6.707 5.879z" />
                    </svg>
                </div>
            </div>

        <!-- Property Mode (Category Names) -->
        <div class="relative space-y-1">
            <label for="propertyMode" class="opacity-60 ps-1 text-sm md:text-base">Property Mode</label>
            <select
                id="propertyMode"
                name="propertyMode"
                required
                class="font-medium block w-full appearance-none bg-[var(--soft-white)] border border-gray-300 rounded-md px-4 py-3 pr-8 focus:outline-none cursor-pointer"
            >
                <option value="">Select Mode</option>
                @foreach($data['category_names'] as $mode)
                    <option value="{{ $mode }}">{{ ucfirst($mode) }}</option>
                @endforeach
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-end px-2 pb-4">
                <svg class="fill-current text-gray-500 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                    <path d="M5.293 7.293L10 12l4.707-4.707-1.414-1.414L10 9.172 6.707 5.879z" />
                </svg>
            </div>
        </div>

            <!-- Submit Button -->
            <button
              type="submit"
              class="mt-2 sm:mt-0 bg-[var(--primary-color)] text-white px-6 py-3 rounded-md focus:outline-none flex items-center justify-center gap-x-2 hover:scale-95 transition-all duration-200"
            >
              <img
                draggable="false"
                class="size-6 select-none pointer-events-none"
                src="./assets/images/icons/search.gif"
                alt="Search Icon"
              />
              Search
            </button>
          </form>
        </div>
      </section>
      <section>
        <div class="lg:container mx-auto px-4 md:px-10 lg:px-32">
          <p
            class="text-[var(--primary-color)] text-center mb-3 font-medium text-base md:text-lg"
          >
            Find rental properties anywhere
          </p>
          <h2
            class="text-center text-2xl md:text-3xl lg:text-4xl font-semibold mb-6 md:mb-8 lg:mb-8"
          >
            Discover Popular Property
          </h2>
          <!-- Filter Section -->
          <div class="flex justify-between items-center gap-x-5 mb-7 px-2">
            <!-- Heading or Line on Left -->
            <div class="flex items-center gap-x-1">
              <p id="propertyCount" class="text-gray-500 text-sm font-medium">
                Showing 6 out of 6 properties.
              </p>
            </div>

            <!-- Filter Dropdown on Right -->
            <div class="relative">
              <button
                class="text-sm md:text-base px-4 py-2 bg-[var(--primary-color)] text-white font-medium rounded-lg flex items-center gap-x-2 whitespace-nowrap select-none group hover:bg-[var(--primary-color)]/90 transition-all duration-200"
                id="filterBtn"
              >
                <span class="filter-text">Filter</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="size-5 lucide lucide-sliders-horizontal-icon lucide-sliders-horizontal"
                >
                  <line x1="21" x2="14" y1="4" y2="4" />
                  <line x1="10" x2="3" y1="4" y2="4" />
                  <line x1="21" x2="12" y1="12" y2="12" />
                  <line x1="8" x2="3" y1="12" y2="12" />
                  <line x1="21" x2="16" y1="20" y2="20" />
                  <line x1="12" x2="3" y1="20" y2="20" />
                  <line x1="14" x2="14" y1="2" y2="6" />
                  <line x1="8" x2="8" y1="10" y2="14" />
                  <line x1="16" x2="16" y1="18" y2="22" />
                </svg>
              </button>
              <div
                id="filterMenu"
                class="absolute right-0 mt-2 w-48 bg-white shadow-lg rounded-lg hidden z-20"
              >
                <ul class="p-2">
                  <!-- Filter options -->
                  <li
                    class="px-4 py-2 hover:bg-gray-200 cursor-pointer"
                    data-filter="For Sale"
                  >
                    For Sale
                  </li>
                  <li
                    class="px-4 py-2 hover:bg-gray-200 cursor-pointer"
                    data-filter="For Rent"
                  >
                    For Rent
                  </li>
                  <li
                    class="px-4 py-2 hover:bg-gray-200 cursor-pointer"
                    data-filter="For Lease"
                  >
                    For Lease
                  </li>
                  <li
                    class="px-4 py-2 hover:bg-gray-200 cursor-pointer"
                    data-filter="All"
                  >
                    All
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div
            id="propertyCards"
            class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-7"
          >
            <!-- Property Cards Will Be Injected Here -->
          </div>
          <p
            class="text-[var(--primary-color)] text-center mb-3 font-medium text-base md:text-lg mt-16 md:mt-28"
          >
            Browse some of our
          </p>
          <h2
            class="text-center text-2xl md:text-3xl lg:text-4xl font-semibold mb-6 md:mb-8 lg:mb-8"
          >
            Recently Added Projects
          </h2>
          <div
            id="popularPropertyCards"
            class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-7"
          >
            <!-- Code is injected from index.js -->
          </div>
          <div
            class="my-16 bg-[var(--primary-color)] rounded-xl p-5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-y-4 gap-x-6 relative overflow-hidden"
          >
            <div>
              <img
                draggable="false"
                class="aspect-video object-cover rounded-lg"
                src="https://img.freepik.com/free-photo/medium-shot-couple-talking-real-estate-agent_23-2150322073.jpg?t=st=1753248208~exp=1753251808~hmac=8ca1f284565209337f3da0c5831bca1d1aaf0259c4721b316b67679fad2b0e1d&w=1380"
                alt=""
              />
            </div>
            <div
              class="p-2 md:p-5 flex flex-col justify-center items-start gap-y-3 relative z-10"
            >
              <h3
                class="text-white text-2xl md:text-3xl lg:text-4xl font-semibold"
              >
                Ready to find your dream property?
              </h3>
              <p class="text-white/80 text-lg mt-2">
                Whether you're looking for a home or a smart investment, our
                team is here to guide you every step of the way. Let's make it
                happen!
              </p>
              <div class="mt-2">
                <a
                  draggable="false"
                  href="property-details.html"
                  class="bg-white inline-block select-none text-[var(--primary-color)] px-6 py-3 rounded-md hover:scale-95 transition-all duration-200 font-medium"
                  >Get in Touch</a
                >
              </div>
            </div>
            <div
              class="bg-transparent size-96 border-[60px] border-white rounded-full absolute top-[90%] md:top-1/2 -translate-y-1/2 right-0 translate-x-1/2 z-0 opacity-30 md:scale-125"
            ></div>
          </div>
        </div>
      </section>
      <section class="bg-[var(--soft-white)] relative">
        <img
          class="w-full h-full absolute inset-0 z-0 object-bottom object-cover opacity-20"
          src="./assets/images/buildings-shadow.webp"
          alt=""
        />
        <div
          class="px-4 md:px-10 lg:px-32 lg:container mx-auto py-14 md:py-20 z-10 relative"
        >
          <p
            class="text-[var(--primary-color)] text-center mb-3 md:mb-4 font-medium text-sm md:text-lg"
          >
            Our client's success is our greatest achievement.
          </p>
          <h3
            class="text-center text-2xl md:text-3xl lg:text-4xl font-semibold mb-7 md:mb-8 lg:mb-8"
          >
            Hear From Our Happy Clients
          </h3>
          <div
            class="grid grid-cols-1 md:grid-cols-3 gap-y-10 md:gap-x-12 px-4 md:px-0"
          >
            <div class="">
              <div class="flex items-center justify-center">
                <img
                  draggable="false"
                  class="rounded-full size-20 object-cover object-center border-dashed border-[var(--primary-color)] border-2 p-1"
                  src="https://placehold.co/60x60"
                  alt=""
                />
              </div>
              <p class="text-center my-7 font-medium text-lg">
                "Creative, innovative and strategic. We have great achievements
                made together and looking to more"
              </p>
              <div
                class="flex items-center justify-center gap-x-2 text-yellow-500 mb-3"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-star-fill"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                  />
                </svg>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-star-fill"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                  />
                </svg>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-star-fill"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                  />
                </svg>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-star-fill"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                  />
                </svg>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-star-fill"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                  />
                </svg>
              </div>
              <div class="flex flex-col gap-y-1 text-center">
                <span class="text-gray-500 font-medium text-sm"
                  >Henry Arthur</span
                >
                <span class="text-black">Head of Engineering, Loom</span>
              </div>
            </div>
            <div class="">
              <div class="flex items-center justify-center">
                <img
                  draggable="false"
                  class="rounded-full size-20 object-cover object-center border-dashed border-[var(--primary-color)] border-2 p-1"
                  src="https://placehold.co/60x60"
                  alt=""
                />
              </div>
              <p class="text-center my-7 font-medium text-lg">
                "Creative, innovative and strategic. We have great achievements
                made together and looking to more"
              </p>
              <div
                class="flex items-center justify-center gap-x-2 text-yellow-500 mb-3"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-star-fill"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                  />
                </svg>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-star-fill"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                  />
                </svg>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-star-fill"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                  />
                </svg>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-star-fill"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                  />
                </svg>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-star-fill"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                  />
                </svg>
              </div>
              <div class="flex flex-col gap-y-1 text-center">
                <span class="text-gray-500 font-medium text-sm"
                  >Henry Arthur</span
                >
                <span class="text-black">Head of Engineering, Loom</span>
              </div>
            </div>
            <div class="">
              <div class="flex items-center justify-center">
                <img
                  draggable="false"
                  class="rounded-full size-20 object-cover object-center border-dashed border-[var(--primary-color)] border-2 p-1"
                  src="https://placehold.co/60x60"
                  alt=""
                />
              </div>
              <p class="text-center my-7 font-medium text-lg">
                "Creative, innovative and strategic. We have great achievements
                made together and looking to more"
              </p>
              <div
                class="flex items-center justify-center gap-x-2 text-yellow-500 mb-3"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-star-fill"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                  />
                </svg>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-star-fill"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                  />
                </svg>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-star-fill"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                  />
                </svg>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-star-fill"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                  />
                </svg>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-star-fill"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
                  />
                </svg>
              </div>
              <div class="flex flex-col gap-y-1 text-center">
                <span class="text-gray-500 font-medium text-sm"
                  >Henry Arthur</span
                >
                <span class="text-black">Head of Engineering, Loom</span>
              </div>
            </div>
          </div>
        </div>
      </section>
      <div class="pt-12 md:pt-16 bg-[var(--primary-color)]">
        <div class="lg:container mx-auto px-4 md:px-10 lg:px-32">
          <h3
            class="text-center text-2xl md:text-3xl lg:text-4xl font-semibold mb-0 md:mb-3 lg:mb-3 text-white"
          >
            Our Partners
          </h3>
          <div class="pb-12 md:pb-14 pt-6">
            <div class="grid grid-cols-3 md:grid-cols-3 lg:grid-cols-5 gap-6">
              <img
                draggable="false"
                class="aspect-video w-[100px] md:w-[120px] object-contain mx-auto"
                src="./assets/images/icons/logo.jpg"
                alt="Partner 1"
              />
              <img
                draggable="false"
                class="aspect-video w-[100px] md:w-[120px] object-contain mx-auto"
                src="./assets/images/icons/logo.jpg"
                alt="Partner 1"
              />
              <img
                draggable="false"
                class="aspect-video w-[100px] md:w-[120px] object-contain mx-auto"
                src="./assets/images/icons/logo.jpg"
                alt="Partner 1"
              />
              <img
                draggable="false"
                class="aspect-video w-[100px] md:w-[120px] object-contain mx-auto"
                src="./assets/images/icons/logo.jpg"
                alt="Partner 1"
              />
              <img
                draggable="false"
                class="aspect-video w-[100px] md:w-[120px] object-contain mx-auto"
                src="./assets/images/icons/logo.jpg"
                alt="Partner 1"
              />
            </div>
          </div>
        </div>
      </div>
      <section class="relative py-16">
        <img
          class="absolute inset-0 z-0 w-full h-full object-cover object-bottom opacity-10"
          src="./assets/images/building-lines.webp"
          alt=""
        />
        <div class="px-4 md:px-10 lg:px-32 lg:container mx-auto z-10 relative">
          <h3
            class="text-center text-2xl md:text-3xl lg:text-4xl font-semibold mb-3 md:mb-3 lg:mb-3"
          >
            How It Works
          </h3>
          <p class="text-black/50 text-center mb-8 text-base md:text-lg">
            Find your ideal property and get in touch with us in<br />
            just a few easy steps!
          </p>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div
              class="step p-7 text-center bg-gray-50 border border-[var(--primary-color)] shadow-md rounded-tr-2xl rounded-bl-2xl h-full"
            >
              <div
                class="icon bg-primary rounded-full p-4 mb-2 mx-auto flex justify-center items-center text-[var(--primary-color)]"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="size-9 lucide lucide-scan-search-icon lucide-scan-search"
                >
                  <path d="M3 7V5a2 2 0 0 1 2-2h2" />
                  <path d="M17 3h2a2 2 0 0 1 2 2v2" />
                  <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
                  <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
                  <circle cx="12" cy="12" r="3" />
                  <path d="m16 16-1.9-1.9" />
                </svg>
              </div>
              <h3 class="text-2xl font-semibold mb-2">Browse Properties</h3>
              <p class="text-black/70">
                Browse through a wide selection of properties that suit your
                preferences and needs.
              </p>
            </div>
            <div
              class="step p-7 text-center bg-gray-50 border border-[var(--primary-color)] shadow-md rounded-tr-2xl rounded-bl-2xl h-full"
            >
              <div
                class="icon bg-primary rounded-full p-4 mb-2 mx-auto flex justify-center items-center text-[var(--primary-color)]"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="size-9 lucide lucide-building2-icon lucide-building-2"
                >
                  <path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" />
                  <path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" />
                  <path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" />
                  <path d="M10 6h4" />
                  <path d="M10 10h4" />
                  <path d="M10 14h4" />
                  <path d="M10 18h4" />
                </svg>
              </div>
              <h3 class="text-2xl font-semibold mb-2">View Property Details</h3>
              <p class="text-black/70">
                Click on any listing to see photos, pricing, and details to help
                you make an informed decision.
              </p>
            </div>
            <div
              class="step p-7 text-center bg-gray-50 border border-[var(--primary-color)] shadow-md rounded-tr-2xl rounded-bl-2xl h-full"
            >
              <div
                class="icon bg-primary rounded-full p-4 mb-2 mx-auto flex justify-center items-center text-[var(--primary-color)]"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="size-9 lucide lucide-send-icon lucide-send"
                >
                  <path
                    d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"
                  />
                  <path d="m21.854 2.147-10.94 10.939" />
                </svg>
              </div>
              <h3 class="text-2xl font-semibold mb-2">Send Enquiry</h3>
              <p class="text-black/70">
                Interested in a property? Send us your enquiry and we’ll get
                back to you with more information.
              </p>
            </div>
            <div
              class="step p-7 text-center bg-gray-50 border border-[var(--primary-color)] shadow-md rounded-tr-2xl rounded-bl-2xl h-full"
            >
              <div
                class="icon bg-primary rounded-full p-4 mb-2 mx-auto flex justify-center items-center text-[var(--primary-color)]"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="size-9 lucide lucide-calendar-check2-icon lucide-calendar-check-2"
                >
                  <path d="M8 2v4" />
                  <path d="M16 2v4" />
                  <path
                    d="M21 14V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8"
                  />
                  <path d="M3 10h18" />
                  <path d="m16 20 2 2 4-4" />
                </svg>
              </div>
              <h3 class="text-2xl font-semibold mb-2">Schedule a Visit</h3>
              <p class="text-black/70">
                We’ll arrange a visit or provide additional details for you to
                make the best choice.
              </p>
            </div>
            <div
              class="step p-7 text-center bg-gray-50 border border-[var(--primary-color)] shadow-md rounded-tr-2xl rounded-bl-2xl h-full"
            >
              <div
                class="icon bg-primary rounded-full p-4 mb-2 mx-auto flex justify-center items-center text-[var(--primary-color)]"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="size-9 lucide lucide-book-open-check-icon lucide-book-open-check"
                >
                  <path d="M12 21V7" />
                  <path d="m16 12 2 2 4-4" />
                  <path
                    d="M22 6V4a1 1 0 0 0-1-1h-5a4 4 0 0 0-4 4 4 4 0 0 0-4-4H3a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h6a3 3 0 0 1 3 3 3 3 0 0 1 3-3h6a1 1 0 0 0 1-1v-1.3"
                  />
                </svg>
              </div>
              <h3 class="text-2xl font-semibold mb-2">Make Your Decision</h3>
              <p class="text-black/70">
                Once you're ready, make your decision and proceed with the
                purchase or rental process.
              </p>
            </div>
          </div>
          <div class="flex justify-center mt-2 md:mt-8">
            <a
              draggable="false"
              href="#contact"
              class="bg-[var(--primary-color)] text-white py-3 px-6 rounded-lg mt-6 inline-block"
              >Get Started</a
            >
          </div>
        </div>
      </section>
    </main>
@endsection