// variant-editorial.jsx — Variant B: Editorial-magazine forward
// Typographic. Generous whitespace. Less chrome. Reads like a manifesto
// + a quiet, magazine-style product page. Numbers exist but they breathe.

function VariantEditorial({ accent }) {
  return (
    <div className="narrio-art" data-theme="dark" style={{ '--ac': accent || '#E8E0D0' }}>
      <div className="frame">
        <NarrioNav ctaLabel="License Narrio" />
        <EdHero />
        <EdManifesto />
        <EdHowItRuns />
        <EdPricingEditorial />
        <EdMarketplace />
        <EdReputation />
        <EdCloser />
        <NarrioFooter />
      </div>
    </div>
  );
}

// ─── Hero — magazine cover ─────────────────────────────────
function EdHero() {
  return (
    <section style={{ padding: '120px 0 96px', borderBottom: '.5px solid var(--bd)', position: 'relative' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 56px' }}>
        {/* Masthead-style ribbon */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 24, borderBottom: '.5px solid var(--bd)', marginBottom: 64 }}>
          <span className="mono lbl">VOL · 01 / ISSUE 01</span>
          <span className="mono lbl" style={{ color: 'var(--ac)' }}>The operating system</span>
          <span className="mono lbl">MMXXV — May</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 0 }}>
          <p className="lbl" style={{ marginBottom: 28, color: 'var(--ac)', fontSize: 11 }}>An essay, in product form.</p>
          <h1 style={{
            fontFamily: 'var(--f-display)', fontSize: 132, lineHeight: 0.92,
            fontWeight: 300, letterSpacing: '-0.045em', color: 'var(--t1)',
            textWrap: 'balance', maxWidth: 1080,
          }}>
            You bring the idea.<br/>
            <span style={{ fontStyle: 'italic', color: 'var(--ac)', fontWeight: 400 }}>Narrio</span> builds, runs, and<br/>
            evolves the business.
          </h1>
          <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 64, alignItems: 'start' }}>
            <p style={{ fontFamily: 'var(--f-display)', fontSize: 22, lineHeight: 1.45, color: 'var(--t2)', fontWeight: 300, letterSpacing: '-0.005em', textWrap: 'pretty' }}>
              A media business in 2025 takes a publishing platform, an email service, a content
              calendar, a distribution strategy, a monetization layer, an analytics stack —
              and someone, usually you, holding it together at the cost of everything else.
              <br/><br/>
              Narrio replaces that. Not as a tool. <em style={{ color: 'var(--t1)' }}>As an operating system that runs the business</em> while you make decisions only a person can make.
            </p>
            <aside style={{ paddingLeft: 32, borderLeft: '.5px solid var(--bd)' }}>
              <div className="lbl" style={{ marginBottom: 16 }}>WHAT'S INSIDE</div>
              <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12 }}>
                {[
                  ['Manifesto', 'Why an OS, not a tool'],
                  ['How it runs', 'The split between system + you'],
                  ['Operator tiers', 'License the system, keep the upside'],
                  ['Communities', '20 ready to lead'],
                  ['Reputation', 'Earned, portable, visible'],
                ].map(([t, s], i) => (
                  <li key={t} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 12, fontSize: 13.5, alignItems: 'baseline' }}>
                    <span className="mono" style={{ color: 'var(--ac)' }}>{String(i + 1).padStart(2, '0')}.</span>
                    <span><span style={{ color: 'var(--t1)' }}>{t}</span><span style={{ color: 'var(--t3)' }}> — {s}</span></span>
                  </li>
                ))}
              </ol>
              <div style={{ marginTop: 36, display: 'flex', gap: 10, flexDirection: 'column' }}>
                <a href="#pricing" className="btn btn-pri" style={{ justifyContent: 'center' }}>License Narrio · from $49</a>
                <a href="#manifesto" className="btn btn-ghost" style={{ justifyContent: 'center' }}>Read the manifesto</a>
              </div>
            </aside>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Manifesto-style four principles ───────────────────────
