import Image from "next/image";

export default function SuccessVideo() {
    return (
        <section className="section-dark relative overflow-hidden w-full py-24 px-4">
            <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="max-w-[1280px] mx-auto text-center flex flex-col items-center relative z-10 gsap-fade-up">
                <h2 className="text-light-surface text-3xl font-bold mb-10 md:text-4xl">
                    Hear from our lead partners
                </h2>
                <div className="relative w-full max-w-4xl aspect-video rounded-3xl overflow-hidden shadow-glow-green border border-white/10 group cursor-pointer bg-dark-surface card-glass-dark">
                    <Image
                        src="/images/video-thumbnail.png"
                        alt="Video thumbnail showing a business meeting"
                        fill
                        className="object-cover opacity-80 group-hover:opacity-100 group-hover:scale-105 transition-all duration-700"
                        priority
                    />
                    <div className="absolute inset-0 bg-black/30 flex items-center justify-center z-10 transition-colors group-hover:bg-black/10">
                        <div className="size-24 bg-primary/90 rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300 border border-primary-light/50 backdrop-blur-sm">
                            <span className="material-symbols-outlined text-white text-6xl">
                                play_arrow
                            </span>
                        </div>
                    </div>
                </div>
                <p className="mt-8 text-text-light-muted text-lg">
                    Watch how we transformed TechFlow's infrastructure
                </p>
            </div>
        </section>
    );
}
