import Image from "next/image";
import Link from "next/link";

export default function Hero() {
    return (
        <section className="relative pt-8 pb-20 lg:pt-16 lg:pb-32 overflow-hidden hero-gradient-bg">
            {/* Decorative glow orbs */}
            <div className="glow-orb w-96 h-96 top-10 right-0 opacity-60" />
            <div className="glow-orb w-72 h-72 bottom-0 left-10 opacity-40" />
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full border border-primary/5 -z-10" />

            <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 relative">
                <div className="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
                    {/* Hero text */}
                    <div className="gsap-hero-text flex flex-col items-start gap-7 z-10">
                        <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/15 border border-primary/25 text-primary-light text-sm font-semibold shadow-sm">
                            <span className="material-symbols-outlined text-sm">rocket_launch</span>
                            <span>Elevating Business Potential</span>
                        </div>
                        <h1 className="text-4xl lg:text-6xl font-black text-text-light leading-[1.1] tracking-tight">
                            Innovative Digital Solutions for{" "}
                            <span className="gradient-text">Modern Businesses</span>
                        </h1>
                        <p className="text-lg text-text-light-muted leading-relaxed max-w-lg">
                            Empowering your business with cutting-edge technology, tailored strategies, and a dedicated team of experts ready to scale your vision.
                        </p>
                        <div className="flex flex-wrap gap-4 pt-2">
                            <Link
                                href="/contact"
                                className="px-8 py-3.5 bg-gradient-to-r from-primary to-primary-light text-white font-bold rounded-xl btn-glow flex items-center gap-2"
                            >
                                Start a Project
                                <span className="material-symbols-outlined text-sm">arrow_forward</span>
                            </Link>
                            <Link
                                href="/services"
                                className="px-8 py-3.5 bg-transparent border-2 border-primary/40 text-primary-light font-bold rounded-xl hover:bg-primary/10 hover:border-primary-light transition-all duration-300 flex items-center gap-2 btn-hover-lift"
                            >
                                Our Services
                            </Link>
                        </div>

                        {/* Quick stats strip */}
                        <div className="flex flex-wrap gap-8 pt-4 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>
                    {/* Hero image */}
                    <div className="gsap-hero-image relative aspect-video lg:aspect-[4/3] w-full rounded-2xl overflow-hidden shadow-2xl ring-1 ring-white/10">
                        <div className="absolute inset-0 bg-gradient-to-tr from-dark-bg/30 to-transparent z-10 pointer-events-none" />
                        <Image
                            src="/img/illustrations/home_hero_new.png"
                            alt="Aasi Tech Digital Transformation Hero"
                            fill
                            sizes="(max-width: 1024px) 100vw, 50vw"
                            className="object-cover"
                            priority
                        />
                    </div>
                </div>
            </div>
        </section>
    );
}
