import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { motion } from "framer-motion";
import { FaChevronDown } from "react-icons/fa";
import { useTranslation } from "react-i18next";

const stagger = {
  container: {
    animate: { transition: { staggerChildren: 0.18 } },
  },
  item: {
    initial: { opacity: 0, y: 28 },
    animate:  { opacity: 1, y: 0, transition: { duration: 0.65, ease: "easeOut" as const } },
  },
};

// Fixed seed so no hydration mismatch & no layout shift on re-render
const PARTICLES = [
  { id: 0,  left: "12%",  top: "18%",  size: 5,  delay: 0,    dur: 5.2 },
  { id: 1,  left: "82%",  top: "14%",  size: 7,  delay: 0.8,  dur: 6.1 },
  { id: 2,  left: "25%",  top: "72%",  size: 4,  delay: 1.5,  dur: 4.8 },
  { id: 3,  left: "68%",  top: "55%",  size: 9,  delay: 0.3,  dur: 7.0 },
  { id: 4,  left: "90%",  top: "40%",  size: 5,  delay: 2.1,  dur: 5.5 },
  { id: 5,  left: "44%",  top: "85%",  size: 6,  delay: 0.6,  dur: 6.3 },
  { id: 6,  left: "8%",   top: "60%",  size: 4,  delay: 1.9,  dur: 4.5 },
  { id: 7,  left: "57%",  top: "22%",  size: 8,  delay: 0.2,  dur: 5.8 },
  { id: 8,  left: "75%",  top: "78%",  size: 5,  delay: 1.2,  dur: 6.6 },
  { id: 9,  left: "35%",  top: "45%",  size: 6,  delay: 2.4,  dur: 5.0 },
];

