import React from "react";

const WorkProcessSection = () => (
    <section className="work-process-section section-space p-relative" style={{ backgroundImage: "url(/assets/imgs/bg/process-bg.png)" }}>
        <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/bg/line.png)" }}></div>
        <div className="small-container">
            <div className="title-box text-center mb-60 wow fadeInLeft" data-wow-delay=".5s">
                <span className="section-sub-title">Working Process</span>
                <h3 className="section-title mt-10">Our Development Process</h3>
            </div>
            <div className="row g-4">
                {[
                    { num: 1, title: "Define Requirements", icon: "icon-4.png" },
                    { num: 2, title: "Design & Prototyping", icon: "icon-5.png" },
                    { num: 3, title: "Final Solution", icon: "icon-6.png" }
                ].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/imgs/icon/${proc.icon}`} alt="img" />
                                <span>{proc.num}</span>
                            </div>
                            <div className="content">
                                <h4 className="pt-25 pb-25">{proc.title}</h4>
                                <p>In a free hour, when our power of choice is untrammelled and when nothing prevents dolor sit amet, consectetur</p>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    </section>
);

export default WorkProcessSection;
