import Image from 'next/image';
import Link from 'next/link';
import React from 'react';

export default function AboutSection() {
    return (
        <section className="about-style-two pt_90 pb_90">
            <div className="pattern-layer">
                <div className="pattern-1 rotate-me" style={{ backgroundImage: 'url(/assets/images/shape/shape-8.webp)' }}></div>
                <div className="pattern-2 rotate-me" style={{ backgroundImage: 'url(/assets/images/shape/shape-9.webp)' }}></div>
                <div className="pattern-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
            </div>
            <div className="auto-container">
                <div className="row clearfix">
                    <div className="col-lg-6 col-md-12 col-sm-12 image-column">
                        <div className="image_block_one">
                            <div className="image-box">
                                {/* <div className="shape float-bob-x" style={{ backgroundImage: 'url(/assets/images/shape/shape-7.webp)' }}></div> */}
                                <div className="image-shape" style={{ backgroundImage: 'url(/assets/images/shape/shape-26.png)' }}></div>
                                <figure className="image-2">
                                    <Image
                                        src="/assets/images/home/welcome/home-welcome.webp"
                                        alt="Physiotherapy"
                                        width={800}        // replace with actual image width
                                        height={500}       // replace with actual image height
                                        priority           // optional, for above-the-fold images
                                        style={{ display: 'block' }}
                                    />
                                </figure>

                                <div className="icon-one">
                                    <Image
                                        src="/assets/images/home/welcome/top-icon.webp"
                                        alt="Physiotherapy icon"
                                        width={50}         // actual icon width
                                        height={50}        // actual icon height
                                    />
                                </div>

                                <div className="icon-two">
                                    <Image
                                        src="/assets/images/home/welcome/bottom-icon.webp"
                                        alt="Physiotherapy icon"
                                        width={50}         // actual icon width
                                        height={50}        // actual icon height
                                    />
                                </div>
                                {/* <div className="text-box">
                                    <h3>Wade Warren</h3>
                                    <span>Medical Assistant</span>
                                </div> */}
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-6 col-md-12 col-sm-12 content-column">
                        <div className="content_block_one">
                            <div className="content-box ml_30">
                                <div className="sec-title mb_15">
                                    <span className="sub-title">Welcome to Rapha Rehab</span>
                                    <h2>Your Trusted Etobicoke Physiotherapy Clinic!</h2>
                                </div>
                                <div className="text-box mb_40">
                                    <p>At Rapha Rehab, we specialize in evidence-based physiotherapy tailored to your needs. Our expert care helps you recover, relieve pain, and regain strength for a better quality of life.</p>
                                    <ul className="list-style-one clearfix">
                                        <li>Chronic pain (back, neck, joints).</li>
                                        <li>Sports injuries (sprains, strains, post-surgery rehab).</li>
                                        <li>Work-related injuries (WCB claims supported).</li>
                                        <li>Movement disorders (stroke rehab, mobility issues).</li>
                                    </ul>
                                </div>
                                <div className="btn-box">
                                    <Link href="/etobicoke-treatment-service" className="theme-btn btn-one"><span>Explore Our Service</span></Link>
                                </div>
                                {/* <div className="lower-box">
                                    <div className="experience-box">
                                        <div className="icon-box"><i className="icon-29"></i></div>
                                        <h3>32 Years</h3>
                                        <span className="designation">Of Medical Experience</span>
                                    </div>
                                    <figure className="author-thumb"><img src="assets/images/resource/author-1.jpg" alt="" /></figure>
                                    <div className="signature"><img src="assets/images/icons/signature-1.png" alt="" /></div>
                                </div> */}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};