/* Pages: Login, Welcome, Audit (pre/post), Lesson sequence, Comparison, Bonus */

const { useState: uS, useEffect: uE } = React;

// ========== LOGIN ==========
const LoginPage = ({ onLogin }) => {
  const [email, setEmail] = uS("");
  const [password, setPassword] = uS("");
  const [remember, setRemember] = uS(true);
  const submit = (e) => { e.preventDefault(); onLogin(); };
  return (
    <div className="login-wrap">
      <aside className="login-left">
        <div className="login-mast">
          <LogoLockup color="var(--cream)" />
        </div>
        <div style={{ marginTop: 28, fontFamily: 'var(--display)', fontStyle: 'italic', fontSize: 15, color: 'rgba(255,255,255,0.85)' }}>
          the setup most women skipped -
        </div>
        <div className="hero-type">
          <span className="line1">AI <em>Start</em> <br />Here<span className="dot">.</span></span>
          <span className="sub">Set up ChatGPT + Claude properly. Once. Watch everything change.</span>
        </div>
        <img src="images/submark-peri.png" alt="" className="submark-bg" style={{ animation: 'submark-spin 80s linear infinite' }} />
        <div className="hero-foot">
          <JessClarkMark height={14} color="var(--cream)" />
        </div>
      </aside>

      <section className="login-right">
        <form className="login-card" onSubmit={submit}>
          <span className="eyebrow">Sign in to continue</span>
          <div className="form-row">
            <label className="form-label" htmlFor="email">Email</label>
            <input id="email" type="email" className="form-input" value={email} onChange={e => setEmail(e.target.value)} placeholder="you@yourbusiness.com" required />
          </div>
          <div className="form-row">
            <label className="form-label" htmlFor="pw">Password</label>
            <input id="pw" type="password" className="form-input" value={password} onChange={e => setPassword(e.target.value)} placeholder="••••••••" required />
          </div>
          <div className="form-meta">
            <label className="check-row">
              <input type="checkbox" checked={remember} onChange={e => setRemember(e.target.checked)} />
              <span className="check-box-mini">
                <svg viewBox="0 0 24 24" fill="none" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" stroke="currentColor"><polyline points="4 12 10 18 20 6" /></svg>
              </span>
              <span>Keep me signed in</span>
            </label>
            <a href="#" onClick={e => e.preventDefault()}>Forgot password?</a>
          </div>
          <Btn full>Sign in <span className="arrow">→</span></Btn>
          <div className="signup-line">New here? <a href="#" onClick={(e) => { e.preventDefault(); onLogin(); }}>Create your account</a></div>
        </form>
      </section>
    </div>
  );
};

// ========== WELCOME (explainer video dominates) ==========
const WelcomePage = ({ onNext, onExit }) => (
  <div className="shell">
    <Masthead onExit={onExit} />
    <ProgressBar progress={5} />
    <main className="step-main lesson-main" style={{ background: 'var(--cream)' }}>
      <div className="lesson-head" style={{ justifyContent: 'center', textAlign: 'center' }}>
        <div className="lesson-head-main" style={{ textAlign: 'center', maxWidth: 1000, margin: '0 auto' }}>
          <span className="eyebrow" style={{ display: 'inline-block' }}>Welcome · Press play</span>
          <h1 className="welcome-h1" style={{ textAlign: 'center' }}><em style={{ fontStyle: 'italic' }}>You're in.</em> <span className="accent">And I'm so glad you're here.</span></h1>
        </div>
      </div>

      <div className="welcome-split">
        <Phone videoSrc="videos/welcome.mp4" captionsSrc="captions/welcome.vtt" fallbackTag="Press play" fallbackTitle="Welcome to AI Start Here" />
        <div className="welcome-cta-side">
          <p className="welcome-body-sub">
            Two minutes from me before we start.
          </p>
          <p className="welcome-body-sub">
            Then we'll run a quick audit, set up both platforms properly, and you'll be using AI like someone who actually knows what they're doing.
          </p>
          <span className="hand" style={{ transform: 'rotate(-2deg)' }}>this is not a course you watch.</span>
          <Btn onClick={onNext}>Start the audit <span className="arrow">→</span></Btn>
        </div>
      </div>
    </main>
  </div>
);

// ========== AUDIT QUESTIONS (Jess's 8) ==========
const AUDIT_Q = [
  { id: 'q_diff',      label: 'I know the difference between ChatGPT and Claude and when to use each one' },
  { id: 'q_context',   label: 'My AI is set up with context about me and my business' },
  { id: 'q_voice',     label: 'My AI outputs sound like me without heavy editing' },
  { id: 'q_projects',  label: "I understand what Projects are and I'm using them" },
  { id: 'q_models',    label: 'I know which AI model to use for different tasks' },
  { id: 'q_beyond',    label: 'I use AI for more than just writing captions' },
  { id: 'q_skills',    label: 'I know what Skills are and how to use them' },
  { id: 'q_instr',     label: 'I have custom instructions and memory set up in ChatGPT' },
  { id: 'q_time',      label: 'AI saves me meaningful time in my business every week' }
];

const scoreBand = (total) => {
  if (total <= 17) return 'band1';
  if (total <= 28) return 'band2';
  if (total <= 39) return 'band3';
  return 'band4';
};

