const TIMELINE = [
    { year: "1895", title: "Foundation", desc: "Established as an independent institute for liberal studies by a group of visionary scholars.", side: "left" },
    { year: "1945", title: "Post-War Expansion", desc: "Expanded faculties to include modern sciences and established the first dedicated research hub.", side: "right" },
    { year: "1982", title: "Global Partnerships", desc: "Initiated formal exchange programs and research partnerships with leading universities worldwide.", side: "left" },
    { year: "2020", title: "Modern Research Era", desc: "Inauguration of the new interdisciplinary research center, focusing on sustainable global development.", side: "right" },
];

const HistoryTimeline = () => {
    return (
        <section id="history-timeline" className="about-timeline">
            <div className="container">
                <div className="about-timeline__header text-center">
                    <h2 className="about-timeline__title">Our History</h2>
                    <p className="about-timeline__subtitle">A legacy of academic excellence spanning over a century.</p>
                </div>

                <div className="about-timeline__track">
                    <div className="about-timeline__line"></div>

                    {TIMELINE.map((item, i) => (
                        <div key={i} className={`about-timeline__item about-timeline__item--${item.side}`}>
                            <div className="about-timeline__content">
                                <h3 className="about-timeline__year">{item.year}</h3>
                                <h4 className="about-timeline__event">{item.title}</h4>
                                <p className="about-timeline__desc">{item.desc}</p>
                            </div>
                            <div className="about-timeline__dot-wrap">
                                <div className="about-timeline__dot"></div>
                            </div>
                            <div className="about-timeline__spacer"></div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default HistoryTimeline;