import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "./WhyLoveUs.css";


function WhyLoveUs() {
    const data = [
        {
            img: "/assets/images/home/whyLoveUs/fabric.png",
            title: "Premium Fabrics",
            desc: "Experience the ultimate comfort",
            icon: "/assets/images/home/whyLoveUs/fabric_icon.png",
        },
        {
            img: "/assets/images/home/whyLoveUs/fit.png",
            title: "Perfect Fit",
            desc: "Feels like it was tailored just for you",
            icon: "/assets/images/home/whyLoveUs/fit_icon.png",
        },
        {
            img: "/assets/images/home/whyLoveUs/latestDesign.png",
            title: "Latest Designs",
            desc: "Stay ahead on trend with weekly new launches",
            icon: "/assets/images/home/whyLoveUs/letest_design_icon.png",
        },
        {
            img: "/assets/images/home/whyLoveUs/handwork.png",
            title: "Handcrafted Work",
            desc: "Intricate detailing with love",
            icon: "/assets/images/home/whyLoveUs/handwork_icon.png",
        },
    ];

    return (
        <div className="why-love-section">
            <div className="container-fluid">
                <h4 className="heading_text">
                    WHY PEOPLE <span>LOVE US</span>
                </h4>

                <Swiper
                    spaceBetween={20}
                    slidesPerView={4}
                    breakpoints={{
                        0: { slidesPerView: 1.2 },
                        400: { slidesPerView: 1.5 },
                        500: { slidesPerView: 2.5 },
                        992: { slidesPerView: 4 },
                    }}
                >
                    {data.map((item, index) => (
                        <SwiperSlide key={index}>
                            <div className="why-card">
                                <div className="why-card-img">
                                    <img className="product_img" src={item.img} alt={item.title} />
                                </div>

                                <div className="why-card-bottom">
                                    <div className="icon-box">
                                        <img className="icon_img" src={item.icon} alt="icon" />
                                    </div>
                                    <div>

                                        <h4>{item.title}</h4>
                                        <p>{item.desc}</p>
                                    </div>
                                </div>
                            </div>
                        </SwiperSlide>
                    ))}
                </Swiper>
            </div>
        </div>
    );
};

export default WhyLoveUs;
