// variant-contributor.jsx — Variant D: Contributor-forward homepage
// Different audience entirely — individuals, not operators. The 4-slot
// model is the centerpiece: 1 Lead community + up to 3 Contributor seats
// = a portfolio of 4 narrative income streams.
//
// Tone: human, social, "you among others." Mono accents, but warmer
// composition than Variant A. Live earnings leaderboard + open-seat
// brokerage are the conversion drivers.

function VariantContributor({ accent }) {
  return (
    <div className="narrio-art" data-theme="dark" style={{ '--ac': accent || '#E8E0D0' }}>
      <div className="frame">
        <NarrioNav ctaLabel="Claim a seat" />
        <ContribHero />
        <FourSlotModel />
        <LiveLeaderboard />
        <SeatBrokerage />
        <RoleComparison />
        <PathLadder />
        <SocialProofBlock />
        <ContribApply />
        <NarrioFooter />
      </div>
    </div>
  );
}

// ─── Hero ───────────────────────────────────────────────────
function ContribHero() {
  // Tiny rolling counter for "currently open seats"
  const [openSeats, setOpenSeats] = React.useState(34);
  React.useEffect(() => {
    const t = setInterval(() => setOpenSeats((n) => Math.max(28, Math.min(42, n + (Math.random() < .5 ? -1 : 1)))), 2200);
    return () => clearInterval(t);
  }, []);

  return (
    <section style={{ padding: '72px 0 56px', borderBottom: '.5px solid var(--bd)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56, alignItems: 'center' }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 12px', borderRadius: 999, background: 'var(--ac-d)', border: '.5px solid var(--bd-ac)', marginBottom: 24 }}>
            <span className="pulse" />
            <span className="mono" style={{ fontSize: 11, color: 'var(--ac)', letterSpacing: '.05em' }}>{openSeats} OPEN SEATS · UPDATED LIVE</span>
          </div>

          <h1 style={{ fontFamily: 'var(--f-display)', fontSize: 76, lineHeight: 1.0, letterSpacing: '-0.04em', fontWeight: 400, color: 'var(--t1)', textWrap: 'balance' }}>
            You don't need<br/>to start a community.<br/>
            <em style={{ color: 'var(--ac)', fontStyle: 'italic' }}>Lead one.</em>
          </h1>

          <p style={{ marginTop: 26, fontSize: 17, lineHeight: 1.55, color: 'var(--t2)', maxWidth: 540 }}>
            Narrio runs the operating system. Lead Editors set direction in <em style={{ color: 'var(--t1)' }}>one</em> community
            and contribute to <em style={{ color: 'var(--t1)' }}>three more</em> — a portfolio of four narrative
            income streams without owning any of them outright.
          </p>

          <div style={{ marginTop: 32, display: 'flex', gap: 12 }}>
            <a href="#apply" className="btn btn-pri">See open seats</a>
            <a href="#leaderboard" className="btn btn-ghost">How earnings work →</a>
          </div>

          <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: 'repeat(3, auto)', gap: 32 }}>
            <Stat k="ZERO CAPITAL" v="$0" sub="No subscriber acquisition" />
            <Stat k="MONTHLY · TOP 10%" v="$3.4–6.2k" sub="Across 4 seats" />
            <Stat k="TIME · MEDIAN" v="9.5h/wk" sub="Across all communities" />
          </div>
        </div>

        {/* Right: portfolio illustration — your 4 slots */}
        <div style={{ background: 'var(--bg-1)', border: '.5px solid var(--bd-hi)', borderRadius: 'var(--r-lg)', padding: 28, position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 22 }}>
            <span className="lbl">YOUR PORTFOLIO · ILLUSTRATIVE</span>
            <span className="mono" style={{ fontSize: 11, color: 'var(--t3)' }}>4 / 4 SEATS</span>
          </div>

          <div style={{ display: 'grid', gap: 8 }}>
            <SeatRow role="LEAD" community="Wealth Signal" pct={42} amt="$2,140" pts="+96 / wk" tone="ac" />
            <SeatRow role="CONTRIB" community="The AI Workplace" pct={18} amt="$890" pts="+58 / wk" tone="blue" />
            <SeatRow role="CONTRIB" community="Climate Capital" pct={14} amt="$680" pts="+42 / wk" tone="amber" />
            <SeatRow role="CONTRIB" community="Longevity Stack" pct={11} amt="$520" pts="+34 / wk" tone="purple" />
          </div>

          <div style={{ marginTop: 18, paddingTop: 18, borderTop: '.5px solid var(--bd)', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span className="lbl">PORTFOLIO · MONTHLY</span>
            <span className="mono num" style={{ fontSize: 32, color: 'var(--green)', letterSpacing: '-0.025em', fontWeight: 500 }}>+$4,230</span>
          </div>
          <div style={{ marginTop: 6, fontSize: 11.5, color: 'var(--t3)' }}>
            Reputation 8.2 · Streak 12w · Engagement 104 / 120
          </div>
        </div>
      </div>
    </section>
  );
}

