import { features2 } from "@/utils/data";

const FeaturesSection2 = () => (
    <section className="features-section pt-80 pb-80 bg-color-1 p-relative">
        <div className="bg-shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-27.png)" }}></div>
        <div className="bg-shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-28.png)" }}></div>
        <div className="small-container">
            <div className="row g-4">
                {features2.map((service, i) => (
                    <div key={service.id} className="col-xxl-4 col-xl-4 col-lg-6 col-md-6">
                        <div className={`features-box-area p-relative wow ${i === 0 ? 'fadeInLeft' : i === 2 ? 'fadeInRight' : ''}`} data-wow-delay={`${i * 500}ms`}>
                            <div className="shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-25.png)" }}></div>
                            <div className="shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-26.png)" }}></div>
                            <div className="icon-box">
                                <img src={service.icon} alt="icon" />
                            </div>
                            <h5 className="mt-20 mb-10"><a href="#">{service.title}</a></h5>
                            <p>Pellentesque nec the condimentum nec lorem nulla augue est ultricies ac iaculis ut euismod quis sapien.</p>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    </section>
);

export default FeaturesSection2;