const PRE_COPY = {
  band1: { h: "You're in exactly the right place", p: "You haven't set this up yet - and that's completely normal. Most women haven't. By the time you finish this, your score is going to look very different." },
  band2: { h: "You've started but you're missing the foundation", p: "You're using AI but you're getting maybe 30% of what it can do. The setup is what unlocks the rest. Let's fix that right now." },
  band3: { h: "You're closer than you think", p: "Good foundation - but there are gaps. Work through this and you'll plug them fast. Pay particular attention to the Projects and context sections." },
  band4: { h: "You're already ahead", p: "Honestly impressive. Work through this anyway - I promise there's at least one thing in here that'll make you go 'oh, I didn't know that.'" }
};
const POST_COPY = {
  band1: { h: "Look at that.", p: "You came in not knowing where to start. And you did it anyway. Both platforms are configured. You know what Projects are. You know which model to use and why. The foundation is right. Now the question is what you build on top of it." },
  band2: { h: "You came in with the bones. You're leaving with the whole thing.", p: "The gaps you felt - the generic outputs, the starting from scratch, the usage limits - you now know exactly why they were happening. And you've fixed them. The difference from here isn't going to be subtle." },
  band3: { h: "You came in close. You're leaving properly done.", p: 'The gaps are filled. The platforms are configured. You know the difference between a chat and a Project, between Sonnet and Opus, between a custom instruction and a memory. That knowledge compounds.' },
  band4: { h: "Told you there'd be at least one thing.", p: "You came in ahead. You're leaving with the gaps closed - and probably a few 'oh, I didn't realise I could do that' moments along the way." }
};

const AuditPage = ({ progress, answers, setAnswers, onPrev, onNext, onExit, complete, setComplete, isFinal, previousTotal, currentKey }) => {
  const total = AUDIT_Q.reduce((s, q) => s + (answers[q.id] ?? 0), 0);
  const hasAll = AUDIT_Q.every(q => Number.isFinite(answers[q.id]));
  const band = scoreBand(total);
  const copy = (isFinal ? POST_COPY : PRE_COPY)[band];
  const kicker = isFinal ? "Section 06 of 06 · \"After\" Audit" : "Section 01 of 06 · \"Before\" Audit";
  const heading = isFinal ? "Let's see how far you've come." : "Let's see where you're starting from.";
  const sub = isFinal ? "Answer the same questions. See your score move." : "Rate yourself honestly. There's no wrong answer, this is just your starting line.";

  return (
    <div className="shell">
      <Masthead onExit={onExit} />
      <ProgressBar progress={progress} />
      <main className="step-main" style={{ padding: '48px 40px' }}>
        <div className="audit-intro">
          <span className="eyebrow">{kicker}</span>
          <h1>{heading}</h1>
          <p>{sub}</p>
          <p className="audit-instructions">
            Move the slider to where you are right now. Once you've completed the audit, your rating will appear before you move to the next section.
          </p>
          <p className="audit-note">
            <strong>Note:</strong> Always hit "Mark this step complete" to move to the next step.
          </p>
        </div>

        <div className="audit-list">
          {AUDIT_Q.map((q, i) => {
            const v = answers[q.id] ?? 3;
            const pct = ((v - 1) / 4) * 100;
            return (
              <div className="audit-card" key={q.id}>
                <p className="audit-q">{q.label}</p>
                <p className="audit-sub">1 = not at all · 5 = absolutely</p>
                <div className="slider-row">
                  <input type="range" min="1" max="5" step="1" value={v} className="brand-slider"
                    style={{ '--pct': pct + '%' }}
                    onChange={e => setAnswers({ ...answers, [q.id]: parseInt(e.target.value, 10) })} />
                  <div className="slider-scale">
                    <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
                  </div>
                  <span className="slider-value">{v} / 5</span>
                </div>
              </div>
            );
          })}
        </div>

        {hasAll && (
          <div className="audit-summary">
            <span className="eyebrow">{isFinal ? 'Your after score' : 'Your before score'}</span>
            <h2>
              {isFinal && Number.isFinite(previousTotal)
                ? <>Before: {previousTotal}<span className="accent"> → </span>After: {total}</>
                : <>You scored <span className="accent">{total} / 45</span></>}
            </h2>
            <p style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontSize: 22, marginBottom: 14, color: 'var(--cream)' }}>{copy.h}</p>
            <p>{copy.p}</p>
            <img src="images/submark-peri.png" alt="" className="submark-bg submark-img" />
          </div>
        )}

        {isFinal && hasAll && (
          <div style={{ maxWidth: 940, margin: '32px auto 0', padding: '32px 36px', background: 'var(--burgundy)', color: 'var(--cream)', borderRadius: 18 }}>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'var(--periwinkle)', marginBottom: 12 }}>Two next steps</div>
            <h3 style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontWeight: 400, fontSize: 30, lineHeight: 1.15, color: 'var(--cream)', margin: '0 0 8px' }}>Pick your direction.</h3>
            <p style={{ fontFamily: 'var(--sans)', fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)', margin: '0 0 20px', maxWidth: 580 }}>
              You built the foundation. These are the two systems that sit on top.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <button className="btn" style={{ background: 'var(--cream)', color: 'var(--burgundy)', justifyContent: 'space-between' }}>
                <span>Make AI sound like me <span style={{ opacity: 0.6, marginLeft: 6, fontSize: 12 }}>· Brandprompt</span></span>
                <span className="arrow">→</span>
              </button>
              <button className="btn" style={{ background: 'transparent', color: 'var(--cream)', border: '1.5px solid rgba(255,255,255,0.4)', justifyContent: 'space-between' }}>
                <span>Build the full system <span style={{ opacity: 0.7, marginLeft: 6, fontSize: 12 }}>· Cash Stack</span></span>
                <span className="arrow">→</span>
              </button>
            </div>
            <p style={{ fontFamily: 'var(--sans)', fontSize: 12, lineHeight: 1.5, color: 'rgba(255,255,255,0.7)', margin: '14px 0 0' }}>
              AI Start Here member pricing: <strong style={{ color: 'var(--cream)' }}>$197</strong> Brandprompt · <strong style={{ color: 'var(--cream)' }}>$297</strong> Cash Stack.
            </p>
          </div>
        )}
      </main>
      <StepFooter
        onPrev={onPrev} onNext={onNext}
        nextLabel={isFinal ? "What's next for me" : "Start the setup"}
        canNext={complete} complete={complete} setComplete={setComplete}
      />
    </div>
  );
};

