import Link from "next/link";

export default function ServicesHero() {
    return (
        <section className="relative pt-32 pb-20 lg:pt-40 lg:pb-32 overflow-hidden bg-light-bg">
            {/* Background Accents */}
            <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-primary/5 rounded-full blur-[100px] -translate-y-1/2 translate-x-1/2 pointer-events-none" />
            <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-accent/5 rounded-full blur-[80px] translate-y-1/2 -translate-x-1/2 pointer-events-none" />

            <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div className="text-center max-w-4xl mx-auto gsap-fade-up">
                    <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white border border-gray-100 shadow-sm mb-6">
                        <span className="size-2 rounded-full bg-primary animate-pulse"></span>
                        <span className="text-xs font-bold uppercase tracking-widest text-text-main">Our Expertise</span>
                    </div>
                    <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-text-main leading-tight tracking-tight mb-8">
                        Innovative Services for <br className="hidden md:block" />
                        <span className="text-primary relative inline-block">
                            Your Digital Growth
                            <svg className="absolute w-full h-3 -bottom-1 left-0 text-primary/20" viewBox="0 0 100 10" preserveAspectRatio="none">
                                <path d="M0,5 Q50,10 100,5" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
                            </svg>
                        </span>
                    </h1>
                    <p className="text-lg md:text-xl text-text-muted mb-12 leading-relaxed max-w-2xl mx-auto">
                        We provide cutting-edge IT solutions tailored to elevate your business operations and drive meaningful digital transformation across your enterprise.
                    </p>
                    <div className="flex flex-col sm:flex-row gap-4 justify-center">
                        <Link href="#services" className="btn-primary inline-flex items-center justify-center rounded-full px-10 py-4 text-white text-base font-bold shadow-glow-green hover:shadow-lg transition-all btn-hover-lift">
                            Explore Offerings
                            <span className="material-symbols-outlined ml-2">explore</span>
                        </Link>
                        <Link href="/portfolio" className="inline-flex items-center justify-center rounded-full px-10 py-4 bg-white border border-gray-200 hover:border-primary/30 hover:bg-gray-50 text-text-main text-base font-bold transition-all btn-hover-lift">
                            View Case Studies
                        </Link>
                    </div>
                </div>
            </div>
        </section>
    );
}
