import { useRef } from "react";
import { motion, useScroll, useTransform } from "framer-motion";
import { Monitor, Cpu, Wrench, Gamepad2 } from "lucide-react";

const services = [
  { icon: Monitor, label: "Montagem de PCs Gamers" },
  { icon: Cpu, label: "Upgrade Estratégico" },
  { icon: Wrench, label: "Manutenção Especializada" },
  { icon: Gamepad2, label: "Setup de Alta Performance" },
];

const CyberPIUSection = () => {
  const ref = useRef<HTMLElement>(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"] });

  const gridRotateX = useTransform(scrollYProgress, [0, 0.5, 1], [25, 15, 5]);
  const gridOpacity = useTransform(scrollYProgress, [0, 0.3, 0.7, 1], [0, 0.3, 0.3, 0]);
  const titleX = useTransform(scrollYProgress, [0, 0.4], [-60, 0]);
  const cardsScale = useTransform(scrollYProgress, [0.1, 0.4], [0.9, 1]);

  // Floating orb parallax
  const orbY1 = useTransform(scrollYProgress, [0, 1], [80, -80]);
  const orbY2 = useTransform(scrollYProgress, [0, 1], [-40, 60]);

  return (
    <section ref={ref} id="cyberpiu" className="relative py-32 overflow-hidden">
      <motion.div className="absolute inset-0 bg-radial-cyber" style={{ opacity: useTransform(scrollYProgress, [0, 0.3, 0.7, 1], [0, 1, 1, 0]) }} />

      {/* Animated 3D Grid */}
      <motion.div
        className="absolute inset-0 pointer-events-none"
        style={{
          opacity: gridOpacity,
          backgroundImage: `
            linear-gradient(hsl(var(--cyber) / 0.08) 1px, transparent 1px),
            linear-gradient(90deg, hsl(var(--cyber) / 0.08) 1px, transparent 1px)
          `,
          backgroundSize: "40px 40px",
          transformOrigin: "center top",
          rotateX: gridRotateX,
          perspective: 500,
        }}
      />

      {/* Floating orbs */}
      <motion.div
        className="absolute w-72 h-72 rounded-full blur-3xl pointer-events-none"
        style={{ background: "hsl(var(--cyber) / 0.05)", top: "20%", right: "-5%", y: orbY1 }}
      />
      <motion.div
        className="absolute w-48 h-48 rounded-full blur-3xl pointer-events-none"
        style={{ background: "hsl(var(--cyber) / 0.04)", bottom: "20%", left: "-3%", y: orbY2 }}
      />

      <div className="relative z-10 container mx-auto px-4">
        <motion.div style={{ x: titleX }} className="text-center mb-16">
          <motion.span
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="text-cyber font-mono text-sm tracking-widest uppercase inline-block"
          >
            02 — Hardware
          </motion.span>
          <motion.h2
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7, delay: 0.1 }}
            className="text-4xl md:text-6xl font-extrabold tracking-tight mt-4 mb-6"
          >
            Cyber<span className="text-cyber">PIU</span>
          </motion.h2>
          <motion.p
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="text-muted-foreground max-w-2xl mx-auto text-lg leading-relaxed"
          >
            Mais do que vender peças, construímos máquinas prontas para dominar qualquer game.
            Tecnologia e performance andam juntas.
          </motion.p>
        </motion.div>

        <motion.div style={{ scale: cardsScale }}>
          <motion.div
            initial="hidden"
            whileInView="show"
            viewport={{ once: true }}
            variants={{ hidden: {}, show: { transition: { staggerChildren: 0.12 } } }}
            className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12"
          >
            {services.map((s, i) => (
              <motion.div
                key={s.label}
                variants={{
                  hidden: { opacity: 0, y: 30, rotateY: -10 },
                  show: { opacity: 1, y: 0, rotateY: 0, transition: { duration: 0.6 } },
                }}
                whileHover={{ y: -8, scale: 1.03, transition: { duration: 0.3 } }}
                className="glass-card rounded-xl p-6 text-center hover:glow-cyber transition-shadow duration-500"
              >
                <motion.div
                  initial={{ scale: 0 }}
                  whileInView={{ scale: 1 }}
                  viewport={{ once: true }}
                  transition={{ delay: 0.4 + i * 0.1, type: "spring", stiffness: 300, damping: 15 }}
                >
                  <s.icon className="w-10 h-10 text-cyber mx-auto mb-4" />
                </motion.div>
                <h3 className="font-bold">{s.label}</h3>
              </motion.div>
            ))}
          </motion.div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: 0.3 }}
          className="text-center"
        >
          <a
            href="https://cyberpiu.gestaopme.xyz"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-block bg-cyber text-secondary-foreground px-8 py-3 rounded-lg font-bold hover:brightness-110 transition"
          >
            Visitar Loja
          </a>
        </motion.div>
      </div>
    </section>
  );
};

export default CyberPIUSection;