/* Welcome page — private intro for Delaney.
   Accessed via #/welcome (not in public nav). */

function WelcomePage({ setRoute }) {
  const lessons = [
    {
      n: "01",
      title: "Vibe-redesign your own site",
      blurb:
        "First thing — make bydelaney.com look like YOU. Colors, photos, layout. Same words, your eyes. You ship it. Real domain, real internet.",
      eta: "1–2 sessions",
      cta: "Open the design panel",
      go: () => {
        // open tweaks panel
        const ev = new CustomEvent("delaney:open-tweaks");
        window.dispatchEvent(ev);
      },
    },
    {
      n: "02",
      title: "Pick one of dad's products. Break it down.",
      blurb:
        "Open Dragon Drop. Use it. Then tell me: who's it actually for, would real people pay, what's missing, what's better. Real opinion. No homework voice.",
      eta: "1 session",
      cta: "Try Dragon Drop",
      href: "https://mydragondrop.com",
    },
    {
      n: "03",
      title: "AI in business — the real version",
      blurb:
        "Not the LinkedIn version. What AI can actually do, what it can't, where the money is, where the bullshit is. Your AI walks you through, you push back.",
      eta: "2 sessions",
      cta: "Start the lesson",
      go: () => setRoute("tasks"),
    },
    {
      n: "04",
      title: "Build something tiny",
      blurb:
        "One page. Your idea. Shipped with AI. Doesn't have to be big. Has to be real and live on the internet.",
      eta: "1 weekend",
      cta: "Get a domain idea",
      go: () => setRoute("tasks"),
    },
    {
      n: "05",
      title: "Research something that bugs you",
      blurb:
        "Pick anything you actually care about — skin care brands, college admissions racket, a song that won't leave your head — use your AI to dig. Write the take.",
      eta: "1 session",
      cta: "Pick a topic",
      go: () => setRoute("tasks"),
    },
  ];

  return (
    <main className="page-enter" data-screen-label="Welcome">
      <section className="welcome-hero">
        <div className="shell welcome-hero-inner">
          <div className="eyebrow">For Delaney — Summer 2026</div>
          <h1 className="welcome-h1 serif">
            Hi Laney.<br />
            This is your thing.
          </h1>
          <p className="welcome-lead">
            bydelaney.com is yours now. Real domain, real internet,
            real people can pull it up. So is the AI sitting behind it —
            built for you specifically, remembers every conversation we have,
            knows what you're working on.
          </p>
          <p className="welcome-lead">
            Here's the deal for the summer: you help me with some ideas,
            do a little research on a few of my products, and learn how
            this whole AI thing actually works — not the LinkedIn version,
            the real version.
          </p>
          <p className="welcome-lead welcome-lead--muted">
            School just ended. I'm not going to hand you a curriculum.
            We're going to do real things, get bored, get unstuck, ship stuff.
            First thing is fun — you get to redesign this site.
          </p>
          <div className="welcome-cta-row">
            <button className="btn btn--terracotta" onClick={() => {
              const ev = new CustomEvent("delaney:open-tweaks");
              window.dispatchEvent(ev);
            }}>
              Start with #01 — redesign the site
            </button>
            <button className="link-underline" onClick={() => setRoute("tasks")}>
              Talk to your AI <span aria-hidden="true">→</span>
            </button>
          </div>
        </div>
      </section>

      <hr className="divider" />

      <section className="welcome-lessons">
        <div className="shell">
          <div className="welcome-lessons-head">
            <div className="eyebrow">Things we'll actually do</div>
            <h2 className="home-h2">No syllabus. Five real things.</h2>
          </div>
          <ol className="welcome-lessons-list">
            {lessons.map((L) => (
              <li key={L.n} className="welcome-lesson">
                <span className="welcome-lesson-num mono-num">{L.n}</span>
                <div className="welcome-lesson-body">
                  <h3 className="serif welcome-lesson-title">{L.title}</h3>
                  <p className="welcome-lesson-blurb">{L.blurb}</p>
                  <div className="welcome-lesson-foot">
                    <span className="eyebrow">{L.eta}</span>
                    {L.href ? (
                      <a className="link-underline" href={L.href} target="_blank" rel="noopener">
                        {L.cta} <span aria-hidden="true">→</span>
                      </a>
                    ) : (
                      <button className="link-underline" onClick={L.go}>
                        {L.cta} <span aria-hidden="true">→</span>
                      </button>
                    )}
                  </div>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <hr className="divider" />

      <section className="welcome-ai">
        <div className="shell welcome-ai-inner">
          <div>
            <div className="eyebrow">Your AI</div>
            <h2 className="home-h2">She remembers everything.</h2>
            <p className="welcome-lead" style={{ maxWidth: 620 }}>
              Built for you, not the generic ChatGPT one. Knows the products
              we're working on, knows the lessons, remembers what you said
              last week. Push back on her. She's better when you do.
            </p>
          </div>
          <button className="btn btn--charcoal" onClick={() => setRoute("tasks")}>
            Open your AI
          </button>
        </div>
      </section>

      <style>{`
        .welcome-hero { padding: clamp(48px, 8vw, 96px) 0 clamp(36px, 5vw, 64px); }
        .welcome-hero-inner { max-width: 760px; }
        .welcome-h1 {
          font-family: var(--display);
          font-size: clamp(48px, 7vw, 88px);
          line-height: 1;
          letter-spacing: -0.025em;
          margin: 16px 0 28px;
          font-weight: 500;
        }
        .welcome-lead {
          font-family: var(--serif);
          font-size: clamp(18px, 1.6vw, 22px);
          line-height: 1.55;
          color: var(--ink-1);
          margin: 0 0 18px;
          max-width: 660px;
        }
        .welcome-lead--muted { color: var(--ink-2); }
        .welcome-cta-row {
          display: flex; gap: 24px; align-items: center; margin-top: 36px; flex-wrap: wrap;
        }
        .welcome-lessons { padding: clamp(48px, 7vw, 96px) 0; }
        .welcome-lessons-head { margin-bottom: 56px; }
        .welcome-lessons-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
        .welcome-lesson {
          display: grid;
          grid-template-columns: 80px 1fr;
          gap: 32px;
          align-items: start;
          padding: 32px 0;
          border-top: 1px solid var(--line);
        }
        .welcome-lesson:last-child { border-bottom: 1px solid var(--line); }
        .welcome-lesson-num {
          font-size: 28px;
          color: var(--terracotta);
          font-weight: 500;
        }
        .welcome-lesson-title {
          font-size: clamp(22px, 2.4vw, 30px);
          line-height: 1.15;
          margin: 0 0 10px;
          font-weight: 400;
        }
        .welcome-lesson-blurb {
          font-family: var(--serif);
          font-size: 17px;
          line-height: 1.55;
          color: var(--ink-2);
          margin: 0 0 18px;
          max-width: 620px;
        }
        .welcome-lesson-foot {
          display: flex; gap: 20px; align-items: center;
        }
        .welcome-ai {
          padding: clamp(48px, 7vw, 96px) 0;
          background: var(--cream-deep, #f3ece2);
        }
        .welcome-ai-inner {
          display: grid;
          grid-template-columns: 1.4fr auto;
          gap: 48px;
          align-items: end;
        }
        @media (max-width: 720px) {
          .welcome-lesson { grid-template-columns: 1fr; gap: 12px; }
          .welcome-ai-inner { grid-template-columns: 1fr; align-items: start; }
        }
      `}</style>
    </main>
  );
}

window.WelcomePage = WelcomePage;