import React from "react";
import SectionTitle from "@/components/common/SectionTitle";

const ChooseSection = () => (
    <section className="choose-3-section p-relative section-space" style={{ backgroundImage: "url(/assets/imgs/bg/choose-bg-2.png)" }}>
        <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-49.png)" }}></div>
        <div className="small-container">
            <div className="row">
                <div className="col-xxl-6 col-xl-6 col-lg-6">
                    <div className="choose-3-image-area p-relative">
                        <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-29.png)" }}></div>
                        <figure className="image w-img pr-100">
                            <img src="/assets/imgs/resources/choose-2.jpg" alt="" />
                        </figure>
                        <div className="image-3-area">
                            <div className="image-3 p-relative">
                                <img src="/assets/imgs/about/about-2.jpg" alt="" />
                                <div className="play-btn">
                                    <div className="video_player_btn">
                                        <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h1>Metatron</h1>
                    </div>
                </div>
                <div className="col-xxl-6 col-xl-6 col-lg-6">
                    <div className="choose-3-content-area pl-60 pt-20 p-relative">
                        <SectionTitle
                            tagline="WHY CHOOSE US"
                            title="Elevate Your Achievements Using Premier IT Solutions"
                            className="mb-25 wow fadeInLeft"
                        />
                        <p>It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
                        <div className="row g-4 pt-35">
                            {[
                                { icon: "fa-solid fa-microchip", label: "Quality Materials", isIcon: true },
                                { icon: "icon-8.png", label: "Best Services", isIcon: false },
                                { icon: "fa-solid fa-headset", label: "24/7 Call Support", isIcon: true },
                                { icon: "fa-solid fa-award", label: "Award Winning", isIcon: true }
                            ].map((item, i) => (
                                <div key={i} className="col-lg-6">
                                    <div className="icon-box-area">
                                        <div className="icon-box">
                                            {item.isIcon ? <i className={item.icon}></i> : <img src={`/assets/imgs/icon/${item.icon}`} alt="img" />}
                                        </div>
                                        <h5><a href="#">{item.label}</a></h5>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
);

export default ChooseSection;