// src/v2.jsx
// V2 "Terminal Scoreboard" — DM Mono-forward, monospaced numbers, ASCII rules,
// yellow blocks as graphic punctuation. Bauhaus-meets-Bloomberg.

const v2Mono = 'DM Mono, ui-monospace, SFMono-Regular, Menlo, monospace';
const v2Sans = 'Space Grotesk, sans-serif';

// Reusable: ASCII-style horizontal rule with optional label
function AsciiRule({ label, dashColor = 'rgba(243,246,242,0.20)', labelColor = 'rgba(243,246,242,0.55)' }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14,
      fontFamily: v2Mono, fontSize: 11,
      letterSpacing: '0.12em', textTransform: 'uppercase',
      color: labelColor,
      margin: '0',
    }}>
      <span style={{ flex: '0 0 28px', borderTop: `0.5px solid ${dashColor}` }} />
      {label && <span>{label}</span>}
      <span style={{ flex: 1, borderTop: `0.5px solid ${dashColor}` }} />
    </div>
  );
}

// Reusable: corner-bracket frame (terminal feel)
function Bracketed({ children, padding = 24, style = {} }) {
  const arm = 16;
  const col = 'rgba(4,168,234,0.45)';
  const corner = {
    position: 'absolute', width: arm, height: arm,
    borderColor: col, borderStyle: 'solid', borderWidth: 0,
  };
  return (
    <div style={{ position: 'relative', padding, ...style }}>
      <span style={{ ...corner, top: 0, left: 0, borderTopWidth: 1, borderLeftWidth: 1 }} />
      <span style={{ ...corner, top: 0, right: 0, borderTopWidth: 1, borderRightWidth: 1 }} />
      <span style={{ ...corner, bottom: 0, left: 0, borderBottomWidth: 1, borderLeftWidth: 1 }} />
      <span style={{ ...corner, bottom: 0, right: 0, borderBottomWidth: 1, borderRightWidth: 1 }} />
      {children}
    </div>
  );
}

