import Image from "next/image";

export default function PortfolioCaseStudyShowcase() {
    return (
        <section className="section-dark py-24 relative overflow-hidden">
            <div className="glow-orb w-[600px] h-[600px] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-20"></div>

            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center relative z-10 gsap-fade-up">
                <h2 className="mb-4 text-3xl font-bold tracking-tight text-light-surface">Immersive User Experience</h2>
                <p className="mx-auto mb-16 max-w-2xl text-text-light-muted text-lg">
                    Designed with precision to ensure every interaction feels intuitive and responsive.
                </p>
                <div className="relative mx-auto max-w-5xl">
                    {/* Decorative background glow */}
                    <div className="absolute -inset-1 rounded-3xl bg-gradient-to-r from-primary to-primary-light opacity-30 blur-2xl"></div>
                    <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-dark-surface shadow-2xl aspect-video card-glass-dark group">
                        <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black/20 z-10 pointer-events-none"></div>
                        <Image
                            src="/images/portfolio/ecommerce-platform.png"
                            alt="Dashboard analytics interface with graphs and data tables"
                            fill
                            className="object-cover transition-transform duration-1000 group-hover:scale-[1.03]"
                            sizes="(max-width: 1280px) 100vw, 1024px"
                        />
                    </div>
                </div>
            </div>
        </section>
    );
}
