/* Delaney's internal dashboard. Gated. Route: #/dashboard
   Only she sees this. Externally she's the founder of a marketing co.
   Internally she sees her work, earnings, AI, projects. */

function DashboardPage({ setRoute }) {
  // Gate: require active session (set from pitch page magic key)
  const hasSession = (() => {
    try { return localStorage.getItem("delaney.session") === "active"; } catch { return false; }
  })();

  if (!hasSession) {
    return (
      <main className="page-enter">
        <section style={{ padding: "120px 24px", textAlign: "center" }}>
          <div className="eyebrow">Private</div>
          <h1 className="serif" style={{ fontSize: 48, margin: "20px 0 16px", fontWeight: 500 }}>
            This is Delaney's dashboard.
          </h1>
          <p className="welcome-lead" style={{ maxWidth: 480, margin: "0 auto" }}>
            If you're Delaney, your dad texted you a link. Use that link to
            open the door. Anyone else — sorry, internal page.
          </p>
        </section>
      </main>
    );
  }

  // Mock state — wire to Supabase later
  const [now] = React.useState(() => new Date());

  // Pull lesson completion from localStorage
  const completed = [];
  try {
    for (let i = 1; i <= 6; i++) {
      const key = "delaney.lesson." + String(i).padStart(2, "0") + ".complete";
      if (localStorage.getItem(key)) completed.push(String(i).padStart(2, "0"));
    }
  } catch {}

  // pending = completed but not yet paid out
  const paid = [];
  try {
    for (let i = 1; i <= 7; i++) {
      const id = String(i).padStart(2, "0");
      if (localStorage.getItem("delaney.lesson." + id + ".paid")) paid.push(id);
    }
  } catch {}
  const pendingLessons = completed.filter(id => !paid.includes(id));
  const earned = pendingLessons.length * 15; // simplified, mystery lesson worth $40 should be checked separately
  const streak = completed.length;
  const nextLessonId = completed.length === 0 ? "01" : String(Math.min(completed.length + 1, 7)).padStart(2, "0");

  // load payouts log
  const payoutsLog = (() => {
    try { return JSON.parse(localStorage.getItem("delaney.payouts") || "[]"); } catch { return []; }
  })();

  // Bonus progress
  const totalLessonsForBig = BONUS_TIERS[BONUS_TIERS.length - 1].lessons;
  const bonusProgressPct = Math.min(100, (completed.length / totalLessonsForBig) * 100);

  const projects = [
    {
      name: "laneymae.com",
      role: "Your store / playground",
      status: completed.includes("01") ? "Published" : "Unbuilt",
      url: "https://laneymae.com",
    },
    {
      name: "bydelaney.com",
      role: "Your marketing co. (public)",
      status: completed.includes("02") ? "Redesigned" : "Default",
      url: "https://bydelaney.com",
    },
  ];

  const friday = nextFriday(now);
  const pendingPayout = earned;

  return (
    <main className="page-enter" data-screen-label="Dashboard">
      <section className="dash-hero">
        <div className="shell">
          <div className="eyebrow">Your dashboard · {fmtToday(now)}</div>
          <h1 className="dash-greeting serif">
            Hey Laney.
          </h1>
          <p className="welcome-lead">
            This is the inside. Externally you're the founder of a marketing
            company — that's bydelaney.com out there. In here it's just you,
            your work, and your AI.
          </p>
        </div>
      </section>

      <section className="dash-grid-wrap">
        <div className="shell dash-grid">
          {/* EARNINGS CARD */}
          <article className="dash-card dash-card--earnings">
            <div className="eyebrow">This week</div>
            <div className="dash-stat-row">
              <div className="dash-stat">
                <div className="dash-stat-num">${earned}</div>
                <div className="dash-stat-label">earned</div>
              </div>
              <div className="dash-stat">
                <div className="dash-stat-num">{completed.length}</div>
                <div className="dash-stat-label">lessons done</div>
              </div>
              <div className="dash-stat">
                <div className="dash-stat-num">{streak}</div>
                <div className="dash-stat-label">streak</div>
              </div>
            </div>
            <div className="dash-payout-line">
              <span className="eyebrow">Pending payout</span>
              <span className="dash-payout-amt">${pendingPayout}</span>
            </div>
            <div className="cashout-threshold">
              <div className="cashout-threshold-bar">
                <div
                  className="cashout-threshold-fill"
                  style={{ width: Math.min(100, (pendingPayout / 100) * 100) + "%" }}
                ></div>
              </div>
              <div className="cashout-threshold-label">
                {pendingPayout >= 100
                  ? "🎉 $100 hit — cash out anytime"
                  : `$${pendingPayout} / $100 milestone · keep going`}
              </div>
            </div>
            <button
              className="btn btn--terracotta dash-cashout-btn"
              disabled={pendingPayout === 0}
              onClick={() => {
                if (pendingPayout === 0) return;
                if (pendingPayout < 100) {
                  const early = confirm("You're at $" + pendingPayout + ". The $100 milestone is the sweet spot — but you can cash out early if you need it. Cash out $" + pendingPayout + " now?");
                  if (!early) return;
                }
                const venmo = prompt("What's your Venmo @ handle?", localStorage.getItem("delaney.venmo") || "@");
                if (!venmo) return;
                localStorage.setItem("delaney.venmo", venmo);
                const log = JSON.parse(localStorage.getItem("delaney.payouts") || "[]");
                log.unshift({
                  date: new Date().toISOString(),
                  amount: pendingPayout,
                  venmo,
                  lessons: completed.join(", "),
                });
                localStorage.setItem("delaney.payouts", JSON.stringify(log));
                completed.forEach(id => localStorage.setItem("delaney.lesson." + id + ".paid", new Date().toISOString()));
                alert("Cash-out requested: $" + pendingPayout + " to " + venmo + ". Hits your Venmo within 24 hrs.");
                window.location.reload();
              }}
            >
              {pendingPayout === 0
                ? "Nothing to cash out yet"
                : pendingPayout >= 100
                ? "Cash out $" + pendingPayout + " to Venmo →"
                : "Cash out $" + pendingPayout + " early (or wait for $100)"}
            </button>
            <p style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 12, fontFamily: "var(--serif)", fontStyle: "italic" }}>
              Might not seem like a lot of money — but you're helping your dad with real work, and he's paying your rent. This is on top of that.
            </p>
          </article>

          {/* NEXT LESSON — BIG, the focus */}
          <article className="dash-card dash-card--next dash-card--featured">
            <div className="dash-next-accent" aria-hidden="true"></div>
            <div className="eyebrow">Up next · Lesson {nextLessonId}</div>
            <h3 className="dash-card-h serif" style={{ fontSize: "clamp(28px, 3vw, 38px)" }}>{getLessonTitle(nextLessonId)}</h3>
            <p className="dash-card-blurb" style={{ fontSize: 17 }}>{getLessonShort(nextLessonId)}</p>
            <div className="dash-card-foot">
              <div>
                <div className="lesson-payout" style={{ fontSize: 22 }}>${getLessonPayout(nextLessonId)}</div>
                <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 2 }}>~1 hour</div>
              </div>
              <button className="btn btn--terracotta" onClick={() => window.location.hash = "#/lesson/" + nextLessonId} style={{ padding: "16px 28px", fontSize: 16 }}>
                Start →
              </button>
            </div>
          </article>

          {/* BONUS TIERS — gamification */}
          <article className="dash-card dash-card--bonus">
            <div className="bonus-glow" aria-hidden="true"></div>
            <div className="eyebrow">🎯 Bonus tiers</div>
            <h3 className="dash-card-h serif">Hit milestones, hit bonuses.</h3>
            <p className="dash-card-blurb" style={{ marginBottom: 18 }}>
              Stacks on top of lesson pay. Streaks count too — finish 3 days in a row and dad throws in extra.
            </p>
            <div className="bonus-tiers">
              {BONUS_TIERS.map((tier) => {
                const hit = completed.length >= tier.lessons;
                return (
                  <div key={tier.id} className={"bonus-tier " + (hit ? "is-hit" : "")}>
                    <div className="bonus-tier-left">
                      <span className="bonus-tier-icon">{hit ? "✅" : "🔒"}</span>
                      <div>
                        <div className="bonus-tier-name">{tier.name}</div>
                        <div className="bonus-tier-cond">{tier.condition}</div>
                      </div>
                    </div>
                    <div className="bonus-tier-amt">+${tier.amount}</div>
                  </div>
                );
              })}
            </div>
            <div className="bonus-progress-bar">
              <div className="bonus-progress-fill" style={{ width: bonusProgressPct + "%" }}></div>
              <span className="bonus-progress-label">{completed.length} / {BONUS_TIERS[BONUS_TIERS.length-1].lessons} lessons toward THE BIG ONE (${BONUS_TIERS[BONUS_TIERS.length-1].amount})</span>
            </div>
          </article>

          {/* AI CHAT CARD */}
          <article className="dash-card dash-card--ai">
            <div className="eyebrow">Your AI</div>
            <h3 className="dash-card-h serif">She remembers everything.</h3>
            <p className="dash-card-blurb">
              Built for you. Knows the products, knows the lessons, knows what you said last time.
              Push back on her.
            </p>
            <button className="btn btn--charcoal" onClick={() => window.location.hash = "#/chat"}>
              Open chat
            </button>
          </article>

          {/* PROJECTS */}
          <article className="dash-card dash-card--projects">
            <div className="eyebrow">Your projects</div>
            <h3 className="dash-card-h serif">Real internet, real domains.</h3>
            <ul className="dash-project-list">
              {projects.map((p) => (
                <li key={p.name} className="dash-project-row">
                  <div>
                    <div className="dash-project-name serif">{p.name}</div>
                    <div className="dash-project-role">{p.role}</div>
                  </div>
                  <div className="dash-project-status-wrap">
                    <span className={"dash-project-status dash-project-status--" + p.status.toLowerCase()}>{p.status}</span>
                    <a className="link-underline" href={p.url} target="_blank" rel="noopener">
                      Open →
                    </a>
                  </div>
                </li>
              ))}
            </ul>
          </article>

          {/* VOICE INPUT TUTORIAL — HIGH PRIORITY */}
          <article className="dash-card dash-card--voice">
            <div className="eyebrow">🎙️ Most important tip</div>
            <h3 className="dash-card-h serif">Never type again. Just talk.</h3>
            <p className="dash-card-blurb">
              Plug in headphones (or AirPods) and talk to your AI instead of typing.
              Faster. More natural. You'll think better out loud. This is how dad works all day.
            </p>
            <div className="voice-howto">
              <div className="voice-howto-row">
                <span className="voice-platform">📱 iPhone</span>
                <span className="voice-instr">Open ChatGPT or Claude app → tap the mic button → talk. Or use Siri dictation: tap the mic on the keyboard.</span>
              </div>
              <div className="voice-howto-row">
                <span className="voice-platform">💻 Mac</span>
                <span className="voice-instr">Press <kbd>fn</kbd> twice to start dictation. Or use the Claude/ChatGPT desktop apps which have voice mode built in.</span>
              </div>
              <div className="voice-howto-row">
                <span className="voice-platform">🎧 Best setup</span>
                <span className="voice-instr">AirPods + ChatGPT voice mode = it feels like a real conversation. Pace, pause, push back, riff. This is where AI gets magical.</span>
              </div>
            </div>
            <p className="dash-card-blurb" style={{ marginTop: 16, fontStyle: "italic" }}>
              Try it on the next lesson — talk through what you want, don't type. You'll never go back.
            </p>
          </article>

          {/* PAYOUTS LOG */}
          <article className="dash-card dash-card--payouts">
            <div className="eyebrow">Payouts</div>
            <h3 className="dash-card-h serif">Friday Venmo log.</h3>
            <p className="dash-card-blurb">
              {pendingPayout > 0
                ? <>You've earned <strong>${pendingPayout}</strong> this week. Hits Venmo {fmtDateShort(friday)}.</>
                : <>Nothing yet. Finish a lesson to start the meter.</>
              }
            </p>
            <table className="payouts-table">
              <thead>
                <tr><th>Date</th><th>Lessons</th><th>Venmo</th><th>Amount</th></tr>
              </thead>
              <tbody>
                {payoutsLog.length > 0 ? (
                  payoutsLog.map((p, i) => (
                    <tr key={i}>
                      <td>{fmtDateShort(new Date(p.date))}</td>
                      <td>{p.lessons}</td>
                      <td>{p.venmo}</td>
                      <td>${p.amount}</td>
                    </tr>
                  ))
                ) : (
                  <tr><td colSpan="4" style={{ color: "var(--ink-3)", fontStyle: "italic" }}>No cash-outs yet. Finish a lesson, hit Cash out.</td></tr>
                )}
              </tbody>
            </table>
          </article>

          {/* QUICK NAV */}
          <article className="dash-card dash-card--nav">
            <div className="eyebrow">Jump to</div>
            <div className="dash-nav-grid">
              <button onClick={() => window.location.hash = "#/lessons"}>All lessons</button>
              <button onClick={() => window.location.hash = "#/welcome"}>Welcome letter</button>
              <a href="https://laneymae.com" target="_blank" rel="noopener">laneymae.com ↗</a>
              <a href="https://bydelaney.com" target="_blank" rel="noopener">bydelaney.com ↗</a>
            </div>
          </article>
        </div>
      </section>

      <style>{`
        .dash-hero { padding: clamp(40px, 6vw, 72px) 0 32px; }
        .dash-greeting {
          font-family: var(--display);
          font-size: clamp(48px, 7vw, 88px);
          line-height: 1;
          margin: 12px 0 24px;
          letter-spacing: -0.025em;
          font-weight: 500;
        }
        .dash-grid-wrap { padding-bottom: clamp(56px, 8vw, 96px); }
        .dash-grid {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 20px;
        }
        .dash-card {
          background: var(--paper, #fff);
          border: 1px solid var(--line);
          border-radius: 16px;
          padding: 28px;
        }
        .dash-card--earnings { grid-column: span 2; }
        .dash-card--next { grid-column: span 4; position: relative; overflow: hidden; }
        .dash-card--featured {
          background: linear-gradient(135deg, var(--paper, #fff) 0%, var(--terracotta-soft, #EBCAD6) 100%);
          border-color: var(--terracotta);
        }
        .dash-next-accent {
          position: absolute;
          width: 200px; height: 200px;
          background: var(--terracotta);
          border-radius: 50%;
          top: -80px; right: -80px;
          opacity: 0.15;
        }
        .dash-card--ai { grid-column: span 2; }
        .dash-card--projects { grid-column: span 4; }
        .dash-card--bonus {
          grid-column: span 6;
          background: linear-gradient(135deg, #1F1A0F 0%, #2C2419 100%);
          color: var(--cream);
          border-color: #3D3220;
          position: relative;
          overflow: hidden;
        }
        .dash-card--bonus .eyebrow { color: var(--terracotta-soft, #EBCAD6); }
        .dash-card--bonus .dash-card-h { color: var(--cream); }
        .dash-card--bonus .dash-card-blurb { color: rgba(255, 248, 236, 0.7); }
        .bonus-glow {
          position: absolute;
          width: 400px; height: 400px;
          background: radial-gradient(circle, rgba(169, 87, 115, 0.5) 0%, transparent 60%);
          top: -150px; right: -120px;
          filter: blur(40px);
        }
        .bonus-tiers {
          display: grid; gap: 8px;
          margin: 12px 0 24px;
          position: relative;
          z-index: 2;
        }
        .bonus-tier {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 14px 16px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 10px;
          transition: all .2s;
        }
        .bonus-tier.is-hit {
          background: linear-gradient(90deg, rgba(126, 142, 118, 0.25) 0%, rgba(126, 142, 118, 0.08) 100%);
          border-color: var(--sage-deep, #7E8E76);
        }
        .bonus-tier-left { display: flex; align-items: center; gap: 14px; }
        .bonus-tier-icon { font-size: 20px; }
        .bonus-tier-name {
          font-family: var(--display);
          font-size: 17px;
          color: var(--cream);
          font-weight: 500;
        }
        .bonus-tier-cond {
          font-family: var(--serif);
          font-size: 13px;
          color: rgba(255, 248, 236, 0.6);
          margin-top: 2px;
        }
        .bonus-tier-amt {
          font-family: var(--display);
          font-size: 22px;
          font-weight: 600;
          color: var(--terracotta-soft, #EBCAD6);
        }
        .bonus-tier.is-hit .bonus-tier-amt { color: #98C9A3; }
        .bonus-progress-bar {
          position: relative;
          height: 28px;
          background: rgba(255, 255, 255, 0.06);
          border-radius: 999px;
          overflow: hidden;
          margin-top: 8px;
        }
        .bonus-progress-fill {
          position: absolute;
          left: 0; top: 0; bottom: 0;
          background: linear-gradient(90deg, var(--terracotta) 0%, var(--sun, #FFD24A) 100%);
          transition: width .6s cubic-bezier(.2, .8, .2, 1);
        }
        .bonus-progress-label {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: var(--mono, monospace);
          font-size: 11px;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--cream);
          font-weight: 600;
          z-index: 2;
        }
        .dash-card--voice { grid-column: span 6; background: linear-gradient(135deg, var(--paper, #fff) 0%, var(--cream-deep, #f3ece2) 100%); border-color: var(--terracotta); }
        .dash-card--payouts { grid-column: span 4; }
        .dash-card--nav { grid-column: span 2; }

        @media (max-width: 900px) {
          .dash-grid { grid-template-columns: 1fr; }
          .dash-card { grid-column: span 1 !important; }
        }

        .dash-card-h {
          font-size: clamp(22px, 2.2vw, 28px);
          line-height: 1.2;
          margin: 12px 0 12px;
          font-weight: 400;
        }
        .dash-card-blurb {
          font-family: var(--serif);
          font-size: 16px;
          line-height: 1.55;
          color: var(--ink-2);
          margin: 0 0 20px;
        }
        .dash-card-foot {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 16px;
        }

        .dash-stat-row {
          display: flex;
          gap: 36px;
          margin: 20px 0 24px;
        }
        .dash-stat-num {
          font-family: var(--display);
          font-size: 44px;
          font-weight: 500;
          line-height: 1;
          color: var(--ink-1);
          letter-spacing: -0.02em;
        }
        .dash-stat-label {
          font-family: var(--mono, "IBM Plex Mono", monospace);
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: var(--ink-3);
          margin-top: 6px;
        }
        .dash-payout-line {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 18px;
          border-top: 1px solid var(--line);
        }
        .dash-payout-amt {
          font-family: var(--mono, "IBM Plex Mono", monospace);
          font-weight: 600;
          font-size: 16px;
          color: var(--sage-deep, #5c6b56);
        }
        .dash-cashout-btn {
          margin-top: 8px;
          width: 100%;
        }
        .dash-cashout-btn[disabled] {
          opacity: 0.4;
          cursor: not-allowed;
        }
        .cashout-threshold {
          margin-top: 14px;
        }
        .cashout-threshold-bar {
          height: 8px;
          background: var(--cream-deep, #f3ece2);
          border-radius: 999px;
          overflow: hidden;
          position: relative;
        }
        .cashout-threshold-bar::after {
          content: '';
          position: absolute;
          right: 0;
          top: -2px;
          bottom: -2px;
          width: 2px;
          background: var(--sage-deep, #5c6b56);
        }
        .cashout-threshold-fill {
          height: 100%;
          background: linear-gradient(90deg, var(--terracotta) 0%, var(--sage-deep, #5c6b56) 100%);
          transition: width .5s cubic-bezier(.2, .8, .2, 1);
        }
        .cashout-threshold-label {
          font-family: var(--mono, monospace);
          font-size: 11px;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--ink-3);
          margin-top: 6px;
        }

        .dash-project-list { list-style: none; padding: 0; margin: 16px 0 0; }
        .dash-project-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px 0;
          border-bottom: 1px solid var(--line);
          gap: 16px;
        }
        .dash-project-row:last-child { border-bottom: 0; }
        .dash-project-name { font-size: 18px; }
        .dash-project-role { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
        .dash-project-status {
          padding: 4px 10px;
          border-radius: 999px;
          font-size: 11px;
          font-family: var(--mono, monospace);
          text-transform: uppercase;
          letter-spacing: 0.06em;
          background: var(--cream-deep, #f3ece2);
          margin-right: 12px;
        }
        .dash-project-status--published, .dash-project-status--redesigned {
          background: rgba(126, 142, 118, 0.15);
          color: var(--sage-deep, #5c6b56);
        }
        .dash-project-status-wrap { display: flex; align-items: center; }

        .voice-howto { margin-top: 16px; display: grid; gap: 14px; }
        .voice-howto-row {
          display: grid;
          grid-template-columns: 140px 1fr;
          gap: 16px;
          padding: 14px;
          background: rgba(255, 255, 255, 0.6);
          border-radius: 10px;
        }
        @media (max-width: 600px) { .voice-howto-row { grid-template-columns: 1fr; gap: 6px; } }
        .voice-platform {
          font-family: var(--mono, monospace);
          font-size: 13px;
          font-weight: 600;
          color: var(--terracotta-deep);
        }
        .voice-instr {
          font-family: var(--serif);
          font-size: 15px;
          line-height: 1.5;
          color: var(--ink-1);
        }
        kbd {
          font-family: var(--mono, monospace);
          background: var(--ink-1);
          color: var(--cream);
          padding: 2px 6px;
          border-radius: 4px;
          font-size: 12px;
        }

        .payouts-table {
          width: 100%;
          border-collapse: collapse;
          margin-top: 12px;
          font-size: 14px;
        }
        .payouts-table th {
          text-align: left;
          font-family: var(--mono, monospace);
          font-weight: 500;
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          color: var(--ink-3);
          padding: 8px 0;
          border-bottom: 1px solid var(--line);
        }
        .payouts-table td {
          padding: 12px 0;
          border-bottom: 1px solid var(--line);
          font-family: var(--serif);
        }

        .dash-nav-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 8px;
          margin-top: 16px;
        }
        .dash-nav-grid button, .dash-nav-grid a {
          background: transparent;
          border: 1px solid var(--line-strong);
          border-radius: 999px;
          padding: 10px 14px;
          font-size: 13px;
          cursor: pointer;
          font-family: var(--sans);
          text-align: left;
          color: var(--ink-1);
          text-decoration: none;
          transition: background .15s ease;
        }
        .dash-nav-grid button:hover, .dash-nav-grid a:hover {
          background: var(--cream-deep, #f3ece2);
        }
      `}</style>
    </main>
  );
}