// Tickertape — static visual; the dashes give it a Bloomberg feel without animating.
function Ticker() {
  const items = [
    ['SEASON', '01'], ['CHALLENGE', '$100'], ['EARNED', '$0'],
    ['DAY', '14 / 90'], ['ATTEMPTS', '04'], ['FAIL RATE', '100.0%'],
    ['HYPE', '0.0%'], ['STATUS', 'LIVE'],
  ];
  return (
    <div style={{
      borderBottom: '0.5px solid rgba(255,255,255,0.10)',
      background: 'rgba(4,168,234,0.04)',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: '10px 32px',
        display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap',
        fontFamily: v2Mono, fontSize: 11,
        letterSpacing: '0.06em', textTransform: 'uppercase',
        color: 'rgba(243,246,242,0.60)',
      }}>
        <span style={{ color: '#04a8ea', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span className="live-dot" /> LIVE FEED
        </span>
        {items.map(([k, v], i) => (
          <span key={i} style={{ display: 'inline-flex', gap: 6 }}>
            <span style={{ color: 'rgba(243,246,242,0.40)' }}>{k}</span>
            <span style={{ color: '#f3f6f2' }}>{v}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ── V2 Home ────────────────────────────────────────────────────────────────
function V2Home({ onNavigate }) {
  return (
    <div data-screen-label="V2 · Home" className="variation-stage">
      <Nav page="home" onNavigate={onNavigate} style="terminal" />
      <Ticker />

      <main className="page" style={{ paddingTop: 56 }}>
        {/* HERO */}
        <section style={{ marginBottom: 64 }}>
          <div style={{
            fontFamily: v2Mono, fontSize: 11,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: '#04a8ea', marginBottom: 28,
            display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
          }}>
            <span style={{ color: 'rgba(243,246,242,0.40)' }}>~/promptmode</span>
            <span>$</span>
            <span>./run-season --no=01 --challenge=&quot;$100-ai-freelance&quot;</span>
          </div>

          <h1 style={{
            margin: '0 0 20px',
            fontFamily: v2Sans,
            fontSize: 'clamp(40px, 6vw, 84px)',
            fontWeight: 700, letterSpacing: '-0.035em',
            lineHeight: 0.95,
            maxWidth: 980,
          }}>
            Can AI actually<br />
            make you{' '}
            <span style={{
              background: '#ffde59', color: '#151d1f',
              padding: '0 14px', borderRadius: 4,
              boxDecorationBreak: 'clone',
              WebkitBoxDecorationBreak: 'clone',
            }}>money</span>
            <span style={{ color: '#04a8ea' }}>?</span>
          </h1>

          <p style={{
            margin: '0 0 36px',
            fontFamily: v2Mono, fontSize: 14,
            letterSpacing: '0.02em', lineHeight: 1.7,
            color: 'rgba(243,246,242,0.70)',
            maxWidth: 620,
          }}>
            // testing it publicly. real attempts, real numbers,<br />
            // no guru hype. follow along and find out.
          </p>

          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn-yellow" onClick={() => onNavigate('kit')}>
              [ get the free starter kit ] →
            </button>
            <button className="btn-outline" style={{ fontFamily: v2Mono, fontSize: 13 }}>
              ▶ watch the challenge
            </button>
          </div>
        </section>

        {/* SCOREBOARD */}
        <section style={{ marginTop: 72, marginBottom: 64 }}>
          <AsciiRule label="// scoreboard · season 01" />

          <div style={{
            marginTop: 28,
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 0,
            border: '0.5px solid rgba(255,255,255,0.10)',
            borderRadius: 8,
            overflow: 'hidden',
            background: 'rgba(255,255,255,0.02)',
          }}>
            {[
              { k: 'EARNED', big: '$00,000', sub: '.00', tag: 'GOAL $100', tone: 'yellow' },
              { k: 'DAY',    big: '014',     sub: '/090', tag: 'IN PROGRESS', tone: 'cerulean' },
              { k: 'ATTEMPTS', big: '04',    sub: '',     tag: 'METHOD TESTED', tone: 'default' },
              { k: 'HYPE',   big: '0.0',     sub: '%',    tag: 'GUARANTEED', tone: 'default' },
            ].map((s, i) => (
              <div key={i} style={{
                padding: '28px 24px 24px',
                borderRight: i < 3 ? '0.5px solid rgba(255,255,255,0.10)' : 'none',
                position: 'relative',
              }}>
                <div style={{
                  fontFamily: v2Mono, fontSize: 10,
                  letterSpacing: '0.14em', color: 'rgba(243,246,242,0.45)',
                  marginBottom: 14,
                }}>{s.k}</div>
                <div style={{
                  fontFamily: v2Mono, fontWeight: 500,
                  fontSize: 'clamp(28px, 3vw, 40px)',
                  letterSpacing: '-0.02em',
                  color: s.tone === 'yellow' ? '#ffde59' : '#f3f6f2',
                  lineHeight: 1, display: 'flex', alignItems: 'baseline', gap: 2,
                }}>
                  {s.big}
                  {s.sub && (
                    <span style={{
                      fontSize: 16,
                      color: 'rgba(243,246,242,0.45)',
                    }}>{s.sub}</span>
                  )}
                </div>
                <div style={{
                  marginTop: 12,
                  fontFamily: v2Mono, fontSize: 10,
                  letterSpacing: '0.10em',
                  color: s.tone === 'cerulean' ? '#04a8ea' : 'rgba(243,246,242,0.40)',
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                }}>
                  {s.tone === 'cerulean' && <span className="live-dot" />}
                  {s.tag}
                </div>
              </div>
            ))}
          </div>

          {/* Gradient progress strip */}
          <div style={{
            marginTop: 14,
            display: 'grid', gridTemplateColumns: '1fr auto', gap: 16,
            alignItems: 'center',
          }}>
            <div style={{
              height: 6, borderRadius: 999, overflow: 'hidden',
              background: 'rgba(255,255,255,0.06)',
              position: 'relative',
            }}>
              <div style={{
                position: 'absolute', inset: 0, width: '0%',
                background: 'linear-gradient(90deg, #0092ff, #5c85c4)',
              }} />
              {/* tick marks */}
              {[0,25,50,75,100].map(p => (
                <span key={p} style={{
                  position: 'absolute', top: 0, bottom: 0, left: `${p}%`,
                  width: 1, background: 'rgba(255,255,255,0.10)',
                }} />
              ))}
            </div>
            <div style={{
              fontFamily: v2Mono, fontSize: 11,
              letterSpacing: '0.1em', color: 'rgba(243,246,242,0.55)',
            }}>00.0 / 100.0%</div>
          </div>
        </section>

        {/* WHAT THIS IS */}
        <section style={{ marginTop: 96, marginBottom: 32 }}>
          <AsciiRule label="// what this is" />
          <div style={{
            marginTop: 32,
            display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 64,
            alignItems: 'start',
          }}>
            <h2 style={{
              margin: 0,
              fontFamily: v2Sans, fontWeight: 700,
              fontSize: 'clamp(28px, 3vw, 40px)',
              letterSpacing: '-0.025em', lineHeight: 1.05,
            }}>
              Not a course.<br />
              <span style={{
                fontFamily: v2Mono, fontWeight: 400, color: '#04a8ea',
                fontSize: 'clamp(20px, 2vw, 28px)', letterSpacing: '0',
              }}>&gt;</span>{' '}
              An experiment.
            </h2>
            <p style={{
              margin: 0,
              fontSize: 16, lineHeight: 1.7,
              color: 'rgba(243,246,242,0.72)',
            }}>
              I'm documenting every attempt, failure, and win in real time.
              If it doesn't work, I'll say so. If it does, I'll show you
              exactly how — including the parts that don't make me look good.
            </p>
          </div>
        </section>

        {/* FEATURE CARDS — numbered terminal blocks */}
        <section style={{
          marginTop: 56,
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16,
        }}>
          {[
            { n: '01', t: 'real experiments', b: 'every method tested with real effort, real time tracked.' },
            { n: '02', t: 'real numbers',     b: 'income reported honestly — including the $0 days.' },
            { n: '03', t: 'no hype',          b: 'no affiliate deals, no fake screenshots, no guarantees.' },
          ].map((c, i) => (
            <article key={i} style={{
              border: '0.5px solid rgba(255,255,255,0.12)',
              borderRadius: 4,
              padding: 0,
              background: 'rgba(255,255,255,0.025)',
              overflow: 'hidden',
            }}>
              <div style={{
                padding: '10px 16px',
                borderBottom: '0.5px solid rgba(255,255,255,0.08)',
                background: 'rgba(255,255,255,0.03)',
                display: 'flex', justifyContent: 'space-between',
                fontFamily: v2Mono, fontSize: 10,
                letterSpacing: '0.12em', textTransform: 'uppercase',
                color: 'rgba(243,246,242,0.55)',
              }}>
                <span style={{ color: '#04a8ea' }}>[{c.n}]</span>
                <span>{c.t}</span>
              </div>
              <div style={{
                padding: '20px 16px 24px',
                fontFamily: v2Mono, fontSize: 13,
                lineHeight: 1.65, color: 'rgba(243,246,242,0.70)',
              }}>
                {c.b}
              </div>
            </article>
          ))}
        </section>

        {/* LATEST TRANSMISSION */}
        <section style={{ marginTop: 96 }}>
          <AsciiRule label="// latest transmission" />
          <div style={{ marginTop: 28 }}>
            <Bracketed padding={20}>
              <div style={{
                display: 'flex', justifyContent: 'space-between',
                alignItems: 'center', marginBottom: 16, flexWrap: 'wrap', gap: 12,
              }}>
                <div style={{
                  fontFamily: v2Mono, fontSize: 12,
                  color: 'rgba(243,246,242,0.55)', letterSpacing: '0.04em',
                }}>
                  EP_014 · cold-pitching 12 small businesses with claude · 21:48
                </div>
                <a href="#" onClick={(e)=>e.preventDefault()} style={{
                  fontFamily: v2Mono, fontSize: 12, color: '#04a8ea',
                }}>watch on youtube ↗</a>
              </div>
              <Placeholder
                label="◉  YouTube latest-video embed  ·  16:9"
                ratio="16/9"
                style={{ minHeight: 340, borderRadius: 4 }}
              />
            </Bracketed>
          </div>
        </section>

        {/* OPT-IN — terminal style */}
        <section style={{
          marginTop: 96,
          position: 'relative',
          padding: '48px 40px',
          border: '0.5px solid rgba(4,168,234,0.30)',
          borderRadius: 4,
          background: 'linear-gradient(135deg, rgba(0,146,255,0.06), rgba(92,133,196,0.02))',
        }}>
          <div style={{
            fontFamily: v2Mono, fontSize: 11,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: '#04a8ea', marginBottom: 18,
          }}>// free starter kit</div>
          <h2 style={{
            margin: '0 0 14px',
            fontFamily: v2Sans, fontWeight: 700,
            fontSize: 'clamp(28px, 3vw, 38px)',
            letterSpacing: '-0.025em', lineHeight: 1.1,
          }}>
            Get the exact setup I'm using.
          </h2>
          <p style={{
            margin: '0 0 28px',
            fontFamily: v2Mono, fontSize: 13,
            color: 'rgba(243,246,242,0.65)', lineHeight: 1.7,
            maxWidth: 600,
          }}>
            // the AI tools, prompts, and system — free. start in 30 minutes.
          </p>
          <EmailForm style="terminal" cta="[ send it ] →" />
        </section>

        <InlineDisclaimer />
      </main>

      <Footer onNavigate={onNavigate} style="terminal" />
    </div>
  );
}

// ── V2 Free Starter Kit ───────────────────────────────────────────────────
function V2Kit({ onNavigate }) {
  const bullets = [
    ['AI_TOOLS.md',     'the AI tools and setup i\'m using in my $100 freelance challenge'],
    ['PROMPTS/',        'ready-to-use prompts that work in claude, chatgpt, and gemini'],
    ['WORKFLOW.md',     'a step-by-step system to build your first AI workflow in under an hour'],
    ['WORKBOOK_14.pdf', 'full 14-module workbook — go deeper when you\'re ready'],
  ];
  return (
    <div data-screen-label="V2 · Free Starter Kit" className="variation-stage">
      <Nav page="kit" onNavigate={onNavigate} style="terminal" />
      <Ticker />
      <main className="page" style={{ paddingTop: 64, maxWidth: 1080 }}>

        <div style={{
          fontFamily: v2Mono, fontSize: 11,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: '#04a8ea', marginBottom: 24,
        }}>// free · no credit card</div>

        <h1 style={{
          margin: '0 0 24px',
          fontFamily: v2Sans, fontWeight: 700,
          fontSize: 'clamp(34px, 4.4vw, 56px)',
          letterSpacing: '-0.03em', lineHeight: 1.02,
          maxWidth: 900,
        }}>
          The exact AI setup I'm using to try to make{' '}
          <span style={{
            background: '#ffde59', color: '#151d1f',
            padding: '0 10px', borderRadius: 4,
          }}>$100</span>{' '}
          freelancing.
        </h1>

        <p style={{
          margin: '0 0 48px',
          fontFamily: v2Mono, fontSize: 14,
          color: 'rgba(243,246,242,0.70)', lineHeight: 1.7,
          maxWidth: 640,
        }}>
          // free quick-start guide. set up in 30 min.<br />
          // full 14-module workbook included if you want to go deeper.
        </p>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 0.9fr)',
          gap: 56, alignItems: 'start',
        }}>
          {/* LEFT — manifest */}
          <div>
            <AsciiRule label="// contents · ./starter-kit/" />
            <div style={{
              marginTop: 20,
              border: '0.5px solid rgba(255,255,255,0.10)',
              borderRadius: 4,
              background: 'rgba(255,255,255,0.025)',
              overflow: 'hidden',
            }}>
              {bullets.map(([file, desc], i) => (
                <div key={i} style={{
                  display: 'grid',
                  gridTemplateColumns: '24px 180px 1fr',
                  gap: 16,
                  padding: '18px 18px',
                  borderBottom: i < bullets.length - 1 ? '0.5px solid rgba(255,255,255,0.06)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <span style={{
                    color: '#ffde59', fontFamily: v2Mono,
                    fontSize: 13, fontWeight: 500,
                  }}>✓</span>
                  <span style={{
                    fontFamily: v2Mono, fontSize: 13,
                    color: '#04a8ea', letterSpacing: '0.02em',
                  }}>{file}</span>
                  <span style={{
                    fontFamily: v2Mono, fontSize: 13,
                    color: 'rgba(243,246,242,0.72)', lineHeight: 1.6,
                  }}>{desc}</span>
                </div>
              ))}
            </div>

            <div style={{
              marginTop: 28,
              fontFamily: v2Mono, fontSize: 11,
              letterSpacing: '0.08em', color: 'rgba(243,246,242,0.40)',
              lineHeight: 1.7,
            }}>
              // 1 PDF · 1 spreadsheet · 3 prompt files<br />
              // delivered to your inbox in seconds
            </div>
          </div>

          {/* RIGHT — opt-in card with terminal frame */}
          <aside style={{
            position: 'sticky', top: 96,
            background: 'rgba(255,222,89,0.04)',
            border: '0.5px solid rgba(255,222,89,0.30)',
            borderRadius: 4,
            padding: 28,
          }}>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              marginBottom: 18,
              paddingBottom: 14,
              borderBottom: '0.5px solid rgba(255,222,89,0.15)',
              fontFamily: v2Mono, fontSize: 10,
              letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'rgba(243,246,242,0.60)',
            }}>
              <span>POST /subscribe</span>
              <span style={{ color: '#ffde59' }}>FREE</span>
            </div>

            <div style={{
              fontFamily: v2Sans, fontSize: 22, fontWeight: 700,
              letterSpacing: '-0.02em', marginBottom: 8, lineHeight: 1.2,
            }}>The Prompt Mode Starter Kit</div>
            <div style={{
              fontFamily: v2Mono, fontSize: 12,
              color: 'rgba(243,246,242,0.55)',
              marginBottom: 22, lineHeight: 1.6,
            }}>// instant delivery</div>

            <label style={{
              display: 'block',
              fontFamily: v2Mono, fontSize: 10,
              letterSpacing: '0.12em', textTransform: 'uppercase',
              color: '#04a8ea', marginBottom: 8,
            }}>email_address</label>
            <input
              type="email"
              placeholder="_ your@email.com"
              style={{
                width: '100%',
                background: 'rgba(0,0,0,0.35)',
                border: '1px solid rgba(255,255,255,0.15)',
                borderRadius: 4, padding: '13px 14px',
                color: '#f3f6f2',
                fontFamily: v2Mono, fontSize: 14, outline: 'none',
                marginBottom: 12,
              }}
            />
            <button className="btn-yellow" style={{
              width: '100%', justifyContent: 'center',
              fontFamily: v2Mono, fontSize: 13,
              letterSpacing: '0.04em',
            }}>
              [ SEND ME THE STARTER KIT ] →
            </button>
            <div style={{
              marginTop: 14,
              fontFamily: v2Mono, fontSize: 10,
              color: 'rgba(243,246,242,0.30)', lineHeight: 1.6,
            }}>
              // no spam · unsubscribe anytime · educational use only
            </div>
          </aside>
        </div>

        <InlineDisclaimer />
      </main>
      <Footer onNavigate={onNavigate} style="terminal" />
    </div>
  );
}

// ── V2 About ───────────────────────────────────────────────────────────────
function V2About({ onNavigate }) {
  return (
    <div data-screen-label="V2 · About" className="variation-stage">
      <Nav page="about" onNavigate={onNavigate} style="terminal" />
      <Ticker />
      <main className="page" style={{ paddingTop: 64, maxWidth: 960 }}>

        {/* File header */}
        <div style={{
          fontFamily: v2Mono, fontSize: 11,
          letterSpacing: '0.10em',
          color: 'rgba(243,246,242,0.50)',
          marginBottom: 24,
          display: 'flex', gap: 18, flexWrap: 'wrap',
        }}>
          <span style={{ color: '#04a8ea' }}>// ABOUT.md</span>
          <span>last_updated: 2026-05-12</span>
          <span>author: @lifeinpromptmode</span>
          <span>license: honest</span>
        </div>

        <h1 style={{
          margin: '0 0 32px',
          fontFamily: v2Sans, fontWeight: 700,
          fontSize: 'clamp(40px, 5.8vw, 76px)',
          letterSpacing: '-0.035em', lineHeight: 0.95,
        }}>
          <span style={{ color: '#04a8ea' }}># </span>Real AI.<br />
          <span style={{ color: '#04a8ea' }}># </span>Real results.<br />
          <span style={{ color: '#04a8ea' }}># </span>
          <span style={{
            background: '#ffde59', color: '#151d1f',
            padding: '0 12px', borderRadius: 4,
          }}>No hype.</span>
        </h1>

        <p style={{
          margin: '0 0 64px',
          fontFamily: v2Mono, fontSize: 14,
          color: 'rgba(243,246,242,0.70)', lineHeight: 1.7,
          maxWidth: 640,
        }}>
          // this is what an honest AI income experiment looks like.
        </p>

        <AsciiRule label="## the mission" />

        <div style={{
          marginTop: 32,
          display: 'flex', flexDirection: 'column', gap: 28,
          maxWidth: 760,
        }}>
          {[
            `I'm testing whether regular people can make real money with AI —
             and I'm documenting every step publicly. No fake income screenshots.
             No affiliate deals disguised as advice. Just real attempts,
             real numbers, and honest verdicts.`,
            `The $100 AI Freelance Challenge is Season 1. Every video follows
             the same format: claim tested → method used → time spent → result →
             verdict. You see everything.`,
            `This isn't a guru channel. I don't have the answers yet.
             That's the point.`,
          ].map((p, i) => (
            <p key={i} style={{
              margin: 0,
              fontSize: 17, lineHeight: 1.7,
              color: 'rgba(243,246,242,0.80)',
              display: 'grid', gridTemplateColumns: '40px 1fr', gap: 16,
            }}>
              <span style={{
                fontFamily: v2Mono, fontSize: 12,
                color: 'rgba(4,168,234,0.65)',
                paddingTop: 6, letterSpacing: '0.04em',
              }}>P{i+1}</span>
              <span>{p}</span>
            </p>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 48 }}>
          <button className="btn-yellow" onClick={() => onNavigate('kit')}>
            [ get the free starter kit ]
          </button>
          <button className="btn-outline" style={{ fontFamily: v2Mono, fontSize: 13 }}>
            ▶ watch the challenge ↗
          </button>
        </div>

        {/* CHANNEL INFO */}
        <section style={{ marginTop: 96 }}>
          <AsciiRule label="## channel.info" />
          <div style={{
            marginTop: 24,
            border: '0.5px solid rgba(255,255,255,0.10)',
            borderRadius: 4,
            background: 'rgba(255,255,255,0.025)',
          }}>
            {[
              ['channel',     '@lifeinpromptmode'],
              ['format',      'weekly episode + field log'],
              ['season_01',   '$100 ai freelance challenge'],
              ['disclosure',  'no affiliate links · no sponsors'],
              ['contact',     'hello@promptmode.io'],
            ].map(([k, v], i, arr) => (
              <div key={k} style={{
                display: 'grid', gridTemplateColumns: '180px 1fr',
                padding: '14px 20px',
                borderBottom: i < arr.length - 1 ? '0.5px solid rgba(255,255,255,0.06)' : 'none',
                fontFamily: v2Mono, fontSize: 13,
              }}>
                <span style={{
                  color: 'rgba(243,246,242,0.45)',
                  letterSpacing: '0.06em',
                }}>{k}</span>
                <span style={{ color: '#f3f6f2' }}>{v}</span>
              </div>
            ))}
          </div>
        </section>

        <InlineDisclaimer />
      </main>
      <Footer onNavigate={onNavigate} style="terminal" />
    </div>
  );
}

// ── V2 Disclaimer ──────────────────────────────────────────────────────────
function V2Disclaimer({ onNavigate }) {
  const sections = [
    { h: 'not financial advice',
      p: `Everything published on promptmode.io and the associated YouTube
       channel is for educational and entertainment purposes only. Nothing here
       constitutes financial, legal, tax, investment, or professional advice.
       Consult a qualified professional before making decisions about your
       money or your business.` },
    { h: 'results vary',
      p: `The income reported in the $100 AI Freelance Challenge is one person's
       attempt, in a specific market, at a specific time. Your results will
       differ — often substantially. Most people who attempt to freelance with
       AI tools earn $0 in their first month. We document the $0 days as
       honestly as the paying ones.` },
    { h: 'no earnings guarantees',
      p: `We make no representations or guarantees about your ability to earn
       income using any AI tool, prompt, system, or technique discussed here.
       Specific dollar figures shown in episodes refer to specific past
       attempts and should not be interpreted as projections.` },
    { h: 'affiliate disclosure',
      p: `As of Season 01, promptmode.io contains no affiliate links and accepts
       no sponsorships. If this changes, all sponsored content will be clearly
       labeled and a current list of partners will be published here.` },
    { h: 'third-party tools',
      p: `Tools referenced — including Claude, ChatGPT, Gemini, and others —
       are owned by their respective providers. Their availability, pricing,
       and capabilities change without notice. Always check current terms of
       service before using any AI tool for paid work.` },
  ];
  return (
    <div data-screen-label="V2 · Disclaimer" className="variation-stage">
      <Nav page="disclaimer" onNavigate={onNavigate} style="terminal" />
      <Ticker />
      <main className="page" style={{ paddingTop: 64, maxWidth: 880 }}>

        <div style={{
          fontFamily: v2Mono, fontSize: 11,
          letterSpacing: '0.10em',
          color: 'rgba(243,246,242,0.50)',
          marginBottom: 24,
          display: 'flex', gap: 18, flexWrap: 'wrap',
        }}>
          <span style={{ color: '#04a8ea' }}>// DISCLAIMER.txt</span>
          <span>updated: 2026-05-12</span>
          <span>jurisdiction: united states</span>
        </div>

        <h1 style={{
          margin: '0 0 12px',
          fontFamily: v2Sans, fontWeight: 700,
          fontSize: 'clamp(36px, 4.4vw, 56px)',
          letterSpacing: '-0.03em', lineHeight: 1,
        }}>
          <span style={{ color: '#04a8ea' }}># </span>Disclaimer
        </h1>
        <p style={{
          margin: '0 0 56px',
          fontFamily: v2Mono, fontSize: 13,
          color: 'rgba(243,246,242,0.55)', lineHeight: 1.7,
        }}>
          // please read carefully. this applies to every page on promptmode.io
          and every episode on the channel.
        </p>

        <div style={{
          border: '0.5px solid rgba(255,255,255,0.10)',
          borderRadius: 4,
          background: 'rgba(255,255,255,0.02)',
        }}>
          {sections.map((s, i) => (
            <section key={i} style={{
              padding: '28px 28px',
              borderBottom: i < sections.length - 1 ? '0.5px solid rgba(255,255,255,0.06)' : 'none',
              display: 'grid',
              gridTemplateColumns: '60px 1fr',
              gap: 20,
            }}>
              <div style={{
                fontFamily: v2Mono, fontSize: 12,
                color: '#04a8ea', letterSpacing: '0.06em',
                paddingTop: 4,
              }}>§{String(i+1).padStart(2,'0')}</div>
              <div>
                <h2 style={{
                  margin: '0 0 12px',
                  fontFamily: v2Mono, fontSize: 14, fontWeight: 500,
                  letterSpacing: '0.08em', textTransform: 'uppercase',
                  color: '#f3f6f2',
                }}>{s.h}</h2>
                <p style={{
                  margin: 0,
                  fontFamily: v2Mono, fontSize: 13.5, lineHeight: 1.75,
                  color: 'rgba(243,246,242,0.72)',
                }}>{s.p}</p>
              </div>
            </section>
          ))}
        </div>

        <div style={{
          marginTop: 40,
          fontFamily: v2Mono, fontSize: 11,
          letterSpacing: '0.06em', color: 'rgba(243,246,242,0.45)',
          lineHeight: 1.7,
        }}>
          // questions? email hello@promptmode.io<br />
          // © 2026 BY MR ATOM LLC · promptmode.io
        </div>
      </main>
      <Footer onNavigate={onNavigate} style="terminal" />
    </div>
  );
}

Object.assign(window, { V2Home, V2Kit, V2About, V2Disclaimer });
