// vkaff-app.jsx — root App: sidebar + topbar + all chapters + tweaks

const { Sidebar, Topbar, Cover, Contents, Annex, Footer, VK_CHAPTERS } = window;
const { S1, S2, S3, S4, S5, S6, S7, S8, S9, S10, S11, S12, S13, S14, S15, S16, S17, S18 } = window;
const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#D24E0E",
  "density": "comfortable",
  "darkCover": false
}/*EDITMODE-END*/;

function VkaffApp() {
  const [activeId, setActiveId] = React.useState("cover");
  const [progress, setProgress] = React.useState(0);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks
  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    // derive a soft tint
    const soft = tweaks.accent + "22";
    document.documentElement.style.setProperty("--accent-soft", soft);
    document.body.dataset.density = tweaks.density;
    document.body.dataset.darkCover = tweaks.darkCover ? "true" : "false";
  }, [tweaks]);

  // dark cover style application
  React.useEffect(() => {
    let s = document.getElementById("dark-cover-style");
    if (!s) {
      s = document.createElement("style");
      s.id = "dark-cover-style";
      document.head.appendChild(s);
    }
    s.textContent = tweaks.darkCover ? `
      .cover { background: #0A0A0A; color: #FAFAF8; }
      .cover__brand-text, .cover__brand-text b, .cover__title, .cover__promise, .cover__top .meta b { color: #FAFAF8; }
      .cover__brand-text span, .cover__top .meta, .cover__sub, .cover__eyebrow, .cover__eyebrow b { color: #A3A3A3 !important; }
      .cover__title .grey { color: #525252 !important; }
      .cover__bottom { border-top-color: #262626; }
      .cover__bottom .cell { background: #1A1A1A; border-color: #262626; }
      .cover__bottom .cell .lbl { color: #A3A3A3; }
      .cover__bottom .cell .val { color: #FAFAF8; }
      .cover__bottom .cell.dark { background: #FAFAF8; border-color: #FAFAF8; }
      .cover__bottom .cell.dark .lbl { color: #D24E0E; }
      .cover__bottom .cell.dark .val { color: #0A0A0A; }
    ` : "";
  }, [tweaks.darkCover]);

  // scroll spy + progress
  React.useEffect(() => {
    const sections = VK_CHAPTERS.map(c => document.getElementById(c.id)).filter(Boolean);
    const bar = document.getElementById("progressBar");
    const onScroll = () => {
      const scrollTop = window.scrollY;
      const docH = document.documentElement.scrollHeight - window.innerHeight;
      const pct = Math.max(0, Math.min(1, docH > 0 ? scrollTop / docH : 0));
      if (bar) bar.style.width = (pct * 100) + "%";
      setProgress(pct);
      const mid = scrollTop + window.innerHeight * 0.3;
      let cur = sections[0]?.id || "cover";
      for (const s of sections) {
        if (s.offsetTop <= mid) cur = s.id;
      }
      setActiveId(cur);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const onJump = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    window.scrollTo({ top: el.offsetTop - 4, behavior: "smooth" });
  };

  return (
    <>
      <Sidebar activeId={activeId} onJump={onJump} />
      <main className="main">
        <Topbar activeId={activeId} progress={progress} />
        <Cover />
        <Contents onJump={onJump} />
        <S1 /><S2 /><S3 />
        <S4 /><S5 /><S6 /><S7 /><S8 />
        <S9 /><S10 /><S11 />
        <S12 /><S13 /><S14 />
        <S15 /><S16 />
        <S17 /><S18 />
        <Annex />
        <Footer />
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand" />
        <TweakColor
          label="Accent"
          value={tweaks.accent}
          onChange={v => setTweak("accent", v)}
          options={["#D24E0E", "#0A0A0A", "#1F3A5F", "#1F8A5B", "#8C2A2A"]}
        />
        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={tweaks.density}
          onChange={v => setTweak("density", v)}
          options={["comfortable", "compact"]}
        />
        <TweakToggle
          label="Dark cover"
          value={tweaks.darkCover}
          onChange={v => setTweak("darkCover", v)}
        />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<VkaffApp />);