import { teamMembers2 } from "@/data/team";
import Link from "next/link";
import Image from "next/image";
import AnimatedText from "../common/AnimatedText";
export default function Team() {
  return (
    <section className="team-section section-padding">
      <div className="shape-1 float-bob-y">
        <Image
          src="/assets/img/about-page/left-top-element.webp"
          width={161}
          height={250}
          alt="img"
        />
      </div>
      <div className="shape-2">
        <Image
          src="/assets/img/about-page/right-bottom3.webp"
          width={352}
          height={428}
          alt="img"
        />
      </div>
      <div className="container">
        {/* <div className="section-title text-center">
          <h6 className="wow fadeInUp">
            <i className="fa-regular fa-arrow-left-long" />
            our team members
            <i className="fa-regular fa-arrow-right-long" />
          </h6>
          <h2 className="splt-txt wow">
            <AnimatedText text="Our Professional Team" />
          </h2>
        </div> */}
        <div className="row">
          {teamMembers2.map((member) => (
            <div
              key={member.id}
              className={`col-xl-3 col-lg-4 col-md-6 col-sm-6 wow fadeInUp${
                member.active ? " active" : ""
              }`}
              data-wow-delay={member.delay}
            >
              <div className="team-box-items">
                <div className="team-image">
                  <Image
                    src={member.image}
                    width={305}
                    height={358}
                    alt="Team"
                  />
                </div>
                <div className="team-content">
                  <h5>
                    <Link href={`/team-details/${member.id}`}>
                      {member.name}
                    </Link>
                  </h5>
                  {/* <p>{member.role}</p> */}
                  <a href="team-details" className="icon">
                    <i className="fa-solid fa-link" />
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}