// ========== SETUP LESSONS (multi-screen with DOMINANT video) ==========

const CHATGPT_LESSON = {
  number: "02",
  kicker: "Section 02 of 06 · ChatGPT",
  title: "ChatGPT setup,",
  titleAccent: "properly",
  sub: "Eight short screens. Each one has its own video walk-through, Jess's voice memo, and exactly what to type in. Follow along in a second tab.",
  checklist: [
    "Custom instructions filled in (both boxes)",
    "Memory turned on + 3 memories added",
    "Apps connected (Canva, Notion, Gmail, Drive)",
    "First Project created with instructions",
    "Models understood - 5.3, o3, Thinking"
  ],
  screens: [
    {
      id: '2.1', video: 'videos/2.1.mp4', audio: 'audio/2.1.mp3', label: '2.1 · Custom Instructions',
      title: "Set the Standard for Every Response",
      h2: "This is where ChatGPT stops being generic and starts working for you.",
      body: [
        "Most people skip this, or fill it out vaguely, and then wonder why their outputs feel average.",
        "Custom Instructions are your baseline. They tell ChatGPT who you are and how you want it to think when responding to you.",
        "Use the prompt below to build this properly.",
        "Let ChatGPT guide you, refine your answers, and generate a final version you can paste directly into your settings.",
        "Once this is done, every response you get moving forward will be clearer, more relevant, and far more usable."
      ],
      audioDuration: "1:00",
      typeboxLabel: "Prompt",
      typebox: `You are going to help me create a high-performing Custom Instructions setup for ChatGPT.

Your job is to:
– extract the most important information about me, my business, and how I want ChatGPT to respond
– keep everything concise, clear, and useful
– avoid fluff, repetition, or generic language
– ensure the final output fits within ChatGPT's Custom Instructions limits

We will do this step-by-step.

IMPORTANT RULES:
– Ask me ONE question at a time
– Do NOT move on until I've answered
– If my answer is vague, ask a follow-up to clarify
– Keep me from over-explaining
– Prioritise clarity over length

STRUCTURE:
You will guide me through these sections:
1. Who I am + what I do
2. Who I help
3. What I want help with (content, business, life, etc.)
4. My tone of voice
5. How I like responses structured
6. What to avoid

As we go:
– Summarise my answers into short, usable statements
– Refine my wording so it's clear and specific

At the end:
– Combine everything into a clean, well-structured Custom Instructions response
– Make it sound like me, not like AI
– Keep it within the character limit
– Format it so I can copy and paste directly into ChatGPT settings

Start by asking the first question.

Before generating the final Custom Instructions:
– Remove anything generic or obvious
– Replace vague phrases with specific ones
– Make the instructions practical and actionable
– Ensure ChatGPT understands how to think, not just what to do

Final output should feel like:
"This AI actually understands how I think and work"`
    },
    {
      id: '2.2', video: 'videos/2.2.mp4', audio: 'audio/2.2.mp3', label: '2.2 · About You',
      title: "Give ChatGPT Context",
      h2: "The better it understands you, the better it performs.",
      body: [
        "This section looks simple, but it's one of the most underused parts of your setup.",
        "You're not adding personality here. You're giving context.",
        "What you do. How you think. What you care about. How you use AI.",
        "Use the prompt below to build a clear, structured version of this."
      ],
      audioDuration: "0:50",
      typeboxLabel: "Prompt",
      typebox: `You are going to help me define how ChatGPT should respond to me so that the outputs are actually useful, structured, and aligned with how I think.

Your job is to:
– extract how I like information delivered
– understand how I think and make decisions
– define clear instructions for tone, structure, and output quality
– remove anything vague or generic
– ensure the final result is clear, specific, and practical

IMPORTANT RULES:
– Ask me ONE question at a time
– Do NOT move on until I've answered
– If my answer is vague, ask a follow-up
– Keep me from over-explaining
– Push me toward clarity and specificity

STRUCTURE:
You will guide me through:
1. How I like information delivered (short vs detailed, direct vs explanatory)
2. How I make decisions (fast, analytical, big-picture, step-by-step)
3. How I want responses structured (lists, steps, summaries, examples)
4. What frustrates me in AI responses
5. What a "great response" looks like to me
6. What to avoid completely

As we go:
– Translate my answers into clear, actionable instructions
– Remove generic phrases like "be helpful" or "be engaging"
– Replace them with specific guidance

At the end:
– Combine everything into a clean Custom Instructions response
– Make it specific enough to improve output quality immediately
– Keep it within the character limit
– Format it so I can paste directly into ChatGPT settings

Start by asking the first question.

Before generating the final version:
– Remove anything generic or obvious
– Prioritise clarity over politeness
– Ensure responses are practical, not just informative
– Optimise for usefulness, not length

The final result should feel like:
"ChatGPT now responds in a way that actually works for me"

FINAL STEP:
When generating the final Custom Instructions output:
– You MUST use the full 1500-word limit
– Do NOT go under or over
– Do NOT pad with fluff or repetition
– Every sentence must add new, valuable instruction
– Prioritise clarity, specificity, and usefulness over sounding "nice"

Before finalising:
– Check for repetition and remove it
– Tighten any vague phrasing
– Replace generic language with specific direction

The final result should feel dense, intentional, and immediately useful, not stretched or generic.

Return ONLY the final 1500-word Custom Instructions text with no explanation.`
    },
    {
      id: '2.3', video: 'videos/2.3.mp4', audio: 'audio/2.3.mp3', label: '2.3 · Memory',
      title: "Stop Repeating Yourself",
      h2: "Store what matters so ChatGPT remembers it.",
      body: [
        "Memory allows ChatGPT to retain important context across conversations, but it's not where you dump everything.",
        "Used well, it reduces friction. Used poorly, it creates noise.",
        "You don't manually \"fill\" memory. You guide it by telling ChatGPT what to remember.",
        "Focus on:",
        ["who you are", "who you help", "how you like responses", "how you think"],
        "If you don't want to repeat it every time, it belongs in memory.",
        "This doesn't replace good prompts or systems, it just means ChatGPT doesn't start from zero."
      ],
      audioDuration: "0:45",
      typebox: null
    },
    {
      id: '2.4', video: 'videos/2.4.mp4', audio: 'audio/2.4.mp3', label: '2.4 · Apps',
      title: "Connect With Intention",
      h2: "Access your tools, without losing control of your data.",
      body: [
        "Apps and connections allow ChatGPT to work inside your ecosystem, pulling from your Drive, emails, notes, and more.",
        "This is powerful, but it also requires awareness.",
        "You're not connecting everything just because you can. You're connecting what actually improves your workflow.",
        "Start simple. Keep it clean.",
        "If you're working with sensitive data, client information, financials, private conversations, be selective about what you connect and how you use it.",
        "AI is only as useful as the environment you give it access to."
      ],
      audioDuration: "0:50",
      typebox: null
    },
    {
      id: '2.5', video: 'videos/2.5.mp4', audio: 'audio/2.5.mp3', label: '2.5 · Projects',
      title: "Stop Using ChatGPT Like a Chat Box",
      h2: "This is where structure, context, and consistency come together.",
      body: [
        "Random chats create random results.",
        "Projects give you a system.",
        "Think of a project like a folder, everything related to one area of your business lives inside it.",
        "Instead of starting from scratch every time, you're working within a structured environment where:",
        ["your chats are organised", "your files are accessible", "your context is shared"],
        "This is how ChatGPT starts to feel consistent.",
        "If you're serious about using AI in your business, this is how you should be working."
      ],
      audioDuration: "1:00",
      typebox: null
    },
    {
      id: '2.6', video: 'videos/2.6.mp4', audio: 'audio/2.6.mp3', label: '2.6 · GPTs',
      title: "Turn Repetition Into Systems",
      h2: "Build once. Use consistently.",
      body: [
        "Prompts rely on you getting it right every time.",
        "GPTs remove that pressure.",
        "A GPT is a pre-built system that:",
        ["asks the right questions", "gathers the right context", "and delivers a structured output"],
        "This is where strategy gets embedded into your workflow.",
        "If you're doing the same task repeatedly, captions, emails, hooks, content, it should not live as a prompt.",
        "It should live as a GPT."
      ],
      audioDuration: "0:45",
      typebox: null
    },
    {
      id: '2.7', video: 'videos/2.7.mp4', audio: 'audio/2.7.mp3', label: '2.7 · AI Agents',
      title: "This Changes Execution, Not Strategy",
      h2: "AI can now take action. That doesn't mean it knows what to do.",
      body: [
        "Agent Mode allows ChatGPT to:",
        ["navigate websites", "complete tasks", "and take action on your behalf"],
        "It can research, build, organise, and execute, not just respond.",
        "But this doesn't fix your AI.",
        "It amplifies it.",
        "If your setup is weak, your outputs will still be generic, just faster.",
        "If your context is strong, this is where things become powerful.",
        "Think of it like this:",
        "AI can now do the work.",
        "Your system still decides what that work should be."
      ],
      audioDuration: "0:45",
      typebox: null
    },
    {
      id: '2.8', video: 'videos/2.8.mp4', audio: 'audio/2.8.mp3', label: '2.8 · Codex',
      title: "You Can Build Now",
      h2: "AI is making creation more accessible than ever.",
      body: [
        "Codex is the part of AI that understands and writes code.",
        "What used to feel technical and out of reach is now becoming accessible, not just to developers, but to everyday users.",
        "You don't need to go deep on this right now.",
        "But understand where this is going.",
        "The same way AI is helping you create content and think strategically, it's starting to help you build things too.",
        "Apps, tools, workflows, even simple systems for your business.",
        "This is one to watch."
      ],
      audioDuration: "0:40",
      typebox: null
    }
  ],
  intro: {
    eyebrow: "ChatGPT Setup, properly",
    h1: ["ChatGPT,", "Setup Properly"],
    h2: "Most people are using this at 10%. This is where that changes.",
    body: [
      "If ChatGPT has ever felt generic, inconsistent, or like more work than it's worth, it hasn't been set up properly.",
      "This is about fixing the foundation.",
      "Once this is done, you'll stop starting from scratch, stop repeating yourself, and start getting outputs that are actually usable.",
      "Take your time here. Everything else builds from this."
    ],
    cta: "Begin the setup"
  },
  checkpoint: {
    h: "ChatGPT is set up. ✅",
    items: [
      "Custom instructions filled in.",
      "About You section filled in.",
      "Memory on.",
      "Apps connected.",
      "First Project created.",
      "GPTs understood.",
      "Excited for the future of Codex.",
      "Thinking about ways to use AI Agents."
    ],
    outro: "ChatGPT now has more context about you than it's ever had.",
    cta: "On to Claude"
  }
};

