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">
          {/* Image Column */}
          <div className="col-lg-6 col-md-12 col-sm-12 image-column">
            <div className="image_block_one">
              <div className="image-box">
                <div className="image-shape" style={{ backgroundImage: 'url(/assets/images/shape/shape-26.png)' }}></div>

                {/* Main Hero Image */}
                <figure className="image-2">
                  <Image
                    src="/assets/images/home/welcome/home-welcome.webp"
                    alt="Physiotherapy"
                    width={800}           // actual image width
                    height={500}          // actual image height
                    priority
                    sizes="(max-width: 768px) 100vw, 50vw"
                    style={{ display: 'block' }}
                    placeholder="blur"
                    blurDataURL="/assets/images/home/welcome/home-welcome-blur.webp" // optional
                  />
                </figure>

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

                {/* Bottom Icon */}
                <div className="icon-two">
                  <Image
                    src="/assets/images/home/welcome/bottom-icon.webp"
                    alt="Physiotherapy icon"
                    width={50}
                    height={50}
                  />
                </div>
              </div>
            </div>
          </div>

          {/* Content Column */}
          <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>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}