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 relative overflow-hidden">
      {/* Pattern Layers with fixed sizes */}
      <div className="pattern-layer">
        <div className="pattern-1 rotate-me absolute w-[120px] h-[120px]">
          <Image
            src="/assets/images/shape/shape-8.webp"
            alt="Physiotherapy at Rapharehab"
            fill
            sizes="120px"
            style={{ objectFit: "contain" }}
            priority={false}
          />
        </div>

        <div className="pattern-2 rotate-me absolute w-[140px] h-[140px]">
          <Image
            src="/assets/images/shape/shape-9.webp"
            alt="Physiotherapy at Rapharehab"
            fill
            sizes="140px"
            style={{ objectFit: "contain" }}
          />
        </div>

        <div className="pattern-3 absolute w-[150px] h-[150px]">
          <Image
            src="/assets/images/shape/shape-11.webp"
            alt="Physiotherapy at Rapharehab"
            fill
            sizes="150px"
            style={{ objectFit: "contain" }}
          />
        </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 relative">
              <div className="image-box relative">
                {/* Background Shape */}
                <div className="image-shape absolute inset-0 -z-10 w-[600px] h-[500px]">
                  <Image
                    src="/assets/images/shape/shape-26.webp"
                    alt="Background shape"
                    fill
                    sizes="50vw"
                    style={{ objectFit: "contain" }}
                  />
                </div>

                {/* Main Hero Image (LCP) */}
                <figure className="image-2 relative min-h-[420px]">
                  <Image
                    src="/assets/images/home/welcome/home-welcome.webp"
                    alt="Physiotherapy"
                    width={600}
                    height={420}
                    priority
                    sizes="(max-width: 768px) 100vw, 50vw"
                    placeholder="blur"
                    blurDataURL="/assets/images/home/welcome/home-welcome-blur.webp"
                    style={{
                      borderRadius: "8px",
                      width: "100%",
                      height: "auto",
                    }}
                  />
                </figure>

                {/* Top Icon */}
                <div className="icon-one absolute top-0 left-0 w-[40px] h-[40px]">
                  <Image
                    src="/assets/images/home/welcome/top-icon.webp"
                    alt="Physiotherapy at Rapharehab"
                    fill
                    sizes="40px"
                    style={{ objectFit: "contain" }}
                    loading="lazy"
                  />
                </div>

                {/* Bottom Icon */}
                <div className="icon-two absolute bottom-0 right-0 w-[40px] h-[40px]">
                  <Image
                    src="/assets/images/home/welcome/bottom-icon.webp"
                    alt="Physiotherapy at Rapharehab"
                    fill
                    sizes="40px"
                    style={{ objectFit: "contain" }}
                    loading="lazy"
                  />
                </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>
  );
}