function SeatRow({ role, community, pct, amt, pts, tone }) {
  const colorMap = { ac: 'var(--ac)', blue: 'var(--blue)', amber: 'var(--amber)', purple: 'var(--purple)' };
  const c = colorMap[tone];
  return (
    <div style={{ padding: '12px 14px', background: 'var(--bg-2)', borderRadius: 8, display: 'grid', gridTemplateColumns: '54px 1fr 60px 80px', gap: 12, alignItems: 'center' }}>
      <span className="mono" style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '.08em', color: c, padding: '3px 6px', background: `color-mix(in srgb, ${c} 12%, transparent)`, borderRadius: 3, textAlign: 'center' }}>{role}</span>
      <div>
        <div style={{ fontSize: 13.5, color: 'var(--t1)', fontWeight: 500 }}>{community}</div>
        <div style={{ marginTop: 5, height: 3, background: 'var(--bg-3)', borderRadius: 2, overflow: 'hidden' }}>
          <div style={{ width: pct + '%', height: '100%', background: c }} />
        </div>
      </div>
      <span className="mono" style={{ fontSize: 11, color: 'var(--t3)', textAlign: 'right' }}>{pts}</span>
      <span className="mono num" style={{ fontSize: 14, color: 'var(--t1)', fontWeight: 500, textAlign: 'right' }}>{amt}</span>
    </div>
  );
}

