/* ============================================================
   App screens: Welcome, Dashboard, Tract overview, Drill player,
   Curriculum map, Coach moments, Coach Q&A
   ============================================================ */

const { useState: useAS } = React;

/* ---------- App sidebar ---------- */
const AppSidebar = ({ active, onGo, slim = false }) => (
  <aside className="app-sidebar">
    <div className="brand-block">
      <Lockup onClick={() => onGo('dashboard')} />
    </div>
    {!slim && (
      <>
        <div className="side-label">Your rider</div>
        <button className={"side-link " + (active === 'dashboard' ? 'active' : '')} onClick={() => onGo('dashboard')}>
          <Ico d={I.home} /> This week
        </button>
        <button className={"side-link " + (active === 'tracts' ? 'active' : '')} onClick={() => onGo('tracts')}>
          <Ico d={I.bookmark} /> My tracts
        </button>
        <button className={"side-link " + (active === 'map' ? 'active' : '')} onClick={() => onGo('map')}>
          <Ico d={I.ladder} /> Curriculum map
        </button>
        <button className={"side-link " + (active === 'cards' ? 'active' : '')}>
          <Ico d={I.list} /> Drill cards
        </button>

        <div className="side-label">Support</div>
        <button className={"side-link " + (active === 'moments' ? 'active' : '')} onClick={() => onGo('moments')}>
          <Ico d={I.sparkle} /> Coach moments
        </button>
        <button className={"side-link " + (active === 'ask' ? 'active' : '')} onClick={() => onGo('ask')}>
          <Ico d={I.chat} /> Ask Coach Mike
        </button>
        <button className="side-link">
          <Ico d={I.settings} /> Settings
        </button>

        <div className="rider-card">
          <div className="av">L</div>
          <div>
            <div className="name">Landen, 6</div>
            <div className="meta">L1.4 · Day 12 · 62% to L2</div>
          </div>
          <span className="caret"><Ico d={I.caret} size={16} /></span>
        </div>
      </>
    )}
  </aside>
);

/* ---------- App topbar ---------- */
const AppTopbar = ({ crumb, title, actions }) => (
  <div className="app-topbar">
    <div className="left">
      <div className="crumb">{crumb}</div>
      <h1>{title}</h1>
    </div>
    <div className="actions">{actions}</div>
  </div>
);

/* ============================================================
   Screen 4 — Welcome / onboarding
   ============================================================ */
