
import Layout from "@/components/layout/Layout"
import Link from "next/link"
import { servicesList } from "@/utils/Services.utils"

export const metadata = {
    title: "Our Professional Services – Rapharehab Physiotherapy",
    description: "Explore a full range of trusted services at Rapharehab, from physiotherapy to acupuncture, massage, osteopathy, chiropody, and more.",
};

export default function ServicesPage() {
    return (
        <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Services"
            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">
                        {servicesList.map((item) => (
                            <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={`/etobicoke-treatment-service/${item.slug}`} aria-label="Etobicoke treatment service">
                                                    <img src={item?.image} alt={item.alt} loading="lazy"/>
                                                </Link>
                                            </figure>
                                        </div>
                                        <div className="lower-content-new">
                                            <div className="icon-box-new">
                                                <img src={item?.icon} alt={item.alt} />
                                            </div>
                                            <h2 className='text-start'>
                                                <Link href={`/etobicoke-treatment-service/${item.slug}`} aria-label="Etobicoke treatment service title">
                                                    {item?.shortTitle}
                                                </Link>
                                            </h2>
                                            <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>
    )
}
