/* Side dock, vertical numbered ticks that become checks as the user passes
   each section. Hover to reveal section labels. Only renders on the Platform
   page (or any page with <SideDock sections=...>). */
function SideDock({ sections }) {
  const [active, setActive] = useState(0);
  const [hovered, setHovered] = useState(false);

  useEffect(() => {
    const ids = sections.map((s) => s.id);
    const onScroll = () => {
      const y = window.scrollY + window.innerHeight * 0.45;
      let cur = 0;
      ids.forEach((id, i) => {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = i;
      });
      setActive(cur);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, [sections]);

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        position: "fixed", right: 24, top: "50%", transform: "translateY(-50%)",
        zIndex: 40, display: "flex", flexDirection: "column", gap: 4,
        padding: "12px 10px",
      }}
      className="side-dock"
    >
      {sections.map((s, i) => {
        const done = i < active;
        const cur = i === active;
        return (
          <a key={s.id} href={`#${s.id}`} onClick={(e) => { e.preventDefault(); scrollToId(s.id, 90); }}
            style={{
              display: "flex", alignItems: "center", gap: 12,
              padding: "8px 0", color: "var(--ink)", position: "relative",
            }}
            className="dock-item"
          >
            {/* tick / number */}
            <span style={{
              flex: "0 0 24px", display: "flex", alignItems: "center", justifyContent: "flex-end",
              fontFamily: "var(--font-mono)", fontSize: 11, color: done || cur ? "var(--ink)" : "var(--slate)",
              transition: "color .3s ease",
            }}>
              {done ? <I.Check s={12}/> : String(i + 1).padStart(2, "0")}
            </span>
            <span style={{
              width: cur ? 28 : 16, height: 1, background: done || cur ? "var(--ink)" : "var(--mist-3)",
              transition: "width .4s ease, background .3s ease",
            }}/>
            <span style={{
              fontSize: 13, fontWeight: cur ? 500 : 400,
              color: cur ? "var(--ink)" : "var(--carbon)",
              whiteSpace: "nowrap",
              opacity: hovered ? 1 : 0,
              transform: hovered ? "translateX(0)" : "translateX(-6px)",
              transition: "opacity .35s ease, transform .35s ease",
              pointerEvents: hovered ? "auto" : "none",
            }}>{s.label}</span>
          </a>
        );
      })}
      <style>{`
        @media (max-width: 980px) { .side-dock { display: none !important; } }
      `}</style>
    </div>
  );
}
window.SideDock = SideDock;