import Link from "next/link";

const CENTERS = [
    {
        tag: "Biosciences",
        tagColor: "blue",
        title: "Institut Pasteur Collaborative Lab",
        desc: "A premier center focusing on immunology, genetics, and infectious diseases.",
        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/115ee2f067-72629210549870cf0d35.png",
        href: "#",
    },
    {
        tag: "Humanities",
        tagColor: "yellow",
        title: "Center for European Studies",
        desc: "Housing over 2 million volumes and dedicated to historical and sociological research.",
        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/c11358a8da-a7b331f85d1fbd27c851.png",
        href: "#",
    },
    {
        tag: "Technology",
        tagColor: "green",
        title: "AI & Robotics Institute",
        desc: "Pioneering developments in machine learning, automation, and computational science.",
        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/97fca8b57f-238aa78a799f22cf1cd1.png",
        href: "#",
    },
];

const Campus = () => {
    return (
        <section id="campus" className="about-campus">
            <div className="container">
                <div className="about-campus__header text-center">
                    <h2 className="about-campus__title">Campus &amp; Research Centers</h2>
                    <p className="about-campus__subtitle">
                        State-of-the-art facilities nestled in the historic Latin Quarter, designed to foster innovation and collaboration.
                    </p>
                </div>

                <div className="about-campus__grid">
                    {CENTERS.map((center, i) => (
                        <div key={i} className="about-campus__card">
                            <div className="about-campus__img-wrap">
                                <img src={center.img} alt={center.title} className="about-campus__img" />
                            </div>
                            <div className="about-campus__body">
                                <span className={`about-campus__tag about-campus__tag--${center.tagColor}`}>
                                    {center.tag}
                                </span>
                                <h3 className="about-campus__card-title">{center.title}</h3>
                                <p className="about-campus__card-desc">{center.desc}</p>
                                <Link href={center.href} className="about-campus__link">
                                    Explore Facility <i className="fa-solid fa-arrow-right"></i>
                                </Link>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default Campus;