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="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>
  );
}