export default function AboutJourney() {
    return (
        <section className="py-20 bg-background-subtle">
            <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 className="text-3xl font-black text-text-main text-center mb-16">Our Journey</h2>
                <div className="relative">
                    <div className="absolute left-1/2 transform -translate-x-1/2 w-0.5 h-full bg-gray-200"></div>
                    <div className="space-y-12">
                        <div className="relative flex items-center justify-between">
                            <div className="w-5/12 text-right pr-8">
                                <h3 className="text-xl font-bold text-text-main">Founded</h3>
                                <p className="text-text-secondary mt-1">Aasi Tech begins in a small garage.</p>
                            </div>
                            <div className="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-about-primary rounded-full border-4 border-white shadow-md z-10"></div>
                            <div className="w-5/12 pl-8">
                                <span className="text-2xl font-black text-gray-300">2010</span>
                            </div>
                        </div>
                        <div className="relative flex items-center justify-between flex-row-reverse">
                            <div className="w-5/12 text-left pl-8">
                                <h3 className="text-xl font-bold text-text-main">Global Expansion</h3>
                                <p className="text-text-secondary mt-1">Opened offices in London and Singapore.</p>
                            </div>
                            <div className="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-about-primary rounded-full border-4 border-white shadow-md z-10"></div>
                            <div className="w-5/12 text-right pr-8">
                                <span className="text-2xl font-black text-gray-300">2015</span>
                            </div>
                        </div>
                        <div className="relative flex items-center justify-between">
                            <div className="w-5/12 text-right pr-8">
                                <h3 className="text-xl font-bold text-text-main">Top 50 IT Firm</h3>
                                <p className="text-text-secondary mt-1">Recognized by TechWorld Magazine.</p>
                            </div>
                            <div className="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-about-primary rounded-full border-4 border-white shadow-md z-10"></div>
                            <div className="w-5/12 pl-8">
                                <span className="text-2xl font-black text-gray-300">2019</span>
                            </div>
                        </div>
                        <div className="relative flex items-center justify-between flex-row-reverse">
                            <div className="w-5/12 text-left pl-8">
                                <h3 className="text-xl font-bold text-text-main">AI Innovation Hub</h3>
                                <p className="text-text-secondary mt-1">Launched our dedicated AI research center.</p>
                            </div>
                            <div className="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-about-primary rounded-full border-4 border-white shadow-md z-10"></div>
                            <div className="w-5/12 text-right pr-8">
                                <span className="text-2xl font-black text-gray-300">2023</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
