import React from "react";

const WorkProcessSection = () => (
    <section className="work-process-section section-space p-relative" style={{ backgroundImage: "url(/assets/images/services/bg-2.webp)" }}>
        <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/bg/line.png)" }}></div>
        <div className="small-container">
            <div className="sec-title-wrapper text-center wow fadeInLeft" data-wow-delay=".5s">
                <div className="sec-title">
                    <div className="sec-title__shape"></div>
                    <h6 className="sec-title__tagline">Get To Know Us More</h6>
                    <h3 className="sec-title__title">We’re Reliable & Cost Efficient <br /> Digital Agency.</h3>
                    <p>Appropriately enhance principle-centered innovation rather than high standards in platforms. <br /> Credibly orchestrate functional.</p>
                </div>
                {/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
            </div>
            <div className="row g-4">
                {[
                    { num: 1, title: "Our Mission", icon: "our-mission.webp", desc: "Empowering businesses with innovative digital growth solutions."},
                    { num: 2, title: "Our Vision", icon: "our-vision.webp", desc: "Redefining digital innovation for a connected, efficient future."},
                    { num: 3, title: "Our Values", icon: "our-values.webp", desc: "Redefining digital innovation for a connected, efficient future."}
                ].map((proc, i) => (
                    <div key={i} className="col-xxl-4 col-xl-4 col-lg-4">
                        <div className="work-process-box text-center">
                            <div className="icon-box p-relative">
                                <img src={`/assets/images/services/process/${proc.icon}`} alt={proc.desc} />
                                <span>{proc.num}</span>
                            </div>
                            <div className="content">
                                <h4 className="pt-25 pb-25">{proc.title}</h4>
                                <p>{proc.desc}</p>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    </section>
);

export default WorkProcessSection;