// ─── 4-slot model explainer ────────────────────────────────
function FourSlotModel() {
  const [picked, setPicked] = React.useState('lead');

  return (
    <section id="model" style={{ padding: '96px 0', borderBottom: '.5px solid var(--bd)', background: 'var(--bg-1)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, marginBottom: 40, alignItems: 'end' }}>
          <div>
            <div className="lbl" style={{ marginBottom: 14 }}>§ THE FOUR-SLOT MODEL</div>
            <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 44, fontWeight: 400, letterSpacing: '-0.03em', lineHeight: 1.1 }}>
              One Lead role.<br/><em style={{ color: 'var(--ac)' }}>Three Contributor seats.</em>
            </h2>
          </div>
          <p style={{ color: 'var(--t2)', fontSize: 14.5, lineHeight: 1.6, maxWidth: 480 }}>
            A hard cap. By design. Concentration where it matters — your one Lead community —
            and meaningful diversification across three more. No 12-newsletter burnout.
          </p>
        </div>

        {/* Slot diagram */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 2fr 1.2fr', gap: 0, border: '.5px solid var(--bd)', borderRadius: 'var(--r-lg)', overflow: 'hidden', background: 'var(--bg)' }}>
          <div style={{ padding: '32px 28px', borderRight: '.5px solid var(--bd)', display: 'grid', gap: 16, alignContent: 'start' }}>
            <div className="lbl">YOU</div>
            <div style={{ width: 56, height: 56, borderRadius: 28, background: 'var(--ac)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ac-fg)', fontFamily: 'var(--f-display)', fontSize: 22, fontWeight: 500 }}>
              N
            </div>
            <div>
              <div style={{ fontSize: 16, color: 'var(--t1)', fontWeight: 500 }}>One contributor</div>
              <div style={{ fontSize: 12.5, color: 'var(--t2)', marginTop: 4 }}>4 active seats max · enforced by the OS</div>
            </div>
          </div>

          {/* Middle: visual slots */}
          <div style={{ padding: '32px 28px', borderRight: '.5px solid var(--bd)', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 10 }}>
            {[
              { id: 'lead', role: 'LEAD', com: 'Wealth Signal', pts: 96, c: 'var(--ac)', desc: 'Editorial direction, hiring, weekly cadence.' },
              { id: 'c1',   role: 'CONTRIB', com: 'AI Workplace', pts: 58, c: 'var(--blue)', desc: 'Reviews, intel, replies in your zone.' },
              { id: 'c2',   role: 'CONTRIB', com: 'Climate Capital', pts: 42, c: 'var(--amber)', desc: 'Same — different community.' },
              { id: 'c3',   role: 'CONTRIB', com: 'Longevity Stack', pts: 34, c: 'var(--purple)', desc: 'Same — different community.' },
            ].map((s) => (
              <button key={s.id} onClick={() => setPicked(s.id)}
                style={{
                  padding: '16px 14px', borderRadius: 'var(--r-lg)', textAlign: 'left',
                  border: '.5px solid ' + (picked === s.id ? s.c : 'var(--bd)'),
                  background: picked === s.id ? `color-mix(in srgb, ${s.c} 8%, var(--bg-1))` : 'var(--bg-1)',
                  display: 'grid', gap: 8, alignContent: 'start', minHeight: 160,
                  transition: 'all .15s',
                }}>
                <span className="mono" style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '.08em', color: s.c }}>{s.role}</span>
                <div style={{ fontSize: 13.5, color: 'var(--t1)', fontWeight: 500, lineHeight: 1.3 }}>{s.com}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--t3)' }}>+{s.pts} pts/wk</div>
                <div style={{ fontSize: 11.5, color: 'var(--t2)', lineHeight: 1.5, marginTop: 4 }}>{s.desc}</div>
              </button>
            ))}
          </div>

          <div style={{ padding: '32px 28px', display: 'grid', gap: 16, alignContent: 'start' }}>
            <div className="lbl">THE RULE</div>
            <div style={{ display: 'grid', gap: 12 }}>
              {[
                ['One Lead role at a time', 'Where you set direction.'],
                ['Up to three Contributor seats', 'Where you support others.'],
                ['Reputation ≥ 9.0 unlocks Lead', 'Earn it before you lead.'],
                ['Reduce / pause anytime', 'Streak frozen, not reset.'],
              ].map(([h, b]) => (
                <div key={h} style={{ display: 'grid', gridTemplateColumns: '14px 1fr', gap: 10, alignItems: 'start' }}>
                  <span style={{ marginTop: 6, width: 6, height: 6, borderRadius: 3, background: 'var(--ac)' }} />
                  <div>
                    <div style={{ fontSize: 13, color: 'var(--t1)', fontWeight: 500 }}>{h}</div>
                    <div style={{ fontSize: 12, color: 'var(--t3)', marginTop: 2 }}>{b}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Live earnings leaderboard ─────────────────────────────
function LiveLeaderboard() {
  const initial = [
    { name: 'A. Ohanian',     role: 'LEAD',    com: 'Wealth Signal',     amt: 6240, rep: 9.4, streak: 16 },
    { name: 'M. Patel',       role: 'LEAD',    com: 'The AI Workplace',  amt: 5890, rep: 9.2, streak: 14 },
    { name: 'S. Park',        role: 'LEAD',    com: 'Longevity Stack',   amt: 4720, rep: 8.9, streak: 11 },
    { name: 'D. Castellanos', role: 'LEAD',    com: 'Climate Capital',   amt: 4120, rep: 8.6, streak: 9  },
    { name: 'I. Rao',         role: 'CONTRIB', com: 'Brick Intelligence',amt: 1840, rep: 8.4, streak: 12 },
    { name: 'L. Tomek',       role: 'CONTRIB', com: 'Wealth Signal',     amt: 1620, rep: 8.1, streak: 7  },
    { name: 'J. Kim',         role: 'CONTRIB', com: 'SaaS Signals',      amt: 1480, rep: 7.9, streak: 10 },
    { name: 'P. Olsen',       role: 'CONTRIB', com: 'Frontier Markets',  amt: 1340, rep: 7.6, streak: 6  },
  ];
  const [rows, setRows] = React.useState(initial);
  const [tick, setTick] = React.useState(0);

  React.useEffect(() => {
    const t = setInterval(() => {
      setRows((r) => r.map((x) => ({ ...x, amt: x.amt + Math.round((Math.random() - 0.4) * 14) })));
      setTick((t) => t + 1);
    }, 1500);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="leaderboard" style={{ padding: '96px 0', borderBottom: '.5px solid var(--bd)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, marginBottom: 40, alignItems: 'end' }}>
          <div>
            <div className="lbl" style={{ marginBottom: 14 }}>§ EARNINGS · MONTH-TO-DATE · LIVE</div>
            <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 42, fontWeight: 400, letterSpacing: '-0.03em', lineHeight: 1.1 }}>
              Real names. <em style={{ color: 'var(--ac)' }}>Real numbers.</em><br/>Pseudonymized to first‑name‑last‑initial.
            </h2>
          </div>
          <p style={{ color: 'var(--t2)', fontSize: 13.5, lineHeight: 1.6 }}>
            What 8 contributors are earning <span className="mono" style={{ color: 'var(--t1)' }}>this month</span> across 12 communities,
            updated as the OS settles publishing events. Inclusive of platform share and waiver rules.
          </p>
        </div>

        <div style={{ border: '.5px solid var(--bd)', borderRadius: 'var(--r-lg)', overflow: 'hidden', background: 'var(--bg-1)' }}>
          <div style={{ padding: '12px 22px', display: 'grid', gridTemplateColumns: '24px 1.4fr 1fr 80px 80px 100px', gap: 12, alignItems: 'center', borderBottom: '.5px solid var(--bd)', background: 'var(--bg-2)' }}>
            <span className="lbl">#</span>
            <span className="lbl">CONTRIBUTOR</span>
            <span className="lbl">COMMUNITY</span>
            <span className="lbl" style={{ textAlign: 'right' }}>STREAK</span>
            <span className="lbl" style={{ textAlign: 'right' }}>REP</span>
            <span className="lbl" style={{ textAlign: 'right' }}>MTD $</span>
          </div>
          {rows.map((r, i) => (
            <div key={r.name} style={{ padding: '14px 22px', display: 'grid', gridTemplateColumns: '24px 1.4fr 1fr 80px 80px 100px', gap: 12, alignItems: 'center', borderBottom: i < rows.length - 1 ? '.5px solid var(--bd)' : 'none' }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--t3)' }}>{String(i + 1).padStart(2, '0')}</span>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span className="mono" style={{ fontSize: 9, fontWeight: 600, color: r.role === 'LEAD' ? 'var(--ac)' : 'var(--blue)', padding: '2px 5px', background: r.role === 'LEAD' ? 'var(--ac-d)' : 'var(--blue-d)', borderRadius: 3, letterSpacing: '.06em' }}>{r.role}</span>
                <span style={{ fontSize: 14, color: 'var(--t1)', fontWeight: 500 }}>{r.name}</span>
              </div>
              <span style={{ fontSize: 13, color: 'var(--t2)' }}>{r.com}</span>
              <span className="mono" style={{ fontSize: 12, color: 'var(--t2)', textAlign: 'right' }}>{r.streak}w</span>
              <span className="mono num" style={{ fontSize: 12.5, color: 'var(--ac)', textAlign: 'right' }}>{r.rep.toFixed(1)}</span>
              <span className="mono num" style={{ fontSize: 14.5, color: 'var(--green)', fontWeight: 500, textAlign: 'right' }}>${r.amt.toLocaleString()}</span>
            </div>
          ))}
          <div style={{ padding: '12px 22px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'var(--bg-2)', borderTop: '.5px solid var(--bd)' }}>
            <span className="lbl">·</span>
            <span className="mono" style={{ fontSize: 11, color: 'var(--t3)' }}>refreshing in {1500 - (Date.now() % 1500)}ms · tick {tick}</span>
            <span className="illu">ILLUSTRATIVE</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Open seats brokerage ──────────────────────────────────
function SeatBrokerage() {
  const seats = [
    { kind: 'LEAD',    com: 'Brick Intelligence',  niche: 'Construction × tech',     est: '$2.6–4.4k/mo', closes: '7d',  intake: 'Min rep 9.0' },
    { kind: 'LEAD',    com: 'Frontier Markets',    niche: 'Emerging-market finance', est: '$2.2–3.8k/mo', closes: '12d', intake: 'Min rep 9.0' },
    { kind: 'CONTRIB', com: 'Wealth Signal',       niche: 'Personal finance',        est: '$680–1.4k/mo', closes: '3d',  intake: 'Min rep 7.0' },
    { kind: 'CONTRIB', com: 'The AI Workplace',    niche: 'Future of work',          est: '$520–1.2k/mo', closes: '5d',  intake: 'Min rep 7.0' },
    { kind: 'CONTRIB', com: 'Climate Capital',     niche: 'Climate finance',         est: '$580–1.3k/mo', closes: '4d',  intake: 'Min rep 7.0' },
    { kind: 'CONTRIB', com: 'Longevity Stack',     niche: 'Health × longevity',      est: '$420–1.1k/mo', closes: '9d',  intake: 'Min rep 6.5' },
  ];

  return (
    <section style={{ padding: '96px 0', borderBottom: '.5px solid var(--bd)', background: 'var(--bg-1)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 36 }}>
          <div>
            <div className="lbl" style={{ marginBottom: 14 }}>§ OPEN SEATS</div>
            <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 38, fontWeight: 400, letterSpacing: '-0.03em', lineHeight: 1.1 }}>
              Six seats live this week. <em style={{ color: 'var(--ac)' }}>Most close fast.</em>
            </h2>
          </div>
          <a href="#apply" className="mono" style={{ fontSize: 13, color: 'var(--ac)' }}>See all 34 open seats →</a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {seats.map((s) => (
            <div key={s.com + s.kind} style={{ padding: '22px 24px', background: 'var(--bg)', border: '.5px solid var(--bd)', borderRadius: 'var(--r-lg)', display: 'grid', gap: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span className="mono" style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '.08em', color: s.kind === 'LEAD' ? 'var(--ac)' : 'var(--blue)', padding: '3px 8px', background: s.kind === 'LEAD' ? 'var(--ac-d)' : 'var(--blue-d)', borderRadius: 3 }}>
                  {s.kind} SEAT
                </span>
                <span className="mono" style={{ fontSize: 11, color: s.closes.startsWith('3') || s.closes.startsWith('4') ? 'var(--amber)' : 'var(--t3)' }}>closes {s.closes}</span>
              </div>
              <div>
                <div style={{ fontSize: 17, color: 'var(--t1)', fontWeight: 500, letterSpacing: '-0.015em' }}>{s.com}</div>
                <div style={{ fontSize: 12.5, color: 'var(--t2)', marginTop: 3 }}>{s.niche}</div>
              </div>
              <div style={{ paddingTop: 14, borderTop: '.5px solid var(--bd)', display: 'grid', gap: 8 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span className="lbl">EST. MONTHLY</span>
                  <span className="mono num" style={{ fontSize: 12.5, color: 'var(--ac)' }}>{s.est}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span className="lbl">INTAKE</span>
                  <span className="mono" style={{ fontSize: 11.5, color: 'var(--t2)' }}>{s.intake}</span>
                </div>
              </div>
              <a href="#apply" className="btn btn-ghost" style={{ justifyContent: 'space-between', padding: '8px 14px', fontSize: 12.5 }}>
                Apply for seat <span style={{ color: 'var(--ac)' }}>→</span>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Lead vs Contributor comparison ────────────────────────
function RoleComparison() {
  const rows = [
    { f: 'Editorial direction',   l: 'Owns it',          c: 'Suggests' },
    { f: 'Approval authority',    l: 'Final word',       c: '—' },
    { f: 'Hiring contributors',   l: 'Yes',              c: '—' },
    { f: 'Earnings share',        l: '~40–50% of pool',  c: '~10–20%' },
    { f: 'Time commitment',       l: '6–8h / week',      c: '1–2h / week' },
    { f: 'Reputation requirement',l: '9.0+',             c: '5.0+' },
    { f: 'Slots used',            l: '1 of 4',           c: '1 of 3 contributor' },
    { f: 'Waiver eligibility',    l: '4 / year',         c: '4 / year' },
  ];
  return (
    <section style={{ padding: '96px 0', borderBottom: '.5px solid var(--bd)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <div className="lbl" style={{ marginBottom: 14 }}>§ LEAD vs CONTRIBUTOR</div>
          <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 38, fontWeight: 400, letterSpacing: '-0.03em', lineHeight: 1.1, maxWidth: 720, margin: '0 auto' }}>
            The same OS. <em style={{ color: 'var(--ac)' }}>Two different jobs.</em>
          </h2>
        </div>

        <div style={{ border: '.5px solid var(--bd)', borderRadius: 'var(--r-lg)', overflow: 'hidden', background: 'var(--bg-1)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', padding: '16px 24px', borderBottom: '.5px solid var(--bd)', background: 'var(--bg-2)' }}>
            <span className="lbl">·</span>
            <span className="lbl" style={{ color: 'var(--ac)' }}>LEAD EDITOR</span>
            <span className="lbl" style={{ color: 'var(--blue)' }}>CONTRIBUTOR</span>
          </div>
          {rows.map((r, i) => (
            <div key={r.f} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', padding: '16px 24px', borderBottom: i < rows.length - 1 ? '.5px solid var(--bd)' : 'none', alignItems: 'center' }}>
              <span style={{ fontSize: 13.5, color: 'var(--t2)' }}>{r.f}</span>
              <span style={{ fontSize: 13.5, color: 'var(--t1)' }}>{r.l}</span>
              <span style={{ fontSize: 13.5, color: 'var(--t1)' }}>{r.c}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Path ladder: where you start, where you end ───────────
function PathLadder() {
  const steps = [
    { n: '01', t: 'Apply for a Contributor seat', d: 'No reputation needed. We match you to a community where your taste shows.' },
    { n: '02', t: 'Hit 5.0 reputation in ~6 weeks',  d: 'Reviews, intel, replies — the OS scores it all. Streaks compound.' },
    { n: '03', t: 'Add seats up to 3',                  d: 'Multi-community contributors earn 1.4× a single-seat contributor on average.' },
    { n: '04', t: 'Cross 9.0 reputation',                  d: 'Lead Editor candidacy unlocks. We notify communities looking.' },
    { n: '05', t: 'Take a Lead role',                    d: 'One community where you set direction. The other 3 stay as contributor seats.' },
  ];
  return (
    <section style={{ padding: '96px 0', borderBottom: '.5px solid var(--bd)', background: 'var(--bg-1)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, marginBottom: 40, alignItems: 'end' }}>
          <div>
            <div className="lbl" style={{ marginBottom: 14 }}>§ THE LADDER</div>
            <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 42, fontWeight: 400, letterSpacing: '-0.03em', lineHeight: 1.1 }}>
              Most contributors take a Lead role <em style={{ color: 'var(--ac)' }}>within 14 weeks.</em>
            </h2>
          </div>
          <p style={{ color: 'var(--t2)', fontSize: 14, lineHeight: 1.6 }}>
            The system is designed to surface taste. If you have it, the path up is short
            and the math is transparent. If you don't yet, we'll tell you where you are.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{ position: 'relative' }}>
              {i > 0 && <span style={{ position: 'absolute', left: -12, top: 22, width: 16, height: 1, background: 'var(--bd-hi)' }} />}
              <div style={{ padding: '20px 18px', background: 'var(--bg)', border: '.5px solid var(--bd)', borderRadius: 'var(--r-lg)', height: '100%', display: 'grid', gap: 10, alignContent: 'start' }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ac)' }}>{s.n}</span>
                <div style={{ fontSize: 14, color: 'var(--t1)', fontWeight: 500, lineHeight: 1.35 }}>{s.t}</div>
                <div style={{ fontSize: 12, color: 'var(--t3)', lineHeight: 1.55 }}>{s.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Social proof — short quotes from contributors ─────────
function SocialProofBlock() {
  const quotes = [
    { q: 'I run finance comms by day. Wealth Signal is my Lead role at night. Narrio handles the publishing — I just choose what we cover.', a: 'A. Ohanian · Lead, Wealth Signal · 14 mo.' },
    { q: 'Three contributor seats means I never feel locked in. If a community drifts from my taste, I rotate. Streak frozen, not punished.',     a: 'L. Tomek · Contributor × 3 · 8 mo.' },
    { q: 'Reputation is the only currency that mattered. I started at 0 and crossed 9 in 11 weeks. The OS made it obvious where I was strong.', a: 'S. Park · Lead, Longevity Stack · 11 mo.' },
  ];
  return (
    <section style={{ padding: '96px 0', borderBottom: '.5px solid var(--bd)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px' }}>
        <div className="lbl" style={{ marginBottom: 24 }}>§ FIELD NOTES</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {quotes.map((q) => (
            <figure key={q.a} style={{ padding: '28px 26px', border: '.5px solid var(--bd)', borderRadius: 'var(--r-lg)', background: 'var(--bg-1)', margin: 0, display: 'grid', gap: 18, alignContent: 'space-between' }}>
              <blockquote style={{ margin: 0, fontFamily: 'var(--f-display)', fontSize: 19, lineHeight: 1.4, color: 'var(--t1)', letterSpacing: '-0.012em', textWrap: 'pretty' }}>
                "{q.q}"
              </blockquote>
              <figcaption className="mono" style={{ fontSize: 11, color: 'var(--t3)', letterSpacing: '.04em' }}>{q.a}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Apply ─────────────────────────────────────────────────
function ContribApply() {
  const [step, setStep] = React.useState(0);
  const [picked, setPicked] = React.useState(null);

  return (
    <section id="apply" style={{ padding: '120px 0', borderBottom: '.5px solid var(--bd)', background: 'var(--bg-1)' }}>
      <div style={{ maxWidth: 920, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div className="lbl" style={{ marginBottom: 14, color: 'var(--ac)' }}>·</div>
          <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 48, fontWeight: 400, letterSpacing: '-0.035em', lineHeight: 1.05 }}>
            Claim a contributor seat.
          </h2>
          <p style={{ marginTop: 14, fontSize: 15, color: 'var(--t2)', maxWidth: 540, margin: '14px auto 0' }}>
            Average review: 36 hours. If you're not the right fit for the seat you applied to,
            we'll suggest one that is.
          </p>
        </div>

        <div style={{ background: 'var(--bg)', border: '.5px solid var(--bd-hi)', borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
          <div style={{ padding: '14px 20px', borderBottom: '.5px solid var(--bd)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span className="lbl">CONTRIBUTOR APPLICATION · STEP {step + 1} OF 3</span>
            <div style={{ display: 'flex', gap: 4 }}>
              {[0,1,2].map((i) => (
                <span key={i} style={{ width: 36, height: 3, borderRadius: 2, background: i <= step ? 'var(--ac)' : 'var(--bg-3)', transition: 'background .3s' }} />
              ))}
            </div>
          </div>

          <div style={{ padding: '36px 40px', minHeight: 320 }}>
            {step === 0 && <CStep0 picked={picked} setPicked={setPicked} next={() => setStep(1)} />}
            {step === 1 && <CStep1 prev={() => setStep(0)} next={() => setStep(2)} />}
            {step === 2 && <CStep2 picked={picked} prev={() => setStep(1)} />}
          </div>
        </div>

        <div style={{ marginTop: 18, textAlign: 'center', fontSize: 12, color: 'var(--t3)' }}>
          By applying, you accept that <span style={{ color: 'var(--t2)' }}>seats are not ownership</span>. Narrio holds the infrastructure;
          editors hold the role.
        </div>
      </div>
    </section>
  );
}

function CStep0({ picked, setPicked, next }) {
  const opts = [
    { id: 'contrib', t: 'Start as Contributor', d: 'Up to 3 seats. Recommended path. Build reputation, then unlock Lead.', tag: 'Most apply here' },
    { id: 'lead',    t: 'Apply for Lead Editor', d: 'Requires reputation ≥ 9.0 OR a 14-day editorial trial.', tag: 'Trial available' },
  ];
  return (
    <div>
      <h3 style={{ fontFamily: 'var(--f-display)', fontSize: 24, fontWeight: 400, letterSpacing: '-0.025em', marginBottom: 24 }}>How do you want to enter?</h3>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {opts.map((o) => (
          <button key={o.id} onClick={() => setPicked(o.id)}
            style={{ padding: '24px 22px', textAlign: 'left',
              border: '.5px solid ' + (picked === o.id ? 'var(--ac)' : 'var(--bd-hi)'),
              borderRadius: 'var(--r-lg)',
              background: picked === o.id ? 'var(--ac-d)' : 'var(--bg-1)',
              transition: 'all .15s' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
              <span style={{ fontSize: 16, color: 'var(--t1)', fontWeight: 500 }}>{o.t}</span>
              <span className="mono" style={{ fontSize: 10, color: 'var(--ac)', padding: '2px 8px', background: 'var(--ac-d)', border: '.5px solid var(--bd-ac)', borderRadius: 999 }}>{o.tag}</span>
            </div>
            <div style={{ fontSize: 13, color: 'var(--t2)', lineHeight: 1.55 }}>{o.d}</div>
          </button>
        ))}
      </div>
      <div style={{ marginTop: 24, textAlign: 'right' }}>
        <button onClick={next} className="btn btn-pri" disabled={!picked} style={{ opacity: picked ? 1 : 0.4 }}>Continue →</button>
      </div>
    </div>
  );
}

function CStep1({ prev, next }) {
  const tags = ['AI', 'Finance', 'Climate', 'Health', 'Future of work', 'Crypto', 'Geopolitics', 'Design', 'Productivity', 'Travel', 'Construction', 'Software'];
  const [picked, setPicked] = React.useState(['AI', 'Finance']);
  const toggle = (t) => setPicked((p) => p.includes(t) ? p.filter((x) => x !== t) : [...p, t]);

  return (
    <div>
      <h3 style={{ fontFamily: 'var(--f-display)', fontSize: 24, fontWeight: 400, letterSpacing: '-0.025em', marginBottom: 8 }}>Which beats are yours?</h3>
      <p style={{ fontSize: 13.5, color: 'var(--t2)', marginBottom: 20 }}>Pick 2–4. We match seats by overlap with current Lead Editors' coverage.</p>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 28 }}>
        {tags.map((t) => (
          <button key={t} onClick={() => toggle(t)}
            style={{ padding: '7px 14px', borderRadius: 999, fontSize: 12.5,
              background: picked.includes(t) ? 'var(--ac)' : 'transparent',
              color: picked.includes(t) ? 'var(--ac-fg)' : 'var(--t2)',
              border: '.5px solid ' + (picked.includes(t) ? 'var(--ac)' : 'var(--bd-hi)'),
            }}>{t}</button>
        ))}
      </div>
      <Field label="Two pieces you've written (links, optional)" placeholder="https://..." textarea />
      <div style={{ marginTop: 24, display: 'flex', justifyContent: 'space-between' }}>
        <button onClick={prev} className="btn btn-ghost" style={{ padding: '7px 14px', fontSize: 12.5 }}>← Back</button>
        <button onClick={next} className="btn btn-pri">Continue →</button>
      </div>
    </div>
  );
}

function CStep2({ picked, prev }) {
  const [submitted, setSubmitted] = React.useState(false);
  if (submitted) {
    return (
      <div style={{ textAlign: 'center', paddingTop: 12 }}>
        <div style={{ width: 56, height: 56, margin: '0 auto 20px', borderRadius: 28, border: '.5px solid var(--ac)', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--ac-d)' }}>
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="var(--ac)" strokeWidth="1.5" strokeLinecap="round"><path d="M5 11l4 4 8-9"/></svg>
        </div>
        <h3 style={{ fontFamily: 'var(--f-display)', fontSize: 28, fontWeight: 400, letterSpacing: '-0.025em', marginBottom: 12 }}>Application received.</h3>
        <p style={{ fontSize: 14, color: 'var(--t2)', maxWidth: 480, margin: '0 auto', lineHeight: 1.6 }}>
          You're in the queue for a {picked === 'lead' ? 'Lead Editor' : 'Contributor'} seat.
          Average response time: <span className="mono" style={{ color: 'var(--t1)' }}>36h</span>. We'll send up to 3 seat matches.
        </p>
      </div>
    );
  }
  return (
    <div>
      <h3 style={{ fontFamily: 'var(--f-display)', fontSize: 24, fontWeight: 400, letterSpacing: '-0.025em', marginBottom: 24 }}>Almost there.</h3>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
        <Field label="Full name" placeholder="—" />
        <Field label="Email" placeholder="you@example.com" />
      </div>
      <Field label="Why narrative work, not a job?" textarea placeholder="One sentence." />
      <div style={{ marginTop: 24, display: 'flex', justifyContent: 'space-between' }}>
        <button onClick={prev} className="btn btn-ghost" style={{ padding: '7px 14px', fontSize: 12.5 }}>← Back</button>
        <button onClick={() => setSubmitted(true)} className="btn btn-pri">Submit application</button>
      </div>
    </div>
  );
}

function Field({ label, placeholder, textarea }) {
  const inputSt = {
    background: 'var(--bg-2)', border: '.5px solid var(--bd-hi)',
    borderRadius: 8, padding: '10px 12px', fontSize: 13.5,
    color: 'var(--t1)', fontFamily: 'inherit', outline: 'none', width: '100%',
  };
  return (
    <label style={{ display: 'grid', gap: 6 }}>
      <span className="lbl">{label}</span>
      {textarea
        ? <textarea placeholder={placeholder} rows="3" style={inputSt} />
        : <input type="text" placeholder={placeholder} style={inputSt} />}
    </label>
  );
}

window.VariantContributor = VariantContributor;