const FEATURES = [
    "Access to world-renowned museums, archives, and libraries.",
    "A hub for international organizations and global policy.",
    "A vibrant cultural ecosystem that enriches the liberal arts experience.",
];

const IMAGES = [
    { src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/4df3620db3-dda28233c91d6369d039.png", alt: "Parisian cafe and street", tall: false },
    { src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/a45c3de13a-8173142c33595269388d.png", alt: "Students in Parisian library", tall: true },
    { src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/fe39e27ab6-40f9c9b4851f3b8176da.png", alt: "Seine river with historic bridges", tall: true },
    { src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/cb66207ea0-16795a67db08ef0e6f8c.png", alt: "Modern research facility", tall: false },
];

const WhyParis = () => {
    return (
        <section id="why-paris" className="why-paris">
            <div className="container">
                <div className="row align-items-center">
                    {/* Left: Image grid */}
                    <div className="col-lg-6 order-lg-1 order-2">
                        <div className="why-paris__image-grid">
                            <div className="why-paris__image-col">
                                <img src={IMAGES[0].src} alt={IMAGES[0].alt} className="why-paris__img why-paris__img--short" />
                                <img src={IMAGES[1].src} alt={IMAGES[1].alt} className="why-paris__img why-paris__img--tall" />
                            </div>
                            <div className="why-paris__image-col why-paris__image-col--offset">
                                <img src={IMAGES[2].src} alt={IMAGES[2].alt} className="why-paris__img why-paris__img--tall" />
                                <img src={IMAGES[3].src} alt={IMAGES[3].alt} className="why-paris__img why-paris__img--short" />
                            </div>
                        </div>
                    </div>

                    {/* Right: Text */}
                    <div className="col-lg-6 order-lg-2 order-1">
                        <div className="why-paris__content">
                            <div className="about-hero__badge">
                                <span className="about-hero__badge-line"></span>
                                <span className="about-hero__badge-text">Our Location</span>
                            </div>
                            <h2 className="why-paris__title">Why Paris?</h2>
                            <p className="why-paris__desc">
                                Paris is not just a backdrop; it is our extended campus. As a historic center
                                of intellectual thought, art, and scientific discovery, the city offers
                                unparalleled opportunities for our students and researchers.
                            </p>
                            <ul className="why-paris__list">
                                {FEATURES.map((item, i) => (
                                    <li key={i} className="why-paris__list-item">
                                        <span className="why-paris__check">
                                            <i className="fa-solid fa-check"></i>
                                        </span>
                                        <span>{item}</span>
                                    </li>
                                ))}
                            </ul>
                            <button className="why-paris__btn">Explore Campus Life</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default WhyParis;