import Image from "next/image";

export default function AboutHero() {
    return (
        <header className="relative bg-background-light py-16 lg:py-24 overflow-hidden">
            <div className="absolute top-0 right-0 -translate-y-1/4 translate-x-1/4 w-96 h-96 bg-about-primary/10 rounded-full blur-3xl -z-10"></div>
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
                    <div className="flex flex-col gap-6">
                        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-about-primary/10 text-about-primary-dark text-xs font-bold uppercase tracking-wider w-fit">
                            <span className="w-2 h-2 rounded-full bg-about-primary"></span>
                            Since 2010
                        </div>
                        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-black text-text-main leading-[1.1] tracking-tight">
                            Empowering Your <span className="text-about-primary relative inline-block">Digital<svg className="absolute w-full h-3 -bottom-1 left-0 text-about-primary/30" preserveAspectRatio="none" viewBox="0 0 100 10"><path d="M0 5 Q 50 10 100 5" fill="none" stroke="currentColor" strokeWidth="4"></path></svg></span> Transformation
                        </h1>
                        <p className="text-lg text-text-secondary leading-relaxed max-w-xl">
                            Aasi Tech has been at the forefront of IT innovation, helping businesses navigate the digital landscape with confidence, agility, and cutting-edge solutions tailored for growth.
                        </p>
                        <div className="flex flex-wrap gap-4 pt-2">
                            <button className="bg-about-primary text-white text-base font-bold h-12 px-8 rounded-xl transition-all duration-300 shadow-lg shadow-green-200/50 relative isolate overflow-hidden group">
                                <span className="relative z-10 w-full h-full block leading-[48px]">Our Story</span>
                                <div className="absolute inset-0 bg-about-primary-dark opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-[-1]" />
                            </button>
                            <button className="bg-white border border-gray-200 hover:border-accent hover:text-accent text-text-main text-base font-bold h-12 px-8 rounded-xl transition-all duration-200">
                                Meet the Team
                            </button>
                        </div>
                    </div>
                    <div className="relative">
                        <div className="aspect-[4/3] rounded-2xl overflow-hidden shadow-2xl shadow-gray-200/50 relative z-10 group">
                            <div className="absolute inset-0 bg-gradient-to-tr from-about-primary/20 to-transparent mix-blend-overlay z-10"></div>
                            <Image
                                src="/img/illustrations/about_hero_new.png"
                                alt="Aasi Tech Innovation and Teamwork Illustration"
                                fill
                                className="object-cover transform group-hover:scale-105 transition-transform duration-700"
                                sizes="(max-width: 1024px) 100vw, 50vw"
                            />
                        </div>
                        <div className="absolute -bottom-6 -left-6 w-24 h-24 text-about-primary/20 z-0">
                            <svg fill="currentColor" height="100%" viewBox="0 0 100 100" width="100%">
                                <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                                    <circle cx="2" cy="2" r="2"></circle>
                                </pattern>
                                <rect width="100" height="100" fill="url(#dots)"></rect>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    );
}
