import { teamMembers } from "@/utils/data";

const TeamSection = () => (
    <section className="team-section p-relative section-space">
        <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-13.png)" }}></div>
        <div className="shape-2 float-bob-y" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-14.png)" }}></div>
        <div className="small-container">
            <div className="title-box text-center mb-50 wow fadeInLeft" data-wow-delay=".5s">
                <span className="section-sub-title">OUR team</span>
                <h3 className="section-title mt-10">Our Leadership Team</h3>
            </div>
            <div className="row g-4">
                {teamMembers.slice(0, 3).map((member, index) => (
                    <div key={member.id} className="col-xxl-4 col-xl-4 col-lg-4 col-md-6">
                        <div className={`team-area-box p-relative mb-60 wow ${index === 0 ? 'fadeInLeft' : index === 1 ? 'fadeInDown' : 'fadeInRight'}`} data-wow-delay={`${0.5 + (index + 1) * 0.2}s`}>
                            <figure className="image w-img p-relative"><img src={member.image} alt="" /></figure>
                            <div className="content">
                                <div className="author-info">
                                    <h5 className="mb-5"><a href="#">{member.name}</a></h5>
                                    <span>{member.role}</span>
                                </div>
                                <div className="social-links p-relative">
                                    <span><i className="fa-solid fa-share-nodes"></i></span>
                                    <ul>
                                        <li><a href="#"><i className="fab fa-facebook-f"></i></a></li>
                                        <li><a href="#"><i className="fab fa-linkedin-in"></i></a></li>
                                        <li><a href="#"><i className="fab fa-instagram"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    </section>
);

export default TeamSection;
