/* =====================================================================
   APP — shell + side rail + scrolling chapters
===================================================================== */

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = 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-core">
        <div className="hero-tag">The Instagram Growth Playbook</div>
        <h1 className="hero-title">
          How to grow on <em>Instagram</em><br/>
          in 2026 — without<br/>throwing spaghetti.
          <span className="sub-line">An interactive, playable guide from me to you.</span>
        </h1>
        <p className="hero-sub">
          Everything I use with clients — including the one I took from 2 to 30,000 followers, organically. Hooks, script builders, viral-score calculators, and the case studies behind it all.
        </p>

        <div className="hero-meta">
          <div className="hero-meta-cell">
            <div className="hero-meta-num">12</div>
            <div className="hero-meta-label">Chapters</div>
          </div>
          <div className="hero-meta-cell">
            <div className="hero-meta-num">5</div>
            <div className="hero-meta-label">Interactive tools</div>
          </div>
          <div className="hero-meta-cell">
            <div className="hero-meta-num">20+</div>
            <div className="hero-meta-label">Proven hooks</div>
          </div>
          <div className="hero-meta-cell">
            <div className="hero-meta-num">30K</div>
            <div className="hero-meta-label">Client result</div>
          </div>
        </div>

        <div className="hero-cta">
          <a className="btn btn-primary" href="#intro">Start reading →</a>
          <a className="btn btn-ghost" href="#gamify">Jump to the case study</a>
        </div>
      </div>

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

function Rail({ activeId }) {
  // compute progress
  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">
        How to <em>grow</em><br/>on Instagram<br/>in 2026
      </div>

      <div className="rail-progress">
        <div className="row-between">
          <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");

  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));

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

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

  return (
    <div className="page">
      <Rail activeId={activeId} />
      <main className="content">
        <Hero />
        <ChIntro />
        <ChNiche />
        <ChBrand />
        <ChStyle />
        <ChHooks />
        <ChOutliers />
        <ChScripts />
        <ChFunnel />
        <ChGamify />
        <ChSeries />
        <ChScore />
        <ChChecklist />
        <ChCTA />
      </main>
    </div>
  );
}

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