export default function HeroSection() {
  const { t } = useTranslation("home");

  const ROLES = [
    t("hero.roles.webDeveloper"),
    t("hero.roles.dronePilot"),
    t("hero.roles.systemsArchitect"),
    t("hero.roles.realTimeEngineer"),
  ];

  const [roleIdx, setRoleIdx]   = useState(0);
  const [displayed, setDisplayed] = useState("");
  const [typing, setTyping]     = useState(true);

  useEffect(() => {
    const target = ROLES[roleIdx];
    let i = typing ? 0 : target.length;

    const timer = setInterval(() => {
      if (typing) {
        i++;
        setDisplayed(target.slice(0, i));
        if (i >= target.length) { clearInterval(timer); setTimeout(() => setTyping(false), 1800); }
      } else {
        i--;
        setDisplayed(target.slice(0, i));
        if (i <= 0) { clearInterval(timer); setRoleIdx(p => (p + 1) % ROLES.length); setTyping(true); }
      }
    }, typing ? 55 : 28);

    return () => clearInterval(timer);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [roleIdx, typing]);

  return (
    <section style={{ minHeight: "100svh", position: "relative", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }}>

      {/* Video background — shows when file is present */}
      <video autoPlay muted loop playsInline
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", zIndex: 0, opacity: 0.3 }}
        src="/assets/hero-drone.mp4"
      />

      {/* Animated mesh gradient fallback / overlay */}
      <div style={{
        position: "absolute", inset: 0, zIndex: 1,
        background: `
          radial-gradient(ellipse 80% 60% at 20% 30%, color-mix(in hsl, var(--c-boxes), transparent 60%) 0%, transparent 60%),
          radial-gradient(ellipse 60% 50% at 80% 70%, color-mix(in hsl, var(--c-other), transparent 75%) 0%, transparent 55%),
          radial-gradient(ellipse 100% 80% at 50% 50%, color-mix(in hsl, var(--c-background-light), transparent 20%) 0%, var(--c-background) 80%)
        `,
      }} />

      {/* Subtle grid lines */}
      <div style={{
        position: "absolute", inset: 0, zIndex: 1, opacity: 0.04,
        backgroundImage: "linear-gradient(var(--c-lines) 1px, transparent 1px), linear-gradient(90deg, var(--c-lines) 1px, transparent 1px)",
        backgroundSize: "60px 60px",
      }} />

      {/* Floating particles */}
      {PARTICLES.map(p => (
        <div key={p.id} className="animate-float" style={{
          position: "absolute", left: p.left, top: p.top,
          width: p.size, height: p.size, borderRadius: "50%",
          background: "var(--c-lines)", opacity: 0.22, filter: "blur(1.5px)",
          zIndex: 1, animationDelay: `${p.delay}s`, animationDuration: `${p.dur}s`,
        }} />
      ))}

      {/* Content */}
      <motion.div
        variants={stagger.container}
        initial="initial"
        animate="animate"
        style={{ position: "relative", zIndex: 2, textAlign: "center", padding: "2rem 1.5rem", maxWidth: "860px", width: "100%" }}
      >
        {/* Badge */}
        <motion.div variants={stagger.item} style={{ marginBottom: "1.5rem" }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: "0.4em",
            padding: "0.4em 1.1em", borderRadius: "9999px",
            border: "1px solid color-mix(in hsl, var(--c-other), transparent 45%)",
            background: "color-mix(in hsl, var(--c-other), transparent 82%)",
            color: "var(--c-other)", fontSize: "0.8rem", fontWeight: 600,
            letterSpacing: "0.07em", textTransform: "uppercase",
          }}>
            <span style={{ fontSize: "0.6em" }}>●</span> {t("hero.available")}
          </span>
        </motion.div>

        {/* Name — gradient text via inline WebkitTextFillColor so no class conflict */}
        <motion.h1
          variants={stagger.item}
          style={{ fontSize: "clamp(3rem, 8vw, 5.5rem)", fontWeight: 900, margin: "0 0 0.4em", lineHeight: 1.05, letterSpacing: "-0.02em" }}
        >
          <span style={{
            display: "inline-block",
            background: "linear-gradient(135deg, var(--c-other) 0%, var(--c-lines) 45%, var(--c-text) 100%)",
            WebkitBackgroundClip: "text",
            WebkitTextFillColor: "transparent",
            backgroundClip: "text",
          }}>
            David Bruno Vontor
          </span>
        </motion.h1>

        {/* Typewriter role */}
        <motion.div
          variants={stagger.item}
          style={{ fontSize: "clamp(1.1rem, 2.8vw, 1.7rem)", fontWeight: 400, marginBottom: "1.6rem", minHeight: "2.2rem", color: "color-mix(in hsl, var(--c-text), transparent 20%)" }}
        >
          {t("hero.iAm")}{" "}
          <span style={{ fontWeight: 700, color: "var(--c-text)" }}>{displayed}</span>
          <span style={{ color: "var(--c-other)", fontWeight: 300 }}>|</span>
        </motion.div>

        {/* Subtitle */}
        <motion.p
          variants={stagger.item}
          style={{ color: "color-mix(in hsl, var(--c-text), transparent 40%)", fontSize: "1rem", maxWidth: "540px", margin: "0 auto 2.4rem", lineHeight: 1.75 }}
        >
          {t("hero.subtitle")}
        </motion.p>

        {/* CTAs */}
        <motion.div variants={stagger.item} style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
          <a
            href="#projects"
            style={{
              padding: "0.8em 2.2em", borderRadius: "9999px", cursor: "pointer",
              background: "linear-gradient(135deg, var(--c-other), color-mix(in hsl, var(--c-other), var(--c-boxes) 45%))",
              color: "#031D44", fontWeight: 700, fontSize: "0.95rem",
              textDecoration: "none", border: "none",
              boxShadow: "0 0 1.5rem color-mix(in hsl, var(--c-other), transparent 55%)",
              transition: "transform 0.2s ease, box-shadow 0.2s ease",
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = "scale(1.06)"; e.currentTarget.style.boxShadow = "0 0 2rem color-mix(in hsl, var(--c-other), transparent 35%)"; }}
            onMouseLeave={e => { e.currentTarget.style.transform = "scale(1)";    e.currentTarget.style.boxShadow = "0 0 1.5rem color-mix(in hsl, var(--c-other), transparent 55%)"; }}
          >
            {t("hero.exploreWork")}
          </a>
          <Link
            to="/contact"
            style={{
              padding: "0.8em 2.2em", borderRadius: "9999px",
              background: "color-mix(in hsl, var(--c-background-light), transparent 25%)",
              backdropFilter: "blur(12px)",
              color: "var(--c-text)", fontWeight: 600, fontSize: "0.95rem",
              textDecoration: "none",
              border: "1px solid color-mix(in hsl, var(--c-lines), transparent 55%)",
              transition: "transform 0.2s ease, border-color 0.2s ease, background 0.2s ease",
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = "scale(1.06)"; e.currentTarget.style.borderColor = "var(--c-other)"; e.currentTarget.style.background = "color-mix(in hsl, var(--c-background-light), transparent 5%)"; }}
            onMouseLeave={e => { e.currentTarget.style.transform = "scale(1)";    e.currentTarget.style.borderColor = "color-mix(in hsl, var(--c-lines), transparent 55%)"; e.currentTarget.style.background = "color-mix(in hsl, var(--c-background-light), transparent 25%)"; }}
          >
            {t("hero.letsTalk")}
          </Link>
        </motion.div>
      </motion.div>

      {/* Scroll indicator */}
      <div className="animate-bounce-y" style={{
        position: "absolute", bottom: "2rem", left: "50%", transform: "translateX(-50%)",
        zIndex: 2, color: "color-mix(in hsl, var(--c-text), transparent 55%)", fontSize: "1.2rem",
      }}>
        <FaChevronDown />
      </div>
    </section>
  );
}