// Bonus tier structure
const BONUS_TIERS = [
  { id: "warm", name: "Warmed up", condition: "Finish 3 lessons", lessons: 3, amount: 15 },
  { id: "rolling", name: "Rolling", condition: "Finish 5 lessons", lessons: 5, amount: 25 },
  { id: "serious", name: "Getting serious", condition: "Finish 8 lessons (or 1 Mystery)", lessons: 8, amount: 50 },
  { id: "boss", name: "Boss tier", condition: "Finish both Mystery Lessons", lessons: 10, amount: 100 },
  { id: "summer", name: "🎉 End of summer", condition: "Finish all 8 lessons + ship both Mystery products live", lessons: 12, amount: 250 },
];

// helpers (scoped to this file)
function fmtToday(d) {
  return d.toLocaleDateString(undefined, { weekday: "long", month: "long", day: "numeric" });
}
function fmtDateShort(d) {
  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
}
function nextFriday(from) {
  const d = new Date(from);
  const day = d.getDay();
  const add = (5 - day + 7) % 7 || 7;
  d.setDate(d.getDate() + add);
  return d;
}
function getLessonTitle(id) {
  const lookup = {
    "01": "Vibe a real website into existence",
    "02": "Redesign bydelaney.com (this site)",
    "03": "Drop something weird on Dragon Drop",
    "04": "Try Schedule My Haircut as a customer",
    "05": "Pitch one of dad's products in your own words",
    "06": "Design a logo for bydelaney (yours)",
  };
  return lookup[id] || "Take a break — you've finished the first run.";
}
function getLessonShort(id) {
  const lookup = {
    "01": "laneymae.com is yours. Open it, change it, publish it. The magic moment of seeing your domain change live.",
    "02": "Same skill, your real site. Find the vibe that lands for both 35-year-old roofers and 28-year-old yoga teachers.",
    "03": "Run something weird through Dragon Drop. Tell me what worked.",
    "04": "Be the customer. Find 3 things that are clunky. Real notes.",
    "05": "Write the pitch like you'd describe it to a friend.",
    "06": "Logo workshop with the AI. Buy the one you love. Live on your site by end of session.",
  };
  return lookup[id] || "Pick what's next or rest. Both fine.";
}
function getLessonPayout(id) {
  return id === "05" ? 20 : 15;
}

window.DashboardPage = DashboardPage;