import Link from "next/link";

const LEADERS = [
    {
        name: "Dr. Eleanor Laurent",
        role: "President",
        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/8ce6757572-cd9d4e986dee9e71d10c.png",
    },
    {
        name: "Prof. Marcus Dubois",
        role: "Dean of Humanities",
        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/3aae15d87b-020f60df05ac2c52a087.png",
    },
    {
        name: "Dr. Sophie Martin",
        role: "Dean of Research",
        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/3fc05a202c-26e5f00c35a829b5462d.png",
    },
    {
        name: "Prof. Jean-Paul Roux",
        role: "Provost",
        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/3aae15d87b-c36f00cff7803c4209d4.png",
    },
];

const LeadershipBoard = () => {
    return (
        <section id="leadership-board" className="about-leadership">
            <div className="container">
                <div className="about-leadership__header text-center">
                    <div className="about-mission__badge">
                        <span className="about-mission__badge-line"></span>
                        <span className="about-mission__badge-text">University Leadership</span>
                        <span className="about-mission__badge-line"></span>
                    </div>
                    <h2 className="about-leadership__title">Meet Our Leaders</h2>
                    <p className="about-leadership__subtitle">Guiding our academic vision and institutional strategy.</p>
                </div>

                <div className="about-leadership__grid">
                    {LEADERS.map((leader, i) => (
                        <div key={i} className="about-leadership__card">
                            <div className="about-leadership__photo-wrap">
                                <img src={leader.img} alt={leader.name} className="about-leadership__photo" />
                            </div>
                            <div className="about-leadership__info">
                                <h3 className="about-leadership__name">{leader.name}</h3>
                                <p className="about-leadership__role">{leader.role}</p>
                                <div className="about-leadership__socials">
                                    <Link href="#" className="about-leadership__social-link">
                                        <i className="fa-brands fa-linkedin"></i>
                                    </Link>
                                    <Link href="#" className="about-leadership__social-link">
                                        <i className="fa-solid fa-envelope"></i>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default LeadershipBoard;