function EdManifesto() {
  const tenets = [
    { n: '01', t: 'Narrio only wins when operators win.', b: 'Revenue share is not a tax. It is alignment. Every dollar through the platform exists because a community grew. The math is in the open.' },
    { n: '02', t: 'Execution is autonomous. Control remains human.', b: 'The system runs continuously. Nothing publishes without editorial approval. Direction is yours to set, override, and abandon.' },
    { n: '03', t: 'Communities live. Leadership evolves.', b: 'No outlet should die because one person burned out. The platform owes continuity to readers — and to the editors who built it.' },
    { n: '04', t: 'Performance is visible and honest.', b: 'Every contributor sees the snapshot of their community at the moment they joined. Every earnings calculation is documented. There are no hidden mechanics.' },
  ];
  return (
    <section id="manifesto" style={{ padding: '120px 0', borderBottom: '.5px solid var(--bd)', background: 'var(--bg-1)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 96 }}>
            <div className="lbl" style={{ marginBottom: 14 }}>FOUR PRINCIPLES</div>
            <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 40, fontWeight: 400, letterSpacing: '-0.03em', lineHeight: 1.1 }}>
              Narrio is built on four <em style={{ color: 'var(--ac)' }}>non-negotiables</em>.
            </h2>
            <p style={{ marginTop: 18, color: 'var(--t2)', fontSize: 14.5, lineHeight: 1.6 }}>
              They are the contract. They predate any pricing tier, any feature roadmap, any company milestone.
            </p>
          </div>
          <div style={{ display: 'grid', gap: 0 }}>
            {tenets.map((t, i) => (
              <article key={t.n} style={{ padding: '40px 0', borderTop: '.5px solid var(--bd)', borderBottom: i === tenets.length - 1 ? '.5px solid var(--bd)' : 'none', display: 'grid', gridTemplateColumns: '70px 1fr', gap: 32 }}>
                <span className="mono" style={{ fontSize: 14, color: 'var(--ac)', letterSpacing: '.04em' }}>§ {t.n}</span>
                <div>
                  <h3 style={{ fontFamily: 'var(--f-display)', fontSize: 28, fontWeight: 400, letterSpacing: '-0.022em', lineHeight: 1.15, color: 'var(--t1)', textWrap: 'balance' }}>{t.t}</h3>
                  <p style={{ marginTop: 14, fontSize: 16, lineHeight: 1.65, color: 'var(--t2)', maxWidth: 620, textWrap: 'pretty' }}>{t.b}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── How it runs — system pull-quote w/ a quiet feed ───────
function EdHowItRuns() {
  const events = useTickingFeed(2600, 5);
  return (
    <section style={{ padding: '120px 0', borderBottom: '.5px solid var(--bd)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 56px' }}>
        <div className="lbl" style={{ marginBottom: 14 }}>HOW IT RUNS</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 56, fontWeight: 400, letterSpacing: '-0.035em', lineHeight: 1.05, textWrap: 'balance' }}>
              The system proposes.<br/>The person <em style={{ color: 'var(--ac)' }}>leads</em>.
            </h2>
            <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
              <div>
                <div className="lbl" style={{ marginBottom: 12 }}>NARRIO</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12, color: 'var(--t1)', fontSize: 14.5 }}>
                  <li>Drafts audience-calibrated content</li>
                  <li>Manages cadence + distribution</li>
                  <li>Adapts on engagement signals</li>
                  <li>Expands into new formats</li>
                  <li>Surfaces strategic decisions</li>
                  <li>Reports performance</li>
                </ul>
              </div>
              <div>
                <div className="lbl" style={{ marginBottom: 12 }}>YOU</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12, color: 'var(--t1)', fontSize: 14.5 }}>
                  <li>Set editorial direction</li>
                  <li>Approve or redirect drafts</li>
                  <li>Submit intelligence + sources</li>
                  <li>Make strategic calls</li>
                  <li>Build the audience</li>
                  <li>Hold the narrative</li>
                </ul>
              </div>
            </div>
          </div>

          <div style={{ background: 'var(--bg-1)', border: '.5px solid var(--bd)', borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
            <div style={{ padding: '14px 18px', borderBottom: '.5px solid var(--bd)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span className="pulse" />
                <span className="lbl">A QUIET MORNING ON NARRIO</span>
              </span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--t3)' }}>09:42 UTC</span>
            </div>
            <div style={{ padding: '4px 0' }}>
              {events.map((e) => (
                <div key={e.id} style={{ padding: '14px 18px', borderBottom: '.5px solid var(--bd)' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                    <span className="mono lbl" style={{ color: eventDot(e.t) }}>· {e.t}</span>
                    <span className="mono" style={{ fontSize: 10.5, color: 'var(--t3)' }}>{e.comm}</span>
                  </div>
                  <div style={{ fontSize: 13.5, color: 'var(--t1)', lineHeight: 1.45 }}>{e.msg}</div>
                  <div className="mono" style={{ marginTop: 4, fontSize: 10.5, color: 'var(--t3)' }}>{e.meta}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Pricing, editorial framing ────────────────────────────
function EdPricingEditorial() {
  return (
    <section id="pricing" style={{ padding: '120px 0', borderBottom: '.5px solid var(--bd)', background: 'var(--bg-1)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 56px' }}>
        <div style={{ textAlign: 'center', marginBottom: 64, maxWidth: 760, marginLeft: 'auto', marginRight: 'auto' }}>
          <div className="lbl" style={{ marginBottom: 14 }}>OPERATOR TIERS</div>
          <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 56, fontWeight: 400, letterSpacing: '-0.035em', lineHeight: 1.05, textWrap: 'balance' }}>
            License the system. <em style={{ color: 'var(--ac)' }}>Keep more</em> as you grow.
          </h2>
          <p style={{ marginTop: 18, fontSize: 16.5, color: 'var(--t2)', lineHeight: 1.6, fontFamily: 'var(--f-display)', fontWeight: 300 }}>
            License rises with scale. Revenue share falls with it. At Operator tier you keep ~95%.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {OPERATOR_TIERS.map((t) => (
            <article key={t.id} style={{
              padding: '36px 28px 32px',
              border: '.5px solid ' + (t.featured ? 'var(--bd-ac)' : 'var(--bd)'),
              background: t.featured ? 'var(--bg-2)' : 'transparent',
              borderRadius: 'var(--r-lg)',
              display: 'flex', flexDirection: 'column', position: 'relative',
            }}>
              {t.featured && <div style={{ position: 'absolute', top: -1, left: 24, right: 24, height: 2, background: 'var(--ac)' }} />}
              <div style={{ marginBottom: 22 }}>
                <span className="lbl" style={{ color: t.featured ? 'var(--ac)' : 'var(--t3)' }}>{t.name}</span>
              </div>
              <div style={{ fontFamily: 'var(--f-display)', fontSize: 56, fontWeight: 300, letterSpacing: '-0.035em', lineHeight: 1, marginBottom: 4 }}>
                {t.price == null ? <span style={{ fontSize: 36, fontStyle: 'italic' }}>By design</span> : <><span>${t.price}</span><span style={{ fontSize: 14, color: 'var(--t3)', fontFamily: 'var(--f-text)' }}> /mo</span></>}
              </div>
              <div style={{ fontSize: 13, color: 'var(--t2)', marginBottom: 24, fontStyle: 'italic' }}>
                {typeof t.share === 'number' ? `with ${t.share}% revenue share` : 'with negotiated share'}
              </div>
              <p style={{ fontSize: 14.5, color: 'var(--t1)', lineHeight: 1.55, marginBottom: 28, fontFamily: 'var(--f-display)', fontWeight: 300, textWrap: 'pretty', minHeight: 60 }}>
                {t.blurb}
              </p>
              <div style={{ height: '.5px', background: 'var(--bd)', marginBottom: 24 }} />
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12, flex: 1 }}>
                {t.features.map((f) => (
                  <li key={f} style={{ fontSize: 13, color: 'var(--t2)', display: 'flex', gap: 8, alignItems: 'flex-start', lineHeight: 1.5 }}>
                    <span className="mono" style={{ color: 'var(--ac)', marginTop: 1 }}>—</span>{f}
                  </li>
                ))}
              </ul>
              <button className={t.featured ? 'btn btn-pri' : 'btn btn-ghost'} style={{ width: '100%', justifyContent: 'center', marginTop: 28 }}>
                {t.price == null ? 'Contact sales →' : 'Begin →'}
              </button>
            </article>
          ))}
        </div>
        <div style={{ marginTop: 28, textAlign: 'center' }}>
          <span className="illu">REVENUE-SHARE PERCENTAGES PER BUSINESS CASE §3 · ILLUSTRATIVE</span>
        </div>
      </div>
    </section>
  );
}

// ─── Marketplace as quiet table ─────────────────────────────
function EdMarketplace() {
  const featured = COMMUNITIES.slice(0, 6);
  return (
    <section style={{ padding: '120px 0', borderBottom: '.5px solid var(--bd)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginBottom: 64, alignItems: 'end' }}>
          <div>
            <div className="lbl" style={{ marginBottom: 14 }}>20 READY TO LEAD</div>
            <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 56, fontWeight: 400, letterSpacing: '-0.035em', lineHeight: 1.05 }}>
              Communities. Built.<br/><em style={{ color: 'var(--ac)' }}>Awaiting an editor.</em>
            </h2>
          </div>
          <p style={{ fontSize: 16.5, color: 'var(--t2)', lineHeight: 1.6, fontFamily: 'var(--f-display)', fontWeight: 300 }}>
            Niche, audience, monetization mode, and an opportunity rating.
            Lead one as a Contributor — or operate it under license. Six of twenty shown.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0 }}>
          {featured.map((c, i) => (
            <article key={c.name} style={{
              padding: '32px 32px',
              borderTop: '.5px solid var(--bd)',
              borderBottom: i >= featured.length - 2 ? '.5px solid var(--bd)' : 'none',
              borderRight: i % 2 === 0 ? '.5px solid var(--bd)' : 'none',
              display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'start',
            }}>
              <div>
                <RatingChipEd rating={c.rate} color={c.color} />
                <h3 style={{ fontFamily: 'var(--f-display)', fontSize: 32, fontWeight: 400, letterSpacing: '-0.025em', marginTop: 12, color: 'var(--t1)' }}>{c.name}</h3>
                <p style={{ fontSize: 14, color: 'var(--t2)', marginTop: 6, fontStyle: 'italic' }}>{c.niche}</p>
                <div style={{ marginTop: 22, display: 'flex', gap: 24 }}>
                  <div>
                    <div className="lbl">TAM</div>
                    <div className="mono num" style={{ fontSize: 16, color: 'var(--t1)', marginTop: 4 }}>{c.tam}</div>
                  </div>
                  <div>
                    <div className="lbl">MONETIZATION</div>
                    <div style={{ fontSize: 14, color: 'var(--t1)', marginTop: 4 }}>{c.mon}</div>
                  </div>
                  <div>
                    <div className="lbl">EST · MO</div>
                    <div className="mono num" style={{ fontSize: 14, color: 'var(--ac)', marginTop: 4 }}>{c.est}</div>
                  </div>
                </div>
              </div>
              <a href="#" style={{ fontSize: 13, color: 'var(--t1)', display: 'inline-flex', alignItems: 'center', gap: 6, paddingTop: 4 }}>
                Apply <span style={{ color: 'var(--ac)' }}>→</span>
              </a>
            </article>
          ))}
        </div>
        <div style={{ marginTop: 32, textAlign: 'center' }}>
          <a href="#" style={{ fontSize: 14, color: 'var(--ac)', borderBottom: '.5px solid var(--ac)', paddingBottom: 2 }}>
            Browse all 20 communities
          </a>
        </div>
      </div>
    </section>
  );
}

function RatingChipEd({ rating, color }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '2px 0', fontSize: 11, color: `var(--${color})`,
      fontFamily: 'var(--f-mono)', letterSpacing: '.08em', textTransform: 'uppercase',
    }}>
      <span style={{ width: 16, height: 1, background: `var(--${color})` }} />{rating}
    </span>
  );
}

