import React from "react";

const ChooseSection = () => (
    <section className="choose-section bg-color-1 section-space-top p-relative section-space-bottom">
        <div className="bg-image" style={{ backgroundImage: "url(/assets/imgs/bg/choose-bg.png)" }}></div>
        <div className="shape-image" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-15.png)" }}></div>
        <div className="small-container">
            <div className="row g-4">
                <div className="col-xxl-6 col-xl-6 col-lg-6 p-relative section-space-medium-bottom">
                    <div className="sec-title-wrapper wow fadeInLeft mb-50" data-wow-delay=".5s">
                        <div className="sec-title">
                            <div className="sec-title__shape"></div>
                            <h6 className="sec-title__tagline">WHY CHOOSE US</h6>
                            <h3 className="sec-title__title">What&apos;s Make Us Different</h3>
                        </div>
                        <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                    </div>
                    {[
                        { icon: "fa-solid fa-building", title: "Commercial Service", delay: ".5s" },
                        { icon: "fa-solid fa-bullseye", title: "Mission Statement Metatron", delay: ".7s" },
                        { icon: "fa-solid fa-handshake-angle", title: "Safety And Reliability", delay: ".9s" }
                    ].map((item, i) => (
                        <React.Fragment key={i}>
                            <div className={`choose-area-icon-box mb-15 wow fadeInRight`} data-wow-delay={item.delay}>
                                <div className="icon-box p-relative"><i className={item.icon}></i></div>
                                <div className="content">
                                    <h5><a href="#">{item.title}</a></h5>
                                    <p>Embarrassing hidden in the middle All the Lorem Ipsum generators on the Internet repeat predefined chunks</p>
                                </div>
                            </div>
                            <hr />
                        </React.Fragment>
                    ))}
                </div>
                <div className="col-xxl-6 col-xl-6 col-lg-6 wow fadeInLeft" data-wow-delay="1.2s">
                    <figure className="image m-img"><img src="/assets/imgs/resources/choose-1.png" alt="" /></figure>
                </div>
            </div>
        </div>
    </section>
);

export default ChooseSection;