import { motion } from 'framer-motion';
import { Sparkles, Star, Users, ImageIcon, Clock } from 'lucide-react';
import InlineCTA from './InlineCTA';

const stats = [
  { icon: <Users className="w-5 h-5 text-pink-400" />, value: "+10.000", label: "famílias atendidas" },
  { icon: <ImageIcon className="w-5 h-5 text-violet-400" />, value: "+180.000", label: "artes geradas" },
  { icon: <Star className="w-5 h-5 text-amber-400" />, value: "4.9★", label: "avaliação média" },
  { icon: <Clock className="w-5 h-5 text-emerald-400" />, value: "2~5 min", label: "por arte gerada" },
];

export default function VideoDemonstration() {
  return (
    <section className="py-24 bg-indigo-950 relative overflow-hidden" id="video">
      {/* Background glow */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] bg-pink-600/10 blur-[120px] rounded-full pointer-events-none" />
      <div className="absolute top-0 right-0 w-96 h-96 bg-violet-600/10 blur-[100px] rounded-full pointer-events-none" />

      <div className="container mx-auto px-6 max-w-5xl relative z-10">

        {/* Header */}
        <div className="text-center mb-14">
          <motion.div
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-pink-500/30 bg-pink-500/10 mb-6 text-pink-300"
          >
            <Sparkles className="w-4 h-4 text-amber-400 animate-pulse" />
            <span className="text-sm font-bold uppercase tracking-wider">Veja ao vivo</span>
          </motion.div>

          <motion.h2
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.05 }}
            className="text-3xl md:text-5xl font-display font-bold mb-5 tracking-tight text-white"
          >
            Da foto ao kit de festa<br className="hidden md:block" />
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-violet-400"> em menos de 5 minutos.</span>
          </motion.h2>

          <motion.p
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-lg text-indigo-200/80 max-w-xl mx-auto font-medium"
          >
            Veja como é simples usar a plataforma — do upload da foto até o PDF pronto para imprimir.
          </motion.p>
        </div>

        {/* Video */}
        <motion.div
          initial={{ opacity: 0, scale: 0.97 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="relative group"
        >
          {/* Glow ring */}
          <div className="absolute -inset-1 bg-gradient-to-r from-pink-500 via-violet-500 to-pink-500 rounded-[2.2rem] blur-md opacity-40 group-hover:opacity-60 transition-opacity duration-500" />

          <div className="relative rounded-[2rem] overflow-hidden border border-white/10 shadow-2xl bg-indigo-950">
            {/* Barra superior estilo browser */}
            <div className="flex items-center gap-2 px-5 py-3 bg-white/5 border-b border-white/10">
              <div className="flex gap-1.5">
                <div className="w-3 h-3 rounded-full bg-red-500/70" />
                <div className="w-3 h-3 rounded-full bg-yellow-500/70" />
                <div className="w-3 h-3 rounded-full bg-emerald-500/70" />
              </div>
              <div className="flex-1 mx-4 h-6 rounded-full bg-white/10 flex items-center px-4">
                <span className="text-white/40 text-xs font-medium">festamagicaia.com.br/criar</span>
              </div>
              <div className="flex items-center gap-1.5 text-[10px] font-bold text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-1 rounded-full">
                <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
                AO VIVO
              </div>
            </div>

            <video
              src="https://s3.seureview.com.br/festamagica/0510(2).mp4"
              className="w-full h-auto object-cover"
              controls
              preload="metadata"
              playsInline
              poster="/images/antes-depois/miguel-avatar.webp"
            />
          </div>
        </motion.div>

        {/* Stats */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: 0.2 }}
          className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-10"
        >
          {stats.map((s, i) => (
            <div key={i} className="flex flex-col items-center gap-2 bg-white/5 border border-white/10 rounded-2xl py-5 px-4 hover:bg-white/10 transition-colors">
              <div className="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center">
                {s.icon}
              </div>
              <span className="text-2xl font-display font-black text-white">{s.value}</span>
              <span className="text-xs font-semibold text-indigo-300 text-center">{s.label}</span>
            </div>
          ))}
        </motion.div>

        <InlineCTA
          text="Sim, Eu Quero Isso na Festa do Meu Filho!"
          subtext="Acesso imediato após o pagamento"
        />
      </div>
    </section>
  );
}
