import React from 'react';
import Image from 'next-image-export-optimizer';
import exportableLoader from 'next-image-export-optimizer';



export default function ProcessSection() {
    return (
        <section className="process-section sec-pad bg-color-1">
            <div className="pattern-layer">
                <Image
                    loader={exportableLoader}
                    src="/assets/images/shape/shape-19.png"
                    alt="Physiotherapy at Rapharehab"
                    fill
                    style={{ objectFit: "cover" }}
                />
            </div>
            {/* <div className="shape">
                <div className="shape-1 float-bob-x" style={{ backgroundImage: 'url(/assets/images/shape/shape-20.png)' }}></div>
                <div className="shape-2 float-bob-y" style={{ backgroundImage: 'url(/assets/images/shape/shape-15.png)' }}></div>
                <div className="shape-3"></div>
            </div> */}
            <div className="auto-container">
                <div className="sec-title mb_50 centred">
                    <span className="sub-title">Our Process</span>
                    <h2>How Physiotherapy Helps You Heal <br />and Stay Strong</h2>
                </div>
                <div className="inner-container">
                    <div className="arrow-shape">
                        <Image
                            loader={exportableLoader}
                            src="/assets/images/shape/shape-18.webp"
                            alt="Physiotherapy at Rapharehab"
                            fill
                            style={{ objectFit: "cover" }}
                        />
                    </div>
                    {/* Step 01 */}
                    <div className="processing-block-one wow fadeInLeft animated" data-wow-delay="00ms" data-wow-duration="1500ms">
                        <div className="inner-box">
                            <span className="count-text">01</span>
                            <figure className="image-box"><img src="/assets/images/resource/process-1.jpg" alt="" /></figure>
                            <div className="lower-content">
                                <h3>Area of Injury</h3>
                                <p>We carefully assess the affected area to identify the root cause of your pain or discomfort.</p>
                            </div>
                        </div>
                    </div>

                    {/* Step 02 */}
                    <div className="processing-block-one wow fadeInLeft animated" data-wow-delay="300ms" data-wow-duration="1500ms">
                        <div className="inner-box">
                            <span className="count-text">02</span>
                            <figure className="image-box"><img src="/assets/images/resource/process-2.jpg" alt="" /></figure>
                            <div className="lower-content">
                                <h3>Rehabilitation</h3>
                                <p>Through guided exercises and therapy, we help restore movement, strength, and flexibility.</p>
                            </div>
                        </div>
                    </div>

                    {/* Step 03 */}
                    <div className="processing-block-one wow fadeInLeft animated" data-wow-delay="600ms" data-wow-duration="1500ms">
                        <div className="inner-box">
                            <span className="count-text">03</span>
                            <figure className="image-box"><img src="/assets/images/resource/process-3.jpg" alt="" /></figure>
                            <div className="lower-content">
                                <h3>Accident</h3>
                                <p>We provide personalized care plans to speed up recovery and help you return to normal life after accidents.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};