/* global React */
const SECTIONS = [
  { id: "what", num: "01", label: "What" },
  { id: "structure", num: "02", label: "Structure" },
  { id: "script", num: "03", label: "Script" },
  { id: "media", num: "04", label: "Media" },
  { id: "tools", num: "05", label: "Tools" },
  { id: "narration", num: "06", label: "Narration" },
  { id: "edit", num: "07", label: "Edit" },
  { id: "music", num: "08", label: "Music" },
  { id: "publish", num: "09", label: "Publish" },
  { id: "gallery", num: "10", label: "Gallery" },
  { id: "pitfalls", num: "11", label: "Pitfalls" },
  { id: "templates", num: "12", label: "Templates" },
  { id: "faq", num: "13", label: "FAQ" },
];

function TopNav({ active }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="brand">
          <div className="brand-mark">ds</div>
          <span>Digital Story Studio</span>
        </div>
        <div className="nav-links">
          {SECTIONS.slice(0, 9).map((s) => (
            <a key={s.id} href={`#${s.id}`} className={active === s.id ? "active" : ""}>{s.label}</a>
          ))}
          <a href="#templates" className={active === "templates" ? "active" : ""}>Templates</a>
          <a href="#faq" className={active === "faq" ? "active" : ""}>FAQ</a>
        </div>
        <div className="nav-spacer" />
        <a href="#templates" className="nav-cta">
          Get templates <window.Ic.arrow />
        </a>
      </div>
    </nav>
  );
}

function ProgressRail({ active, done }) {
  return (
    <aside className="rail" aria-hidden="true">
      <div className="rail-inner">
        {SECTIONS.map((s) => {
          const isDone = done.has(s.id);
          const isActive = active === s.id;
          return (
            <a
              key={s.id}
              href={`#${s.id}`}
              className={"rail-item" + (isActive ? " active" : "") + (isDone && !isActive ? " done" : "")}
            >
              <span className="rail-dot" />
              <span className="rail-item-label">{s.num} · {s.label}</span>
            </a>
          );
        })}
      </div>
    </aside>
  );
}

function useScrollSpy(ids) {
  const [active, setActive] = useState(ids[0]);
  const [done, setDone] = useState(new Set());
  useEffect(() => {
    function onScroll() {
      const y = window.scrollY + 140;
      let cur = ids[0];
      const d = new Set();
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        if (el.offsetTop <= y) { cur = id; d.add(id); }
      }
      setActive(cur);
      setDone(d);
    }
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [ids.join("|")]);
  return { active, done };
}

window.TopNav = TopNav;
window.ProgressRail = ProgressRail;
window.useScrollSpy = useScrollSpy;
window.SECTIONS = SECTIONS;