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

export const metadata = {
  title: "Accident Rehab in Etobicoke | MVA Physio",
  description: "Car accident injury rehab in Etobicoke. Direct insurance billing, expert physiotherapy & structured recovery plans.",
};

export default function AccidentPage() {
  return (
    <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Accident" bannerImage="/assets/images/accident/accident-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/accident/accident.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>Accident Injury Rehabilitation in Etobicoke</h2>
                  </div>
                  <div className="text-box">
                    <p>Being involved in an accident can be physically painful and emotionally overwhelming. Whether it’s a motor vehicle collision, slip and fall incident, or workplace injury, the impact can affect your mobility, independence, and overall well-being.</p>
                    <p>At Rapharehab, we specialize in comprehensive accident injury rehabilitation designed to restore movement, reduce pain, and help you safely return to daily activities.</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 Early Treatment Matters</h2>
                  </div>
                  <div className="text-box">
                    <p>The sooner rehabilitation begins, the better the outcome.</p>
                    <p className="mb-3">Early physiotherapy can:</p>
                    <ul className="list-style-one clearfix mb_30">
                      <li>Reduce inflammation</li>
                      <li>Minimize scar tissue formation</li>
                      <li>Prevent chronic pain</li>
                      <li>Improve mobility faster</li>
                      <li>Restore muscle strength</li>
                      <li>Reduce long-term complications</li>
                    </ul>
                  </div>
                  <p className="mb-3">Ignoring symptoms may lead to prolonged discomfort and reduced function. Prompt treatment ensures your recovery stays on track.</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/accident/why-early-treatment.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">
            {Accident.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={`/accident/${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}`}
              //           />
              //         </div>
              //         <h3>
              //           <Link href={`/accident/${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={`/accident/${service.slug}`} aria-label="Accident Image">
                          <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}`}
                        />
                      </div>
                      <h2 className='text-start'>
                        <Link href={`/accident/${service.slug}`} aria-label="Accident 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>
  );
}