import Layout from "@/components/layout/Layout";
import Link from "next/link";
import Rehabilitation from "@/utils/Rehabilitation.utils";

export const metadata = {
  title: "Rehabilitation Clinic in Etobicoke",
  description: "Comprehensive rehab services in Etobicoke for injury recovery, pain relief & functional restoration.",
};

export default function RehabilitationPage() {
  return (
    <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Rehabilitation" bannerImage="/assets/images/rehabilitation/rehabilation-banner.webp">
      <section className="about-style-three pt_90 pb_90">
        <div className="auto-container">
          <div className="row align-items-center clearfix">
            <div className="col-lg-6 col-md-12 col-sm-12 image-column">
              <div className="image_block_four">
                <div className="image-box">
                  <figure className="image mb-3">
                    <img src="/assets/images/rehabilitation/comprehensive-rehabilation.webp" alt="Education & Training" />
                  </figure>
                </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">
                  <div className="sec-title mb_25">
                    <h2>Comprehensive Rehabilitation Services in Etobicoke</h2>
                  </div>
                  <div className="text-box">
                    <p>At Rapharehab, we provide comprehensive rehabilitation services designed to restore mobility, eliminate pain, and improve overall physical function. As a leading rehabilitation clinic in Etobicoke, our programs are structured, evidence-based, and customized to each patient’s needs.</p>
                    <p>We proudly serve patients from Etobicoke, Toronto, Mississauga, and surrounding communities.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className="about-style-three pt-0 pb-0">
        <div className="auto-container">
          <div className="row align-items-center clearfix">
            <div className="col-lg-6 col-md-12 col-sm-12 content-column">
              <div className="content_block_one">
                <div className="content-box">
                  <div className="sec-title mb_25">
                    <h2>Why Choose Our Rehabilitation Clinic in Etobicoke?</h2>
                  </div>
                  <div className="text-box">
                    <p className="mb-3">Patients choose Rapharehab because we offer:</p>
                    <ul className="list-style-one clearfix mb_30">
                      <li>Personalized recovery plans</li>
                      <li>One-on-one care</li>
                      <li>Evidence-based treatments</li>
                      <li>Integrated rehabilitation approach</li>
                      <li>Focus on long-term prevention</li>
                    </ul>
                  </div>
                  <p className="mb-3">Our mission is to help you regain independence and return to the activities you love.</p>
                  <p className="mb-3">Book your rehabilitation assessment today and begin your journey toward optimal recovery.</p>
                </div>
              </div>
            </div>
            <div className="col-lg-6 col-md-12 col-sm-12 image-column">
              <div className="image_block_four">
                <div className="image-box">
                  <figure className="image">
                    <img src="/assets/images/rehabilitation/why-choose.webp" alt="Education & Training" />
                  </figure>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className="service-section sec-pad-2">
        <div className="auto-container">
          <div className="row clearfix">
            {Rehabilitation.map((service, index) => (
              // <div key={service.id} className="col-lg-4 col-md-6 col-sm-12 service-block">
              //   <div
              //     className="service-block-one wow fadeInUp animated"
              //     data-wow-delay={`${index * 300}ms`}
              //     data-wow-duration="1500ms"
              //   >
              //     <div className="inner-box">
              //       <div className="image-box">
              //         <figure className="image">
              //           <Link href={`/rehabilitation/${service.slug}`}>
              //             <img src={service.mainImage} alt={service.title} />
              //           </Link>
              //         </figure>
              //       </div>
              //       <div className="lower-content">
              //         <div className="icon-box">
              //           <img
              //             src={service.icon}
              //             alt={`${service.title} Icon`}
              //           />
              //         </div>
              //         <h3>
              //           <Link href={`/rehabilitation/${service.slug}`}>{service.title}</Link>
              //         </h3>
              //         <p>{service.shortDesc}</p>
              //       </div>
              //     </div>
              //   </div>
              // </div>

              <div className="col-lg-3 col-md-4 col-sm-12 service-block d-flex">
                <div className="service-block-one wow fadeInUp animated d-flex flex-column flex-grow-1" data-wow-delay="00ms" data-wow-duration="1500ms">
                  <div className="inner-box d-flex flex-column flex-grow-1">
                    <div className="image-box">
                      <figure className="image">
                        <Link href={`/rehabilitation/${service.slug}`} aria-label="rehabilitation">
                          <img src={service.mainImage} alt={service.title} loading="lazy" />
                        </Link>
                      </figure>
                    </div>
                    <div className="lower-content-new">
                      <div className="icon-box-new">
                        <img
                          src={service.icon}
                          alt={`${service.title} Icon`}
                        />
                      </div>
                      <h2>
                        <Link href={`/rehabilitation/${service.slug}`} aria-label="Service Title">{service.title}</Link>
                      </h2>
                      <p
                        className='text-start'
                        style={{
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          display: '-webkit-box',
                          WebkitLineClamp: 2,
                          WebkitBoxOrient: 'vertical',
                        }}
                      >
                        {service.shortDesc}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </Layout>
  );
}