// AppMock — the hero phone-like preview, plus floating accent cards.
// Renders inside the .stage container. Uses CSS in styles.css with locally-
// scoped classes prefixed `am-` for clarity.

const APP_MOCK_CSS = `
  .am-phone {
    position: absolute;
    inset: 8% 8% 8% 8%;
    background: #FFFFFF;
    border-radius: 38px;
    border: 1px solid rgba(30, 27, 75, 0.08);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.9) inset,
      0 30px 60px -20px rgba(30, 27, 75, 0.28),
      0 10px 24px -10px rgba(79, 70, 229, 0.2);
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .am-status {
    height: 36px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 22px;
    font-size: 11px; font-weight: 600;
    color: #1E1B4B;
    font-variant-numeric: tabular-nums;
  }
  .am-status-r { display: flex; gap: 4px; align-items: center; }
  .am-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 22px 16px;
    font-size: 13px;
  }
  .am-bar-x {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(30,27,75,0.05);
    display: grid; place-items: center;
    color: #64748B;
  }
  .am-bar-c { display: flex; align-items: center; gap: 14px; }
  .am-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(234, 88, 12, 0.1);
    color: #EA580C;
    font-weight: 700;
    font-size: 12px;
  }
  .am-chip.life { background: rgba(219, 39, 119, 0.1); color: #DB2777; }
  .am-progress {
    margin: 0 22px 18px;
    height: 8px;
    background: rgba(79, 70, 229, 0.1);
    border-radius: 999px;
    overflow: hidden;
  }
  .am-progress > div {
    height: 100%;
    width: 64%;
    background: linear-gradient(90deg, #818CF8, #4F46E5);
    border-radius: 999px;
  }
  .am-body { padding: 0 22px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
  .am-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: #4F46E5;
  }
  .am-eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #4F46E5;
  }
  .am-q {
    font-size: 19px; font-weight: 700;
    color: #1E1B4B;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
  }
  .am-q u {
    text-decoration-color: rgba(79, 70, 229, 0.4);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
  .am-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
  .am-opt {
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1.5px solid rgba(30, 27, 75, 0.08);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #1E1B4B;
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
    transition: all .15s;
  }
  .am-opt.correct {
    background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%);
    border-color: rgba(5, 150, 105, 0.4);
    color: #065F46;
  }
  .am-opt.selected {
    background: linear-gradient(180deg, #EEF2FF 0%, #E0E7FF 100%);
    border-color: #4F46E5;
    color: #3730A3;
  }
  .am-opt-tick {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #059669;
    color: #fff;
    display: grid; place-items: center;
  }
  .am-foot {
    padding: 14px 22px 18px;
    display: flex; gap: 10px;
  }
  .am-foot button {
    flex: 1;
    height: 46px;
    border: 0;
    border-radius: 14px;
    font-weight: 700;
    font-size: 14.5px;
    cursor: pointer;
  }
  .am-skip {
    background: rgba(30, 27, 75, 0.05);
    color: #64748B;
  }
  .am-check {
    background: linear-gradient(180deg, #6366F1, #4F46E5);
    color: #fff;
    box-shadow: 0 8px 16px -8px rgba(79, 70, 229, 0.6);
  }

  /* Floating accents */
  .am-float {
    position: absolute;
    background: #fff;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 12px 30px -10px rgba(30, 27, 75, 0.25);
    border: 1px solid rgba(30, 27, 75, 0.06);
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
    font-weight: 600;
    z-index: 2;
  }
  .am-float-xp { top: 18%; right: -4%; color: #4F46E5; }
  .am-float-streak { bottom: 14%; left: -6%; color: #EA580C; }
  .am-float-cat {
    position: absolute;
    bottom: -12px; right: -8px;
    width: 110px; height: 110px;
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: 0 18px 40px -12px rgba(245, 158, 11, 0.55);
    border: 4px solid #F4F6FF;
    z-index: 3;
  }
  .am-float-cat::after {
    content: "+10 XP";
    position: absolute;
    top: -8px; right: -10px;
    background: #fff;
    color: #4F46E5;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
    box-shadow: 0 4px 12px -2px rgba(79, 70, 229, 0.25);
    border: 1px solid rgba(79, 70, 229, 0.1);
  }
  .am-float-dot {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: grid; place-items: center;
    color: #fff;
  }
  .am-float-xp .am-float-dot { background: linear-gradient(135deg, #818CF8, #4F46E5); }
  .am-float-streak .am-float-dot { background: linear-gradient(135deg, #F97316, #EA580C); }
`;

