export default function About() {
    return (
        <section className="py-28 bg-light-bg section-divider" id="about">
            <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">
                <div className="grid lg:grid-cols-2 gap-16 items-start">
                    <div className="flex flex-col gap-6 lg:sticky lg:top-24 gsap-fade-up">
                        <div className="inline-block">
                            <span className="text-primary font-bold tracking-wider uppercase text-sm">Who We Are</span>
                        </div>
                        <h2 className="text-3xl md:text-5xl font-bold text-text-main leading-tight">
                            Transforming ideas into <span className="gradient-text">digital reality.</span>
                        </h2>
                        <p className="text-text-muted text-lg leading-relaxed">
                            At Aasi Tech, we believe in the power of innovation. We aren&apos;t just developers; we are strategic partners dedicated to your growth. Our agile methodology ensures we deliver value faster without compromising quality.
                        </p>
                        <div className="flex flex-col gap-5 mt-4">
                            <div className="flex items-center gap-4 group">
                                <div className="size-12 rounded-full bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors duration-300">
                                    <span className="material-symbols-outlined">check</span>
                                </div>
                                <div>
                                    <h4 className="font-bold text-text-main">Proven Track Record</h4>
                                    <p className="text-sm text-text-muted">Over 200+ successful projects delivered.</p>
                                </div>
                            </div>
                            <div className="flex items-center gap-4 group">
                                <div className="size-12 rounded-full bg-secondary/10 flex items-center justify-center text-secondary group-hover:bg-secondary group-hover:text-white transition-colors duration-300">
                                    <span className="material-symbols-outlined">trending_up</span>
                                </div>
                                <div>
                                    <h4 className="font-bold text-text-main">Scalable Solutions</h4>
                                    <p className="text-sm text-text-muted">Built to grow as your business expands.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="grid sm:grid-cols-2 gap-6 gsap-stagger">
                        <div className="card-modern p-8 card-hover-lift group">
                            <div className="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-6 group-hover:bg-primary group-hover:text-white transition-colors duration-300">
                                <span className="material-symbols-outlined">groups</span>
                            </div>
                            <h3 className="text-xl font-bold mb-3">Expert Team</h3>
                            <p className="text-text-muted text-sm leading-relaxed">Dedicated professionals with deep industry knowledge ready to help.</p>
                        </div>
                        <div className="card-modern p-8 card-hover-lift group">
                            <div className="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-6 group-hover:bg-primary group-hover:text-white transition-colors duration-300">
                                <span className="material-symbols-outlined">sync</span>
                            </div>
                            <h3 className="text-xl font-bold mb-3">Agile Process</h3>
                            <p className="text-text-muted text-sm leading-relaxed">Fast, iterative development cycles that keep you in the loop.</p>
                        </div>
                        <div className="card-modern p-8 card-hover-lift group">
                            <div className="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-6 group-hover:bg-primary group-hover:text-white transition-colors duration-300">
                                <span className="material-symbols-outlined">support_agent</span>
                            </div>
                            <h3 className="text-xl font-bold mb-3">24/7 Support</h3>
                            <p className="text-text-muted text-sm leading-relaxed">Always here when you need us, ensuring minimal downtime.</p>
                        </div>
                        <div className="card-modern p-8 card-hover-lift group">
                            <div className="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-6 group-hover:bg-primary group-hover:text-white transition-colors duration-300">
                                <span className="material-symbols-outlined">public</span>
                            </div>
                            <h3 className="text-xl font-bold mb-3">Global Reach</h3>
                            <p className="text-text-muted text-sm leading-relaxed">Serving clients worldwide with localized strategies.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
