// welcome.jsx — Mother's Day landing

function Welcome({ momName, fromName, onStart, onJump }) {
  return (
    <div className="page page-fade">
      <section className="welcome">
        <div className="left">
          <div className="eyebrow">Mom Academy · Class of '26</div>
          <h1 className="page-title">A short tour<br />of <em>Gen Z</em> tech.<br />By {fromName}, for {momName}.</h1>
          <p className="lede">
            Four short lessons — Instagram, and three ways to talk to Claude — built so you
            can take your time, click around, and break nothing.
          </p>

          <button className="start-btn" onClick={onStart}>
            Open the first lesson
            <span className="arrow">→</span>
          </button>

          <div className="meta">
            <div className="cell"><span className="k">Student</span><span className="v">{momName}</span></div>
            <div className="cell"><span className="k">Instructor</span><span className="v">{fromName}</span></div>
            <div className="cell"><span className="k">Lessons</span><span className="v">Four</span></div>
            <div className="cell"><span className="k">Homework</span><span className="v">None ever</span></div>
          </div>
        </div>

        <div className="right">
          <div className="card-letter">
            <div className="stamp">
              <div className="num">II</div>
              <div className="lab">Mother's<br />Day</div>
            </div>
            <div className="greeting">Dear {momName},</div>
            <p>Happy Mother's Day!</p>
            <p>
              Breakfast in bed was looking harder than ever to pull off this year :)
              So instead, here's a gift I've owed you for years — a proper, personalized
              tour of Instagram and Claude! Inspired by Khan Academy, welcome to your
              very own: Mom Academy.
            </p>
            <p>
            Have fun exploring! I love you more than anything — thank you for being the best mom I could ever ask for.
            </p>
            <div className="signoff">Love,<br />{fromName}</div>

            <div className="photoslot" style={{
              backgroundImage: 'url(project/images/photo-2.jpg)',
              backgroundSize: 'cover',
              backgroundPosition: 'center 32%',
              border: 'none',
              height: 220,
            }}/>
          </div>
        </div>
      </section>

      <section className="curriculum">
        <div className="eyebrow">The Curriculum</div>
        <h2>Four lessons, in any order.</h2>
        <div className="chapter-grid">
          {[
            { num: 'I',   route: 'instagram',     name: 'Instagram',       desc: 'Scroll the feed, post a photo, send a message to family.', dur: '4 min' },
            { num: 'II',  route: 'claude-chat',   name: 'Claude · Chat',   desc: 'Ask questions, draft notes, summarize papers — like a smart pen pal.', dur: '3 min' },
            { num: 'III', route: 'claude-cowork', name: 'Claude · Cowork', desc: 'Build a workspace where Claude helps you write, organize, and revise.', dur: '4 min' },
            { num: 'IV',  route: 'claude-code',   name: 'Claude · Code',   desc: 'A friendly tour of the developer side — for the curious.',  dur: '4 min' },
          ].map(c => (
            <button key={c.route} className="chapter" onClick={() => onJump(c.route)}>
              <div className="num">{c.num}</div>
              <div className="name">{c.name}</div>
              <div className="desc">{c.desc}</div>
              <div className="duration">{c.dur} · self-paced</div>
            </button>
          ))}
        </div>
      </section>
    </div>
  );
}

window.Welcome = Welcome;