// Public Program Page — "The Field"
// Goals · What you get · What ambassadors do · Conduct · Sprints · FAQ · CTA
const { useState: useStateP } = React;

function ProgramPage({ onNav }) {
  return (
    <main className="program">
      <ProgHero onNav={onNav} />
      <ProgGoals />
      <ProgRewards />
      <ProgActivities />
      <ProgSprints />
      <ProgConduct />
      <ProgFAQ />
      <ProgCTA onNav={onNav} />
      <ProgFooter />
    </main>);

}

// ---------- HERO ----------
function ProgHero({ onNav }) {
  return (
    <section className="hero">
      <div className="container hero-inner">
        <div className="kicker">Bloom · Ambassador Program</div>
        <h1 className="display">
          The <em>Field</em><span className="period">.</span>
        </h1>
        <p className="hero-sub">A small group of high-signal researchers, posting evolving theses backed by real capital, earning fees from day one.</p>
        <div className="hero-cta">
          <button className="btn btn-primary" onClick={() => onNav('login')}>Sign in to apply <Icon name="arrow-right" size={16} /></button>
          <a className="btn btn-link" href="#section-goals">Read the program ↓</a>
        </div>
      </div>
    </section>);

}

// ---------- 01 · PROGRAM GOALS ----------
function ProgGoals() {
  return (
    <section className="section section-warm" id="section-goals">
      <div className="container">
        <SectionHead num="01" title="Why this program exists" kicker="Intent" />
        <div className="goals-grid four">
          {window.PROGRAM_GOALS.map((g, i) =>
          <article key={i} className="goal-card center">
              <h3>{g.title}</h3>
              <p>{g.desc}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ---------- 02 · WHAT YOU GET (tier cards, full rewards) ----------
function ProgRewards() {
  return (
    <section className="section" id="section-rewards">
      <div className="container">
        <SectionHead num="02" title="What you get" kicker="Tiers & rewards" />
        <div className="tier-grid">
          {window.TIERS.map((t) =>
          <article key={t.id} className={`tier-card rewards ${t.id}`}>
              <header className="tier-head">
                <h3 className="tier-name">{t.id === 'apex' ? <em>{t.name}</em> : t.name}</h3>
                <p className="tier-tag">{t.tag}</p>
              </header>
              <div className="tier-block">
                <div className="tier-label">You receive</div>
                <ul className="dashed">
                  {t.gets.map((g, i) => <li key={i}>{g}</li>)}
                </ul>
              </div>
              <footer className="tier-foot">
                <span className="mult-label">Points multiplier</span>
                <span className="mult-val">{t.mult}× <span className="mult-token">$BLOOM</span></span>
              </footer>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ---------- 03 · WHAT AMBASSADORS DO ----------
function ProgActivities() {
  return (
    <section className="section section-warm" id="section-activities">
      <div className="container">
        <SectionHead num="03" title="What ambassadors do" kicker="Activities" />
        <div className="activity-grid">
          <article className="activity-card primary">
            <span className="mono-label">Core practice</span>
            <h3>Post theses inside Bloom</h3>
            <p>Open a real position. Write a short thesis explaining the trade: one asset, one position, your reasoning.</p>
          </article>
          <article className="activity-card">
            <span className="mono-label">Daily</span>
            <h3>Trade other users' calls</h3>
            <p>Read the feed. When another user's thesis looks good, trade it through Bloom. Fees on that trade go to them.</p>
          </article>
          <article className="activity-card">
            <span className="mono-label">Weekly</span>
            <h3>Complete one Sprint</h3>
            <p>Every week the team posts one task in the Ambassador Telegram. Finishing it counts as one post toward your tier minimum.</p>
          </article>
          <article className="activity-card">
            <span className="mono-label">From Ranger ↑</span>
            <h3>Post about your trades on X</h3>
            <p>Once Early Access opens, share your Bloom theses on X. Every post links back to a real in-app position you hold.</p>
          </article>
        </div>
        <div className="activity-matrix">
          <div className="am-head">
            <span className="mono-label">By tier</span>
          </div>
          <table>
            <thead>
              <tr><th>Activity</th><th>Scout</th><th>Ranger</th><th>Apex</th></tr>
            </thead>
            <tbody>
              {window.ACTIVITY_MATRIX.map((r) =>
              <tr key={r.label}>
                  <td className="act">{r.label}</td>
                  <td><CellA v={r.scout} /></td>
                  <td><CellA v={r.ranger} /></td>
                  <td><CellA v={r.apex} apex /></td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </section>);

}
function CellA({ v, apex }) {
  if (v === true) return <Icon name="check" size={16} color={apex ? 'var(--bloom)' : 'var(--ink-900)'} />;
  if (v === false) return <span className="dash">—</span>;
  return <span className={apex ? 'cell-apex' : ''}>{v}</span>;
}

// ---------- 04 · CODE OF CONDUCT ----------
function ProgConduct() {
  return (
    <section className="section section-warm" id="section-conduct">
      <div className="container">
        <SectionHead num="04" title="Code of conduct" kicker="Standards" />
        <ul className="conduct-list">
          {window.CONDUCT.map((c, i) =>
          <li key={i}>
              <span className="conduct-n">{String(i + 1).padStart(2, '0')}</span>
              <div>
                <h4>{c.title}</h4>
                <p>{c.body}</p>
              </div>
            </li>
          )}
        </ul>
      </div>
    </section>);

}

// ---------- 05 · SPRINTS (with timeline overview) ----------
function ProgSprints() {
  const [open, setOpen] = useStateP(null);
  const groups = [
  {
    key: 'soft',
    phase: 'Soft Launch',
    window: 'May–Jun 2026',
    brief: 'Confidential. In-app only, no public posts. Build the rhythm.',
    list: window.SPRINTS.filter((s) => s.phase === 'soft')
  },
  {
    key: 'early',
    phase: 'Early Access',
    window: 'Jul–Aug 2026',
    brief: 'X content layer unlocks for Ranger and Apex. Public posts allowed, anchored to in-app theses.',
    list: window.SPRINTS.filter((s) => s.phase === 'early')
  }];

  return (
    <section className="section" id="section-sprints">
      <div className="container">
        <SectionHead num="05" title="Sprints" kicker="Cadence" />

        {/* Sprint groups */}
        <div className="sprints-wrap">
          {groups.map((g) =>
          <div key={g.key} className={`sprint-group phase-${g.key}`}>
              <header className="sprint-group-head">
                <div>
                  <h4 className="sprint-phase">{g.phase}</h4>
                </div>
              </header>
              <ul className="sprint-list">
                {g.list.map((s, i) => {
                const k = `${g.key}-${i}`;
                const isOpen = open === k;
                return (
                  <li key={s.title}>
                      <button className="sprint-row" onClick={() => setOpen(isOpen ? null : k)}>
                        <span className="sprint-num">{String(i + 1).padStart(2, '0')}</span>
                        <span className="sprint-title">{s.title}</span>
                        <span className="sprint-snippet">{s.snippet}</span>
                        <span className={`sprint-chev ${isOpen ? 'open' : ''}`}><Icon name="chevron-down" size={16} /></span>
                      </button>
                      {isOpen && <div className="sprint-body"><p>{s.body}</p></div>}
                    </li>);

              })}
              </ul>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- 06 · FAQ ----------
function ProgFAQ() {
  const [openIdx, setOpenIdx] = useStateP(0);
  return (
    <section className="section" id="section-faq">
      <div className="container">
        <SectionHead num="06" title="Common questions" kicker="FAQ" />
        <ul className="faq-list">
          {window.FAQS.map((f, i) =>
          <li key={i} className={openIdx === i ? 'open' : ''}>
              <button className="faq-q" onClick={() => setOpenIdx(openIdx === i ? -1 : i)}>
                <span>{f.q}</span>
                <Icon name={openIdx === i ? 'x' : 'plus'} size={16} />
              </button>
              {openIdx === i && <div className="faq-a">{f.a}</div>}
            </li>
          )}
        </ul>
      </div>
    </section>);

}

// ---------- CTA ----------
function ProgCTA({ onNav }) {
  return (
    <section className="section-dark cta-tight" id="section-start">
      <div className="container cta-row">
        <span className="kicker dark">Ready to apply?</span>
        <button className="btn-cta-line" onClick={() => onNav('login')}>
          Sign in with X <Icon name="arrow-right" size={14} />
        </button>
      </div>
    </section>);

}

function ProgFooter() {
  return (
    <footer className="program-footer">
      <div className="container pf-inner">
        <div className="pf-left" style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
          <BloomMark size={22} />
          <span className="pf-tag">Ambassador Program · 2026</span>
        </div>
        <div className="pf-right mono">© Bloom Labs · Confidential</div>
      </div>
    </footer>);

}

function SectionHead({ num, title, sub, kicker }) {
  return (
    <div className="section-head">
      <h2 className="serif-h2">{title}</h2>
      {sub && <p className="section-sub">{sub}</p>}
    </div>);

}

window.ProgramPage = ProgramPage;