function AppMock() {
  return (
    <>
      <style>{APP_MOCK_CSS}</style>

      <div className="am-phone">
        <div className="am-status">
          <span>9:41</span>
          <span className="am-status-r">
            <svg width="18" height="10" viewBox="0 0 18 10" fill="currentColor"><rect x="0" y="6" width="3" height="4" rx="1"/><rect x="5" y="4" width="3" height="6" rx="1"/><rect x="10" y="2" width="3" height="8" rx="1"/><rect x="15" y="0" width="3" height="10" rx="1"/></svg>
            <svg width="22" height="10" viewBox="0 0 22 10" fill="none" stroke="currentColor" strokeWidth="1.2"><rect x="0.5" y="1" width="18" height="8" rx="2"/><rect x="20" y="3" width="1.5" height="4" rx="0.5" fill="currentColor"/><rect x="2" y="2.5" width="13" height="5" rx="1" fill="currentColor"/></svg>
          </span>
        </div>

        <div className="am-bar">
          <div className="am-bar-x">
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M3 3l6 6M9 3l-6 6"/></svg>
          </div>
          <div className="am-bar-c">
            <span className="am-chip">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><path d="M6 1c1 2 2.5 2.5 2.5 4.5C8.5 7.5 7.4 9 6 9S3.5 7.5 3.5 5.5C3.5 3.5 5 3 6 1z"/></svg>
              12
            </span>
            <span className="am-chip life">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5L1.5 6.2c-1-1-1-2.7 0-3.7s2.7-1 3.7 0L6 3.3l0.8-0.8c1-1 2.7-1 3.7 0s1 2.7 0 3.7L6 10.5z"/></svg>
              5
            </span>
          </div>
        </div>

        <div className="am-progress"><div></div></div>

        <div className="am-body">
          <div className="am-eyebrow">
            <span className="am-eyebrow-dot"></span>
            Grammar · B1 · Past tenses
          </div>
          <p className="am-q">
            By the time we arrived, the meeting <u>_______</u> already started.
          </p>

          <div className="am-opts">
            <div className="am-opt">has</div>
            <div className="am-opt correct">
              had
              <span className="am-opt-tick">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2.5 6.5L5 9l4.5-5.5"/></svg>
              </span>
            </div>
            <div className="am-opt">was</div>
          </div>
        </div>

        <div className="am-foot">
          <button className="am-skip">Skip</button>
          <button className="am-check">Continue</button>
        </div>
      </div>

      {/* Float accents */}
      <div className="am-float am-float-xp">
        <span className="am-float-dot">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="7,1.5 9,5.5 13,6 10,9 11,13 7,11 3,13 4,9 1,6 5,5.5"/></svg>
        </span>
        <div>
          <div style={{ fontSize: 11, color: "#64748B", fontWeight: 500 }}>Today's XP</div>
          <div style={{ fontSize: 16, fontWeight: 800 }}>+240 XP</div>
        </div>
      </div>

      <div className="am-float am-float-streak">
        <span className="am-float-dot">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1c1.5 2.5 3 3 3 6 0 1.7-1.3 3-3 3S4 8.7 4 7C4 5 5.5 4.5 7 1z"/></svg>
        </span>
        <div>
          <div style={{ fontSize: 11, color: "#64748B", fontWeight: 500 }}>Streak</div>
          <div style={{ fontSize: 16, fontWeight: 800 }}>47 days</div>
        </div>
      </div>

      <div className="am-float-cat">
        <Frank size={84} mood="happy" />
      </div>
    </>
  );
}

window.AppMock = AppMock;