import Link from "next/link"
import Layout from "@/components/layout/Layout"
import Image from "next/image";



export const metadata = {
  title: "Our Approach to Care | Rapha Rehab Etobicoke",
  description: "Personalized physiotherapy care in Etobicoke with one-on-one treatment, targeted assessments, and customized rehab plans for faster recovery.",
};


export default function About() {
  return (
    <>
      <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Our Approach" bannerImage="/assets/images/our-approach/our-approach-banner.webp">
        {/* about-section */}
        <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 absolute w-[140px] h-[140px]">
              <Image
              //  loader={exportableLoader}
                src="/assets/images/shape/shape-9.webp"
                alt="Physiotherapy at Rapharehab"
                fill
                sizes="140px"
                style={{ objectFit: "contain" }}
              />
            </div>
            <div className="pattern-3" style={{ backgroundImage: "url(/assets/images/shape/shape-11.webp)" }}></div>
            {/* <div className="pattern-4" style={{ backgroundImage: "url(/assets/images/shape/shape-35.webp)" }}></div> */}
          </div>
          <div className="auto-container">
            <div className="row clearfix">
              <div className="col-lg-6 col-md-12 col-sm-12 image-column mb-3">
                <div className="image_block_three">
                  <div className="image-box">
                    <div className="image-shape">
                      <div className="shape-1 rotate-me">
                        <Image
                        //  loader={exportableLoader}
                          src="/assets/images/shape/shape-8.webp"
                          alt="Physiotherapy at Rapharehab"
                          fill
                          style={{ objectFit: "cover" }}
                        />
                      </div>

                      <div className="shape-2">
                        <Image
                        //  loader={exportableLoader}
                          src="/assets/images/shape/shape-33.png"
                          alt="Physiotherapy at Rapharehab"
                          fill
                          style={{ objectFit: "cover" }}
                        />
                      </div>

                      {/* <div className="shape-3">
  <Image
    src="/assets/images/shape/shape-7.png"
    alt="Physiotherapy at Rapharehab"
    fill
    style={{ objectFit: "cover" }}
  />
</div> */}

                      <div className="shape-4">
                        <Image
                        //  loader={exportableLoader}
                          src="/assets/images/shape/shape-34.png"
                          alt="Physiotherapy at Rapharehab"
                          fill
                          style={{ objectFit: "cover" }}
                        />
                      </div>

                      <div className="shape-5">
                        <Image
                        //  loader={exportableLoader}
                          src="/assets/images/shape/shape-11.webp"
                          alt="Physiotherapy at Rapharehab"
                          fill
                          style={{ objectFit: "cover" }}
                        />
                      </div>

                    </div>
                    <figure className="image image-1-ho hide-img"><img src="/assets/images/our-approach/right.webp" alt="Physiotherapy at Rapharehab" /></figure>
                    <figure className="image image-2"><img src="/assets/images/our-approach/left.webp" alt="Physiotherapy at Rapharehab" /></figure>
                    <div className="icon-box new-ho"><img src="/assets/images/our-approach/icon.webp" alt="Physiotherapy at Rapharehab" /></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">Personalized Healing</span>
                      <h2>Our Approach</h2>
                    </div>
                    <div className="text-box mb_40">
                      <p>At Rapha Rehab, our approach begins with a thorough diagnosis to understand your condition and design a personalized, targeted care plan. We address not only the symptoms but also lifestyle, posture, and ergonomic factors that may be slowing your recovery.</p>

                      <p> Our therapists work one-on-one with you to create an effective rehabilitation program that fits your needs and goals. Whether your condition is acute or chronic, we focus on restoring movement, reducing pain, and supporting long-term wellbeing. </p>

                      <p>We also collaborate with other healthcare professionals to ensure you receive complete, coordinated care throughout your recovery journey.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        {/* about-section end */}
        {/* subscibe */}
        {/* <section className="subscribe-section">
          <div className="auto-container">
            <div className="inner-container">
              <div className="row align-items-center">
                <div className="col-lg-6 col-md-12 col-sm-12 text-column">
                  <div className="text-box">
                    <h2><span>Subscribe</span> for the exclusive updates!</h2>
                  </div>
                </div>
                <div className="col-lg-6 col-md-12 col-sm-12 form-column">
                  <div className="form-inner">
                    <form method="post" action="contact">
                      <div className="form-group">
                        <input type="email" name="email" placeholder="Enter Your Email Address" required />
                        <button type="submit" className="theme-btn btn-one"><span>Subscribe Now</span></button>
                      </div>
                      <div className="form-group">
                        <div className="check-box">
                          <input className="check" type="checkbox" id="checkbox1" />
                          <label htmlFor="checkbox1">I agree to the <Link href="index">Privacy Policy.</Link></label>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section> */}
        {/* subscibe end */}
      </Layout>
    </>
  )
}