const CLAUDE_LESSON = {
  number: "03",
  kicker: "Section 03 of 06 · Claude",
  title: "Claude setup,",
  titleAccent: "properly",
  sub: "Claude is not ChatGPT. It thinks differently, it's structured differently, and it needs to be set up differently. Most people treat them the same - that's why most people get mediocre results from both.",
  checklist: [
    "Privacy toggle OFF before anything personal",
    "Profile filled - name, role, what you're on",
    "Models understood - Sonnet first, always",
    "Project created + 1 document uploaded",
    "Skills, Artifacts, Co-work located"
  ],
  screens: [
    {
      id: '3.1', video: 'videos/3.1.mp4', audio: 'audio/3.1.mp3', label: '3.1 · Profile + Privacy',
      title: "Profile + Privacy",
      h2: "Before anything else, two quick settings.",
      body: [
        "These take two minutes and they matter. Do them now, before you add any real business context into Claude.",
        "First, your profile. This is the baseline layer that applies to every conversation across every Project and every chat. Claude reads this before you type a single word.",
        "Second, your privacy setting. Turn off \"Help improve Claude\" before you put anything personal in here. Your business context is yours. Keep it that way."
      ],
      audioDuration: "1:00",
      typeboxLabel: "Prompt — Build my Claude Instructions",
      typebox: `You are going to help me write my "Instructions for Claude", the global setting that tells Claude how to work with me across every conversation.

This is NOT about who I am or what I do. That lives in my Projects.

This is about HOW Claude should think, respond, and behave when working with me.

We will do this step by step.

RULES:
— Ask ONE question at a time
— Do not move on until I've answered
— If my answer is vague, push for specifics
— Keep me from over-explaining
— No generic statements, everything must be actionable

SECTIONS TO COVER:

1. How I like to work
   (fast/slow, big picture/detail, reactive/planned)

2. What I need Claude to push back on
   (gaps in thinking, strategy conflicts, things I might miss)

3. How I want responses structured
   (length, format, lead with answer or context)

4. My non-negotiables for any output
   (voice, tone, what it must never do)

5. What "good" looks like for me
   (what makes an output actually usable)

6. What drives me crazy
   (what Claude does that wastes your time or frustrates you)

AS WE GO:
— Summarise each answer into a short, direct instruction Claude will actually follow
— Replace vague preferences with specific behavioural rules
— Cut anything generic or obvious

AT THE END:
— Combine everything into clean, structured Instructions for Claude
— Format it so I can copy and paste directly into Settings
— It should feel like: "Claude actually knows how I think"

Start with question one.`
    },
    {
      id: '3.2', video: 'videos/3.2.mp4', audio: 'audio/3.2.mp3', label: '3.2 · Models',
      title: "Models",
      h2: "Sonnet first. Always.",
      body: [
        "Claude has three models. Sonnet, Opus, and Haiku.",
        "Sonnet is your workhorse. Use it for almost everything.",
        "Opus is deep thinking. Use sparingly, it burns through your usage fast.",
        "Haiku is quick tasks.",
        "Start on Sonnet. Switch to Opus only when you actually need it."
      ],
      audioDuration: "0:55",
      typebox: null
    },
    {
      id: '3.3', video: 'videos/3.3.mp4', audio: 'audio/3.3.mp3', label: '3.3 · Projects',
      title: "Projects",
      h2: "This is where the magic happens.",
      body: [
        "One significant difference from ChatGPT, you can upload documents directly into the Project knowledge base. Claude can read your brand documents, your offers, your content examples, and reference them in every conversation.",
        "Name your first Project. Add instructions. Upload at least one document, even a simple one-page overview of your business works perfectly to start."
      ],
      audioDuration: "1:00",
      prompts: [
        {
          label: "Prompt 1 — Memory starter",
          text: `Please remember the following about me for this Project:

My name is [name] and I run [business name].
I help [audience] with [what I do].
My brand voice is [3 words, e.g. direct, warm, no fluff]. [Here's an example of my brand voice, add caption/email].
I am currently working on [current priority].
I prefer responses that are [how you like them].
Never use these words in my content: [your list].`
        },
        {
          label: "Prompt 2 — Build my Project instructions",
          text: `I want to build strong Project instructions for my [Content / Strategy / Client] Project in Claude.

My global Instructions for Claude are already set, so don't repeat how I like to work. Focus only on what's specific to THIS Project.

Ask me ONE question at a time about:
1. What this Project is primarily used for
2. What offers or work I'm focused on here
3. Any specific rules or non-negotiables for this area
4. What 'good output' looks like in this context
5. What would make you immediately useful every time I open this Project

At the end, write clean Project instructions I can paste straight in. Specific. Actionable. No fluff.`
        }
      ]
    },
    {
      id: '3.4', video: 'videos/3.4.mp4', audio: 'audio/3.4.mp3', label: '3.4 · Skills',
      title: "Skills",
      h2: "The feature almost nobody has touched.",
      body: [
        "Skills are saved instruction sets for specific repeating tasks.",
        "Your caption writer. Your email drafter. Your strategist.",
        "Same Claude, different mode. You build the skill once, call it any time."
      ],
      audioDuration: "0:40",
      typebox: null
    },
    {
      id: '3.5', video: 'videos/3.5.mp4', audio: 'audio/3.5.mp3', label: '3.5 · Desktop Folders',
      title: "Desktop Folders",
      h2: "Give Claude a place to work.",
      body: [
        "Desktop folders are where Claude can actually live alongside your files.",
        "Set up a clean folder structure on your computer that Claude can read from and write to. Brand documents, content, offers, client info, anything you'd want Claude to have eyes on.",
        "Once Claude can see your folders, your work stops happening in a chat tab and starts happening inside your real ecosystem."
      ],
      audioDuration: "0:45",
      typebox: null
    },
    {
      id: '3.6', video: 'videos/3.6.mp4', label: '3.6 · Artifacts',
      title: "Artifacts",
      h2: "Claude's finished outputs.",
      body: [
        "When Claude produces something document-like, a sales page, a content plan, a SOP, it appears in an Artifact panel on the right.",
        "Separate, editable, yours to copy.",
        "This is where your real outputs live. Not buried in a chat scroll."
      ],
      audioDuration: "0:30",
      typebox: null
    },
    {
      id: '3.7', label: '3.7 · Co-work',
      title: "Co-work",
      h2: "Claude on your actual computer.",
      body: [
        "Desktop-only. Lets Claude read and write files on your computer.",
        "Open folders, create documents, work with Google Drive and Notion.",
        "Not for today, but know it's there. This is where Claude stops being a chat and starts being a collaborator."
      ],
      audioDuration: "0:35",
      typebox: null
    },
    {
      id: '3.8', label: '3.8 · Claude Code',
      title: "Claude Code",
      h2: "When you want to actually build.",
      body: [
        "Claude Code is the version of Claude built for technical work, code, scripts, automations, real builds.",
        "If you've ever thought \"I'd love to build a tool for that, but I'm not technical\", this is the door.",
        "Most women won't live in here every day. But knowing it exists matters, because the line between \"I'd need a developer\" and \"I can prototype this myself\" is moving fast."
      ],
      audioDuration: "0:40",
      typebox: null
    },
    {
      id: '3.9', label: '3.9 · Token Limits',
      title: "Token Limits",
      h2: "Why Claude tells you to come back later.",
      body: [
        "Every conversation with Claude has a usage budget, your tokens.",
        "Long chats, big documents, and Opus all eat tokens fast. That's why you sometimes hit a wall and Claude tells you to wait.",
        "The fix isn't using Claude less. It's using it smarter. Sonnet by default. Fresh chats for new tasks. Projects to hold context so you're not re-explaining yourself in every conversation.",
        "Once you understand tokens, the limits stop feeling random."
      ],
      audioDuration: "0:45",
      typebox: null
    }
  ],
  checkpoint: {
    h: "Claude is set up. ✅",
    p: "Privacy sorted. Profile filled in. Project created with instructions and a document uploaded. Models understood. Features located. Claude now has context. It's no longer working blind.",
    cta: "Now, which one do you actually use? →"
  },
  intro: {
    eyebrow: "Claude setup, properly",
    h1: ["Claude,", "setup properly"],
    h2: "Claude is not ChatGPT.",
    body: [
      "It thinks differently. It's built differently. It needs to be set up differently.",
      "Most women open Claude and treat it exactly like ChatGPT. Same approach, same habits, same expectations.",
      "That's why most women hit their usage limit within 30 minutes and go running back to ChatGPT feeling like Claude isn't worth it.",
      "It is worth it. You just haven't been shown how it actually works."
    ],
    cta: "Begin the setup"
  }
};

