// src/v1.jsx
// V1 "Field Report" — editorial / documentary aesthetic.
// Restrained, type-led. Yellow only on the primary CTA. Cerulean for eyebrows.
// Stats laid out as a quiet typographic row (CV-style).

// ── V1 Home ────────────────────────────────────────────────────────────────
function V1Home({ onNavigate }) {
  return (
    <div data-screen-label="V1 · Home" className="variation-stage">
      <Nav page="home" onNavigate={onNavigate} />

      <main className="page" style={{ paddingTop: 96 }}>
        {/* HERO */}
        <section style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 0.85fr)',
          gap: 80,
          alignItems: 'start',
        }}>
          <div>
            <Eyebrow dot>Season 01 · The $100 AI Freelance Challenge</Eyebrow>
            <h1 style={{
              margin: '20px 0 24px',
              fontFamily: 'Space Grotesk, sans-serif',
              fontSize: 'clamp(36px, 4.6vw, 58px)',
              fontWeight: 700,
              letterSpacing: '-0.025em',
              lineHeight: 1.05,
              maxWidth: 720,
            }}>
              Can AI actually make you{' '}
              <span style={{
                background: 'linear-gradient(transparent 62%, #ffde59 62%, #ffde59 96%, transparent 96%)',
                color: '#f3f6f2',
                padding: '0 2px',
              }}>money</span>?
            </h1>
            <p style={{
              margin: '0 0 36px',
              fontSize: 18,
              lineHeight: 1.55,
              color: 'rgba(243,246,242,0.72)',
              maxWidth: 560,
            }}>
              I'm testing it publicly. Real attempts, real numbers,
              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">Watch the Challenge ↗</button>
            </div>
          </div>

          {/* Side panel — quiet "field log" card */}
          <aside style={{
            border: '0.5px solid rgba(255,255,255,0.10)',
            borderRadius: 12,
            padding: 24,
            background: 'rgba(255,255,255,0.02)',
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              paddingBottom: 14, marginBottom: 16,
              borderBottom: '0.5px solid rgba(255,255,255,0.08)',
            }}>
              <span style={{
                fontFamily: 'DM Mono, monospace', fontSize: 11,
                letterSpacing: '0.12em', textTransform: 'uppercase',
                color: 'rgba(243,246,242,0.55)',
                whiteSpace: 'nowrap',
              }}>Field log</span>
              <span className="badge-teal" style={{ whiteSpace: 'nowrap' }}><span className="live-dot" /> Live</span>
            </div>

            {[
              { day: 'DAY 14', t: 'Cold-pitched 12 small businesses with Claude', n: '$0' },
              { day: 'DAY 11', t: 'Built a faceless YouTube script generator', n: '$0' },
              { day: 'DAY 07', t: 'First Upwork proposal sent — AI resume helper', n: '$0' },
              { day: 'DAY 01', t: 'Set up tools, opened the spreadsheet', n: '$0' },
            ].map((row, i) => (
              <div key={i} style={{
                display: 'grid',
                gridTemplateColumns: '64px 1fr auto',
                gap: 14, alignItems: 'baseline',
                padding: '10px 0',
                borderBottom: i < 3 ? '0.5px solid rgba(255,255,255,0.05)' : 'none',
              }}>
                <span style={{
                  fontFamily: 'DM Mono, monospace', fontSize: 10,
                  letterSpacing: '0.08em', color: 'rgba(243,246,242,0.40)',
                }}>{row.day}</span>
                <span style={{ fontSize: 14, color: 'rgba(243,246,242,0.85)', lineHeight: 1.4 }}>
                  {row.t}
                </span>
                <span style={{
                  fontFamily: 'DM Mono, monospace', fontSize: 13,
                  color: 'rgba(243,246,242,0.65)',
                }}>{row.n}</span>
              </div>
            ))}
          </aside>
        </section>

        {/* STATS — quiet CV-style typographic row */}
        <section style={{
          marginTop: 96,
          paddingTop: 32, paddingBottom: 32,
          borderTop: '0.5px solid rgba(255,255,255,0.08)',
          borderBottom: '0.5px solid rgba(255,255,255,0.08)',
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 48,
        }}>
          {[
            { hd: '$0 → $?', sub: 'Challenge goal: $100' },
            { hd: 'Live', sub: 'Season 01 in progress' },
            { hd: '0 hype', sub: 'Real results only' },
          ].map((s, i) => (
            <div key={i}>
              <div style={{
                fontFamily: 'Space Grotesk, sans-serif',
                fontSize: 36, fontWeight: 600,
                letterSpacing: '-0.025em',
                lineHeight: 1.05,
                color: '#f3f6f2',
              }}>{s.hd}</div>
              <div style={{
                marginTop: 10,
                fontFamily: 'DM Mono, monospace', fontSize: 11,
                letterSpacing: '0.06em', textTransform: 'uppercase',
                color: 'rgba(243,246,242,0.45)',
              }}>{s.sub}</div>
            </div>
          ))}
        </section>

        {/* WHAT THIS IS */}
        <section style={{
          marginTop: 96,
          display: 'grid',
          gridTemplateColumns: '220px 1fr',
          gap: 64,
        }}>
          <div>
            <Eyebrow>What this is</Eyebrow>
          </div>
          <div>
            <h2 style={{
              margin: '0 0 20px',
              fontFamily: 'Space Grotesk, sans-serif',
              fontSize: 32, fontWeight: 600,
              letterSpacing: '-0.02em', lineHeight: 1.15,
              maxWidth: 640,
            }}>
              Not a course. An experiment.
            </h2>
            <p style={{
              fontSize: 17, lineHeight: 1.6,
              color: 'rgba(243,246,242,0.72)',
              maxWidth: 640, margin: 0,
            }}>
              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 */}
        <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={{
              background: 'rgba(255,255,255,0.04)',
              border: '0.5px solid rgba(255,255,255,0.09)',
              borderRadius: 8,
              padding: 22,
            }}>
              <div style={{
                fontFamily: 'DM Mono, monospace', fontSize: 11,
                letterSpacing: '0.12em', color: 'rgba(4,168,234,0.85)',
                marginBottom: 28,
              }}>{c.n}</div>
              <div style={{
                fontFamily: 'Space Grotesk, sans-serif',
                fontSize: 16, fontWeight: 600,
                color: '#f3f6f2', marginBottom: 8,
                letterSpacing: '-0.01em',
              }}>{c.t}</div>
              <div style={{
                fontSize: 13, lineHeight: 1.55,
                color: 'rgba(243,246,242,0.45)',
              }}>{c.b}</div>
            </article>
          ))}
        </section>

        {/* LATEST EPISODE */}
        <section style={{ marginTop: 96 }}>
          <div style={{
            display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
            marginBottom: 20,
          }}>
            <Eyebrow>Latest episode</Eyebrow>
            <a href="#" onClick={(e)=>e.preventDefault()} style={{ fontSize: 13 }}>
              Watch on YouTube ↗
            </a>
          </div>
          <Placeholder
            label="◉  YouTube latest-video embed  ·  16:9"
            ratio="16/9"
            style={{ minHeight: 360 }}
          />
        </section>

        {/* OPT-IN */}
        <section style={{
          marginTop: 96,
          padding: '56px 56px',
          border: '0.5px solid rgba(255,255,255,0.10)',
          borderRadius: 12,
          background: 'radial-gradient(60% 120% at 0% 0%, rgba(4,168,234,0.06), transparent 60%)',
        }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 0.85fr) minmax(0, 1fr)',
            gap: 56, alignItems: 'center',
          }}>
            <div>
              <Eyebrow>Free starter kit</Eyebrow>
              <h2 style={{
                margin: '16px 0 12px',
                fontFamily: 'Space Grotesk, sans-serif',
                fontSize: 30, fontWeight: 600,
                letterSpacing: '-0.02em', lineHeight: 1.15,
              }}>Get the exact setup I'm using</h2>
              <p style={{
                margin: 0, fontSize: 16,
                color: 'rgba(243,246,242,0.65)', lineHeight: 1.6,
              }}>
                The AI tools, prompts, and system — free. Start in 30 minutes.
              </p>
            </div>
            <div>
              <EmailForm cta="Send it →" />
            </div>
          </div>
        </section>

        <InlineDisclaimer />
      </main>

      <Footer onNavigate={onNavigate} />
    </div>
  );
}

