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

export default function AboutSection() {
  return (
    <section
      className="about-style-two pt_90 pb_90 relative overflow-hidden"
      style={{ minHeight: "600px" }}
    >
      {/* ===== Pattern Layers ===== */}
      <div className="pattern-layer">
        <div
          className="pattern-1 rotate-me absolute"
          style={{ width: "120px", height: "120px" }}
        >
          <Image
            src="/assets/images/shape/shape-8.webp"
            alt="Decorative Shape"
            width={120}
            height={120}
            sizes="120px"
            loading="lazy"
            decoding="async"
            style={{ objectFit: "contain", display: "block" }}
          />
        </div>

        <div
          className="pattern-2 rotate-me absolute"
          style={{ width: "60px", height: "60px" }}
        >
          <Image
            src="/assets/images/shape/shape-9.webp"
            alt="Decorative Shape"
            width={60}
            height={60}
            sizes="60px"
            loading="lazy"
            decoding="async"
            style={{ objectFit: "contain", display: "block" }}
          />
        </div>

        <div
          className="pattern-3 absolute"
          style={{ width: "150px", height: "150px" }}
        >
          <Image
            src="/assets/images/shape/shape-11.webp"
            alt="Decorative Shape"
            width={150}
            height={150}
            sizes="150px"
            loading="lazy"
            decoding="async"
            style={{ objectFit: "contain", display: "block" }}
          />
        </div>
      </div>

      {/* ===== Content Area ===== */}
      <div className="auto-container">
        <div className="row clearfix">
          {/* Left: 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"
                  style={{
                    width: "100%",
                    maxWidth: "600px",
                    aspectRatio: "6 / 5",
                    overflow: "hidden",
                  }}
                >
                  <Image
                    src="/assets/images/shape/shape-26.webp"
                    alt="Background Shape"
                    width={600}
                    height={500}
                    sizes="(max-width: 768px) 90vw, 50vw"
                    loading="lazy"
                    decoding="async"
                    style={{ objectFit: "contain", display: "block" }}
                  />
                </div>

                {/* ===== Responsive Main Image ===== */}
                <picture>
                  {/* Mobile image */}
                  <source
                    srcSet="/assets/images/home/welcome/home-welcome-mbl.webp"
                    media="(max-width: 768px)"
                  />
                  {/* Desktop image */}
                  <Image
                    src="/assets/images/home/welcome/home-welcome.webp"
                    alt="Physiotherapy at Rapha Rehab"
                    width={600}
                    height={420}
                    className="welcome-image-home"
                    sizes="(max-width: 480px) 90vw, (max-width: 768px) 70vw, (max-width: 1200px) 50vw, 600px"
                    priority
                    quality={70}
                    placeholder="blur"
                    blurDataURL="/assets/images/home/welcome/home-welcome.webp"
                    style={{
                      width: "100%",
                      height: "auto",
                      borderRadius: "8px",
                      display: "block",
                    }}
                  />
                </picture>

                {/* Top Icon */}
                <div
                  className="icon-one absolute top-0 left-0"
                  style={{ width: "80px", height: "80px" }}
                >
                  <Image
                    src="/assets/images/home/welcome/top-icon.webp"
                    alt="Physiotherapy Icon"
                    width={80}
                    height={80}
                    sizes="80px"
                    loading="lazy"
                    decoding="async"
                    style={{ objectFit: "contain", display: "block" }}
                  />
                </div>

                {/* Bottom Icon */}
                <div
                  className="icon-two absolute bottom-0 right-0"
                  style={{ width: "80px", height: "80px" }}
                >
                  <Image
                    src="/assets/images/home/welcome/bottom-icon.webp"
                    alt="Physiotherapy Icon"
                    width={80}
                    height={80}
                    sizes="80px"
                    loading="lazy"
                    decoding="async"
                    style={{ objectFit: "contain", display: "block" }}
                  />
                </div>
              </div>
            </div>
          </div>

          {/* Right: Text 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>
  );
}