/* Lesson 09 — How dad makes his AI videos.
   From-Dad lesson. Reads like a guide. Pays $25 just to read + write one prompt. */

function Lesson09VideosPage({ setRoute }) {
  function openChatWith(prompt) {
    try {
      localStorage.setItem("delaney.chat.prefill", prompt);
    } catch {}
    window.location.hash = "#/chat";
  }

  function markComplete() {
    localStorage.setItem("delaney.lesson.09.complete", new Date().toISOString());
    alert("🎉 Lesson 09 complete. $25 added to your cash-out. Now go build one — that's the $200.");
  }

  const samplePrompts = [
    "Walk me through making my first Higgsfield video step by step.",
    "Write me a Higgsfield prompt for a confident Latina entrepreneur in a coffee shop, 15 seconds, cinematic.",
    "How much will it cost me to make a 60-second video?",
    "What's the Cielo character my dad is making and how do I help?",
    "If I do this, how much can I make from dad per video?",
  ];

  return (
    <main className="page-enter" data-screen-label="Lesson 09 Videos">
      <section className="lesson-detail lesson09">
        <div className="shell">
          <button className="link-underline" onClick={() => window.location.hash = "#/lessons"} style={{ marginBottom: 28 }}>
            <span aria-hidden="true">←</span> All lessons
          </button>

          {/* HERO */}
          <div className="eyebrow">Lesson 09 · From Dad</div>
          <h1 className="welcome-h1 serif lesson-h1" style={{ fontSize: "clamp(40px, 6vw, 72px)", marginTop: 14 }}>
            How I make my AI videos.
          </h1>
          <p className="welcome-lead lesson09-lead" style={{ maxWidth: 720, marginTop: 18 }}>
            I didn't write this from scratch. My AI wrote it for your AI. If you
            want to make these too — and I'll pay you to crank them out — read
            through it, ask your AI questions, then go build one.
          </p>

          {/* SECTION 1 — THE STACK */}
          <section className="lesson09-section">
            <div className="eyebrow">Section 1</div>
            <h2 className="serif lesson-h2">The stack.</h2>
            <p className="welcome-lead" style={{ maxWidth: 680 }}>
              Three tools. They all talk to each other.
            </p>
            <div className="stack-grid">
              <div className="stack-card">
                <div className="stack-badge mono-num">01</div>
                <h3 className="serif stack-title">Claude Code</h3>
                <p className="stack-body">
                  Anthropic's coding agent that lives in the terminal on a Mac.
                  It can edit files, run scripts, hit any API, and control your computer.
                </p>
              </div>
              <div className="stack-card">
                <div className="stack-badge mono-num">02</div>
                <h3 className="serif stack-title">Claude Desktop</h3>
                <p className="stack-body">
                  The Mac app. Same Claude, plus MCP servers that connect Claude
                  to outside services (Higgsfield, Gmail, Chrome, Supabase, etc).
                </p>
              </div>
              <div className="stack-card">
                <div className="stack-badge mono-num">03</div>
                <h3 className="serif stack-title">Higgsfield</h3>
                <p className="stack-body">
                  A web app at higgsfield.ai. Generates 8–15 second AI video
                  clips using "Soul" / "Lite" / "Max" models. Costs ~$0.40–$1.20
                  per clip. <strong>Burns credits fast — cap at 4 concurrent renders.</strong>
                </p>
              </div>
            </div>
          </section>

          {/* SECTION 2 — THE LOOP */}
          <section className="lesson09-section">
            <div className="eyebrow">Section 2</div>
            <h2 className="serif lesson-h2">How it talks to itself.</h2>
            <p className="welcome-lead" style={{ maxWidth: 680 }}>
              The loop is the whole trick. You + Claude + Higgsfield, looping
              until the clip lands.
            </p>
            <ol className="loop-list">
              <li><strong>I describe a scene</strong> to Claude in plain English ("Cielo in her Tijuana kitchen at 5 AM, coffee, looking out window").</li>
              <li><strong>Claude writes the structured Higgsfield prompt</strong> — facial features, wardrobe, camera move, lighting, mood.</li>
              <li><strong>I paste the prompt</strong> into Higgsfield Supercomputer in Chrome.</li>
              <li><strong>Higgsfield renders</strong> the 8–15 sec clip in 1–3 minutes.</li>
              <li><strong>I download the clip</strong>, review it, tell Claude what to fix.</li>
              <li><strong>Claude rewrites the prompt.</strong> Re-render. Repeat until the clip lands.</li>
              <li><strong>After a scene's worth of clips are done</strong>, I stitch them in CapCut.</li>
            </ol>
          </section>

          {/* SECTION 3 — CHARACTER CONSISTENCY */}
          <section className="lesson09-section">
            <div className="eyebrow">Section 3</div>
            <h2 className="serif lesson-h2">Character consistency (the hardest part).</h2>
            <ul className="bullet-list">
              <li>Higgsfield needs a <strong>reference image every clip</strong> OR character consistency breaks.</li>
              <li>Save one frame from your favorite clip as the <strong>"character bible."</strong></li>
              <li>Reuse that reference for every clip with that character.</li>
              <li>Higgsfield <strong>Soul</strong> model has built-in character consistency — turn it on.</li>
            </ul>
          </section>

          {/* SECTION 4 — COSTS */}
          <section className="lesson09-section">
            <div className="eyebrow">Section 4</div>
            <h2 className="serif lesson-h2">What it costs.</h2>
            <div className="cost-table">
              <div className="cost-row">
                <span className="cost-label">Per Higgsfield clip</span>
                <span className="cost-value mono-num">$0.40 – $1.20</span>
              </div>
              <div className="cost-row">
                <span className="cost-label">Reroll buffer (30–50%)</span>
                <span className="cost-value mono-num">×1.4 – ×1.5</span>
              </div>
              <div className="cost-row">
                <span className="cost-label">4-minute film (~30 final / ~45 with rerolls)</span>
                <span className="cost-value mono-num">$20 – $50</span>
              </div>
              <div className="cost-row">
                <span className="cost-label">90-minute feature</span>
                <span className="cost-value mono-num">$500 – $1,500</span>
              </div>
              <div className="cost-row cost-row--compare">
                <span className="cost-label">Traditional film, same length</span>
                <span className="cost-value mono-num">$50,000+ minimum</span>
              </div>
            </div>
          </section>

          {/* SECTION 5 — STARTER EXERCISE */}
          <section className="lesson09-section">
            <div className="eyebrow">Section 5</div>
            <h2 className="serif lesson-h2">Your starter exercise.</h2>
            <p className="welcome-lead" style={{ maxWidth: 680 }}>
              Pick a character. Tell your AI 3 sentences about them. Have your AI
              generate one Higgsfield-ready prompt for a 10-second establishing
              shot.
            </p>
            <div className="exercise-payout">
              <div>
                <div className="exercise-line">
                  <span className="exercise-amt mono-num">$25</span>
                  <span className="exercise-desc">just for reading this and writing one prompt</span>
                </div>
                <div className="exercise-line">
                  <span className="exercise-amt mono-num">$200</span>
                  <span className="exercise-desc">if you actually render and stitch a 30-second clip with 3–4 shots</span>
                </div>
              </div>
            </div>
          </section>

          {/* SECTION 6 — USE YOUR AI */}
          <section className="lesson09-callout">
            <div className="eyebrow" style={{ color: "var(--terracotta-deep)" }}>Section 6 · Use her</div>
            <h2 className="serif lesson-h2" style={{ marginTop: 14 }}>
              Your AI on this site already knows everything I wrote above. Talk to her.
            </h2>
            <p className="welcome-lead" style={{ maxWidth: 680 }}>
              Ask her any of these (or anything else):
            </p>
            <div className="prompt-stack">
              {samplePrompts.map((p) => (
                <button key={p} className="prompt-chip" onClick={() => openChatWith(p)}>
                  <span className="prompt-chip-arrow" aria-hidden="true">→</span>
                  <span className="prompt-chip-text">"{p}"</span>
                </button>
              ))}
            </div>
          </section>

          {/* SECTION 7 — THE OFFER */}
          <section className="lesson09-offer">
            <div className="eyebrow">Section 7 · The offer</div>
            <h2 className="serif lesson-h2" style={{ marginTop: 14 }}>From Dad.</h2>
            <p className="welcome-lead" style={{ maxWidth: 680, fontSize: 18 }}>
              I need someone to crank these out for me. Right now I'm doing them
              myself which is fun but slow. If you actually learn this and make
              even one decent 30-second video, I'll pay you to make more for the
              family of sites I'm building. Real money. Real production credits.
              Real portfolio. Read the lesson, ask your AI questions, send me a draft.
            </p>
            <div className="offer-grid">
              <div className="offer-row">
                <span className="offer-amt mono-num">$25</span>
                <span className="offer-desc">just for finishing this lesson</span>
              </div>
              <div className="offer-row">
                <span className="offer-amt mono-num">$200</span>
                <span className="offer-desc">first 30-second video you finish</span>
              </div>
              <div className="offer-row">
                <span className="offer-amt mono-num">$50 – $150</span>
                <span className="offer-desc">per subsequent video depending on length + scenes</span>
              </div>
              <div className="offer-row offer-row--bonus">
                <span className="offer-amt mono-num">Bonus</span>
                <span className="offer-desc">if you get good enough I'll set you up with your own Higgsfield account and a budget</span>
              </div>
            </div>
            <p className="welcome-lead" style={{ fontStyle: "italic", color: "var(--ink-2)", marginTop: 24, fontSize: 15 }}>
              — Dad
            </p>
          </section>

          {/* COMPLETE */}
          <div className="lesson-cta-row" style={{ marginTop: 56 }}>
            <button className="btn btn--terracotta" onClick={markComplete} style={{ fontSize: 17, padding: "18px 32px" }}>
              Mark complete & claim $25 →
            </button>
            <button className="link-underline" onClick={() => openChatWith(samplePrompts[0])}>
              Talk to her about it first <span aria-hidden="true">→</span>
            </button>
          </div>
        </div>
      </section>

      <style>{`
        .lesson09 { padding: clamp(48px, 8vw, 96px) 0; }
        .lesson-h1 { line-height: 1.05; font-weight: 500; }
        .lesson-h2 {
          font-size: clamp(28px, 3.6vw, 42px);
          line-height: 1.15;
          margin: 14px 0 20px;
          font-weight: 500;
        }
        .lesson09-lead { font-size: 19px; }

        .lesson09-section {
          margin-top: 64px;
          padding-top: 40px;
          border-top: 1px solid var(--line);
        }

        /* Section 1 — stack cards */
        .stack-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 18px;
          margin-top: 28px;
        }
        @media (max-width: 820px) {
          .stack-grid { grid-template-columns: 1fr; }
        }
        .stack-card {
          background: var(--paper, #fff);
          border: 1px solid var(--line);
          border-radius: 14px;
          padding: 24px;
          transition: border-color .15s ease, transform .15s ease;
        }
        .stack-card:hover {
          border-color: var(--terracotta);
          transform: translateY(-2px);
        }
        .stack-badge {
          font-size: 13px;
          color: var(--terracotta);
          letter-spacing: 0.08em;
        }
        .stack-title {
          font-size: 22px;
          margin: 8px 0 10px;
          font-weight: 500;
        }
        .stack-body {
          font-family: var(--serif);
          font-size: 15px;
          line-height: 1.55;
          color: var(--ink-2);
          margin: 0;
        }

        /* Section 2 — loop list */
        .loop-list {
          margin: 24px 0 0 20px;
          padding: 0;
          max-width: 720px;
        }
        .loop-list li {
          font-family: var(--serif);
          font-size: 17px;
          line-height: 1.6;
          color: var(--ink-1);
          margin-bottom: 14px;
          padding-left: 6px;
        }

        /* Section 3 — bullets */
        .bullet-list {
          margin: 24px 0 0 20px;
          padding: 0;
          list-style: none;
          max-width: 720px;
        }
        .bullet-list li {
          font-family: var(--serif);
          font-size: 17px;
          line-height: 1.6;
          color: var(--ink-1);
          margin-bottom: 12px;
          padding-left: 22px;
          position: relative;
        }
        .bullet-list li::before {
          content: "●";
          color: var(--terracotta);
          position: absolute;
          left: 0;
          font-size: 12px;
          top: 4px;
        }

        /* Section 4 — cost table */
        .cost-table {
          margin-top: 24px;
          max-width: 640px;
          border-top: 1px solid var(--line);
        }
        .cost-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px 4px;
          border-bottom: 1px solid var(--line);
          gap: 16px;
        }
        .cost-label {
          font-family: var(--serif);
          font-size: 16px;
          color: var(--ink-1);
        }
        .cost-value {
          font-size: 16px;
          font-weight: 600;
          color: var(--sage-deep, #5c6b56);
          white-space: nowrap;
        }
        .cost-row--compare .cost-value {
          color: var(--terracotta-deep);
        }
        .cost-row--compare .cost-label {
          color: var(--ink-3);
          font-style: italic;
        }

        /* Section 5 — exercise payout */
        .exercise-payout {
          margin-top: 24px;
          padding: 24px;
          background: var(--cream-deep, #f3ece2);
          border-radius: 12px;
          max-width: 640px;
        }
        .exercise-line {
          display: flex;
          align-items: baseline;
          gap: 14px;
          margin-bottom: 10px;
        }
        .exercise-line:last-child { margin-bottom: 0; }
        .exercise-amt {
          font-size: 22px;
          font-weight: 600;
          color: var(--terracotta);
          min-width: 60px;
        }
        .exercise-desc {
          font-family: var(--serif);
          font-size: 16px;
          color: var(--ink-1);
        }

        /* Section 6 — callout */
        .lesson09-callout {
          margin-top: 64px;
          padding: 36px;
          background: linear-gradient(135deg, var(--paper, #fff) 0%, var(--terracotta-soft, #EBCAD6) 100%);
          border-left: 4px solid var(--terracotta);
          border-radius: 14px;
        }
        .prompt-stack {
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-top: 24px;
          max-width: 720px;
        }
        .prompt-chip {
          display: flex;
          align-items: flex-start;
          gap: 14px;
          padding: 16px 20px;
          background: var(--paper, #fff);
          border: 1px solid var(--line);
          border-radius: 12px;
          cursor: pointer;
          text-align: left;
          font-family: var(--serif);
          font-size: 16px;
          line-height: 1.45;
          color: var(--ink-1);
          transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
        }
        .prompt-chip:hover {
          border-color: var(--terracotta);
          transform: translateX(2px);
          box-shadow: 0 6px 18px rgba(0,0,0,0.05);
        }
        .prompt-chip-arrow {
          color: var(--terracotta);
          font-weight: 600;
          flex-shrink: 0;
        }
        .prompt-chip-text { flex: 1; font-style: italic; }

        /* Section 7 — offer */
        .lesson09-offer {
          margin-top: 64px;
          padding: 36px;
          background: var(--charcoal, #1a1a1a);
          color: var(--cream, #FFE9C9);
          border-radius: 14px;
        }
        .lesson09-offer .eyebrow { color: var(--cream, #FFE9C9); opacity: 0.7; }
        .lesson09-offer .lesson-h2 { color: var(--cream, #FFE9C9); }
        .lesson09-offer .welcome-lead { color: var(--cream, #FFE9C9); opacity: 0.92; }
        .offer-grid {
          margin-top: 28px;
          display: flex;
          flex-direction: column;
          gap: 14px;
          max-width: 680px;
        }
        .offer-row {
          display: flex;
          align-items: baseline;
          gap: 18px;
          padding-bottom: 14px;
          border-bottom: 1px solid rgba(255,233,201,0.18);
        }
        .offer-row:last-child { border-bottom: 0; }
        .offer-amt {
          font-size: 22px;
          font-weight: 700;
          color: var(--terracotta-soft, #EBCAD6);
          min-width: 120px;
        }
        .offer-desc {
          font-family: var(--serif);
          font-size: 16px;
          line-height: 1.5;
          color: var(--cream, #FFE9C9);
          opacity: 0.92;
        }
        .offer-row--bonus .offer-amt {
          color: var(--terracotta, #C97D5D);
          font-style: italic;
          font-weight: 600;
        }

        .lesson-cta-row {
          display: flex;
          gap: 28px;
          align-items: center;
          flex-wrap: wrap;
        }
      `}</style>
    </main>
  );
}

window.Lesson09VideosPage = Lesson09VideosPage;