const SetupLessonPage = ({ lesson, progress, onPrev, onNext, onExit, complete, setComplete, currentKey }) => {
  const storageKey = `ash-active-${lesson.number}`;
  const [active, setActive] = uS(() => {
    try {
      const saved = localStorage.getItem(storageKey);
      if (saved !== null) {
        const n = parseInt(saved, 10);
        if (Number.isFinite(n)) return n;
      }
    } catch {}
    return lesson.intro ? -1 : 0;
  });
  uE(() => { try { localStorage.setItem(storageKey, String(active)); } catch {} }, [active, storageKey]);
  const screen = active >= 0 ? lesson.screens[active] : null;

  // Scroll to top whenever the screen changes (Next/Previous within a lesson)
  uE(() => {
    window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
    document.querySelectorAll('.step-main').forEach(el => { el.scrollTop = 0; });
  }, [active]);

  // Checkpoint page: appears after the last screen, before the section advances
  if (lesson.checkpoint && lesson.checkpoint.items && active === lesson.screens.length) {
    const cp = lesson.checkpoint;
    return (
      <div className="shell">
        <Masthead onExit={onExit} />
        <ProgressBar progress={progress} />
        <main className="step-main lesson-checkpoint-main">
          <div className="lesson-checkpoint-inner">
            <h1 className="checkpoint-heading">{cp.h}</h1>
            <ul className="checkpoint-list">
              {cp.items.map((item, i) => (
                <li key={i} style={{ '--delay': `${i * 0.22 + 0.2}s` }}>
                  <span className="tick" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="4 12 10 18 20 6" />
                    </svg>
                  </span>
                  <span className="text">{item}</span>
                </li>
              ))}
            </ul>
            <p className="checkpoint-outro">{cp.outro}</p>
            <div className="lesson-nav-row" style={{ marginTop: 36 }}>
              <div><Btn ghost onClick={() => setActive(active - 1)}>← Back</Btn></div>
              <div><CompleteCheck checked={complete} onChange={setComplete} /></div>
              <div><Btn onClick={onNext} disabled={!complete}>{cp.cta} <span className="arrow">→</span></Btn></div>
            </div>
          </div>
        </main>
      </div>
    );
  }

  // Intro page: periwinkle, split (H1 left + submark, H2/body/CTA right)
  if (active === -1 && lesson.intro) {
    const intro = lesson.intro;
    return (
      <div className="shell">
        <Masthead onExit={onExit} />
        <ProgressBar progress={progress} />
        <main className="step-main lesson-intro-main">
          <img src="images/submark-peri.png" alt="" className="lesson-intro-submark" />
          <div className="lesson-intro-split">
            <div className="lesson-intro-left">
              <h1 className="lesson-intro-h1">
                {intro.h1[0]} <span className="accent"><em style={{ fontStyle: 'italic' }}>{intro.h1[1]}</em></span>
              </h1>
            </div>
            <div className="lesson-intro-right">
              <h2 className="lesson-intro-h2">{intro.h2}</h2>
              <div className="lesson-intro-body">
                {intro.body.map((line, i) => <p key={i}>{line}</p>)}
              </div>
              <div className="lesson-intro-cta">
                <Btn ghost onClick={onPrev}>← Back</Btn>
                <Btn onClick={() => setActive(0)}>Start the setup <span className="arrow">→</span></Btn>
              </div>
            </div>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="shell">
      <Masthead onExit={onExit} />
      <ProgressBar progress={progress} />
      <main className="step-main lesson-main" style={{ background: 'var(--cream)' }}>
        <div className="lesson-head" style={{ justifyContent: 'center', textAlign: 'center', flexDirection: 'column', alignItems: 'center' }}>
          <div className="lesson-head-main" style={{ textAlign: 'center', maxWidth: 1040, margin: '0 auto' }}>
            <h1 style={{ textAlign: 'center', marginBottom: 24 }}>{lesson.title} <span className="accent"><em style={{ fontStyle: 'italic' }}>{lesson.titleAccent}</em></span></h1>
            <div className="screen-chips" style={{ margin: '0 auto 28px', display: 'flex', justifyContent: 'center', gap: 6, flexWrap: 'wrap' }}>
              {lesson.screens.map((s, i) => (
                <button key={s.id} className={`screen-chip ${i === active ? 'active' : ''}`} onClick={() => setActive(i)}>
                  {s.label}
                </button>
              ))}
            </div>
          </div>
        </div>

        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          {/* Split: laptop left (big), text + memo right */}
          <div className="screen-split">
            <div className="screen-split-left">
              <div className="lesson-video-stage" style={{ padding: 0 }}>
                <Laptop videoSrc={screen.video} fallbackTag={`Screen ${screen.id}`} fallbackTitle={screen.title} />
              </div>
            </div>
            <div className="screen-split-right">
              <h2 className="screen-split-h2">{screen.title}</h2>
              <VoiceMemo title="Listen to Jess" duration={screen.audioDuration} audioSrc={screen.audio} />
              {screen.h2 && <h3 className="screen-split-h3">{screen.h2}</h3>}
              <div className="screen-split-body">
                {Array.isArray(screen.body)
                  ? screen.body.map((item, i) =>
                      Array.isArray(item)
                        ? <ul key={i} className="screen-detail-list">{item.map((li, j) => <li key={j}>{li}</li>)}</ul>
                        : <p key={i} className="screen-detail-body">{item}</p>
                    )
                  : <p className="screen-detail-body">{screen.body || screen.explain}</p>}
              </div>
            </div>
          </div>

          {/* Prompt typebox(es) below the split */}
          {(() => {
            const prompts = Array.isArray(screen.prompts)
              ? screen.prompts
              : (screen.typebox ? [{ label: screen.typeboxLabel || 'What to type', text: screen.typebox }] : []);
            return prompts.map((p, i) => (
              <div key={i} className="screen-detail-typebox screen-prompt-below" style={{ marginTop: i === 0 ? 8 : 24 }}>
                <div className="prompt-head">
                  <span className="label">{p.label || 'Prompt'}</span>
                  <CopyButton text={p.text} label="Copy prompt" />
                </div>
                <pre className="typebox">{p.text}</pre>
              </div>
            ));
          })()}

          {(() => {
            const isLast = active === lesson.screens.length - 1;
            const isFirst = active === 0;
            const hasIntro = !!lesson.intro;
            const hasCheckpoint = !!(lesson.checkpoint && lesson.checkpoint.items);
            // On last screen with a checkpoint, Next goes to checkpoint (not section advance)
            const onNextClick = () => {
              if (isLast && hasCheckpoint) setActive(active + 1);
              else if (isLast) onNext();
              else setActive(active + 1);
            };
            const nextLabel = (isLast && !hasCheckpoint) ? lesson.checkpoint.cta : 'Next screen';
            const disabled = isLast && !hasCheckpoint && !complete;
            return (
              <div className="lesson-nav-row" style={{ marginTop: 28 }}>
                <div style={{ justifySelf: 'start' }}>
                  <Btn ghost onClick={() => {
                    if (isFirst) {
                      if (hasIntro) setActive(-1);
                      else onPrev();
                    } else {
                      setActive(active - 1);
                    }
                  }}>
                    ← {isFirst ? (hasIntro ? 'Back to intro' : 'Back') : 'Previous screen'}
                  </Btn>
                </div>
                <div style={{ justifySelf: 'center' }}>
                  <CompleteCheck checked={complete} onChange={setComplete} />
                </div>
                <div style={{ justifySelf: 'end' }}>
                  <Btn onClick={onNextClick} disabled={disabled}>
                    {nextLabel} <span className="arrow">→</span>
                  </Btn>
                </div>
              </div>
            );
          })()}
        </div>
      </main>
    </div>
  );
};

// ========== COMPARISON (step 4) ==========
const ComparePage = ({ progress, onPrev, onNext, onExit, complete, setComplete, currentKey }) => {
  const rows = [
    ['Best for', 'Strategy, sounding board, thinking things through', 'Execution, building, creating finished outputs'],
    ['Strength', 'Deep relationship over time, knows your history', 'Longer outputs, better structure, Projects + documents'],
    ['Models', '5.3 (daily), o3 (deep thinking), Thinking (research)', 'Sonnet (daily), Opus (complex builds)'],
    ['Use when', 'You need to think something through', 'You need to build or create something'],
    ['Jess uses it for', 'Strategic sounding board, 3.5 years of voice trained in', 'The Naptrap Build - entire funnel built here']
  ];
  return (
    <div className="shell">
      <Masthead onExit={onExit} />
      <ProgressBar progress={progress} />
      <main className="step-main lesson-main" style={{ background: 'var(--cream)' }}>
        <div className="lesson-head" style={{ justifyContent: 'center', textAlign: 'center' }}>
          <div className="lesson-head-main" style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
            <span className="eyebrow" style={{ display: 'inline-block' }}>Section 04 of 06 · Compare</span>
            <h1 style={{ textAlign: 'center' }}>The honest <span className="accent"><em style={{ fontStyle: 'italic' }}>breakdown.</em></span></h1>
            <p className="sub" style={{ margin: '0 auto', textAlign: 'center', maxWidth: 620 }}>The actual answer - after 3.5 years of building a whole business with both.</p>
          </div>
        </div>

        <div style={{ maxWidth: 1040, margin: '0 auto' }}>
          <div className="lesson-video-stage" style={{ padding: 0 }}>
            <Laptop fallbackTag="The real answer" fallbackTitle="ChatGPT is my thinking partner. Claude is my builder." />
          </div>

          <div className="memo-slim-wrap">
            <VoiceMemo title="Listen to Jess" duration="1:15" />
          </div>

          <section className="screen-detail">
            <h2 className="screen-detail-title">ChatGPT is my thinking partner. Claude is my builder.</h2>
            <p className="screen-detail-body">Each does something the other doesn't. Once you know which is which, you stop trying to make one tool do everything - and you stop second-guessing which to open.</p>
          </section>

          <div style={{ background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden', marginTop: 28 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr 1fr', gap: 0, background: 'var(--cream-deep)', padding: '14px 20px', borderBottom: '1px solid var(--line)' }}>
              <span style={{ fontFamily: 'var(--sans)', fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--muted)' }}>&nbsp;</span>
              <span style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontSize: 22, color: 'var(--burgundy)' }}>ChatGPT</span>
              <span style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontSize: 22, color: 'var(--burgundy)' }}>Claude</span>
            </div>
            {rows.map(([label, a, b], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '140px 1fr 1fr', gap: 20, padding: '16px 20px', borderTop: i ? '1px solid var(--line)' : 'none' }}>
                <span style={{ fontFamily: 'var(--sans)', fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--muted)', paddingTop: 3 }}>{label}</span>
                <span style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink)', lineHeight: 1.5 }}>{a}</span>
                <span style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink)', lineHeight: 1.5 }}>{b}</span>
              </div>
            ))}
          </div>

          <div className="lesson-nav-row" style={{ marginTop: 36 }}>
            <div style={{ justifySelf: 'start' }}>
              <Btn ghost onClick={onPrev}>← Back</Btn>
            </div>
            <div style={{ justifySelf: 'center' }}>
              <CompleteCheck checked={complete} onChange={setComplete} />
            </div>
            <div style={{ justifySelf: 'end' }}>
              <Btn onClick={onNext} disabled={!complete}>The bonus <span className="arrow">→</span></Btn>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

