import { servicesList } from '@/utils/Services.utils';
import Link from 'next/link';
import React from 'react';

export default function ServicesSection() {
    return (
        <section className="team-section sec-pad centred bg-color-1">
            <div className="pattern-layer">
                <div className="pattern-1" style={{ backgroundImage: 'url(/assets/images/home/our-services/top-right.webp)' }}></div>
                <div className="pattern-2" style={{ backgroundImage: 'url(/assets/images/home/our-services/bottom-left.webp)' }}></div>
            </div>
            <div className="auto-container">
                <div className="sec-title-1 mb_50 centred">
                    <span className="sub-title-1">We Help You Move Better & Live Healthier</span>
                    <h2>Our Services</h2>
                </div>
                <div className="row clearfix">
                    {servicesList?.slice(0, 8)?.map((service, index) => (
                        <div className="col-lg-3 col-md-4 col-sm-12 service-block d-flex" key={index}>
                            <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/${service.slug}`}>
                                                <img src={service?.image} alt={service.alt} />
                                            </Link>
                                        </figure>
                                    </div>
                                    <div className="lower-content-new">
                                        <div className="icon-box-new">
                                            <img src={service?.icon} alt="" />
                                        </div>
                                        <h3 className='text-start'>
                                            <Link href={`/etobicoke-treatment-service/${service.slug}`}>
                                                {service?.title}
                                            </Link>
                                        </h3>
                                        <p 
                                            className='text-start' 
                                            style={{
                                                overflow: 'hidden',
                                                textOverflow: 'ellipsis',
                                                display: '-webkit-box',
                                                WebkitLineClamp: 2,
                                                WebkitBoxOrient: 'vertical',
                                            }}
                                        >
                                            {service?.shortDescription}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                    <div className='col-12 text-center'>
                        <div className="btn-box">
                            <Link href="/etobicoke-treatment-service" className="theme-btn btn-one-new"><span>View All Services</span></Link>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};