const VALUES = [
    {
        icon: "fa-solid fa-book-open",
        title: "Liberal Arts Foundation",
        desc: "Providing a broad intellectual foundation that encourages critical thinking, creativity, and the ability to adapt to a rapidly changing world.",
    },
    {
        icon: "fa-solid fa-microscope",
        title: "Research Excellence",
        desc: "Fostering a culture of rigorous inquiry and innovation, supporting faculty and students in pushing the boundaries of knowledge.",
    },
    {
        icon: "fa-solid fa-globe",
        title: "Global Perspective",
        desc: "Cultivating an inclusive environment that values diverse perspectives and prepares students to engage with complex global challenges.",
    },
];

const Mission = () => {
    return (
        <section id="mission-values" className="about-mission">
            <div className="container">
                <div className="about-mission__header text-center">
                    <div className="about-mission__badge">
                        <span className="about-mission__badge-line"></span>
                        <span className="about-mission__badge-text">Core Principles</span>
                        <span className="about-mission__badge-line"></span>
                    </div>
                    <h2 className="about-mission__title">Our Mission &amp; Values</h2>
                    <p className="about-mission__subtitle">
                        We are committed to advancing human knowledge and cultivating responsible global citizens through transformative education.
                    </p>
                </div>

                <div className="about-mission__grid">
                    {VALUES.map((item, i) => (
                        <div key={i} className="about-mission__card">
                            <div className="about-mission__icon-wrap">
                                <i className={item.icon}></i>
                            </div>
                            <h3 className="about-mission__card-title">{item.title}</h3>
                            <p className="about-mission__card-desc">{item.desc}</p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default Mission;