/* Endless marquee — capabilities */
const Marquee = () => {
  const { isMobile } = useViewport();
  const items = [
    "Human Factors",
    "AI Ergonomics",
    "Behaviour Change",
    "Workflow Design",
    "Agentic Systems",
    "Organisational Readiness",
    "Evidence-Based Learning",
    "AI Governance",
    "Human-AI Teaming",
  ];
  const row = [...items, ...items, ...items];

  const wrap = {
    position: "relative",
    padding: isMobile ? "20px 0" : "28px 0",
    borderTop: "1px solid var(--rule)",
    borderBottom: "1px solid var(--rule)",
    overflow: "hidden",
    background: "linear-gradient(180deg, rgba(13,13,21,0.4) 0%, rgba(9,9,15,1) 50%, rgba(13,13,21,0.4) 100%)",
  };
  const track = {
    display: "flex",
    gap: isMobile ? 36 : 56,
    width: "max-content",
    animation: "scroll 60s linear infinite",
    fontFamily: "var(--serif)",
    fontSize: isMobile ? 24 : 36,
    fontStyle: "italic",
    color: "var(--ink-2)",
    letterSpacing: "-0.01em",
  };
  const dot = {
    display: "inline-block",
    width: 6, height: 6, borderRadius: "50%",
    background: "var(--lav-2)",
    marginLeft: isMobile ? 36 : 56,
    transform: "translateY(-8px)",
    boxShadow: "0 0 10px rgba(184,168,255,0.6)",
  };

  return (
    <>
      <style>{`
        @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
      `}</style>
      <section style={wrap} aria-label="capabilities">
        <div style={track}>
          {row.map((t, i) => (
            <span key={i} style={{ display: "inline-flex", alignItems: "baseline" }}>
              {t}
              <span style={dot} aria-hidden="true"></span>
            </span>
          ))}
        </div>
      </section>
    </>
  );
};

window.Marquee = Marquee;