// ========== BONUS (step 5) ==========
const BonusPage = ({ progress, onPrev, onNext, onExit, complete, setComplete, currentKey }) => (
  <div className="shell">
    <Masthead onExit={onExit} />
    <ProgressBar progress={progress} />
    <main className="step-main lesson-main" style={{ background: 'var(--cream)' }}>
      <div className="lesson-head" style={{ justifyContent: 'center', textAlign: 'center' }}>
        <div className="lesson-head-main" style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
          <span className="eyebrow" style={{ display: 'inline-block' }}>Section 05 of 06 · Bonus</span>
          <h1 style={{ textAlign: 'center' }}>What happens when setup <span className="accent"><em style={{ fontStyle: 'italic' }}>meets system.</em></span></h1>
          <p className="sub" style={{ margin: '0 auto', textAlign: 'center', maxWidth: 620 }}>The Cash Stack client story - and what's possible when you put a real system on top of the foundation you just built.</p>
        </div>
      </div>

      <div style={{ maxWidth: 1040, margin: '0 auto' }}>
        <div className="lesson-video-stage" style={{ padding: 0 }}>
          <Laptop fallbackTag="The bonus" fallbackTitle="Nothing you just set up is wasted." />
        </div>

        <div className="memo-slim-wrap">
          <VoiceMemo title="Listen to Jess" duration="1:30" />
        </div>

        <section className="screen-detail">
          <h2 className="screen-detail-title">Nothing you just set up is wasted.</h2>
          <p className="screen-detail-body">The Cash Stack client story - what's possible when you put a real system on top of the foundation you just built. The setup isn't the finish line. It's the floor.</p>
        </section>

        <div className="lesson-nav-row" style={{ marginTop: 36 }}>
          <div style={{ justifySelf: 'start' }}>
            <Btn ghost onClick={onPrev}>← Back</Btn>
          </div>
          <div style={{ justifySelf: 'center' }}>
            <CompleteCheck checked={complete} onChange={setComplete} />
          </div>
          <div style={{ justifySelf: 'end' }}>
            <Btn onClick={onNext} disabled={!complete}>Run the after audit <span className="arrow">→</span></Btn>
          </div>
        </div>
      </div>
    </main>
  </div>
);

Object.assign(window, {
  LoginPage, WelcomePage, AuditPage, SetupLessonPage, ComparePage, BonusPage,
  CHATGPT_LESSON, CLAUDE_LESSON, AUDIT_Q
});