import { motion } from "framer-motion";
import {
  SiDocker, SiNginx, SiPython, SiDjango, SiReact,
  SiDebian, SiPostgresql, SiRedis, SiCelery,
} from "react-icons/si";
import { FaBrain } from "react-icons/fa";
import { useTranslation } from "react-i18next";

const TECHS = [
  { icon: <SiDocker />,     label: "Docker",     color: "#2496ed" },
  { icon: <SiNginx />,      label: "Nginx",      color: "#009900" },
  { icon: <SiPython />,     label: "Python",     color: "#3776ab" },
  { icon: <SiDjango />,     label: "Django",     color: "#09d3ac" },
  { icon: <SiReact />,      label: "React",      color: "#61dafb" },
  { icon: <SiDebian />,     label: "Debian",     color: "#d70a53" },
  { icon: <SiPostgresql />, label: "PostgreSQL", color: "#336791" },
  { icon: <SiRedis />,      label: "Redis",      color: "#ff4438" },
  { icon: <SiCelery />,     label: "Celery",     color: "#37b24d" },
  { icon: null,             label: "Gorse.io",   color: "var(--c-other)" },
  { icon: <FaBrain />,      label: "Ollama",     color: "var(--c-lines)", experimental: true },
];

// Four copies so the loop is seamless at any viewport width
const TRACK = [...TECHS, ...TECHS, ...TECHS, ...TECHS];

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

  return (
    <section style={{ background: "var(--c-background)", padding: "4rem 0", overflow: "hidden" }}>
      {/* Header */}
      <div className="container" style={{ marginBottom: "2.5rem" }}>
        <motion.div
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          style={{ textAlign: "center" }}
        >
          <span style={{
            display: "inline-block",
            padding: "0.3em 0.9em",
            borderRadius: "9999px",
            background: "color-mix(in hsl, var(--c-boxes), transparent 78%)",
            border: "1px solid color-mix(in hsl, var(--c-lines), transparent 58%)",
            color: "var(--c-lines)",
            fontSize: "0.78rem",
            fontWeight: 700,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            marginBottom: "1rem",
          }}>
            {t("tech.badge")}
          </span>
          <h2 style={{ fontSize: "clamp(1.9rem, 4.5vw, 3rem)", fontWeight: 800, margin: 0 }}>
            {t("tech.title")} <span className="text-rainbow">{t("tech.titleHighlight")}</span>
          </h2>
        </motion.div>
      </div>

      {/* Marquee */}
      <div style={{ position: "relative" }}>
        {/* Fade edges */}
        <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: "10rem", zIndex: 2, background: "linear-gradient(to right, var(--c-background), transparent)", pointerEvents: "none" }} />
        <div style={{ position: "absolute", right: 0, top: 0, bottom: 0, width: "10rem", zIndex: 2, background: "linear-gradient(to left, var(--c-background), transparent)", pointerEvents: "none" }} />

        {/* Track wrapper — pause on hover */}
        <div
          className="marquee-track-wrapper"
          style={{ overflow: "hidden", width: "100%" }}
        >
          {/* Scrolling track — CSS animation, no Framer Motion here */}
          <div
            className="marquee-track"
            style={{
              display: "flex",
              width: "max-content",
              animation: "marquee 35s linear infinite",
            }}
          >
            {TRACK.map((tech, i) => (
              <div
                key={i}
                className="tech-item"
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  gap: "0.6rem",
                  padding: "0.75rem 1.5rem",
                  position: "relative",
                  cursor: "default",
                  transition: "transform 0.2s ease",
                }}
              >
                {tech.experimental && (
                  <span style={{
                    position: "absolute", top: 0, right: "0.5rem",
                    fontSize: "0.55rem", fontWeight: 700,
                    padding: "0.12em 0.4em", borderRadius: "9999px",
                    background: "color-mix(in hsl, var(--c-lines), transparent 70%)",
                    color: "var(--c-lines)", letterSpacing: "0.05em",
                  }}>
                    exp
                  </span>
                )}
                <div style={{
                  fontSize: "2.8rem",
                  color: tech.color,
                  filter: `drop-shadow(0 0 0.5rem color-mix(in hsl, ${tech.color}, transparent 60%))`,
                  lineHeight: 1,
                  transition: "filter 0.2s ease, transform 0.2s ease",
                }}>
                  {tech.icon ?? (
                    <span style={{ fontSize: "1.1rem", fontWeight: 900, color: tech.color, letterSpacing: "-0.02em" }}>
                      {tech.label.split(".")[0]}
                    </span>
                  )}
                </div>
                <span style={{
                  fontSize: "0.78rem", fontWeight: 600,
                  color: "color-mix(in hsl, var(--c-text), transparent 35%)",
                  whiteSpace: "nowrap",
                }}>
                  {tech.label}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Inline styles for hover pause + item hover */}
      <style>{`
        .marquee-track-wrapper:hover .marquee-track {
          animation-play-state: paused;
        }
        .tech-item:hover {
          transform: translateY(-6px) scale(1.15);
        }
      `}</style>
    </section>
  );
}
