import Layout from "@/components/layout/Layout";
import Link from "next/link";
import { areaOfInjuryData } from "@/utils/AreaOfInjery.utils";

export const metadata = {
  title: "Expert Injury Area – Rapharehab Physiotherapy",
  description: "Explore Rapharehab’s specialized treatment plans for each injury area—from head to toe—designed to support full recovery with professional.",
};

export default function AreaOfInjury() {
  return (
    <Layout
      headerStyle={1}
      footerStyle={1}
      breadcrumbTitle="Areas of Injury"
      bannerImage="/assets/images/areas-of-injury/area-of-injury-banner.webp"
    >
      <section className="service-section sec-pad-2">
        <div className="auto-container">
          <div className="row clearfix">
            {areaOfInjuryData.map((item) => {
              const altText = item.title ? item.title.toUpperCase() : "AREA OF INJURY";

              return (
                // <div className="col-lg-4 col-md-6 col-sm-12 service-block" key={item.id}>
                //   <div
                //     className="service-block-one wow fadeInUp animated"
                //     data-wow-delay="00ms"
                //     data-wow-duration="1500ms"
                //   >
                //     <div className="inner-box">
                //       <div className="image-box">
                //         <figure className="image">
                //           <Link href={`/area-of-injury/${item.slug}`}>
                //             <img src={item.image} alt={altText} />
                //           </Link>
                //         </figure>
                //       </div>
                //       <div className="lower-content new-height">
                //         <div className="icon-box">
                //           <img src={item.icon} alt={altText} />
                //         </div>
                //         <h3>
                //           <Link href={`/area-of-injury/${item.slug}`}>{item.title}</Link>
                //         </h3>
                //         <p>{item.shortDescription}</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={`/area-of-injury/${item.slug}`} aria-label="Area oF Injury Image Link">
                            <img src={item.image} alt={altText} />
                           </Link>
                      </figure>
                    </div>
                    <div className="lower-content-new">
                      <div className="icon-box-new">
                        <img src={item.icon} alt={altText} />
                      </div>
                      <h2 className='text-start'>
                        <Link href={`/area-of-injury/${item.slug}`} aria-label="Area of injury title">{item.title}</Link>
                      </h2>
                         {/* <h3 className="text-start">
                          <Link
                            href={`/area-of-injury/${item.slug}`}
                            style={{
                              display: '-webkit-box',
                              WebkitLineClamp: 2,
                              WebkitBoxOrient: 'vertical',
                              overflow: 'hidden',
                              textOverflow: 'ellipsis',
                              whiteSpace: 'normal',
                            }}
                          >
                            {item.title}
                          </Link>
                        </h3> */}
                      <p
                        className='text-start'
                        style={{
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          display: '-webkit-box',
                          WebkitLineClamp: 2,
                          WebkitBoxOrient: 'vertical',
                        }}
                      >
                        {item.shortDescription}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              )
            })}
          </div>
        </div>
      </section>
    </Layout>
  );
}