import { servicesList } from "@/utils/Services.utils"
import Link from "next/link"
import Image from "next/image";



export default function MobileServices() {
    return (
        <>
            <section className="team-section sec-pad centred  bg-color-1">
                <div className="pattern-layer">
                    <div className="pattern-1 ">
                        <Image
                            // loader={exportableLoader}
                            src="/assets/images/home/our-services/top-right.webp"
                            alt="Physiotherapy at Rapharehab"
                            fill
                            style={{ objectFit: "cover" }}
                        />
                    </div>

                    <div className="pattern-2 ">
                        <Image
                            src="/assets/images/home/our-services/bottom-left.webp"
                            alt="Physiotherapy at Rapharehab"
                            fill
                            style={{ objectFit: "cover" }}
                        />
                    </div>


                </div>
                <div className="auto-container">
                    <div className="sec-title mb_50 centred">
                        <span className="sub-title-1 new-color2">We Help You Move Better & <br />Live Healthier</span>
                        <h2 className="tex-color-1">Our Services</h2>
                    </div>
                    <div className="row clearfix">
                        {
                            servicesList?.slice(0, 8)?.map((service, index) => {
                                return (
                                    <div className="col-lg-3 col-md-6 col-6 feature-block" key={index}>
                                        <div className="feature-block-one">
                                            <div className="inner-box text-center">
                                                <div className="icon-box">
                                                    <img
                                                        src={service.icon2}
                                                        alt={`${service.alt}`}
                                                    />
                                                </div>                                                <h3><Link href="/" aria-label="Service Title">     {service?.shortTitle}</Link></h3>
                                                <div className="btn-box">
                                                    <Link
                                                        href={`/etobicoke-treatment-service/${service.slug}`}
                                                        className="theme-btn-2 btn-one"
                                                        aria-label="View Service">
                                                        <span>View Service</span>
                                                    </Link>
                                                </div>
                                                {/* <p>Lorem ipsum dolor sit amet ctetur adipiscing</p> */}
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }

                        <div className='col-12 text-center'>
                            <div className="btn-box">
                                <Link href="/etobicoke-treatment-service" className="theme-btn btn-one-new" aria-label="View all service"><span>View All Services</span></Link>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    )
}