/* =====================================================================
   APP — shell, rail, hero, and root render
===================================================================== */

const { useState: useStateA, useEffect: useEffectA } = React;

function Hero() {
  return (
    <section className="hero" id="hero">
      <div className="hero-top">
        <div>A FREEBIE BY @MARKETING.SHEKHAR</div>
        <div>2026 · EDITION 01</div>
      </div>

      <div className="hero-tag">The Content Formula</div>

      <h1 className="hero-title">
        7 factors that make<br />
        short-form content<br />
        <em>go viral in 2026.</em>
        <span style={{ display: "block", fontFamily: "var(--font-sans)", fontSize: "18px", fontStyle: "normal", fontWeight: 400, color: "var(--ink-2)", marginTop: "14px", lineHeight: 1.6 }}>
          An interactive guide — including hook templates, script structures,<br />
          and a pre-publish checklist you'll use on every post.
        </span>
      </h1>

      <p className="hero-sub">
        Built from the exact frameworks used to take a client from 2K to 30K followers in 90 days — and dozens of others from zero to consistent growth. Everything distilled into one interactive guide.
      </p>

      <div className="hero-meta">
        <div className="hero-meta-cell">
          <div className="hero-meta-num">7</div>
          <div className="hero-meta-label">Viral Factors</div>
        </div>
        <div className="hero-meta-cell">
          <div className="hero-meta-num">8</div>
          <div className="hero-meta-label">Script Structures</div>
        </div>
        <div className="hero-meta-cell">
          <div className="hero-meta-num">20+</div>
          <div className="hero-meta-label">Hook Templates</div>
        </div>
        <div className="hero-meta-cell">
          <div className="hero-meta-num">10</div>
          <div className="hero-meta-label">Checklist Items</div>
        </div>
      </div>

      <div className="hero-cta">
        <a className="btn btn-primary" href="#intro">Start the guide →</a>
        <a className="btn btn-ghost" href="#lab">Jump to Script Lab</a>
      </div>

      <div className="hero-sig">
        <div className="hero-sig-avatar">S</div>
        <div>SHEKHAR SHRESTHA · ORCALYNX · 2026</div>
      </div>
    </section>
  );
}

function Rail({ activeId }) {
  const total = CHAPTERS.length;
  const activeIdx = Math.max(0, CHAPTERS.findIndex(c => c.id === activeId));
  const pct = total ? Math.round(((activeIdx + 1) / total) * 100) : 0;

  return (
    <aside className="rail">
      <a href="#hero" className="rail-brand" style={{ textDecoration: "none" }}>
        <span className="rail-brand-dot" />
        <span>@MARKETING.SHEKHAR</span>
      </a>

      <div className="rail-title">
        The Content<br />
        <em>Formula</em>
      </div>

      <div className="rail-progress">
        <div className="row-between" style={{ display: "flex", justifyContent: "space-between", marginBottom: "6px" }}>
          <span>Progress</span>
          <span>{pct}%</span>
        </div>
        <div className="rail-progress-bar">
          <div className="rail-progress-fill" style={{ width: pct + "%" }} />
        </div>
      </div>

      <nav className="rail-nav">
        {CHAPTERS.map((c, i) => (
          <a
            key={c.id}
            href={"#" + c.id}
            className={
              "rail-link " +
              (c.id === activeId ? "is-active " : "") +
              (i < activeIdx ? "is-done" : "")
            }
          >
            <span className="rail-link-num">{c.num}</span>
            <span>{c.title}</span>
          </a>
        ))}
      </nav>

      <div className="rail-footer">
        <div>Built for you,</div>
        <div>by <a href="https://www.orcalynx.com/" target="_blank" rel="noopener">Orcalynx ↗</a></div>
      </div>
    </aside>
  );
}

function App() {
  const [activeId, setActiveId] = useStateA("intro");
  const [niche, setNiche] = useStateA("fitness");

  useEffectA(() => {
    const sections = CHAPTERS
      .map(c => document.getElementById(c.id))
      .filter(Boolean);

    const obs = new IntersectionObserver(
      entries => {
        const visible = entries
          .filter(e => e.isIntersecting)
          .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
        if (visible[0]) setActiveId(visible[0].target.id);
      },
      { rootMargin: "-30% 0px -50% 0px", threshold: [0, 0.2, 0.5, 0.8] }
    );
    sections.forEach(s => obs.observe(s));

    const revealEls = document.querySelectorAll("[data-reveal]");
    const revealObs = new IntersectionObserver(
      entries => entries.forEach(e => e.isIntersecting && e.target.classList.add("is-visible")),
      { threshold: 0.12 }
    );
    revealEls.forEach(el => revealObs.observe(el));

    return () => { obs.disconnect(); revealObs.disconnect(); };
  }, []);

  return (
    <NicheCtx.Provider value={{ niche, setNiche }}>
      <div className="page">
        <Rail activeId={activeId} />
        <main className="content">
          <Hero />
          <ChIntro />
          <ChTopic />
          <ChHooks />
          <ChValue />
          <ChAngle />
          <ChCTACh />
          <ChFormat />
          <ChEditing />
          <ChLab />
          <ChProcess />
          <ChChecklist />
          <ChWorkWithMe />
        </main>
      </div>
    </NicheCtx.Provider>
  );
}

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);