import { useRef } from "react";
import { motion, useScroll, useTransform } from "framer-motion";
import { Sun, TrendingUp, Shield, Zap } from "lucide-react";

const features = [
  { icon: Sun, title: "Energia Solar", desc: "Soluções inteligentes para geração de energia limpa e econômica." },
  { icon: TrendingUp, title: "Economia Real", desc: "Reduza custos e otimize recursos energéticos do seu negócio." },
  { icon: Shield, title: "Credibilidade", desc: "Parceiros estratégicos do mercado, segurança em cada projeto." },
  { icon: Zap, title: "Inovação", desc: "Conectando você ao futuro da energia com tecnologia de ponta." },
];

const container = {
  hidden: {},
  show: { transition: { staggerChildren: 0.15 } },
};

const item = {
  hidden: { opacity: 0, y: 40, scale: 0.95 },
  show: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] as const } },
};

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

  const glowOpacity = useTransform(scrollYProgress, [0, 0.3, 0.7, 1], [0, 1, 1, 0]);
  const titleY = useTransform(scrollYProgress, [0, 0.5], [60, 0]);
  const cardsY = useTransform(scrollYProgress, [0.1, 0.5], [80, 0]);
  const bgScale = useTransform(scrollYProgress, [0, 0.5], [0.8, 1.2]);

  return (
    <section ref={ref} id="heliux" className="relative py-32 overflow-hidden">
      <motion.div className="absolute inset-0 bg-radial-heliux" style={{ opacity: glowOpacity, scale: bgScale }} />

      {/* Floating orbs */}
      <motion.div
        className="absolute w-96 h-96 rounded-full blur-3xl pointer-events-none"
        style={{
          background: "hsl(var(--heliux) / 0.06)",
          top: "10%",
          left: "-10%",
          y: useTransform(scrollYProgress, [0, 1], [100, -100]),
        }}
      />
      <motion.div
        className="absolute w-64 h-64 rounded-full blur-3xl pointer-events-none"
        style={{
          background: "hsl(var(--heliux) / 0.04)",
          bottom: "10%",
          right: "-5%",
          y: useTransform(scrollYProgress, [0, 1], [-50, 80]),
        }}
      />

      <div className="relative z-10 container mx-auto px-4">
        <motion.div style={{ y: titleY }} 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-heliux font-mono text-sm tracking-widest uppercase inline-block"
          >
            01 — Energia
          </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"
          >
            Heliux <span className="text-heliux">Solutions</span>
          </motion.h2>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="text-muted-foreground max-w-2xl mx-auto text-lg leading-relaxed"
          >
            Conectando você ao futuro da energia. Soluções inteligentes no setor de energia, unindo inovação, economia e sustentabilidade.
          </motion.p>
        </motion.div>

        <motion.div style={{ y: cardsY }}>
          <motion.div
            variants={container}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true }}
            className="grid md:grid-cols-2 lg:grid-cols-4 gap-6"
          >
            {features.map((f, i) => (
              <motion.div
                key={f.title}
                variants={item}
                whileHover={{ y: -8, transition: { duration: 0.3 } }}
                className="glass-card rounded-xl p-6 hover:glow-heliux transition-shadow duration-500"
              >
                <motion.div
                  initial={{ rotate: -10, scale: 0.8 }}
                  whileInView={{ rotate: 0, scale: 1 }}
                  viewport={{ once: true }}
                  transition={{ delay: 0.3 + i * 0.1, type: "spring", stiffness: 200 }}
                >
                  <f.icon className="w-10 h-10 text-heliux mb-4" />
                </motion.div>
                <h3 className="text-lg font-bold mb-2">{f.title}</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">{f.desc}</p>
              </motion.div>
            ))}
          </motion.div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: 0.4, duration: 0.6 }}
          className="flex flex-wrap gap-4 justify-center mt-12"
        >
          <a
            href="https://wa.me/5511963336553?text=Olá!+Vim+pelo+site+da+Gestão+PME+e+gostaria+de+saber+mais+sobre+as+soluções+da+Heliux."
            target="_blank"
            rel="noopener noreferrer"
            className="bg-heliux text-primary-foreground px-6 py-3 rounded-lg font-bold hover:brightness-110 transition"
          >
            Falar via WhatsApp
          </a>
          <a
            href="https://heliuxsolutions.com"
            target="_blank"
            rel="noopener noreferrer"
            className="border border-heliux/30 text-heliux px-6 py-3 rounded-lg font-semibold hover:bg-heliux/10 transition"
          >
            Visitar Site
          </a>
          <a
            href="https://instagram.com/heliuxsolutions"
            target="_blank"
            rel="noopener noreferrer"
            className="border border-heliux/30 text-heliux px-6 py-3 rounded-lg font-semibold hover:bg-heliux/10 transition"
          >
            @heliuxsolutions
          </a>
        </motion.div>
      </div>
    </section>
  );
};

export default HeliuxSection;