// ─── Reputation ladder ──────────────────────────────────────
function EdReputation() {
  const [hover, setHover] = React.useState(2);
  return (
    <section style={{ padding: '120px 0', borderBottom: '.5px solid var(--bd)', background: 'var(--bg-1)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginBottom: 56, alignItems: 'end' }}>
          <div>
            <div className="lbl" style={{ marginBottom: 14 }}>REPUTATION</div>
            <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 50, fontWeight: 400, letterSpacing: '-0.035em', lineHeight: 1.05 }}>
              A score that travels with the editor, not the company.
            </h2>
          </div>
          <p style={{ fontSize: 16.5, color: 'var(--t2)', lineHeight: 1.6, fontFamily: 'var(--f-display)', fontWeight: 300 }}>
            0 to 10. Earned weekly. Portable across communities.
            It opens doors — Lead coverage eligibility, additional slots, advisory access — that nothing else on the platform can.
          </p>
        </div>

        <div style={{ background: 'var(--bg)', border: '.5px solid var(--bd)', borderRadius: 'var(--r-lg)', padding: '40px 40px 32px' }}>
          <div style={{ position: 'relative', height: 4, background: 'var(--bg-3)', borderRadius: 2, marginBottom: 56 }}>
            <div style={{ position: 'absolute', left: 0, height: '100%', width: ((hover + 1) / REPUTATION_TIERS.length) * 100 + '%', background: 'var(--ac)', borderRadius: 2, transition: 'width .3s' }} />
            {REPUTATION_TIERS.map((t, i) => (
              <button key={t.name} onMouseEnter={() => setHover(i)} onFocus={() => setHover(i)}
                style={{
                  position: 'absolute', top: -10, left: ((i + 0.5) / REPUTATION_TIERS.length) * 100 + '%',
                  transform: 'translateX(-50%)', width: 24, height: 24, borderRadius: 12,
                  background: i <= hover ? 'var(--ac)' : 'var(--bg-3)',
                  border: '2px solid var(--bg)', cursor: 'pointer',
                }} />
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: `repeat(${REPUTATION_TIERS.length}, 1fr)`, gap: 12 }}>
            {REPUTATION_TIERS.map((t, i) => (
              <div key={t.name} style={{ opacity: hover === i ? 1 : 0.5, transition: 'opacity .25s' }}>
                <div className="mono num" style={{ fontSize: 22, color: 'var(--t1)', letterSpacing: '-0.02em', fontWeight: 500 }}>
                  {t.range[0]}{t.range[1] === 10 ? '+' : '–' + t.range[1]}
                </div>
                <div style={{ fontFamily: 'var(--f-display)', fontSize: 17, color: 'var(--t1)', marginTop: 8, fontStyle: i === REPUTATION_TIERS.length - 1 ? 'italic' : 'normal' }}>{t.name}</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: '12px 0 0', display: 'grid', gap: 4 }}>
                  {t.perks.map((p) => <li key={p} style={{ fontSize: 12, color: 'var(--t2)', lineHeight: 1.5 }}>· {p}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Closer ─────────────────────────────────────────────────
function EdCloser() {
  return (
    <section style={{ padding: '160px 0', borderBottom: '.5px solid var(--bd)' }}>
      <div style={{ maxWidth: 980, margin: '0 auto', padding: '0 56px', textAlign: 'center' }}>
        <div className="lbl" style={{ marginBottom: 24, color: 'var(--ac)' }}>·</div>
        <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 84, fontWeight: 300, letterSpacing: '-0.04em', lineHeight: 1.0, textWrap: 'balance' }}>
          Built on narrative.<br/>Powered by consistency.<br/><em style={{ color: 'var(--ac)' }}>Designed to compound.</em>
        </h2>
        <div style={{ marginTop: 56, display: 'flex', gap: 12, justifyContent: 'center' }}>
          <a href="#" className="btn btn-pri">License Narrio · $49/mo</a>
          <a href="#" className="btn btn-ghost">Read the manifesto</a>
        </div>
      </div>
    </section>
  );
}

window.VariantEditorial = VariantEditorial;