/* Six sections:
 *  1. Worked example (Position Statement + RoR entry + Disclosure excerpt)
 *  2. Time-and-effort strip
 *  3. When NOT to use this
 *  4. Comparison table (ESF vs alternatives)
 *  5. Author / origin block
 *  6. Roadmap teaser
 */

function WorkedExample() {
  const ps = {
    project: 'maker-portfolio',
    date: '2026-04-12',
    stance: 'A portfolio site for my furniture practice. It should feel like the workshop, not like a SaaS landing page. Quiet, slow, photo-led.',
    matters: 'The grain of the wood has to be the loudest thing on the page. Typography should feel set, not "designed." White space is content.',
    redline: 'AI will not write project descriptions in my voice. AI will not pick the photos. AI will not propose color from outside the wood tones already in the photographs.'
  };
  const ror = {
    id: 'ror-007', ts: '2026-04-15 10:24',
    context: 'Hero copy',
    suggested: '"Crafting timeless furniture, one piece at a time."',
    action: 'rejected',
    reason: 'Generic showroom voice. My Position Statement says quiet and photo-led. Replaced with a single line of metadata over the lead photo: species, year, dimensions.'
  };
  const disclosure = `AI assisted the layout grid generation, CSS scaffolding, and image-loading
performance. AI did not write project descriptions or hero copy
(Records 003, 007, 011 capture rejections to AI-suggested marketing voice).
AI suggested a tan/cream brand palette in session 02; I rejected it
(Record 005) and pulled colors from the lead photograph instead. Final
copy and image selection are mine. Position Statement v1 (2026-04-12)
remained unchanged through completion.`;

  return (
    <section className="section" id="example">
      <div className="container stack--xl">
        <div className="stack">
          <span className="eyebrow"><span className="dot" />What it looks like in practice</span>
          <h2 className="h-section">One project. Three artifacts.</h2>
          <p className="lede">A fictional furniture maker building a portfolio site. Three Companion-generated files captured at three points in the work.</p>
        </div>
        <div className="we-grid">
          <div className="we-card">
            <div className="we-card__head"><span className="we-card__step">01</span><span>Position Statement · Day 1</span><span className="mono we-card__file">position-statement.md</span></div>
            <div className="we-field"><span className="we-field__label">Project</span><span className="mono">{ps.project}</span></div>
            <div className="we-field"><span className="we-field__label">Date</span><span className="mono">{ps.date}</span></div>
            <div className="we-field"><span className="we-field__label">My stance</span><span>{ps.stance}</span></div>
            <div className="we-field"><span className="we-field__label">Matters most</span><span>{ps.matters}</span></div>
            <div className="we-field"><span className="we-field__label">Will not compromise</span><span>{ps.redline}</span></div>
          </div>
          <div className="we-card">
            <div className="we-card__head"><span className="we-card__step">02</span><span>Record of Resistance · Day 4</span><span className="mono we-card__file">{ror.id}.json</span></div>
            <div className="we-rorbox">
              <div><span className="key">id</span>: <span className="str">"{ror.id}"</span>,</div>
              <div><span className="key">when</span>: <span className="str">"{ror.ts}"</span>,</div>
              <div><span className="key">context</span>: <span className="str">"{ror.context}"</span>,</div>
              <div><span className="key">ai_suggested</span>: <span className="str">"{ror.suggested}"</span>,</div>
              <div><span className="key">action</span>: <span className="str">"{ror.action}"</span>,</div>
              <div><span className="key">reason</span>: <span className="str">"{ror.reason}"</span></div>
            </div>
          </div>
          <div className="we-card">
            <div className="we-card__head"><span className="we-card__step">03</span><span>Disclosure · Project close</span><span className="mono we-card__file">disclosure.md</span></div>
            <div className="we-discl">{disclosure}</div>
            <div style={{ marginTop: 'auto', paddingTop: 12, borderTop: '1px solid var(--line)' }}>
              <span className="muted" style={{ fontSize: 12 }}>Drafted from session logs. Reviewed and edited by the maker before publishing.</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function EffortStrip() {
  const items = [
  { time: '5 min', label: 'Position Statement', sub: 'Three questions, before AI enters.' },
  { time: '30 sec', label: 'Each Record of Resistance', sub: 'When you reject or revise. Companion pre-fills half.' },
  { time: '~1 min', label: 'AI Use Log per session', sub: 'Auto-drafted. You review and approve.' },
  { time: '10 min', label: 'Five Questions at close', sub: 'Honest self-assessment before you ship.' },
  { time: '~5 min', label: 'Disclosure Statement', sub: 'Drafted from your logs. You edit and own it.' }];

  return (
    <section className="section section--sunk" id="effort">
      <div className="container stack--xl">
        <div className="stack">
          <span className="eyebrow"><span className="dot" />Time & effort</span>
          <h2 className="h-section">Light enough to actually use.</h2>
          <p className="lede">The Companion handles the structure. You do the thinking. Times are typical.</p>
        </div>
        <div className="effort">
          {items.map((i) =>
          <div className="effort__cell" key={i.label}>
              <div className="effort__time mono">{i.time}</div>
              <div className="effort__label">{i.label}</div>
              <div className="effort__sub">{i.sub}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function WhenNot() {
  const cases = [
  { title: 'A throwaway prompt', body: 'Asking for a regex, debugging a stack trace, summarizing one paragraph. The overhead is bigger than the work.' },
  { title: 'Pure exploration', body: 'You\'re prompting around to learn what AI can do. There\'s no project yet. Come back when there is.' },
  { title: 'AI is the deliverable', body: 'You\'re shipping AI-generated output as AI-generated output, on purpose. Disclosure is the whole point; ESF is overkill.' },
  { title: 'When the friction is breaking you', body: 'If the practice is making AI-assisted work feel impossible instead of conscious, drop it for that project. Come back to it later.' }];

  return (
    <section className="section" id="when-not">
      <div className="container stack--xl">
        <div className="stack">
          <span className="eyebrow"><span className="dot" />Honest limits</span>
          <h2 className="h-section">When not to use this.</h2>
          <p className="lede">ESF Companion isn't free, and it isn't always worth it. The practice has a floor below which it stops paying for itself.</p>
        </div>
        <div className="wn-grid">
          {cases.map((c) =>
          <div className="wn-cell" key={c.title}>
              <Icon.x style={{ width: 16, height: 16, color: 'var(--ink-3)' }} />
              <div className="wn-cell__title">{c.title}</div>
              <div className="wn-cell__body">{c.body}</div>
            </div>
          )}
        </div>
        <div className="wn-rule">
          <strong>Rule of thumb:</strong> If your name is on the work and someone might ask "did you actually do this?" then ESF earns its keep. Otherwise, just be careful.
        </div>
      </div>
    </section>);

}

function CompareSection() {
  const rows = [
  { label: 'Pre-AI direction', esf: 'Required (Position Statement gate)', adhoc: 'None', libs: 'None', edu: 'Discussed' },
  { label: 'Tracks AI overrides', esf: 'Records of Resistance', adhoc: 'No', libs: 'No', edu: 'No' },
  { label: 'Drift detection', esf: 'Live, against your stated position', adhoc: 'You notice or you don\'t', libs: 'No', edu: 'Theoretical only' },
  { label: 'Honest disclosure', esf: 'Auto-drafted from logs', adhoc: 'Manual / forgotten', libs: 'No', edu: 'Encouraged' },
  { label: 'Tool requirements', esf: 'Any AI tool. Local files.', adhoc: 'Any AI tool', libs: 'Subscription', edu: 'Course access' },
  { label: 'Cost', esf: 'Free (CC BY 4.0)', adhoc: 'Free', libs: '$10–$30/mo typical', edu: '$0–$2k+' },
  { label: 'Adapts to your work', esf: 'Yes, via Position Statement', adhoc: 'You do it manually', libs: 'Generic prompts', edu: 'Domain-specific' }];

  return (
    <section className="section section--sunk" id="compare">
      <div className="container stack--xl">
        <div className="stack">
          <span className="eyebrow"><span className="dot" />How it compares</span>
          <h2 className="h-section">ESF vs. the alternatives.</h2>
          <p className="lede">ESF Companion isn't competing with AI literacy training or prompt libraries. It does a different job: keeping your direction and judgment visible while you work.</p>
        </div>
        <div className="cmp">
          <table>
            <thead>
              <tr>
                <th></th>
                <th className="cmp__col cmp__col--us">ESF Companion</th>
                <th className="cmp__col">Just being careful</th>
                <th className="cmp__col">Prompt libraries</th>
                <th className="cmp__col">AI literacy course</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r) =>
              <tr key={r.label}>
                  <th className="cmp__row">{r.label}</th>
                  <td className="cmp__cell cmp__cell--us">{r.esf}</td>
                  <td className="cmp__cell">{r.adhoc}</td>
                  <td className="cmp__cell">{r.libs}</td>
                  <td className="cmp__cell">{r.edu}</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </section>);

}

function AuthorBlock() {
  return (
    <section className="section" id="author">
      <div className="container">
        <div className="author">
          <div className="stack" style={{ gap: 14, gridColumn: '1 / -1' }}>
            <span className="eyebrow"><span className="dot" />Origin</span>
            <h2 className="h-section" style={{ maxWidth: 720 }}>Field-tested in education first.</h2>
            <p style={{ margin: 0, color: 'var(--ink-2)', fontSize: 15.5, lineHeight: 1.65, maxWidth: '64ch' }}>
              The Epistemic Stewardship Framework grew out of teaching, where the cost of unexamined AI use shows up in student work first. The Companion is the lightweight, domain-agnostic version of that practice. It draws on HCI research in metacognitive scaffolding, fixation, and agency drift, shaped by what held up in classrooms.
            </p>
            <div className="author__cred">
              <div className="author__pill"><Icon.shield style={{ width: 13, height: 13 }} /> Free · CC BY 4.0</div>
              <div className="author__pill"><Icon.lock style={{ width: 13, height: 13 }} /> Local-only · no telemetry</div>
              <div className="author__pill"><Icon.flask style={{ width: 13, height: 13 }} /> Research-grounded · 12+ cited studies</div>
              <a className="author__pill author__pill--link" href="https://github.com/nmadrid27/esf-companion/blob/main/CITATION.cff" target="_blank" rel="noreferrer"><Icon.github style={{ width: 13, height: 13 }} /> Citation file</a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}


window.WorkedExample = WorkedExample;
window.EffortStrip = EffortStrip;
window.WhenNot = WhenNot;
window.CompareSection = CompareSection;
window.AuthorBlock = AuthorBlock;