"use client";

import useTitleAnimation from "@/hooks/useTitleAnimation";
import FeaturedPropertyCard from "@/components/home/FeaturedPropertyCard";
import Title from "@/components/atoms/Title";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

const featuredProperties = [
  {
    image: "/images/buildings/featured-2.webp",
    hoverImage: "/images/buildings/featured-2-night.webp",
    title: "Navana Khodeza Pinewood",
    category: "residential",
    address: "Gulshan",
  },
  {
    image: "/images/buildings/featured-2.webp",
    hoverImage: "/images/buildings/featured-2-night.webp",
    title: "Resonance by Navana",
    category: "commercial",
    address: "Banani",
  },
  {
    image: "/images/buildings/featured-2.webp",
    hoverImage: "/images/buildings/featured-2-night.webp",
    title: "Navana Fateha Windermere",
    category: "condominium",
    address: "Gulshan",
  },
];

const FeaturedProperties = () => {
  useTitleAnimation(".featured-section-title", ".featured-section", {
    trigger: {
      start: "-10% 75%",
      end: "top 60%",
      toggleActions: "play none none reverse",
    },
  });

  return (
    <section className="min-h-dvh featured-section bg-[#F5F5F5]">
      <div className="container mx-auto ">
        <div className="pt-20 md:pt-32 pb-20 px-4 md:px-0">
          <div className="text-center lg:text-left mb-10 md:mb-32 lg:px-6 2xl:px-0">
            <Title
              text="Featured Properties"
              className="featured-section-title"
            />
          </div>
          {/* Mobile Swiper */}
          <div className="md:hidden -mx-4">
            <style dangerouslySetInnerHTML={{__html: `
              .featured-properties-swiper .swiper-pagination {
                position: relative !important;
                margin-top: 16px !important;
                bottom: auto !important;
              }
              .featured-properties-swiper .swiper-pagination-bullet {
                background: #D3D3D3 !important;
                opacity: 1 !important;
                width: 6px !important;
                height: 6px !important;
                border-radius: 50% !important;
                margin: 0 3px !important;
                transition: all 0.3s ease !important;
              }
              .featured-properties-swiper .swiper-pagination-bullet-active {
                background: #E95D80 !important;
                width: 36px !important;
                height: 6px !important;
                border-radius: 3px !important;
              }
            `}} />
            <Swiper
              modules={[Navigation, Pagination]}
              spaceBetween={16}
              slidesPerView={1.1}
              pagination={{ 
                clickable: true
              }}
              
              className="featured-properties-swiper"
              style={{ padding: "0 16px" }}
            >
              {featuredProperties.map((property, index) => (
                <SwiperSlide key={index}>
                  <FeaturedPropertyCard
                    image={property.image}
                    hoverImage={property.hoverImage}
                    title={property.title}
                    category={property.category}
                    address={property.address}
                  />
                </SwiperSlide>
              ))}
            </Swiper>
          </div>

          {/* Desktop Grid */}
          <div className="hidden md:grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10 md:gap-16 px-6 2xl:px-0">
            {featuredProperties.map((property, index) => (
              <FeaturedPropertyCard
                key={index}
                image={property.image}
                hoverImage={property.hoverImage}
                title={property.title}
                category={property.category}
                address={property.address}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default FeaturedProperties;