export default function SuccessHero() {
    return (
        <section className="section-dark relative overflow-hidden pt-24 pb-20 px-4 w-full">
            <div className="glow-orb w-[800px] h-[800px] top-0 left-1/2 -translate-x-1/2 -translate-y-1/3 opacity-30"></div>

            <div className="max-w-[960px] mx-auto text-center flex flex-col gap-6 relative z-10 gsap-fade-up">
                <div className="inline-flex w-fit mx-auto items-center rounded-full border border-primary/30 bg-primary/10 px-4 py-1.5 text-xs font-semibold text-primary-light mb-4">
                    Client Success
                </div>
                <h1 className="text-light-surface text-5xl md:text-6xl lg:text-7xl font-black leading-tight tracking-tight">
                    <span className="text-primary-light relative">
                        Success Stories
                        <div className="absolute -bottom-2 left-0 w-full h-1 bg-gradient-to-r from-primary/0 via-primary to-primary/0 opacity-50"></div>
                    </span> from Our Clients
                </h1>
                <p className="text-text-light-muted text-lg md:text-xl font-normal leading-relaxed max-w-2xl mx-auto mt-4">
                    Building long-term partnerships through innovation and reliability. Discover how we've helped businesses transform their digital landscape.
                </p>

                {/* <div className="flex flex-wrap justify-center gap-8 pt-6 mt-2 border-t border-white/10">
                    <div>
                        <div className="text-2xl font-black text-text-light">500+</div>
                        <div className="text-xs text-text-light-muted font-medium">Projects Delivered</div>
                    </div>
                    <div>
                        <div className="text-2xl font-black text-text-light">200+</div>
                        <div className="text-xs text-text-light-muted font-medium">Global Clients</div>
                    </div>
                    <div>
                        <div className="text-2xl font-black text-text-light">99%</div>
                        <div className="text-xs text-text-light-muted font-medium">Client Satisfaction</div>
                    </div>
                </div> */}
            </div>
        </section>
    );
}
