import { Suspense, lazy } from "react";
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Autoplay } from 'swiper/modules';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import 'swiper/css';
import 'swiper/css/navigation';
import Skeleton from "../components/common/Skeleton";
import weddingpromo1 from "../assets/images/weddingpromo1.jpg";
import weddingpromo2 from "../assets/images/weddingpromo2.jpg";

import weddingpromo3 from "../assets/images/weddingpromo3.jpg";

import weddingpromo4 from "../assets/images/weddingpromo4.jpg";

const ProfileCompletion = lazy(() => import("../components/profiledashboard/ProfileCompletion"));
const MatrimonyArticles = lazy(() => import("../components/profiledashboard/MatrimonyArticles"));
const MatchingList = lazy(() => import("../components/profiledashboard/MatchingList"));
const VideoSwiperGallery = lazy(() => import("../components/profiledashboard/VideoSwiperGallery"));
const Profilecardemo = lazy(() => import("../components/ui/ProfileCardDemo"));


const images = [
  weddingpromo1,  // bride in saree
  weddingpromo2,  // traditional jewellery
 weddingpromo3,  // flower details
  weddingpromo4,  // couple hands
 weddingpromo1,  // bride close-up
 weddingpromo3,  // groom + bride portrait
  weddingpromo2,  // wedding decor
 weddingpromo4,  // bride in temple
  weddingpromo1,  // traditional ceremony
 weddingpromo3   // couple full shot
];

const SectionFallback = ({ height = 280 }) => (
  <div className="py-10 px-4">
    <div className="w-full max-w-[1400px] mx-auto space-y-4">
      <Skeleton height={26} width="40%" rounded={10} />
      <Skeleton height={14} width="30%" rounded={8} />
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {Array.from({ length: 4 }).map((_, idx) => (
          <Skeleton key={idx} height={height} rounded={16} />
        ))}
      </div>
    </div>
  </div>
);


const UserDashboardHome = () => {
  return (
    <>
    <div className="custom-swiper-hero flex items-center justify-center p-4">
      <div className="w-full max-w-15xl relative">
        {/* Left Arrow */}
        <button className="swiper-button-prev-custom absolute left-0 top-1/2 -translate-y-1/2 z-10 w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all">
          <ChevronLeft className="w-6 h-6 text-white" />
        </button>

        {/* Right Arrow */}
        <button className="swiper-button-next-custom absolute right-0 top-1/2 -translate-y-1/2 z-10 w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all">
          <ChevronRight className="w-6 h-6 text-white" />
        </button>

        <Swiper
          modules={[Navigation, Autoplay]}
          navigation={{
            prevEl: '.swiper-button-prev-custom',
            nextEl: '.swiper-button-next-custom',
          }}
          grabCursor={true}
          centeredSlides={true}
         slidesPerView={3}
          spaceBetween={10}
          autoplay={{
            delay: 3000,
            disableOnInteraction: false,
          }}
          loop={true}
          className="mySwiper"

           breakpoints={{
            // When screen width is 768px or less, show 1 slide per view
            768: {
              slidesPerView: 1,
              spaceBetween: 20, // Space between slides on mobile
            },
            // When screen width is larger than 768px, show 3 slides per view
            1024: {
              slidesPerView: 3,
              spaceBetween: 10, // Space between slides on desktop
            },
          }}
        >
          {images.map((img, idx) => (
            <SwiperSlide key={idx}>
              <div className="relative overflow-hidden rounded-3xl w-[100%]">
                <img
                  src={img}
                  alt={`Slide ${idx + 1}`}
                  className="w-full h-full object-cover"
                  loading={idx === 0 ? "eager" : "lazy"}
                  decoding="async"
                />

                 {/* <LazyImage
                                    src={img}
                  alt={`Slide ${idx + 1}`}
                  className="w-full h-full object-cover"
                                  /> */}
                {/* <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/50 backdrop-blur-sm px-6 py-2 rounded-full">
                  <span className="text-white font-semibold text-lg">Slide {idx + 1}</span>
                </div> */}
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>

    

      <style>{`
.custom-swiper-hero .swiper {
  width: 100%;
  margin: 0 auto;
}

/* ================= MOBILE (≤768px) ================= */
@media (max-width: 768px) {
  .custom-swiper-hero .swiper {
    overflow: hidden;
  }

  .custom-swiper-hero .swiper-slide {
    width: 100% !important;
    height: 200px;
    transform: scale(1);
    opacity: 1;
  }

  .custom-swiper-hero .swiper-slide-active {
    width: 100% !important;
    height: 200px !important;
    transform: scale(1);
    opacity: 1;
  }
}

/* ================= TABLET & DESKTOP (≥769px) ================= */
@media (min-width: 769px) {
  .custom-swiper-hero .swiper {
    overflow: visible;
  }

  .custom-swiper-hero .swiper-wrapper {
    align-items: center;
  }

  .custom-swiper-hero .swiper-slide {
    width: 320px;
    height: 320px;
    transform: scale(1);           /* ❌ removed zoom out */
    opacity: 1;                    /* ❌ removed fade */
    transition: all 0.4s ease;
  }

  .custom-swiper-hero .swiper-slide-active {
    width: 630px !important;       /* center slide bigger */
    height: 320px !important;
    transform: scale(1);
    opacity: 1;
    z-index: 2;
  }
}

/* ================= COMMON ================= */
.custom-swiper-hero .swiper-slide > div {
  width: 100%;
  height: 100%;
}

.custom-swiper-hero .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}






         /* Desktop Styles */
        // @media (min-width: 1024px) {
        //   .custom-swiper-hero .swiper-slide {
        //     width: 100%;
        //     height: 400px; /* Adjust the height for desktop */
        //   }

        //   .custom-swiper-hero .swiper-slide-active {
        //     width: 100% !important;
        //     height: 400px !important;
        //   }
        // }

  `}</style>
    </div>
      <Suspense fallback={<SectionFallback height={320} />}>
        <Profilecardemo />
      </Suspense>

      {/* <DailyRecommendedCard/> */}

      <Suspense fallback={<SectionFallback height={220} />}>
        <ProfileCompletion />
      </Suspense>
      {/* <DailyRecommendedCard/> */}

      <Suspense fallback={<SectionFallback height={280} />}>
        <MatrimonyArticles />
      </Suspense>
      <Suspense fallback={<SectionFallback height={320} />}>
        <MatchingList />
      </Suspense>
      {/* <PaidMemberCard/> */}

      {/* <NewJoinedProfile/> */}
      {/* <CustomerSupportCard/> */}
      <Suspense fallback={<SectionFallback height={240} />}>
        <VideoSwiperGallery />
      </Suspense>
    </>
  )
}

export default UserDashboardHome
