@extends('frontend.app')

@section('frontend_app')
<!-- Main Content -->
      <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="{{ asset('assets/images/pages/Banner_img3.jpg') }}"
            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="GET"
                action="{{ route('frontend.search') }}"
                class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-4 items-end select-none"
            >
                <!-- Location -->
                <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>

                <!-- 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>

                <!-- Property Mode -->
                <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 }}">
                                @if($mode === 'sell')
                                    Buy
                                @else
                                    {{ ucfirst($mode) }}
                                @endif
                            </option>
                        @endforeach
                    </select>
                </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>

<!----Start Discover Property Section here---->
<!----===========Start Heading===================-->
<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>
     </div>
</section>
<!----===========END=Heading==================-->
<!--=========== Start Property Views Section ==========-->
<section>
    <div class="lg:container mx-auto px-4 md:px-10 lg:px-32">
        <div class="flex justify-between items-center gap-x-5 mb-7 px-2">
            <div class="flex items-center gap-x-1">
                <p id="propertyCounts" class="text-gray-500 text-sm font-medium">
                    Showing {{ count($allProperties) }} out of {{ count($allProperties) }} properties.
                </p>
            </div>
            <div class="relative">
                <button id="propertyFiltersBtn"
                    class="property-filter-btn 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 hover:bg-[var(--primary-color)]/90 transition-all duration-200">
                    <span id="selectedFiltersLabel">Filter</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        viewBox="0 0 24 24">
                        <line x1="21" x2="14" y1="4" y2="4"></line>
                        <line x1="10" x2="3" y1="4" y2="4"></line>
                        <line x1="21" x2="12" y1="12" y2="12"></line>
                        <line x1="8" x2="3" y1="12" y2="12"></line>
                        <line x1="21" x2="16" y1="20" y2="20"></line>
                        <line x1="12" x2="3" y1="20" y2="20"></line>
                        <line x1="14" x2="14" y1="2" y2="6"></line>
                        <line x1="8" x2="8" y1="10" y2="14"></line>
                        <line x1="16" x2="16" y1="18" y2="22"></line>
                    </svg>
                </button>
                <div id="propertyFiltersMenu"
                    class="absolute right-0 mt-2 w-48 bg-white shadow-lg rounded-lg z-20 hidden">
                    <ul id="propertyFilterList" class="p-2 space-y-1">
                      <li class="px-4 py-2 hover:bg-gray-200 cursor-pointer" data-filter="all">All</li>
                      @foreach($categories as $category)
                          <li class="px-4 py-2 hover:bg-gray-200 cursor-pointer" data-filter="{{ strtolower($category) }}">
                              For {{ ucfirst($category) }}
                          </li>
                      @endforeach
                  </ul>
               </div>
            </div>
        </div>
    </div>
</section>

<!--=========== Start Property Grid Section ==========-->
<section>
    <div class="lg:container mx-auto px-4 md:px-10 lg:px-32">
        <div id="propertyCards" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach ($allProperties as $property)
                <div class="property-cards w-full bg-gray-100 p-2 rounded-md group flex flex-col justify-between"
                     data-category="{{ strtolower($property['category_name'] ?? 'unknown') }}">
                    <a href="{{ url(strtolower($property['category_name']) . '/' . $property['slug']) }}"
                       class="inline-block overflow-hidden rounded-md relative">
                        <span
                            class="text-xs font-medium text-white bg-[var(--primary-color)] px-2 py-1 rounded-full absolute top-2 right-2 z-10">
                            for {{ ucfirst($property['category_name'] ?? 'N/A') }}
                        </span>
                        <img class="aspect-video object-cover object-center group-hover:scale-150 transition-all duration-700"
                             src="{{ asset($property['banner_img'] ?? 'assets/images/property/dummy.webp') }}"
                             alt="{{ $property['property_name'] }}">
                    </a>
                    <div class="px-1 py-2">
                        <a href="{{ url(strtolower($property['category_name']) . '/' . $property['slug']) }}"
                           class="line-clamp-2 text-lg font-semibold">
                            {{ $property['property_name'] }}
                        </a>
                        <div class="bg-gray-50 p-4 flex justify-start items-center flex-wrap gap-4 rounded-lg mt-2 mb-4">
                            <div class="flex items-center gap-x-2 opacity-70">
                                <span class="text-sm font-medium">{{ $property['detail']['bedrooms'] ?? '-' }} Bedrooms</span>
                            </div>
                            <div class="flex items-center gap-x-2 opacity-70">
                                <span class="text-sm font-medium">{{ $property['detail']['bathroom'] ?? '-' }} Bathrooms</span>
                            </div>
                            <div class="flex items-center gap-x-2 opacity-70">
                                <span class="text-sm font-medium">{{ $property['detail']['property_size'] ?? '-' }} SF</span>
                            </div>
                            <div class="flex items-center gap-x-2 opacity-70">
                                <span class="text-sm font-medium">
                                    {{ $property['address']['area'] ?? $property['address']['city'] ?? 'Location' }}
                                </span>
                            </div>
                        </div>
                        <div class="flex justify-between items-end gap-x-5 px-2">
                            <span class="font-medium text-black/40 text-sm">
                                <b class="text-lg text-[var(--primary-color)]">₹{{ number_format($property['price']) }}</b>
                            </span>
                            <a href="{{ url(strtolower($property['category_name']) . '/' . $property['slug']) }}"
                               class="inline-block text-sm bg-[var(--primary-color)] py-2 px-4 rounded-md text-white font-medium whitespace-nowrap">
                                View Details
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
<!----END Discover Property Section here---->
<!---============-===========-->
<!----=======Start Our client's success========-->
<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>
@endsection
@push('scripts')
<!--=========== Script for Filter Logic ==========-->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const filterBtn = document.getElementById("propertyFiltersBtn");
        const filterMenu = document.getElementById("propertyFiltersMenu");
        const filterOptions = filterMenu.querySelectorAll("li[data-filter]");
        const cards = document.querySelectorAll(".property-cards");
        const selectedLabel = document.getElementById("selectedFiltersLabel");
        const propertyCount = document.getElementById("propertyCounts");

        // Toggle dropdown
        filterBtn.addEventListener("click", () => {
            filterMenu.classList.toggle("hidden");
        });

        // Filter options click
        filterOptions.forEach(option => {
            option.addEventListener("click", () => {
                const selectedCategory = option.getAttribute("data-filter").toLowerCase();
                selectedLabel.textContent = option.textContent;

                let visibleCount = 0;

                cards.forEach(card => {
                    const cardCategory = card.getAttribute("data-category");
                    if (selectedCategory === 'all' || selectedCategory === cardCategory) {
                        card.classList.remove("hidden");
                        visibleCount++;
                    } else {
                        card.classList.add("hidden");
                    }
                });

                // Update visible count
                propertyCount.textContent = `Showing ${visibleCount} out of ${cards.length} properties.`;

                // Hide menu
                filterMenu.classList.add("hidden");
            });
        });
    });
</script>
@endpush