const Welcome = ({ onContinue, onGo }) => {
  const [start, setStart] = useAS('training-wheels');
  return (
    <div className="welcome-shell page-enter">
      <AppSidebar active="" onGo={onGo} slim />
      <div className="welcome-content">
        <div className="welcome-main">
          <div className="success-chip">
            <Ico d={I.check} size={14} /> L1 is unlocked
          </div>
          <div>
            <h1 className="h1">Welcome, Sarah.</h1>
            <p className="lede" style={{ marginTop: 12 }}>
              One last step — tell us about your rider, and we'll line up Coach Mike's first drill.
              (You can add more riders later.)
            </p>
          </div>

          <div className="welcome-card">
            <span className="eyebrow blue">01 · Your rider</span>
            <div className="field" style={{ marginTop: 4 }}>
              <label>Rider's name (what do you call them?)</label>
              <input type="text" placeholder="Landen" defaultValue="Landen" />
            </div>
            <div className="field" style={{ marginBottom: 0 }}>
              <label>Age</label>
              <input type="number" placeholder="6" defaultValue="6" style={{ maxWidth: 120 }} />
            </div>
          </div>

          <div className="welcome-card">
            <span className="eyebrow blue">02 · Where they are today</span>
            <p style={{ color: 'var(--pm-graphite)', margin: '4px 0 16px', fontSize: 15 }}>
              Pick the line that sounds most like your rider right now. You can change this anytime.
            </p>
            <div className="radio-cards">
              {[
                { key: 'never',           nm: "Never pedaled. Bike is new or unfamiliar.",  starts: "Starts at L1.1A" },
                { key: 'training-wheels', nm: "On training wheels. Ready for two wheels.",  starts: "Starts at L1.2" },
                { key: 'balance',         nm: "On a balance bike. Coasts confidently.",     starts: "Starts at L1.3" },
                { key: 'wobbly',          nm: "Pedals a bit but unsteady.",                 starts: "Starts at L1.4" },
                { key: 'quiz',            nm: "I'm not sure — give me the placement quiz.", starts: "→ Quiz" }
              ].map(opt => (
                <div key={opt.key} className={"radio-card " + (start === opt.key ? 'selected' : '')} onClick={() => setStart(opt.key)}>
                  <span className="dot"></span>
                  <span className="nm">{opt.nm}</span>
                  <span className="starts">{opt.starts}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="welcome-card">
            <span className="eyebrow blue">03 · What we're working toward</span>
            <div className="field" style={{ marginTop: 4, marginBottom: 0 }}>
              <textarea defaultValue="Riding away from the driveway by next weekend. (You'll be surprised how often this works out.)" rows={3}></textarea>
            </div>
          </div>

          <button className="btn btn-blue lg" style={{ width: '100%' }} onClick={onContinue}>
            Set up my dashboard <Ico d={I.arrowRight} size={18} />
          </button>
        </div>
      </div>
    </div>
  );
};

/* ============================================================
   Screen 5 — Dashboard
   ============================================================ */
const Dashboard = ({ onGo }) => {
  const weekDrills = [
    { code: 'L1.4D', nm: '3 ways to start pedaling',      meta: 'Logged Sun · 18 min',     state: 'done',  badge: 'Done' },
    { code: 'L1.4E', nm: 'Braking with pedals',           meta: 'Logged Mon · 12 min',     state: 'done',  badge: 'Done' },
    { code: 'L1.4F', nm: 'Braking with handbrakes',       meta: "Today's drill · 15 min",  state: 'now',   badge: 'Now' },
    { code: 'L1.4G', nm: 'Braking + stopping (beginner)', meta: 'Up next',                 state: 'todo',  badge: '15 min' },
    { code: 'L1.4',  nm: 'Milestone · Graduation ride',   meta: 'End of week',             state: 'todo',  badge: '~30 min' }
  ];

  const Ring = ({ pct }) => {
    const r = 55, c = 2 * Math.PI * r;
    const off = c - (c * pct / 100);
    return (
      <svg className="ring-svg" viewBox="0 0 130 130">
        <circle className="track" cx="65" cy="65" r={r} />
        <circle className="fill" cx="65" cy="65" r={r}
                strokeDasharray={c} strokeDashoffset={off} />
      </svg>
    );
  };

  return (
    <div className="app-shell page-enter">
      <AppSidebar active="dashboard" onGo={onGo} />
      <div className="app-main">
        <AppTopbar
          crumb="Home · This week"
          title="Good morning, Sarah."
          actions={<>
            <button className="park-mode-pill" onClick={() => onGo('park')}>
              <Ico d={I.pin} size={14} /> Park mode
            </button>
            <button className="btn btn-ghost sm">Log today's ride</button>
            <button className="btn btn-blue" onClick={() => onGo('drill')}>
              Continue drill <Ico d={I.arrowRight} size={16} />
            </button>
          </>}
        />
        <div className="app-content">

          {/* Row 1 */}
          <div className="dash-row-1">
            <div className="now-card">
              <span className="chip-row">L1.4 · Find the pedals</span>
              <h2>Today: braking with handbrakes.</h2>
              <p>15-minute drill. Once Landen does this for 3 tries without overshooting,
                 he's ready for L1.4G — graduation.</p>
              <div className="ctas">
                <button className="btn btn-blue" onClick={() => onGo('drill')}>
                  Start drill <Ico d={I.arrowRight} size={16} />
                </button>
                <button className="btn btn-ghost sm">Skip for today</button>
              </div>
            </div>

            <div className="app-card progress-card">
              <div className="card-title">Progress · L1.4</div>
              <div className="ring-wrap" style={{ position: 'relative' }}>
                <Ring pct={62} />
                <span className="ring-pct" style={{ position: 'absolute' }}>62%</span>
              </div>
              <div className="meta">
                <strong>4 of 7 drills</strong> in L1.4 complete.<br/>
                Up next: <strong>L1.4G — Braking + Stopping</strong>. Then L2!
              </div>
            </div>
          </div>

          {/* Row 2 */}
          <div className="dash-row-2">
            <div className="app-card">
              <div className="card-title">This week's drills</div>
              {weekDrills.map((d, i) => (
                <div key={i} className="drill-row">
                  <div className={"drill-check " + d.state}>
                    {d.state === 'done' ? '✓' : d.state === 'now' ? '▶' : ''}
                  </div>
                  <div>
                    <div className="nm">{d.code} · {d.nm}</div>
                    <div className="meta">{d.meta}</div>
                  </div>
                  <span className={"badge " + d.state}>{d.badge}</span>
                </div>
              ))}
            </div>

            <div className="stat-stack">
              <div className="stat-card">
                <div className="n">Day <span className="accent">12</span></div>
                <div className="l">on the Pedaling Minds journey</div>
              </div>
              <div className="stat-card">
                <div className="n">3 <span className="accent">breakthroughs</span></div>
                <div className="l">moments Landen surprised himself</div>
              </div>
              <div className="stat-card">
                <div className="n">L2 <span className="ok">in 5 days</span></div>
                <div className="l">at this pace, per the median rider</div>
              </div>
            </div>
          </div>

          {/* Row 3 — Coach note */}
          <div className="coach-note-card">
            <div className="av"></div>
            <div>
              <div className="tag">A note from Coach Mike</div>
              <h3>Push push pull give · when Landen freezes at the brake</h3>
              <p>
                If he starts to shut down, don't push through. Step back, give him a 60-second break
                with a sip of water, and let him try again on his own terms. Tomorrow you'll get further
                than today. Patience over pace — always.
              </p>
              <a className="btn btn-link" onClick={() => onGo('moments')}>Read the full coach moment →</a>
            </div>
          </div>

        </div>
      </div>
    </div>
  );
};

/* ============================================================
   Screen 6 — Tract overview (authenticated)
   ============================================================ */
const TractOverview = ({ onGo }) => {
  const [open, setOpen] = useAS('L1.4');

  const SmallRing = ({ pct }) => {
    const r = 24, c = 2 * Math.PI * r;
    return (
      <svg viewBox="0 0 60 60">
        <circle cx="30" cy="30" r={r} fill="none" stroke="var(--pm-shell)" strokeWidth="6" />
        <circle cx="30" cy="30" r={r} fill="none" stroke="var(--pm-blue-600)" strokeWidth="6"
                strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c - (c * pct / 100)}
                transform="rotate(-90 30 30)" />
      </svg>
    );
  };

  const modules = [
    {
      id: 'L1.1', title: 'Get comfortable on the bike',
      status: 'done', progress: '7/7 complete',
      rows: [
        ['L1.1A', 'Wheel Speed Demo', 'done', 'Day 1'],
        ['L1.1B', 'Stand Bike Up / Lay It Down', 'done', 'Day 1'],
        ['L1.1C', 'Get On and Off Bike', 'done', 'Day 2'],
        ['L1.1D', 'Lean and Catch', 'done', 'Day 2'],
        ['L1.1E', 'Overturning Handlebars', 'done', 'Day 3'],
        ['L1.1F', 'Stationary Balance', 'done', 'Day 3'],
        ['L1.1G', 'Handbrake Intro', 'done', 'Day 4']
      ]
    },
    {
      id: 'L1.2', title: 'Walk the bike',
      status: 'done', progress: '6/6 complete',
      rows: [
        ['L1.2A', 'Walk the Bike: Slow', 'done', 'Day 5'],
        ['L1.2B', 'Eyes Forward', 'done', 'Day 5'],
        ['L1.2C', 'Slow Zig Zag', 'done', 'Day 6'],
        ['L1.2D', 'Lean & Turn + One Leg Scoot', 'done', 'Day 6'],
        ['L1.2E', 'Look Through the Turn', 'done', 'Day 7'],
        ['L1.2F', 'Walk the Bike: Faster', 'done', 'Day 7']
      ]
    },
    {
      id: 'L1.3', title: 'Coasting',
      status: 'done', progress: '4/4 complete',
      rows: [
        ['L1.3A', 'Beginner Steps', 'done', 'Day 8'],
        ['L1.3B', 'Feet Up', 'done', 'Day 8'],
        ['L1.3C', 'Turning', 'done', 'Day 9'],
        ['L1.3D', 'Steering', 'done', 'Day 9']
      ]
    },
    {
      id: 'L1.4', title: 'First pedals',
      status: 'now', progress: '4/7 in progress',
      rows: [
        ['L1.4A', 'Install Pedals (knowledge)', 'done', 'Day 9'],
        ['L1.4B', 'Find the Pedals', 'done', 'Day 9'],
        ['L1.4C', 'Walk with Pedals', 'done', 'Day 10'],
        ['L1.4D', 'Pedal Start: 3 Ways', 'done', 'Day 11'],
        ['L1.4E', 'Braking with Pedals', 'done', 'Day 11'],
        ['L1.4F', 'Braking with Handbrakes', 'now', 'Today · Continue →'],
        ['L1.4G', 'Braking + Stopping (beginner)', 'todo', 'Up next']
      ]
    }
  ];

  return (
    <div className="app-shell page-enter">
      <AppSidebar active="tracts" onGo={onGo} />
      <div className="app-main">
        <AppTopbar
          crumb="My tracts · L1: Learn to Pedal"
          title="L1: Learn to Pedal."
          actions={<>
            <button className="btn btn-ghost sm">
              <Ico d={I.download} size={16} /> Download all drill cards
            </button>
            <button className="btn btn-blue" onClick={() => onGo('drill')}>
              Resume L1.4F <Ico d={I.arrowRight} size={16} />
            </button>
          </>}
        />
        <div className="app-content">

          <div className="outcome-strip">
            <div>
              <span className="eyebrow blue">Outcome</span>
              <div className="text" style={{ marginTop: 6 }}>
                Landen mounts the bike, pushes off, pedals at least 50 feet, and stops cleanly.
                He does it on his own and asks to do it again.
              </div>
            </div>
            <div className="small-ring">
              <div style={{ position: 'relative' }}>
                <SmallRing pct={62} />
                <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
                              fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 16,
                              color: 'var(--pm-blue-600)' }}>62%</div>
              </div>
              <div className="meta">L1.4<br/>Day 12</div>
            </div>
          </div>

          <div className="module-ladder">
            {modules.map(m => (
              <div key={m.id} className={"ladder-card " + (open === m.id ? "expanded" : "")}>
                <div className="head" onClick={() => setOpen(open === m.id ? '' : m.id)}>
                  <span className="id">{m.id}</span>
                  <div>
                    <div className="title">{m.title}</div>
                  </div>
                  <span className={"status " + m.status}>
                    {m.status === 'done' ? '✓ ' : m.status === 'now' ? '▶ ' : ''}{m.progress}
                  </span>
                  <span className="caret"><Ico d={I.caret} size={16} /></span>
                </div>
                <div className="body">
                  {m.rows.map((r, i) => (
                    <div key={i} className="row">
                      <span className={"check " + r[2]}>
                        {r[2] === 'done' ? '✓' : r[2] === 'now' ? '▶' : ''}
                      </span>
                      <span className="code">{r[0]}</span>
                      <span className="name">{r[1]}</span>
                      <span className="meta">
                        {r[2] === 'now' ? (
                          <a onClick={() => onGo('drill')} style={{ color: 'var(--pm-red-600)', fontFamily: 'var(--font-display)', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', fontSize: 11, cursor: 'pointer' }}>
                            {r[3]}
                          </a>
                        ) : r[3]}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
            <div className="ladder-card">
              <div className="head" style={{ background: 'var(--pm-shell)' }}>
                <span className="id" style={{ background: 'var(--pm-amber-100)', color: '#7A5210' }}>
                  <Ico d={I.award} size={18} stroke={2.2} />
                </span>
                <div>
                  <div className="title">Graduation Ride</div>
                </div>
                <span className="status locked">Locked until L1.4G</span>
                <span></span>
              </div>
            </div>
          </div>

          <div className="download-card">
            <div className="text">
              Download every L1 drill card as a single PDF — 24 pages, formatted for printing or
              saving to your phone for the park.
            </div>
            <button className="btn btn-blue">
              <Ico d={I.download} size={16} /> Download L1 drill cards (PDF)
            </button>
          </div>

        </div>
      </div>
    </div>
  );
};

/* ============================================================
   Screen 7 — Drill / Lesson player
   ============================================================ */
const DrillPlayer = ({ onGo }) => {
  const [speed, setSpeed] = useAS('1');
  const [complete, setComplete] = useAS(false);

  return (
    <div className="app-shell page-enter">
      <AppSidebar active="dashboard" onGo={onGo} />
      <div className="app-main">
        <AppTopbar
          crumb="This week · L1.4 · L1.4F"
          title="Braking with handbrakes."
          actions={<>
            <button className="btn btn-ghost sm">Save for later</button>
            <button className={"btn " + (complete ? 'btn-ghost' : 'btn-blue')} onClick={() => setComplete(!complete)}>
              {complete ? <>Complete <Ico d={I.check} size={16}/></> : <>Mark complete <Ico d={I.check} size={16} /></>}
            </button>
          </>}
        />
        <div className="app-content">

          <div className="video-frame">
            <span className="chip">Drill L1.4F · 4:32</span>
            <div className="play-btn"><Ico d={I.play} stroke={0} size={38} /></div>
            <div className="caption">
              <div className="step">Step 5 of 7 · Level 1.4</div>
              <h2>Braking with handbrakes</h2>
            </div>
          </div>

          <div className="scrubber">
            <span className="timer">01:43 / 04:32</span>
            <div className="bar"><div className="fill"></div><div className="dot"></div></div>
            <div className="speeds">
              {['0.75', '1', '1.25'].map(s => (
                <button key={s} className={speed === s ? 'active' : ''} onClick={() => setSpeed(s)}>
                  {s}×
                </button>
              ))}
            </div>
          </div>

          <div className="drill-info-row">
            <div className="drill-info-card">
              <div className="ttl">What you'll teach</div>
              <ol>
                <li>Have Landen walk the bike at a slow pace, both hands on the bars.</li>
                <li>Cue: <em>"squeeze the brake like you're squeezing a sponge — slow, not sudden."</em></li>
                <li>Repeat 5 times. Watch for over-squeezing — back brake first if they're skidding.</li>
                <li>Once smooth at a walk, add a 3-second coast before the squeeze.</li>
              </ol>
            </div>

            <div className="drill-info-card">
              <div className="ttl">Watch for</div>
              <div className="watch-item">
                <span className="dot warn"><Ico d={I.warn} size={14} stroke={2.2}/></span>
                <div>
                  <div className="h">Over-squeezing front brake</div>
                  <div className="m">Switch to back-only for 3 reps.</div>
                </div>
              </div>
              <div className="watch-item">
                <span className="dot warn"><Ico d={I.warn} size={14} stroke={2.2}/></span>
                <div>
                  <div className="h">Looking down at hands</div>
                  <div className="m">Eyes forward — feel it, don't watch it.</div>
                </div>
              </div>
              <div className="watch-item">
                <span className="dot ok">✓</span>
                <div>
                  <div className="h">Stops smoothly at the line</div>
                  <div className="m">Ready to add coast.</div>
                </div>
              </div>
            </div>

            <div className="drill-info-card cue-card">
              <div className="ttl">Coach Mike's cue</div>
              <div className="quote">"Slow is smooth. Smooth is safe. Safe is fast."</div>
              <div className="sub">Say it out loud before each rep. The cadence helps the rider settle.</div>
            </div>
          </div>

          <div className="action-bar">
            <div className="action-chip">
              <span className="ico"><Ico d={I.download} size={18} /></span>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: 'var(--pm-ink)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
                  L1.4F drill card
                </div>
                <div style={{ fontSize: 12, color: 'var(--pm-graphite)' }}>1-page PDF for the park</div>
              </div>
              <a>Download →</a>
            </div>
            <div className="action-chip">
              <span className="ico"><Ico d={I.video} size={18} /></span>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: 'var(--pm-ink)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
                  Something off?
                </div>
                <div style={{ fontSize: 12, color: 'var(--pm-graphite)' }}>Submit a 30-sec clip to Coach Mike</div>
              </div>
              <a onClick={() => onGo('ask')}>Send →</a>
            </div>
            <div></div>
          </div>

          <div className="complete-strip" style={{ marginTop: 16 }}>
            <button className="btn btn-blue lg" onClick={() => { setComplete(true); }}>
              Mark complete <Ico d={I.check} size={18} />
            </button>
            <span className="nxt">Then up next: <strong>L1.4G — Braking + Stopping</strong></span>
          </div>

        </div>
      </div>
    </div>
  );
};

/* ============================================================
   Screen 8 — Curriculum map
   ============================================================ */
const CurriculumMap = ({ onGo }) => {
  // 24 drill chips for L1
  const l1Drills = [
    ['L1.1A','done'],['L1.1B','done'],['L1.1C','done'],['L1.1D','done'],
    ['L1.1E','done'],['L1.1F','done'],['L1.1G','done'],
    ['L1.2A','done'],['L1.2B','done'],['L1.2C','done'],['L1.2D','done'],['L1.2E','done'],['L1.2F','done'],
    ['L1.3A','done'],['L1.3B','done'],['L1.3C','done'],['L1.3D','done'],
    ['L1.4A','done'],['L1.4B','done'],['L1.4C','done'],['L1.4D','done'],
    ['L1.4F','now'],
    ['L1.4G','todo'],['L1.4M','todo']
  ];

  const lockedLanes = [
    { lvl: 2, title: 'Rookie',       sub: 'Pedaling, turning, stopping confidently',  price: 79,  bundle: 'or bundle with L3 for $139' },
    { lvl: 3, title: 'Novice',       sub: 'Confident on paths · simple road rules',   price: 79 },
    { lvl: 4, title: 'Intermediate', sub: 'Group riding · hand signals · quiet roads',price: 79 },
    { lvl: 5, title: 'Advanced',     sub: 'Dirt, rocks, and short climbs with control',price: 79 },
    { lvl: 6, title: 'Trail',        sub: 'A 10-mile family ride',                    price: 79 }
  ];

  return (
    <div className="app-shell page-enter">
      <AppSidebar active="map" onGo={onGo} />
      <div className="app-main">
        <AppTopbar
          crumb="Curriculum · Full ladder"
          title="Curriculum map."
          actions={<>
            <button className="btn btn-ghost sm"><Ico d={I.print} size={16}/> Print map</button>
            <button className="btn btn-blue" onClick={() => onGo('drill')}>
              Resume L1.4F <Ico d={I.arrowRight} size={16}/>
            </button>
          </>}
        />
        <div className="app-content">

          <div className="lanes">
            {/* L1 — owned */}
            <div className="lane lvl1">
              <div className="head">
                <div className="num">L1</div>
                <div>
                  <div className="title">Learn to Pedal</div>
                  <div className="sub">No experience · coasting + balance</div>
                </div>
                <div className="right">20 of 24 drills complete<br/>You're on L1.4F</div>
              </div>
              <div className="drills">
                {l1Drills.map(([id, s]) => (
                  <span key={id} className={"chip " + s} onClick={() => s === 'now' && onGo('drill')}>
                    {s === 'done' && '✓ '}{s === 'now' && '▶ '}{id}
                  </span>
                ))}
              </div>
            </div>

            {/* Locked lanes */}
            {lockedLanes.map(l => (
              <div key={l.lvl} className={"lane lvl" + l.lvl + " locked"}>
                <div className="head">
                  <div className="num">L{l.lvl}</div>
                  <div>
                    <div className="title">{l.title}</div>
                    <div className="sub">{l.sub}</div>
                  </div>
                  <div className="right">Locked</div>
                </div>
                <div className="lane-locked-msg">
                  <div className="msg">
                    L{l.lvl} is locked. → Buy this tract for ${l.price}{l.bundle ? ' — ' + l.bundle : ''}.
                  </div>
                  <button className="btn btn-primary sm">Buy L{l.lvl} →</button>
                </div>
              </div>
            ))}
          </div>

          <div className="bundle-banner-app">
            <div>
              <h3>Get the full journey.</h3>
              <p>L1 → L6 for $399 — every drill, every milestone, every coach moment.</p>
            </div>
            <button className="btn btn-on-dark">See the bundle →</button>
          </div>

        </div>
      </div>
    </div>
  );
};

/* ============================================================
   Screen 9 — Coach Moments
   ============================================================ */
const CoachMoments = ({ onGo }) => {
  const [openId, setOpenId] = useAS(null);
  const cards = [
    { id: 'fear',        tag: 'Fear',         t: "My rider is shutting down.",          d: "Won't make eye contact. Won't try. Take a break — and here's exactly how." },
    { id: 'frustration', tag: 'Frustration',  t: "They're crying after a fall.",        d: "Empathy first, then mechanics. Don't move on too fast." },
    { id: 'confidence',  tag: 'Confidence',   t: "Going too fast, won't slow down.",    d: "The \"Push Push Pull Give\" framing for over-confident riders." },
    { id: 'stuck',       tag: 'Stuck',        t: "We've been on this drill 3 days.",    d: "Two ways to break through without forcing it." },
    { id: 'family',      tag: 'Family',       t: "Sibling rivalry on the bike.",        d: "Setting them up so neither rider feels less-than." },
    { id: 'bigday',      tag: 'Big day',      t: "They just landed their first ride.",  d: "The \"celebrate the effort\" loop. Don't skip this part." }
  ];

  if (openId === 'fear') {
    return (
      <div className="app-shell page-enter">
        <AppSidebar active="moments" onGo={onGo} />
        <div className="app-main">
          <AppTopbar
            crumb="Support · Coach moments · Fear"
            title="My rider is shutting down."
            actions={null}
          />
          <div className="app-content cm-detail">
            <a className="back-link" onClick={() => setOpenId(null)}>
              <Ico d={I.arrowLeft} size={14}/> Back to coach moments
            </a>
            <span className="cm-tag" style={{ marginBottom: 16, display: 'inline-block' }}>Fear</span>

            <div className="video-frame">
              <span className="chip">Coach Mike · 3:48</span>
              <div className="play-btn"><Ico d={I.play} stroke={0} size={38}/></div>
              <div className="caption">
                <div className="step">Coach Moment · Fear</div>
                <h2>Why kids shut down — and what to do.</h2>
              </div>
            </div>

            <div className="cm-detail-body">
              <div className="col-left">
                <h3>First — what shutting down actually looks like.</h3>
                <p>
                  It's not always tears. It's the eyes going down. The shoulders rounding. The
                  "I don't want to" that's really "I'm scared I'll fail." If you push through this
                  moment, you teach them that the bike is a punishment. If you handle it well, you
                  teach them that you're safe.
                </p>
                <h3>What to do — in this order.</h3>
                <ol>
                  <li>Stop the drill. Don't "just one more."</li>
                  <li>Get to their eye level. Sit if you need to.</li>
                  <li>Sip of water. 60 seconds of nothing.</li>
                  <li>Don't ask "what's wrong." Say: "That was hard. Let's pause."</li>
                  <li>Restart with a drill they own — something they've already done.</li>
                  <li>Re-attempt the hard drill only if they ask. If not, that's tomorrow.</li>
                </ol>
                <h3>What NOT to do.</h3>
                <ul>
                  <li>Don't bargain. ("If you try this one more time you can have ice cream.")</li>
                  <li>Don't compare to siblings or other riders.</li>
                  <li>Don't pretend the moment didn't happen.</li>
                </ul>
              </div>
              <div className="col-right">
                <div className="card">
                  <h4>Related drills</h4>
                  <a className="rel" onClick={() => onGo('drill')}>L1.1A · Wheel Speed Demo</a>
                  <a className="rel" onClick={() => onGo('drill')}>L1.1F · Stationary Balance</a>
                </div>
                <div className="card">
                  <h4>Still stuck after this?</h4>
                  <p style={{ color: 'var(--pm-graphite)', fontSize: 14, lineHeight: 1.55, margin: '0 0 14px' }}>
                    Send Coach Mike a 30-second clip and he'll point you at the next move.
                  </p>
                  <button className="btn btn-blue" style={{ width: '100%' }} onClick={() => onGo('ask')}>
                    Ask Coach Mike <Ico d={I.arrowRight} size={16}/>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="app-shell page-enter">
      <AppSidebar active="moments" onGo={onGo} />
      <div className="app-main">
        <AppTopbar
          crumb="Support · Coach moments"
          title="What's happening with your rider?"
          actions={null}
        />
        <div className="app-content">
          <p className="lede" style={{ maxWidth: 680 }}>
            Pick the moment that matches what you're seeing right now. Coach Mike will tell you what
            to do — drawn directly from the camp playbook.
          </p>
          <div className="cm-grid">
            {cards.map(c => (
              <div key={c.id} className="cm-card" onClick={() => setOpenId(c.id === 'fear' ? 'fear' : null)}>
                <span className="cm-tag">{c.tag}</span>
                <h3>{c.t}</h3>
                <p>{c.d}</p>
                <span className="open">Open guide →</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

/* ============================================================
   Screen 10 — Coach Q&A
   ============================================================ */
const CoachQA = ({ onGo }) => {
  const [view, setView] = useAS('compose'); // 'compose' | 'detail'

  if (view === 'detail') {
    return (
      <div className="app-shell page-enter">
        <AppSidebar active="ask" onGo={onGo} />
        <div className="app-main">
          <AppTopbar
            crumb="Support · Ask Coach Mike · Reply"
            title="Landen leans forward when he brakes."
            actions={<button className="btn btn-blue" onClick={() => setView('compose')}>
              + New question
            </button>}
          />
          <div className="app-content">
            <a className="back-link" onClick={() => setView('compose')}>
              <Ico d={I.arrowLeft} size={14}/> Back to ask
            </a>

            <div className="qa-detail-head">
              <span className="eyebrow blue">L1.4F · Braking with handbrakes</span>
              <h2 className="h2" style={{ marginTop: 8, fontSize: 28 }}>
                Landen leans forward when he brakes — is the lever too long?
              </h2>
              <div style={{ fontSize: 13, color: 'var(--pm-graphite)', marginTop: 8 }}>
                You · 2 days ago · Video attached
              </div>

              <div className="qa-orig">
                <div className="thumb"></div>
                <div className="q-text">
                  "When we try to brake with both hands, Landen leans forward and almost topples over
                  the front. He's gotten through L1.4D and L1.4E fine but this one keeps failing.
                  Is the lever reach too long for him?"
                </div>
              </div>
            </div>

            <div className="qa-reply">
              <div className="head">
                <div className="av"></div>
                <div>
                  <div className="name">Coach Mike Friedman · Founder</div>
                  <div className="when">Replied 1 day ago</div>
                </div>
              </div>

              <div className="video-frame" style={{ marginBottom: 24 }}>
                <span className="chip">Coach Mike · 1:24</span>
                <div className="play-btn"><Ico d={I.play} stroke={0} size={38}/></div>
                <div className="caption">
                  <div className="step">Reply video</div>
                  <h2>Coach Mike reviews your clip.</h2>
                </div>
              </div>

              <div className="body">
                <p>Hi Sarah — watched the clip three times. Two things going on at once:</p>
                <p>
                  First, you're right about the lever — it's too far for his hand. Loosen the bolt at
                  the lever clamp and slide it inboard about half an inch. Tighten back to snug, not
                  death-grip. There's a 30-second video in the L1.4 Bike Check module that shows the
                  exact move.
                </p>
                <p>
                  Second — and this is the bigger one — he's leaning forward because he's still trying
                  to pedal <em>while</em> squeezing. We want him to coast, then squeeze. Go back to
                  L1.4E for two more sessions. Have him pedal three full revolutions, <em>then</em>
                  drop the hands to the levers as he coasts. Once that's clean, L1.4F becomes the same
                  motion with a stop instead of a coast. He's ready. You're 90% of the way there.
                </p>
                <div className="sig">— Coach Mike</div>
              </div>

              <div className="actions">
                <button className="btn btn-blue">Mark resolved <Ico d={I.check} size={16}/></button>
                <button className="btn btn-ghost sm">Reply with follow-up →</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="app-shell page-enter">
      <AppSidebar active="ask" onGo={onGo} />
      <div className="app-main">
        <AppTopbar
          crumb="Support · Ask Coach Mike"
          title="Ask Coach Mike."
          actions={<button className="btn btn-blue"><Ico d={I.plus} size={16}/> New question</button>}
        />
        <div className="app-content">
          <div className="qa-grid">
            {/* Submission form */}
            <div className="app-card">
              <span className="eyebrow blue">New question</span>
              <h2 className="h2" style={{ marginTop: 8, fontSize: 26 }}>
                What are you seeing on the bike?
              </h2>

              <div style={{ marginTop: 20 }}>
                <div className="field">
                  <label>Which rider?</label>
                  <select defaultValue="landen">
                    <option value="landen">Landen, 6</option>
                  </select>
                </div>
                <div className="field">
                  <label>Which drill is this about? (optional)</label>
                  <select defaultValue="l14f">
                    <option value="l14f">L1.4F · Braking with handbrakes</option>
                    <option>L1.4E · Braking with pedals</option>
                    <option>L1.4D · Pedal start: 3 ways</option>
                  </select>
                </div>
                <div className="field">
                  <label>What's happening?</label>
                  <textarea rows={5} defaultValue="When we try to brake with both hands, Landen leans forward and almost topples over the front. He's gotten through L1.4D and L1.4E fine but this one keeps failing. Is the lever reach too long for him?"></textarea>
                </div>
                <div className="field">
                  <label>Attach a 30-second clip (optional but helps a lot)</label>
                  <div className="upload-zone">
                    <div className="ico"><Ico d={I.video} size={32}/></div>
                    <div className="t">Drop a clip here, or click to upload</div>
                    <div className="sub">30 seconds is plenty. Show the moment, not the warmup.</div>
                  </div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
                  <button className="btn btn-blue">Send to Coach Mike <Ico d={I.arrowRight} size={16}/></button>
                  <span style={{ fontSize: 13, color: 'var(--pm-graphite)' }}>Typical response time: 48–72 hours.</span>
                </div>
              </div>
            </div>

            {/* Inbox */}
            <div>
              <span className="eyebrow blue">Your inbox</span>
              <div style={{ display: 'grid', gap: 10, marginTop: 14 }}>
                <div className="qa-inbox-card" onClick={() => setView('detail')}>
                  <span className="chip-status answered">Answered</span>
                  <div className="q">"Landen leans forward when he brakes — is the lever too long?"</div>
                  <div className="meta">L1.4F · Sent 2 days ago · Reply from Coach Mike, 1 day ago</div>
                  <span className="open-link">Open reply →</span>
                </div>
                <div className="qa-inbox-card">
                  <span className="chip-status pending">Pending</span>
                  <div className="q">"He keeps looking at his feet when he pedals — how do I fix this?"</div>
                  <div className="meta">L1.4D · Sent 6 hours ago · Coach Mike usually responds in 48–72h</div>
                </div>
                <div className="qa-inbox-card">
                  <span className="chip-status resolved">Resolved</span>
                  <div className="q">"Stuck on coasting — won't lift his feet."</div>
                  <div className="meta">L1.3 · Resolved 1 week ago</div>
                  <span className="open-link">Open reply →</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, {
  AppSidebar, AppTopbar,
  Welcome, Dashboard, TractOverview, DrillPlayer,
  CurriculumMap, CoachMoments, CoachQA
});