// ── V1 Free Starter Kit ───────────────────────────────────────────────────
function V1Kit({ onNavigate }) {
  const bullets = [
    'The AI tools and setup I\'m using in my $100 freelance challenge',
    'Ready-to-use prompts that work in Claude, ChatGPT, and Gemini',
    'A step-by-step system to build your first AI workflow in under an hour',
    'Full 14-module workbook — go deeper when you\'re ready',
  ];
  return (
    <div data-screen-label="V1 · Free Starter Kit" className="variation-stage">
      <Nav page="kit" onNavigate={onNavigate} />
      <main className="page" style={{ paddingTop: 80, maxWidth: 1080 }}>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) 380px',
          gap: 72, alignItems: 'start',
        }}>
          {/* LEFT — pitch */}
          <div>
            <Eyebrow>Free — no credit card</Eyebrow>
            <h1 style={{
              margin: '20px 0 24px',
              fontFamily: 'Space Grotesk, sans-serif',
              fontSize: 'clamp(32px, 4vw, 48px)',
              fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.08,
            }}>
              Get the exact AI setup I'm using to try to make{' '}
              <span style={{ color: '#ffde59' }}>$100</span> freelancing.
            </h1>
            <p style={{
              margin: '0 0 40px',
              fontSize: 17, lineHeight: 1.6,
              color: 'rgba(243,246,242,0.72)', maxWidth: 560,
            }}>
              Free quick-start guide. Set up in 30 minutes. Full 14-module
              workbook included if you want to go deeper.
            </p>

            <div style={{
              fontFamily: 'DM Mono, monospace', fontSize: 11,
              letterSpacing: '0.12em', textTransform: 'uppercase',
              color: 'rgba(4,168,234,0.85)', marginBottom: 18,
            }}>What's included</div>

            <ul style={{
              listStyle: 'none', padding: 0, margin: 0,
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              {bullets.map((b, i) => (
                <li key={i} style={{
                  display: 'grid',
                  gridTemplateColumns: '22px 1fr',
                  gap: 14, alignItems: 'baseline',
                  padding: '4px 0',
                }}>
                  <span style={{
                    color: '#04a8ea', fontFamily: 'DM Mono, monospace',
                    fontWeight: 500, lineHeight: 1.5,
                  }}>✓</span>
                  <span style={{
                    fontSize: 15.5, lineHeight: 1.55,
                    color: 'rgba(243,246,242,0.85)',
                  }}>{b}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* RIGHT — opt-in card */}
          <aside style={{
            position: 'sticky', top: 96,
            border: '0.5px solid rgba(255,255,255,0.10)',
            borderRadius: 12,
            padding: 28,
            background: 'rgba(255,255,255,0.03)',
          }}>
            <span className="badge-yellow" style={{ marginBottom: 18 }}>Free download</span>
            <div style={{
              fontFamily: 'Space Grotesk, sans-serif',
              fontSize: 20, fontWeight: 600,
              letterSpacing: '-0.015em', lineHeight: 1.25,
              marginTop: 18, marginBottom: 6,
            }}>The Prompt Mode Starter Kit</div>
            <div style={{
              fontSize: 13, color: 'rgba(243,246,242,0.55)',
              marginBottom: 22, lineHeight: 1.55,
            }}>
              One PDF. One spreadsheet. Three prompt files. Sent to your inbox in seconds.
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <label style={{
                fontFamily: 'DM Mono, monospace', fontSize: 10,
                letterSpacing: '0.12em', textTransform: 'uppercase',
                color: '#04a8ea',
              }}>Email</label>
              <input
                type="email"
                placeholder="your@email.com"
                style={{
                  background: 'rgba(255,255,255,0.05)',
                  border: '1px solid rgba(255,255,255,0.15)',
                  borderRadius: 6, padding: '13px 16px',
                  color: '#f3f6f2', fontSize: 15,
                  fontFamily: 'Space Grotesk, sans-serif', outline: 'none',
                }}
              />
              <button className="btn-yellow" style={{ marginTop: 6, justifyContent: 'center' }}>
                Send Me the Free Starter Kit →
              </button>
              <div style={{
                marginTop: 4,
                fontFamily: 'DM Mono, monospace', fontSize: 10,
                letterSpacing: '0.04em',
                color: 'rgba(243,246,242,0.30)', lineHeight: 1.55,
              }}>
                No spam. Unsubscribe anytime. Educational purposes only.
              </div>
            </div>
          </aside>
        </div>

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

// ── V1 About ───────────────────────────────────────────────────────────────
function V1About({ onNavigate }) {
  return (
    <div data-screen-label="V1 · About" className="variation-stage">
      <Nav page="about" onNavigate={onNavigate} />
      <main className="page" style={{ paddingTop: 96, maxWidth: 960 }}>
        <Eyebrow>About this channel</Eyebrow>
        <h1 style={{
          margin: '20px 0 22px',
          fontFamily: 'Space Grotesk, sans-serif',
          fontSize: 'clamp(36px, 4.4vw, 56px)',
          fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.05,
        }}>
          Real AI.<br />
          Real results.<br />
          <span style={{ color: 'rgba(243,246,242,0.45)' }}>No hype.</span>
        </h1>
        <p style={{
          margin: '0 0 64px',
          fontSize: 19, lineHeight: 1.5,
          color: 'rgba(243,246,242,0.72)', maxWidth: 640,
        }}>
          This is what an honest AI income experiment looks like.
        </p>

        <section style={{
          display: 'grid',
          gridTemplateColumns: '220px 1fr',
          gap: 64,
          paddingTop: 40,
          borderTop: '0.5px solid rgba(255,255,255,0.08)',
        }}>
          <div>
            <Eyebrow>The mission</Eyebrow>
          </div>
          <div style={{
            display: 'flex', flexDirection: 'column', gap: 24,
            fontSize: 17, lineHeight: 1.65,
            color: 'rgba(243,246,242,0.78)', maxWidth: 640,
          }}>
            <p style={{ margin: 0 }}>
              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.
            </p>
            <p style={{ margin: 0 }}>
              The <em style={{ fontStyle: 'normal', color: '#f3f6f2' }}>
              $100 AI Freelance Challenge</em> is Season&nbsp;1. Every video
              follows the same format: claim tested → method used → time spent →
              result → verdict. You see everything.
            </p>
            <p style={{ margin: 0 }}>
              This isn't a guru channel. I don't have the answers yet.
              That's the point.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 16 }}>
              <button className="btn-yellow" onClick={() => onNavigate('kit')}>
                Get the Free Starter Kit
              </button>
              <button className="btn-outline">Watch the Challenge ↗</button>
            </div>
          </div>
        </section>

        {/* AT A GLANCE */}
        <section style={{
          marginTop: 96,
          display: 'grid', gridTemplateColumns: '220px 1fr', gap: 64,
        }}>
          <div><Eyebrow>At a glance</Eyebrow></div>
          <dl style={{
            margin: 0, display: 'grid',
            gridTemplateColumns: '1fr 1fr', gap: '20px 48px',
            maxWidth: 640,
          }}>
            {[
              ['Channel', '@lifeinpromptmode'],
              ['Format',  'Weekly episode + field log'],
              ['Season 01', '$100 AI Freelance Challenge'],
              ['Disclosure', 'No affiliate links. No sponsors.'],
            ].map(([k, v]) => (
              <div key={k}>
                <div style={{
                  fontFamily: 'DM Mono, monospace', fontSize: 10,
                  letterSpacing: '0.12em', textTransform: 'uppercase',
                  color: 'rgba(243,246,242,0.40)', marginBottom: 6,
                }}>{k}</div>
                <div style={{ fontSize: 16, color: '#f3f6f2' }}>{v}</div>
              </div>
            ))}
          </dl>
        </section>

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

// ── V1 Disclaimer ─────────────────────────────────────────────────────────
function V1Disclaimer({ 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="V1 · Disclaimer" className="variation-stage">
      <Nav page="disclaimer" onNavigate={onNavigate} />
      <main className="page" style={{ paddingTop: 80, maxWidth: 820 }}>
        <Eyebrow>Legal</Eyebrow>
        <h1 style={{
          margin: '20px 0 18px',
          fontFamily: 'Space Grotesk, sans-serif',
          fontSize: 'clamp(32px, 3.6vw, 44px)',
          fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.1,
        }}>Disclaimer</h1>
        <div style={{
          fontFamily: 'DM Mono, monospace', fontSize: 11,
          letterSpacing: '0.08em', textTransform: 'uppercase',
          color: 'rgba(243,246,242,0.40)', marginBottom: 56,
        }}>Last updated · 12 May 2026</div>

        <div style={{
          display: 'flex', flexDirection: 'column', gap: 40,
        }}>
          {sections.map((s, i) => (
            <section key={i} style={{
              display: 'grid',
              gridTemplateColumns: '60px 1fr',
              gap: 28,
              paddingBottom: i === sections.length - 1 ? 0 : 40,
              borderBottom: i === sections.length - 1
                ? 'none' : '0.5px solid rgba(255,255,255,0.06)',
            }}>
              <div style={{
                fontFamily: 'DM Mono, monospace', fontSize: 11,
                letterSpacing: '0.12em', color: '#04a8ea',
                paddingTop: 4,
              }}>{String(i+1).padStart(2,'0')}</div>
              <div>
                <h2 style={{
                  margin: '0 0 12px',
                  fontFamily: 'Space Grotesk, sans-serif',
                  fontSize: 20, fontWeight: 600,
                  letterSpacing: '-0.01em', color: '#f3f6f2',
                }}>{s.h}</h2>
                <p style={{
                  margin: 0, fontSize: 15.5, lineHeight: 1.7,
                  color: 'rgba(243,246,242,0.65)',
                }}>{s.p}</p>
              </div>
            </section>
          ))}
        </div>

        <div style={{
          marginTop: 56, paddingTop: 24,
          borderTop: '0.5px solid rgba(255,255,255,0.08)',
          fontFamily: 'DM Mono, monospace', fontSize: 11,
          letterSpacing: '0.04em',
          color: 'rgba(243,246,242,0.50)', lineHeight: 1.7,
        }}>
          Questions about this disclaimer? Email hello@promptmode.io.<br />
          © 2026 BY MR ATOM LLC · promptmode.io
        </div>
      </main>
      <Footer onNavigate={onNavigate} />
    </div>
  );
}

Object.assign(window, { V1Home, V1Kit, V1About, V1Disclaimer });
