/* =========================================================
   Nav — sticky top: wordmark + jump links + primary CTA
   ========================================================= */
function TopNav({ sections }) {
  const [active, setActive] = useState(null);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 12);
      // active section: nearest top within viewport. Null while hero is in view.
      let cur = null;
      for (const s of sections) {
        const el = document.getElementById(s.id);
        if (!el) continue;
        const r = el.getBoundingClientRect();
        if (r.top - 120 <= 0) cur = s.id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, [sections]);

  return (
    <nav
      style={{
        position: "sticky",
        top: 0,
        zIndex: 50,
        background: scrolled ? "rgba(242,238,225,0.92)" : "var(--az-parchment)",
        backdropFilter: scrolled ? "saturate(140%) blur(8px)" : "none",
        WebkitBackdropFilter: scrolled ? "saturate(140%) blur(8px)" : "none",
        borderBottom: scrolled ? "1px solid rgba(26,20,0,0.12)" : "1px solid transparent",
        transition: "background 160ms linear, border-color 160ms linear",
      }}
    >
      <div
        style={{
          maxWidth: 1440,
          margin: "0 auto",
          padding: "20px 40px",
          display: "flex",
          alignItems: "center",
          gap: 40,
        }}
      >
        <a
          href="#top"
          style={{ display: "inline-flex", alignItems: "center", gap: 12, textDecoration: "none" }}
        >
          <img
            src="design/assets/logos/aztec-wordmark.svg"
            alt="Aztec"
            style={{ height: 22 }}
          />
          <span
            style={{
              fontFamily: "var(--ff-display-alt)",
              fontSize: 13,
              letterSpacing: "0.04em",
              color: "var(--az-ink)",
              padding: "4px 8px",
              border: "1px solid var(--az-ink)",
            }}
          >
            Escrow Kit
          </span>
        </a>
        <div
          className="top-nav-links"
          style={{
            display: "flex",
            gap: 22,
            alignItems: "center",
            marginLeft: "auto",
            marginRight: "auto",
          }}
        >
          {sections.map((s) => (
            <a
              key={s.id}
              href={"#" + s.id}
              style={{
                fontFamily: "var(--ff-sans)",
                fontWeight: 500,
                fontSize: 13,
                letterSpacing: "-0.005em",
                color: "var(--az-ink)",
                textDecoration: "none",
                paddingBottom: 4,
                borderBottom:
                  active === s.id
                    ? "1.5px solid var(--az-ink)"
                    : "1.5px solid transparent",
                opacity: active === s.id ? 1 : 0.7,
                transition: "opacity 120ms linear, border-color 120ms linear",
              }}
            >
              {s.short}
            </a>
          ))}
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <CTA variant="ghost" as="a" href="https://escrow.aztec.network/bazaar">View demo</CTA>
          <CTA as="a" href="https://docs.aztec.network/escrow-kit/install-skill">Read the skill docs →</CTA>
        </div>
      </div>
    </nav>
  );
}

/* =========================================================
   SideRail — left anchored, numbered jump rail (desktop)
   ========================================================= */
function SideRail({ sections }) {
  const [active, setActive] = useState(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      // Hide while hero is in view to avoid overlapping the H1.
      const heroEl = document.getElementById("top");
      const heroBottom = heroEl ? heroEl.getBoundingClientRect().bottom : 0;
      setVisible(heroBottom < 80);

      let cur = null;
      for (const s of sections) {
        const el = document.getElementById(s.id);
        if (!el) continue;
        const r = el.getBoundingClientRect();
        if (r.top - 160 <= 0) cur = s.id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, [sections]);

  return (
    <aside
      className="side-rail"
      style={{
        position: "fixed",
        top: "50%",
        left: 0,
        width: "max(0px, calc((100vw - 1280px) / 2))",
        transform: visible ? "translateY(-50%)" : "translateY(calc(-50% + 12px))",
        zIndex: 30,
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-end",
        paddingRight: 28,
        gap: 10,
        pointerEvents: visible ? "auto" : "none",
        opacity: visible ? 1 : 0,
        transition: "opacity 220ms linear, transform 220ms ease",
      }}
    >
      {sections.map((s, i) => {
        const isActive = active === s.id;
        return (
          <a
            key={s.id}
            href={"#" + s.id}
            className="rail-row"
            title={s.short}
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              textDecoration: "none",
              padding: "6px 0",
              fontFamily: "var(--ff-display-alt)",
              fontSize: 11,
              letterSpacing: "0.06em",
              color: isActive ? "var(--az-ink)" : "var(--az-stone-2)",
              textTransform: "uppercase",
            }}
          >
            <span
              style={{
                minWidth: 16,
                fontVariantNumeric: "tabular-nums",
                transition: "color 160ms linear",
                textAlign: "right",
              }}
            >
              {String(i + 1).padStart(2, "0")}
            </span>
            <span
              style={{
                width: isActive ? 22 : 10,
                height: 1,
                background: isActive ? "var(--az-ink)" : "var(--az-stone-2)",
                transition: "width 160ms ease, background 160ms linear",
                display: "inline-block",
                flexShrink: 0,
              }}
            />
          </a>
        );
      })}
    </aside>
  );
}

window.TopNav = TopNav;
window.SideRail = SideRail;