thirukalyanamweb/src/components/profiledashboard/MatrimonyArticles.jsx

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import { motion } from 'framer-motion';
import { Crown, Bookmark, User, Briefcase, MapPin, X, Send, ChevronLeft, ChevronRight } from 'lucide-react';
import { useRef } from "react";
import LazyImage from "../common/LazyImage";
import weddingImg1 from "../../assets/images/wedding6.jpeg";
import weddingImg2 from "../../assets/images/wedding8.jpg";
import weddingImg3 from "../../assets/images/wedding7.jpg";



const articleData = [
  {
    title: "Marriage is not just finding the right partner, it's creating a lifetime of moments together Find someone who understands your heart and walks with you in every season.",
    img: weddingImg1,

  },
  {
    title: "Top 10 Qualities for a Happy Marriage, A perfect match begins with trust, respect, and shared dreams",
    img: weddingImg2
  },
  
  {
    title: "Expert Tips for a Strong Relationship, A perfect match begins with trust, respect, and shared dreams",
    img: weddingImg3
  },
  {
    title: "How to Build Trust in Marriage, A perfect match begins with trust, respect, and shared dreams",
    img: weddingImg1
  },
  {
    title: "Communication Secrets for Couples, A perfect match begins with trust, respect, and shared dreams,A perfect match begins with trust, respect, and shared dreams.A perfect match begins with trust, respect, and shared dreams.A perfect match begins with trust, respect, and shared dreams,Real relationships are built on honesty, compassion, and understanding.,Real relationships are built on honesty, compassion, and understanding.",
    img: weddingImg1
  }
];

const twoLineStyle = {
  display: '-webkit-box',
  WebkitBoxOrient: 'vertical',
  WebkitLineClamp: 2,
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'normal'
};
const MatrimonyArticles = () => {
    const swiperRef = useRef(null);
  return (
    <>
      <div className="custom-article-swiper py-10 px-2 max-w-[1400px] mx-auto my-10">
      <h2 className="pb-10 text-[20px] text-[#00000] 
      sm:text-[22px] lg:text-[24px] font-semibold text-center">
        Matrimony Articles
      </h2>


 <div className="relative px-4 sm:px-4">
      <Swiper
        ref={swiperRef}
         modules={[Navigation, ]}
       
        spaceBetween={20}
        breakpoints={{
          0: { slidesPerView: 1 },       // mobile
          640: { slidesPerView: 2 },     // tablet
          1024: { slidesPerView: 3 },    // large
        }}
        loop={true}
        className="mySwiper"
      >
        {articleData.map((item, index) => (
          <SwiperSlide key={index}>
            <div className="w-full max-w-[600px] rounded-[10px] overflow-hidden border border-2 border-[#f2f2f2] bg-white">
             
              <div className="relative w-full">
                <div classname=" bg-gray-200 overflow-hidden w-full max-w-sm " style={{height:"240px"}}>

              <img
                src={item.img}
                className="w-full h-88 object-cover"
                alt={item.title}
              />
</div>
              {/* <LazyImage
                                             src={item.img}
                className="w-full h-48 object-cover"
                alt={item.title}
                            /> */}

                             {/* White Gradient Overlay at bottom of image */}
         

          {/* Profile Info Overlay - positioned at bottom */}
          <div
          className="px-4 pb-4 flex flex-col gap-2 relative  "
          style={{
            background: "rgb(255, 255, 255)",
          }}
        >

           <div
            className="z-9 absolute top-[-40px] left-0 right-0 h-10 pointer-events-none"
            style={{
              background:
                "linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 40%, rgb(255, 255, 255) 100%)",
            }}
          >

          </div>
            <div className="z-10 relative pb-4" style={{
            background: "rgb(255, 255, 255)",
          }}>
                <h3 className="text-[16px] font-semibold two-line-ellipsis" style={twoLineStyle} >{item.title}</h3>
              </div>
          </div>
              </div>
              
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      {/* Custom Navigation Buttons */}
          <motion.button
            whileHover={{ scale: 1.1, x: -5 }}
            whileTap={{ scale: 0.9 }}
            onClick={() => swiperRef.current?.swiper.slidePrev()}
            className="hidden sm:flex absolute left-0 top-1/2 -translate-y-1/2 z-10 
           bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
            w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center "
          >
            <ChevronLeft className="w-6 h-6 text-gray-700" />
          </motion.button>

          <motion.button
            whileHover={{ scale: 1.1, x: 5 }}
            whileTap={{ scale: 0.9 }}
            onClick={() => swiperRef.current?.swiper.slideNext()}
            className="hidden sm:flex absolute right-0 top-1/2 -translate-y-1/2 z-10 
           bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
            w-12 h-12  rounded-full shadow-xl hover:shadow-2xl items-center justify-center transition-all"
          >
            <ChevronRight className="w-6 h-6 text-gray-700" />
          </motion.button>
</div>
      <style>{`
        .custom-article-swiper .swiper-button-prev,
        .custom-article-swiper .swiper-button-next {
          color: #000;
          background: white;
          padding: 20px;
          border-radius: 50%;
          box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
      `}</style>
    </div>
    </>
  )
}

export default MatrimonyArticles