/* Lesson lobby + Lesson 01 detail. Routed via #/lessons/01 */

function LessonsHubPage({ setRoute }) {
  return (
    <main className="page-enter" data-screen-label="Lessons">
      <section className="lessons-hub">
        <div className="shell">
          <div className="eyebrow">Your lessons</div>
          <h1 className="welcome-h1 serif" style={{ marginBottom: 24 }}>
            Pick something.<br />
            Earn while you make stuff.
          </h1>
          <p className="welcome-lead">
            Each one is about an hour. Most pay $15. The bonus ones pay $20.
            Skip what doesn't sound fun. Do six in a row if you're vibing —
            that's a hundred bucks before dinner.
          </p>

          <div className="lesson-cards">
            {LESSONS.map((L) => (
              <article key={L.id} className={"lesson-card " + (L.locked ? "is-locked" : "")} onClick={() => !L.locked && (window.location.hash = "#/lesson/" + L.id)}>
                <div className="lesson-card-num mono-num">{L.id}</div>
                <div className="lesson-card-body">
                  <h3 className="serif lesson-card-title">{L.title}</h3>
                  <p className="lesson-card-blurb">{L.short}</p>
                  <div className="lesson-card-foot">
                    <span className="lesson-payout">${L.payout}</span>
                    <span className="eyebrow">{L.eta}</span>
                    {L.locked && <span className="eyebrow lesson-locked-tag">unlocks after #{String(parseInt(L.id) - 1).padStart(2, "0")}</span>}
                  </div>
                </div>
              </article>
            ))}
          </div>

          <div className="eyebrow" style={{ marginTop: 64 }}>🏆 Milestone missions — bigger one-time bonuses</div>
          <h2 className="home-h2" style={{ marginTop: 14, marginBottom: 16 }}>The real wins.</h2>
          <p className="welcome-lead" style={{ maxWidth: 660, marginBottom: 32 }}>
            These pay differently. Not hourly — outcome-based. The kind of thing
            that goes on a résumé. Do them in any order, whenever you're ready.
          </p>
          <div className="lesson-cards" style={{ marginBottom: 64 }}>
            {MILESTONES.map((M) => (
              <article key={M.id} className={"lesson-card is-locked " + (M.big ? "is-big-milestone" : "")}>
                <div className="lesson-card-num" style={{ fontSize: 28, color: M.big ? "var(--terracotta)" : "var(--sage-deep, #5c6b56)" }}>{M.icon}</div>
                <div className="lesson-card-body">
                  <h3 className="serif lesson-card-title">{M.title}</h3>
                  <p className="lesson-card-blurb">{M.short}</p>
                  <div className="lesson-card-foot">
                    <span className="lesson-payout" style={{ color: M.big ? "var(--terracotta)" : "var(--sage-deep, #5c6b56)", fontSize: M.big ? 20 : 16 }}>+${M.payout}</span>
                    <span className="eyebrow lesson-locked-tag">{M.big ? "🏆 BIG BONUS" : "One-time"}</span>
                  </div>
                </div>
              </article>
            ))}
          </div>

          <div className="eyebrow" style={{ marginTop: 64 }}>Free kits — yours to use or hand to clients</div>
          <h2 className="home-h2" style={{ marginTop: 14, marginBottom: 32 }}>The stuff that comes with you.</h2>
          <p className="welcome-lead" style={{ maxWidth: 660, marginBottom: 32 }}>
            These aren't lessons — they're tools and starter kits you own.
            Use them yourself, give them to friends, or wrap them into a service you sell.
            Three free, one paid (the corporate one — that's a real product we'll build together).
          </p>
          <div className="lesson-cards">
            {FREE_KITS.map((K) => (
              <article key={K.id} className="lesson-card" onClick={() => K.href && window.open(K.href, "_blank")} style={{ background: "var(--paper, #fff)" }}>
                <div className="lesson-card-num mono-num" style={{ color: "var(--sage-deep, #5c6b56)" }}>{K.icon}</div>
                <div className="lesson-card-body">
                  <h3 className="serif lesson-card-title">{K.title}</h3>
                  <p className="lesson-card-blurb">{K.short}</p>
                  <div className="lesson-card-foot">
                    <span className="lesson-payout" style={{ color: K.price === "Free" ? "var(--sage-deep, #5c6b56)" : "var(--terracotta-deep)" }}>{K.price}</span>
                    <span className="eyebrow">{K.eta}</span>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <style>{`
        .lessons-hub { padding: clamp(48px, 8vw, 96px) 0; }
        .lesson-cards {
          display: grid;
          grid-template-columns: 1fr;
          gap: 16px;
          margin-top: 56px;
          max-width: 820px;
        }
        .lesson-card {
          display: grid;
          grid-template-columns: 80px 1fr;
          gap: 24px;
          padding: 28px;
          background: var(--paper, #fff);
          border: 1px solid var(--line);
          border-radius: 14px;
          cursor: pointer;
          transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
        }
        .lesson-card:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 32px rgba(0,0,0,0.06);
          border-color: var(--terracotta);
        }
        .lesson-card.is-locked {
          opacity: 0.55;
          cursor: not-allowed;
        }
        .lesson-card.is-locked:hover {
          transform: none;
          box-shadow: none;
          border-color: var(--line);
        }
        .lesson-card-num {
          font-size: 36px;
          color: var(--terracotta);
          font-weight: 500;
          line-height: 1;
        }
        .lesson-card-title {
          font-size: 24px;
          line-height: 1.2;
          margin: 0 0 8px;
          font-weight: 400;
        }
        .lesson-card-blurb {
          font-family: var(--serif);
          font-size: 16px;
          line-height: 1.5;
          color: var(--ink-2);
          margin: 0 0 16px;
        }
        .lesson-card-foot {
          display: flex;
          gap: 16px;
          align-items: center;
        }
        .lesson-payout {
          font-family: var(--mono, "IBM Plex Mono", monospace);
          font-size: 18px;
          font-weight: 600;
          color: var(--sage-deep, #5c6b56);
        }
        .lesson-locked-tag { color: var(--ink-3); }
      `}</style>
    </main>
  );
}

const FREE_KITS = [
  {
    id: "k1",
    icon: "🧰",
    title: "Free Social Media Kit",
    short: "Templates + caption packs + a posting calendar that doesn't sound like a robot wrote it. Use it for any business — yours or a client's.",
    price: "Free",
    eta: "Download",
    href: "#",
  },
  {
    id: "k2",
    icon: "🎓",
    title: "Free Personal AI Training Kit",
    short: "Get good at AI without watching 40 YouTube videos. Real prompts, real exercises, real outputs. Skip the hype.",
    price: "Free",
    eta: "1 weekend",
    href: "#",
  },
  {
    id: "k3",
    icon: "🏢",
    title: "Free Corporate AI Training Kit",
    short: "What teams actually need to know about AI — written for the marketing director, not the engineer. Hand this to any company.",
    price: "Free",
    eta: "Self-paced",
    href: "#",
  },
  {
    id: "k4",
    icon: "📊",
    title: "AI Corporate Analysis",
    short: "Upload your company's marketing, financials, customer base — get a real diagnostic of where AI fits, what it'll cost, what it'll save. Paid product (in build).",
    price: "Paid",
    eta: "Coming",
    href: "#",
  },
];

const LESSONS = [
  {
    id: "01",
    title: "Meet your AI. Learn what vibe-coding is.",
    short: "First thing — open the chat. Talk to her (yes, talk — voice on). She'll walk you through what AI can actually do in 2026. Real conversation, no syllabus.",
    payout: 15,
    eta: "~1 hour",
    locked: false,
  },
  {
    id: "02",
    title: "Redesign bydelaney.com (this site)",
    short: "Now do it to your main site. Find a vibe that's you but still feels professional. Small business owners are your audience.",
    payout: 15,
    eta: "~1 hour",
    locked: true,
  },
  {
    id: "03",
    title: "Drop something weird on Dragon Drop",
    short: "Pick a contract, a syllabus, a recipe, anything. Run it through Dragon Drop. Tell me what worked, what didn't.",
    payout: 15,
    eta: "~45 min",
    locked: true,
  },
  {
    id: "04",
    title: "🔒 Mystery Lesson",
    short: "Trust us. You're going to want to do this one. Locked until you've done #03.",
    payout: 40,
    eta: "Bigger one",
    locked: true,
    mystery: true,
  },
  {
    id: "05",
    title: "Try Schedule My Haircut as a customer",
    short: "Book yourself a fake appointment, run through the full flow. Find 3 things that are clunky or confusing. Real notes.",
    payout: 15,
    eta: "~45 min",
    locked: true,
  },
  {
    id: "06",
    title: "Pitch one of dad's products in your own words",
    short: "Pick one. Write the homepage like you'd describe it to a friend. No marketing-speak.",
    payout: 20,
    eta: "~1 hour",
    locked: true,
  },
  {
    id: "07",
    title: "Design a logo for bydelaney (yours)",
    short: "Workshop with the AI. Tell it what you want, see 6 options, refine, buy the one you love. Lives on your site by end of session.",
    payout: 15,
    eta: "~1 hour",
    locked: true,
  },
  {
    id: "08",
    title: "🔒 Mystery Lesson #2",
    short: "Another one. Bigger. Co-build with Beta. Locked until you've done #07.",
    payout: 50,
    eta: "Bigger one",
    locked: true,
    mystery: true,
  },
];

// MILESTONE MISSIONS — bigger one-time bonuses. Locked at first, surface as she progresses.
const MILESTONES = [
  {
    id: "m1",
    icon: "🚀",
    title: "First 100 visitors to laneymae.com",
    short: "Ship the site, share the link, hit 100 real visitors. Track in Vercel analytics.",
    payout: 100,
    locked: true,
  },
  {
    id: "m2",
    icon: "📸",
    title: "Post your build on Instagram",
    short: "First Reel or story showing something you made. Tag @bydelaney. Real reach.",
    payout: 50,
    locked: true,
  },
  {
    id: "m3",
    icon: "🎬",
    title: "TikTok about a build",
    short: "30-second TikTok walking through one of your products. Could be Laney Mae, could be Roommates app. Your call.",
    payout: 50,
    locked: true,
  },
  {
    id: "m4",
    icon: "🎯",
    title: "Validate an idea with 10 real humans",
    short: "Pick one of dad's products (or yours). Get 10 real people to react. Write up what you heard. Real customer research.",
    payout: 75,
    locked: true,
  },
  {
    id: "m5",
    icon: "💼",
    title: "🏆 First paid client",
    short: "Someone pays you for marketing work. Anyone. Friend's parent. Local business. Five bucks counts. The threshold is doing it once.",
    payout: 1000,
    locked: true,
    big: true,
  },
];

function Lesson01Page({ setRoute }) {
  // Live timer tick — drives the hour bar
  React.useEffect(() => {
    const tick = () => {
      const startedRaw = localStorage.getItem("delaney.lesson.01.started");
      const fill = document.getElementById("lesson-hour-fill");
      const label = document.getElementById("lesson-hour-label");
      if (!startedRaw || !fill || !label) return;
      const started = new Date(startedRaw).getTime();
      const elapsed = Date.now() - started;
      const hourMs = 60 * 60 * 1000;
      const pct = Math.min(100, (elapsed / hourMs) * 100);
      fill.style.width = pct + "%";
      if (pct >= 100) {
        label.innerText = "Hour complete · $15 earned · Hit Mark Complete";
      } else {
        const remainingMin = Math.max(0, Math.ceil((hourMs - elapsed) / 60000));
        label.innerText = remainingMin + " min left · Keep going";
      }
    };
    tick();
    const i = setInterval(tick, 30000);
    window.addEventListener("delaney:tick-hour", tick);
    return () => { clearInterval(i); window.removeEventListener("delaney:tick-hour", tick); };
  }, []);

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

          <div className="eyebrow">Lesson 01 · $15 · ~1 hour</div>
          <h1 className="welcome-h1 serif" style={{ fontSize: "clamp(40px, 6vw, 72px)" }}>
            Meet your AI.<br />
            Learn what vibe-coding is.
          </h1>

          <p className="welcome-lead" style={{ maxWidth: 660 }}>
            First thing: open your chat. Plug in AirPods. Tap the mic and
            <strong> talk to her</strong> — don't type. She'll walk you through what AI can
            actually do right now in 2026 and why everyone's losing their mind about it.
          </p>

          <p className="welcome-lead" style={{ maxWidth: 660 }}>
            Ask her anything. What is vibe-coding? Why is it different from regular AI?
            What can I actually <em>build</em>? What used to take six months and $50K can take an hour now —
            she'll show you how. No homework voice. Just a conversation.
          </p>

          <div className="lesson-howto">
            <div className="eyebrow">How this works</div>
            <ol className="lesson-howto-list">
              <li>
                Open your <strong>chat</strong> from the dashboard or hit the button below.
              </li>
              <li>
                Pop in AirPods. <strong>Tap the mic, don't type.</strong> Pace yourself,
                hear her voice, push back, riff. She talks back out loud.
              </li>
              <li>
                Ask: "what is vibe-coding?" Then ask follow-ups based on what she says.
                Like a real conversation, not a tutorial.
              </li>
              <li>
                Spend about an hour. By the end you should be able to explain
                vibe-coding to a friend in 3 sentences.
              </li>
              <li>
                Come back here, click <strong>Mark complete</strong>.
                $15 lands in your Venmo when you hit Cash Out on the dashboard.
              </li>
            </ol>
          </div>

          <div className="vibe-intro">
            <div className="eyebrow">First — what's actually happening here</div>
            <h2 className="serif" style={{ fontSize: "clamp(28px, 3.4vw, 40px)", margin: "16px 0 24px", fontWeight: 500, lineHeight: 1.15 }}>
              You're about to vibecode. Read this for 2 minutes — it matters.
            </h2>
            <p className="welcome-lead" style={{ maxWidth: 680 }}>
              <strong>Vibe coding</strong> = you describe what you want, the AI
              writes the code. You react, push back, ask for changes, and watch
              the website change in front of you. No "learning to code" first.
              Just say what you want.
            </p>
            <p className="welcome-lead" style={{ maxWidth: 680 }}>
              Here's why this is wild: <strong>9 months ago</strong> what you're
              about to do in 60 minutes would have cost <strong>$50,000 to
              $100,000</strong> and taken <strong>3 to 6 months</strong>.
              Dad would have had to find a co-founder who could code, raise
              money from people he didn't know, hire two engineers, write a
              spec doc, do design meetings, fight over fonts. For a basic
              landing page.
            </p>
            <p className="welcome-lead" style={{ maxWidth: 680 }}>
              Now you, a 17-year-old, are about to do it in an hour by talking.
              That's not a small thing. The whole world is being re-priced
              and most adults don't realize it yet. You're getting in
              <em> early</em>, which is the only thing that matters.
            </p>
            <p className="welcome-lead pitch-lead--muted" style={{ maxWidth: 680, marginTop: 18, fontStyle: "italic" }}>
              Most adults spent 5 years learning to do what you're about to do
              in 60 minutes. Don't take it for granted. Also don't take it
              too seriously — it's still mostly fun.
            </p>
          </div>

          <div className="lesson-timer">
            <div className="eyebrow">Your hour</div>
            <p style={{ fontFamily: "var(--serif)", fontSize: 16, color: "var(--ink-2)", margin: "12px 0 16px", maxWidth: 580 }}>
              When you open the studio, a timer starts. The first hour is when
              you earn the $15 — after that, keep playing as long as you want.
              Most people do.
            </p>
            <div className="hour-bar" id="lesson-hour-bar">
              <div className="hour-bar-fill" id="lesson-hour-fill"></div>
              <span className="hour-bar-label" id="lesson-hour-label">Press Start to begin your hour →</span>
            </div>
            <button
              className="btn btn--charcoal"
              style={{ marginTop: 16 }}
              onClick={() => {
                const startKey = "delaney.lesson.01.started";
                const existing = localStorage.getItem(startKey);
                if (!existing) {
                  localStorage.setItem(startKey, new Date().toISOString());
                }
                window.dispatchEvent(new Event("delaney:tick-hour"));
                alert("Hour started. Go vibe. Come back when you're done — or whenever.");
              }}
            >
              Start the hour
            </button>
          </div>

          <div className="lesson-tips">
            <div className="eyebrow">Two tips before you start</div>
            <p className="welcome-lead" style={{ fontSize: 17, maxWidth: 620 }}>
              <strong>Push back on the AI.</strong> If it suggests something
              that feels off, say so. It gets better when you have opinions.
            </p>
            <p className="welcome-lead" style={{ fontSize: 17, maxWidth: 620 }}>
              <strong>Done is better than perfect.</strong> Ship it ugly first,
              fix it in Lesson 02. Most people get stuck because they want
              the first version to be the final version. Don't.
            </p>
          </div>

          <div className="lesson-cta-row">
            <button className="btn btn--terracotta" onClick={() => { window.location.hash = "#/chat"; }} style={{ fontSize: 17, padding: "18px 32px" }}>
              Open Chat — Start Talking →
            </button>
            <button
              className="link-underline"
              onClick={() => {
                localStorage.setItem("delaney.lesson.01.complete", new Date().toISOString());
                alert("Lesson 01 complete · $15 added · Hit Cash Out on the dashboard");
                window.location.hash = "#/dashboard";
              }}
            >
              I had the conversation — mark complete <span aria-hidden="true">✓</span>
            </button>
          </div>
        </div>
      </section>

      <style>{`
        .lesson-detail { padding: clamp(48px, 8vw, 96px) 0; }
        .lesson-howto {
          margin-top: 56px;
          padding-top: 40px;
          border-top: 1px solid var(--line);
        }
        .lesson-howto-list {
          margin: 20px 0 0 20px;
          padding: 0;
          max-width: 680px;
        }
        .lesson-howto-list li {
          font-family: var(--serif);
          font-size: 18px;
          line-height: 1.6;
          color: var(--ink-1);
          margin-bottom: 14px;
          padding-left: 8px;
        }
        .lesson-tips {
          margin-top: 56px;
          padding-top: 40px;
          border-top: 1px solid var(--line);
        }
        .lesson-tips .welcome-lead { margin-top: 16px; }
        .lesson-cta-row {
          display: flex;
          gap: 28px;
          align-items: center;
          margin-top: 56px;
          flex-wrap: wrap;
        }
        .vibe-intro {
          margin-top: 56px;
          padding: 32px;
          background: linear-gradient(135deg, var(--paper, #fff) 0%, var(--cream-deep, #f3ece2) 100%);
          border-left: 4px solid var(--terracotta);
          border-radius: 12px;
        }
        .vibe-intro .welcome-lead { margin-bottom: 16px; font-size: 17px; }
        .lesson-timer {
          margin-top: 48px;
          padding-top: 32px;
          border-top: 1px solid var(--line);
        }
        .hour-bar {
          position: relative;
          height: 36px;
          background: var(--cream-deep, #f3ece2);
          border-radius: 999px;
          overflow: hidden;
          max-width: 520px;
        }
        .hour-bar-fill {
          position: absolute;
          left: 0; top: 0; bottom: 0;
          width: 0%;
          background: linear-gradient(90deg, var(--terracotta) 0%, var(--terracotta-deep) 100%);
          transition: width 1s linear;
        }
        .hour-bar-label {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: var(--mono, monospace);
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--ink-1);
          z-index: 2;
          mix-blend-mode: difference;
          filter: invert(0);
        }
      `}</style>
    </main>
  );
}

window.LessonsHubPage = LessonsHubPage;
window.Lesson01Page = Lesson01Page;