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

export default function PortfolioCaseStudyHero() {
    return (
        <section className="bg-gradient-to-br from-dark-bg via-dark-surface to-dark-bg relative overflow-hidden pt-16 pb-20 lg:pt-24 lg:pb-28">
            <div className="glow-orb w-[800px] h-[800px] top-0 left-0 -translate-x-1/3 -translate-y-1/3 opacity-30"></div>

            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10 gsap-fade-up">
                <div className="grid gap-12 lg:grid-cols-2 lg:gap-8 items-center">
                    <div className="flex flex-col gap-6">
                        <div className="inline-flex w-fit items-center rounded-full border border-primary/30 bg-primary/10 px-4 py-1.5 text-xs font-semibold text-primary-light">
                            Case Study: Retail &amp; E-commerce
                        </div>
                        <h1 className="text-4xl font-black leading-tight tracking-tight text-light-surface sm:text-5xl lg:text-6xl">
                            E-commerce Platform Transformation
                        </h1>
                        <p className="text-lg text-text-light-muted max-w-xl">
                            A complete digital overhaul for a leading retail brand, delivering enhanced user experience and a scalable headless architecture that boosted sales by 40%.
                        </p>
                        <div className="flex flex-wrap gap-4 pt-4">
                            <Link href="/contact" className="btn-primary flex items-center gap-2 h-14 pl-8 pr-6">
                                Visit Live Site
                                <span className="material-symbols-outlined text-[20px]">open_in_new</span>
                            </Link>
                            <Link href="/contact" className="inline-flex h-14 items-center justify-center rounded-xl border border-white/10 bg-white/5 px-8 text-base font-bold text-light-surface shadow-sm transition-all hover:border-primary/40 hover:bg-white/10">
                                Start a Project
                            </Link>
                        </div>
                    </div>
                    <div className="relative w-full">
                        <div className="aspect-video w-full overflow-hidden rounded-3xl bg-dark-bg border border-white/10 shadow-glow-green relative group">
                            <div className="absolute inset-0 bg-gradient-to-tr from-primary/10 to-transparent z-10 transition-opacity group-hover:opacity-0 pointer-events-none"></div>
                            <Image
                                src="/images/portfolio/ecommerce-platform.png"
                                alt="Modern dashboard interface on a laptop screen showing analytics"
                                fill
                                className="object-cover transition-transform duration-700 group-hover:scale-105"
                                sizes="(max-width: 1024px) 100vw, 50vw"
                                priority
                            />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
