/* ============================================================
   Screen 11 — Park mode (phone frame)
   ============================================================ */

const { useState: useParkS } = React;

const ParkMode = ({ onGo }) => {
  const [checks, setChecks] = useParkS({ a: false, b: false, c: false, d: false });
  const toggle = (k) => setChecks(s => ({ ...s, [k]: !s[k] }));

  return (
    <div className="park-stage page-enter">
      <div className="park-intro">
        <span className="eyebrow blue">Park mode</span>
        <h1>One-thumb, sun-readable, kid-on-the-bike mode.</h1>
        <p>
          When you're at the park and your rider's already on the bike, you don't want to scroll
          through video chapters. Park mode strips the platform down to the one drill you're running
          and a rep counter you can tap with one thumb.
        </p>
      </div>

      <div className="park-phones">
        {/* Phone 1 — Home */}
        <div className="phone">
          <div className="screen">
            <div className="notch"></div>
            <div className="status"><span>9:41</span><span>● ● ●</span></div>

            <div className="park-header">
              <Lockup />
              <button className="x" onClick={() => onGo('dashboard')}><Ico d={I.x} size={20}/></button>
            </div>

            <div className="park-body">
              <div className="park-hero-card">
                <div className="lbl">Park mode · Landen</div>
                <h1>Today's drill</h1>
                <h2>L1.4F · Braking with handbrakes</h2>
                <p>15 minutes. Three clean stops in a row and we're done.</p>
                <button className="big-btn">Start the drill →</button>
              </div>

              <div className="park-links">
                <a className="park-link"><Ico d={I.bookmark}/><span>Drill card</span></a>
                <a className="park-link" onClick={() => onGo('ask')}><Ico d={I.chat}/><span>Ask Coach</span></a>
                <a className="park-link"><Ico d={I.list}/><span>Today's plan</span></a>
              </div>

              <div className="park-footer-note">
                Practice. Patience. Perseverance.
              </div>
            </div>
          </div>
          <div className="label-tag">Park mode · Home</div>
        </div>

        {/* Phone 2 — Drill */}
        <div className="phone">
          <div className="screen">
            <div className="notch"></div>
            <div className="status"><span>9:42</span><span>● ● ●</span></div>

            <div className="park-header">
              <a className="back-link" style={{ margin: 0 }}>
                <Ico d={I.arrowLeft} size={14}/> Back
              </a>
              <button className="btn btn-ghost sm" style={{ height: 32, padding: '0 12px', fontSize: 11 }}>
                Done?
              </button>
            </div>

            <div className="park-drill-strip">
              <div className="lbl">L1.4F · Drill</div>
              <h2>Braking with handbrakes</h2>
            </div>

            <div className="park-video">
              <div className="play"><Ico d={I.play} stroke={0} size={24}/></div>
              <div className="cap">▶ 60-sec coach version · Full 4:32 in app</div>
            </div>

            <div className="park-checklist">
              {[
                { k: 'a', t: 'Walk the bike at a slow pace, both hands on the bars.' },
                { k: 'b', t: 'Cue: "squeeze like a sponge — slow, not sudden."' },
                { k: 'c', t: 'Repeat 5 times. Watch for over-squeezing.' },
                { k: 'd', t: 'Once smooth at a walk, add a 3-second coast before the squeeze.' }
              ].map(row => (
                <div key={row.k} className={"park-checkrow " + (checks[row.k] ? 'done' : '')} onClick={() => toggle(row.k)}>
                  <span className="box">{checks[row.k] ? '✓' : ''}</span>
                  <span className="text">{row.t}</span>
                </div>
              ))}
            </div>

            <div className="park-watch">
              <div className="lbl">Watch for</div>
              <ul>
                <li>Over-squeezing front brake → back only for 3 reps.</li>
                <li>Looking down at hands → "eyes forward."</li>
              </ul>
            </div>

            <div className="park-rep-strip">
              <div className="rep">Rep<strong>3 / 5</strong></div>
              <div className="timer">00:02:14</div>
              <button className="log">Log rep +</button>
            </div>
          </div>
          <div className="label-tag">Park mode · Drill</div>
        </div>
      </div>
    </div>
  );
};

window.ParkMode = ParkMode;