export default function AboutMission() {
    return (
        <section className="py-20 bg-background-subtle">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="grid md:grid-cols-2 gap-8">
                    <div className="bg-white p-8 lg:p-10 rounded-2xl border border-gray-100 hover:border-accent transition-colors duration-300 shadow-sm hover:shadow-md group relative overflow-hidden">
                        <div className="absolute top-0 left-0 w-1 h-full bg-about-primary group-hover:bg-accent transition-colors duration-300"></div>
                        <div className="flex items-start gap-6">
                            <div className="shrink-0 p-4 bg-about-primary/10 text-about-primary-dark rounded-xl group-hover:bg-accent/10 group-hover:text-accent transition-colors duration-300">
                                <span className="material-symbols-outlined text-3xl">target</span>
                            </div>
                            <div>
                                <h3 className="text-2xl font-bold text-text-main mb-3">Our Mission</h3>
                                <p className="text-text-secondary leading-relaxed">
                                    To deliver cutting-edge IT solutions that drive growth and efficiency for our global partners. We strive to demystify technology and make it a powerful asset for every client we serve.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div className="bg-white p-8 lg:p-10 rounded-2xl border border-gray-100 hover:border-accent transition-colors duration-300 shadow-sm hover:shadow-md group relative overflow-hidden">
                        <div className="absolute top-0 left-0 w-1 h-full bg-about-primary group-hover:bg-accent transition-colors duration-300"></div>
                        <div className="flex items-start gap-6">
                            <div className="shrink-0 p-4 bg-about-primary/10 text-about-primary-dark rounded-xl group-hover:bg-accent/10 group-hover:text-accent transition-colors duration-300">
                                <span className="material-symbols-outlined text-3xl">visibility</span>
                            </div>
                            <div>
                                <h3 className="text-2xl font-bold text-text-main mb-3">Our Vision</h3>
                                <p className="text-text-secondary leading-relaxed">
                                    To be the world's most trusted partner for digital transformation, setting the standard for innovation, integrity, and sustainable technological advancement across industries.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
