'use client'
import Layout from "@/components/layout/Layout";
import Link from "next/link";
import { teamMembers } from "@/utils/constant.utils";

export default function Home() {
  return (
    <>
      <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Our Team" bannerImage="/assets/images/our-team/our-team-banner.webp">
        <section className="team-section pt_90 pb_90 centred">
          <div className="auto-container">
            <div className="sec-title mb_50">
              <span className="sub-title">Meet the Team</span>
              <h2>Meet Our Experienced Therapists <br />for Exceptional Care</h2>
            </div>
            <div className="row clearfix justify-content-center">
              {teamMembers.map((member, index) => (
                <div key={member.id} className="col-lg-4 col-md-6 col-sm-12 team-block">
                  <div
                    className="team-block-two wow fadeInUp animated"
                    data-wow-delay={`${index * 200}ms`}
                    data-wow-duration="1500ms"
                  >
                    <div className="inner-box">
                      <div className="image-box">
                        <figure className="image">
                          <img
                            src={member.image}
                            alt={member.name}
                            style={{ width: "410px", height: "444px", objectFit: "cover" }}
                          />
                        </figure>
                      </div>
                      <div className="lower-content">
                        <h3>
                          <Link href={`/our-team-physiotherapy-etobicoke/${member.slug}`}>{member.name}</Link>
                        </h3>
                        <span className="designation">{member.designation}</span>
                        <ul className="social-links clearfix">
                          {member.socials.map((social, idx) => (
                            <li key={idx}>
                              <Link href={social.link}><i className={social.icon}></i></Link>
                            </li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </Layout>
    </>
  );
}