/* Deep-dive phone mockups — smaller frame, one per tab pair */

const MiniPhone = ({ children, label, tilt = 0 }) =>
<div className="mini-phone-wrap" style={{ transform: `rotate(${tilt}deg)` }}>
    <div className="mini-phone">
      <div className="mini-notch"></div>
      <div className="mini-screen">{children}</div>
    </div>
    {label && <div className="mini-phone-label">{label}</div>}
  </div>;


const MiniTabBar = ({ active }) =>
<div className="mini-tabbar">
    {['trophy', 'map', 'barbell', 'chart', 'person'].map((n, i) =>
  <div key={n} className={`mini-tab ${i === active ? 'active' : ''}`}>
        <Icon name={n} size={16} />
      </div>
  )}
  </div>;


const Chip = ({ children, active, color }) =>
<span className={`mp-chip ${active ? 'active' : ''}`} style={active && color ? { background: color + '22', color, borderColor: color + '55' } : {}}>
    {children}
  </span>;


const Bar = ({ pct, color = 'var(--emerald)' }) =>
<div className="mp-bar"><i style={{ width: `${pct}%`, background: color }}></i></div>;


const Status = ({ color, label }) =>
<span className="mp-status">
    <span style={{ width: 7, height: 7, borderRadius: '50%', background: color, boxShadow: `0 0 6px ${color}` }}></span>
    {label}
  </span>;


/* ========== 1. COMPETE ========== */
const CompeteFiltersScreen = () =>
<div className="mp">
    <div className="mp-h">
      <div className="mp-title">Compete</div>
      <Icon name="person" size={16} color="var(--text-4)" />
    </div>
    <div className="mp-search">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7" /><path d="m20 20-3-3" /></svg>
      Search athletes…
    </div>
    <div className="mp-filter-row">
      <Chip active color="#10B981">📍 Paris 25km</Chip>
      <Chip active color="#F59E0B">Advanced</Chip>
      <Chip>400–600 pts</Chip>
    </div>
    <div className="mp-tabs-row">
      <span className="mp-stab active">Global</span>
      <span className="mp-stab">Friends</span>
      <span className="mp-stab">Local</span>
    </div>
    {[
  { rk: 1, n: 'Lucas Martin', s: 612, t: 'Elite', c: '#EF4444', loc: 'Paris' },
  { rk: 2, n: 'You (Quentin H.)', s: 500, t: 'Adv', c: '#F59E0B', loc: 'Paris', me: true },
  { rk: 3, n: 'Sofia Garcia', s: 488, t: 'Adv', c: '#F59E0B', loc: 'Lyon' },
  { rk: 4, n: 'Antoine Leroy', s: 442, t: 'Adv', c: '#F59E0B', loc: 'Paris' },
  { rk: 5, n: 'Camille M.', s: 388, t: 'Adv', c: '#F59E0B', loc: 'Marseille' }].
  map((r, i) =>
  <div key={i} className={`mp-lb-row ${r.me ? 'me' : ''}`}>
        <div className="rk" style={{ color: r.c }}>#{r.rk}</div>
        <div className="av" style={{ background: `linear-gradient(135deg, ${r.c}aa, ${r.c}44)` }}></div>
        <div className="meta">
          <div className="nm">{r.n}</div>
          <div className="sub">📍 {r.loc} · {r.t}</div>
        </div>
        <div className="sc">{r.s}</div>
      </div>
  )}
    <MiniTabBar active={0} />
  </div>;


const CompeteProfileScreen = () =>
<div className="mp">
    <div className="mp-h"><span style={{ color: 'var(--text-4)' }}>‹ Back</span><span style={{ fontSize: 11, color: 'var(--text-4)' }}>Profile</span></div>
    <div className="mp-profile-hero">
      <div className="av-lg" style={{ background: 'linear-gradient(135deg, #EF4444aa, #F59E0B44)' }}>
        <div className="tier-pill">★ ELITE</div>
      </div>
      <div className="nm-lg">Lucas Martin</div>
      <div className="loc">📍 Paris · Joined Mar 2024</div>
      <div className="score-big">612<span>pts · #1</span></div>
    </div>
    <div className="mp-stat-grid">
      {[['Pull-ups', '32'], ['Dips', '48'], ['Push-ups', '60'], ['Muscle-up', '8']].map(([l, v], i) =>
    <div key={i} className="mp-stat-cell">
          <div className="v">{v}</div>
          <div className="l">{l}</div>
        </div>
    )}
    </div>
    <div className="mp-section-title">CERTIFIED VIDEOS · 4</div>
    <div className="mp-vid-row">
      {[1, 2, 3, 4].map((i) =>
    <div key={i} className="mp-vid">
          <Icon name="play" size={14} />
          <div className="dot" style={{ background: i % 2 ? '#10B981' : '#F59E0B' }}></div>
        </div>
    )}
    </div>
    <div className="mp-section-title">BADGES · 4 EARNED</div>
    <div className="mp-badge-row">
      {[{ c: '#10B981', e: '🤸' }, { c: '#F59E0B', e: '🦅' }, { c: '#8B5CF6', e: '🤾' }, { c: '#EC4899', e: '🚩' }].map((b, i) =>
    <div key={i} className="mp-badge-pill" style={{ borderColor: b.c + '55' }}>
          <span style={{ color: b.c }}>●</span>
        </div>
    )}
    </div>
    <MiniTabBar active={0} />
  </div>;


/* ========== 2. MAP ========== */
const MapViewScreen = () =>
<div className="mp">
    <div className="mp-h" data-comment-anchor="08e9493d63-div-125-5">
      <div className="mp-title">Map</div>
      <div className="mp-toggle"><span className="active">Map</span><span>List</span></div>
    </div>
    <div className="mp-map">
      <svg viewBox="0 0 240 320" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
        <defs>
          <pattern id="mg" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#1F2937" strokeWidth="0.5" />
          </pattern>
        </defs>
        <rect width="240" height="320" fill="#0d141f" />
        <rect width="240" height="320" fill="url(#mg)" />
        {/* roads */}
        <path d="M0 80 Q120 60 240 90" stroke="#374151" strokeWidth="6" fill="none" opacity="0.5" />
        <path d="M0 180 L240 200" stroke="#374151" strokeWidth="5" fill="none" opacity="0.5" />
        <path d="M60 0 L80 320" stroke="#374151" strokeWidth="5" fill="none" opacity="0.5" />
        <path d="M170 0 L180 320" stroke="#374151" strokeWidth="4" fill="none" opacity="0.5" />
        {/* river */}
        <path d="M0 240 Q80 230 130 250 T240 245" stroke="#1E3A8A" strokeWidth="14" fill="none" opacity="0.5" />
        {/* pins */}
        {[
      { x: 70, y: 100, c: '#10B981', big: true },
      { x: 140, y: 70, c: '#10B981' },
      { x: 190, y: 130, c: '#3B82F6' },
      { x: 50, y: 200, c: '#10B981' },
      { x: 100, y: 165, c: '#F59E0B' },
      { x: 165, y: 220, c: '#10B981' },
      { x: 200, y: 280, c: '#3B82F6' },
      { x: 30, y: 270, c: '#10B981' }].
      map((p, i) =>
      <g key={i}>
            <circle cx={p.x} cy={p.y} r={p.big ? 18 : 12} fill={p.c} opacity="0.15" />
            <circle cx={p.x} cy={p.y} r={p.big ? 9 : 6} fill={p.c} />
            {p.big && <circle cx={p.x} cy={p.y} r="9" fill="none" stroke={p.c} strokeWidth="1.5" opacity="0.6"><animate attributeName="r" values="9;20;9" dur="2s" repeatCount="indefinite" /></circle>}
          </g>
      )}
      </svg>
    </div>
    <div className="mp-legend">
      <Status color="#10B981" label="Validated · 24" />
      <Status color="#3B82F6" label="New · 6" />
      <Status color="#F59E0B" label="Report · 1" />
    </div>
    <div className="mp-park-card">
      <div className="mp-park-img" style={{ background: 'linear-gradient(135deg, #10B98144, #0F766E)' }}></div>
      <div>
        <div style={{ fontWeight: 600, fontSize: 12 }}>Buttes-Chaumont Bars</div>
        <div style={{ fontSize: 9, color: 'var(--text-4)', marginTop: 2 }}>★ 4.8 · 12 here now · 0.4 km</div>
      </div>
    </div>
    <MiniTabBar active={1} />
  </div>;


const MapListScreen = () =>
<div className="mp">
    <div className="mp-h">
      <div className="mp-title">Map</div>
      <div className="mp-toggle"><span>Map</span><span className="active">List</span></div>
    </div>
    <div className="mp-filter-row">
      <Chip active color="#10B981">Pull-up bar</Chip>
      <Chip active color="#10B981">Dip bar</Chip>
      <Chip>Rings</Chip>
      <Chip>Validated</Chip>
    </div>
    <div className="mp-section-title">23 PARKS · SORTED BY DISTANCE</div>
    {[
  { n: 'Buttes-Chaumont', d: '0.4 km', r: 4.8, eq: 'Pull · Dip · P-bars', c: '#10B981', here: 12 },
  { n: 'Place de la République', d: '1.2 km', r: 4.5, eq: 'Pull · Dip · Rings', c: '#10B981', here: 5 },
  { n: 'Bercy Park', d: '2.8 km', r: 4.6, eq: 'Pull · Dip', c: '#10B981', here: 2 },
  { n: 'Pont des Arts (new)', d: '3.1 km', r: null, eq: 'Pull · Bar', c: '#3B82F6', here: 0 },
  { n: 'Vincennes Forest', d: '4.6 km', r: 4.9, eq: 'Pull · Dip · Rings · Bar', c: '#10B981', here: 8 }].
  map((p, i) =>
  <div key={i} className="mp-park-row">
        <div className="thumb" style={{ background: `linear-gradient(135deg, ${p.c}44, ${p.c}11)` }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: p.c }}></span>
        </div>
        <div className="meta">
          <div className="nm">{p.n}</div>
          <div className="sub">{p.eq}</div>
          <div className="sub2">{p.d} {p.r && `· ★ ${p.r}`} {p.here > 0 && <span style={{ color: '#10B981' }}>· {p.here} here</span>}</div>
        </div>
      </div>
  )}
    <MiniTabBar active={1} />
  </div>;


/* ========== 3. WORKOUT ========== */
const WorkoutLogScreen = () =>
<div className="mp">
    <div className="mp-h">
      <div>
        <div style={{ fontSize: 10, color: 'var(--text-4)', fontFamily: 'var(--font-mono)' }}>PULL · DAY 2</div>
        <div className="mp-title" style={{ fontSize: 17 }}>Live Workout</div>
      </div>
      <div className="mp-timer">
        <div className="t-big">01:42</div>
        <div className="t-l">REST</div>
      </div>
    </div>
    <div className="mp-current-ex">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700 }}>Pull-ups</div>
          <div style={{ fontSize: 10, color: 'var(--text-4)' }}>Set 3 of 4 · +20 lb</div>
        </div>
        <div className="ex-level">LVL 4</div>
      </div>
      <div className="mp-set-row">
        {[
      { s: 1, r: 8, w: '+20' },
      { s: 2, r: 7, w: '+20' },
      { s: 3, r: null, w: '+20', active: true },
      { s: 4, r: null, w: '+20' }].
      map((st, i) =>
      <div key={i} className={`set-cell ${st.active ? 'active' : ''} ${st.r ? 'done' : ''}`}>
            <div className="num">SET {st.s}</div>
            <div className="rep">{st.r ?? '—'}</div>
            <div className="wt">{st.w} lb</div>
          </div>
      )}
      </div>
      <button className="mp-cta">Log set →</button>
    </div>
    <div className="mp-section-title">UP NEXT</div>
    {[
  { n: 'Australian Pull-ups', s: '3 × 12', d: 'Done' },
  { n: 'L-Sit', s: '3 × 20s', d: null },
  { n: 'Front Lever Tuck', s: '3 × 10s', d: null }].
  map((e, i) =>
  <div key={i} className="mp-up-row">
        <div className="dot" style={{ background: e.d ? '#10B981' : 'var(--bg-3)' }}></div>
        <div className="nm">{e.n}</div>
        <div className="s">{e.s}</div>
      </div>
  )}
    <MiniTabBar active={2} />
  </div>;


const ExercisePickerScreen = () =>
<div className="mp">
    <div className="mp-h">
      <span style={{ color: 'var(--text-4)' }}>‹</span>
      <div className="mp-title" style={{ fontSize: 17 }}>Exercise library</div>
      <Icon name="play" size={14} color="var(--text-4)" />
    </div>
    <div className="mp-search">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7" /><path d="m20 20-3-3" /></svg>
      Search exercises…
    </div>
    <div className="mp-cat-row">
      <Chip active color="#10B981">PULL</Chip>
      <Chip>PUSH</Chip>
      <Chip>CORE</Chip>
      <Chip>LEGS</Chip>
      <Chip>STATIC</Chip>
    </div>
    {[
  { n: 'Pull-ups', l: 4, x: 'Bar · Compound', c: '#10B981', sel: true },
  { n: 'Chin-ups', l: 3, x: 'Bar · Biceps', c: '#10B981' },
  { n: 'Muscle-up', l: 6, x: 'Bar · Explosive', c: '#F59E0B' },
  { n: 'Australian Pull-ups', l: 2, x: 'Low bar', c: '#10B981' },
  { n: 'Front Lever', l: 7, x: 'Static · Bar', c: '#EF4444' },
  { n: 'One-Arm Pull-up', l: 8, x: 'Bar · Elite', c: '#EF4444' }].
  map((e, i) =>
  <div key={i} className={`mp-ex-row ${e.sel ? 'sel' : ''}`}>
        <div className="ic" style={{ color: e.c, background: e.c + '18' }}>
          <Icon name="barbell" size={14} />
        </div>
        <div className="meta">
          <div className="nm">{e.n}</div>
          <div className="sub">{e.x}</div>
        </div>
        <div className="lvl">LVL {e.l}</div>
        {e.sel && <div className="check">✓</div>}
      </div>
  )}
    <MiniTabBar active={2} />
  </div>;


/* ========== 4. GET TO WORK ========== */
const GTWGenerateScreen = () =>
<div className="mp">
    <div className="mp-h">
      <div className="mp-title" style={{ fontSize: 17 }}>Get to Work</div>
      <span style={{ fontSize: 9, color: 'var(--emerald)', fontFamily: 'var(--font-mono)', letterSpacing: '0.1em' }}>● AI</span>
    </div>
    <div style={{ fontSize: 10, color: 'var(--text-4)', marginTop: -4 }}>Generate a 4-week program</div>
    <div className="mp-form-card">
      <div className="mp-form-label">PRIMARY GOAL</div>
      <div className="mp-form-options">
        <Chip>Strength</Chip>
        <Chip active color="#10B981">Skill (Front Lever)</Chip>
        <Chip>Endurance</Chip>
      </div>
    </div>
    <div className="mp-form-card">
      <div className="mp-form-label">DAYS / WEEK</div>
      <div className="mp-pill-row">
        {[2, 3, 4, 5, 6].map((d) =>
      <span key={d} className={`mp-num-pill ${d === 4 ? 'active' : ''}`}>{d}</span>
      )}
      </div>
    </div>
    <div className="mp-form-card">
      <div className="mp-form-label">SESSION LENGTH</div>
      <div className="mp-slider">
        <i style={{ width: '55%' }}></i>
        <span className="mp-slider-val">45 min</span>
      </div>
    </div>
    <div className="mp-current-stats">
      <div className="mp-form-label">PULLED FROM YOUR PROFILE</div>
      <div className="mp-mini-stat-row">
        <div><span className="v">500</span><span className="l">score</span></div>
        <div><span className="v">8/10</span><span className="l">pull-ups</span></div>
        <div><span className="v">4</span><span className="l">tucks/wk</span></div>
      </div>
    </div>
    <button className="mp-cta primary">
      <span style={{ marginRight: 6 }}>✦</span> Generate program
    </button>
    <MiniTabBar active={2} />
  </div>;


const GTWWeekScreen = () =>
<div className="mp">
    <div className="mp-h">
      <span style={{ color: 'var(--text-4)' }}>‹</span>
      <div>
        <div style={{ fontSize: 10, color: 'var(--text-4)', fontFamily: 'var(--font-mono)' }}>FRONT LEVER · 4 WK</div>
        <div className="mp-title" style={{ fontSize: 16 }}>Week 2 of 4</div>
      </div>
      <span style={{ color: 'var(--emerald)', fontSize: 14 }}>•••</span>
    </div>
    <div className="mp-week-progress">
      {[1, 2, 3, 4].map((w) =>
    <div key={w} className={`wk-step ${w <= 2 ? 'done' : ''} ${w === 2 ? 'cur' : ''}`}>
          <div className="dot"></div>
          <span>WK {w}</span>
        </div>
    )}
    </div>
    {[
  { d: 'MON', f: 'Pull · Static', ex: ['Pull-ups 4×8', 'Tuck FL 4×12s', 'Aussie 3×12'], done: true },
  { d: 'TUE', f: 'Rest', ex: ['Active mobility'], rest: true },
  { d: 'WED', f: 'Push · Core', ex: ['Dips 4×10', 'HSPU neg 3×6', 'L-Sit 4×20s'], cur: true },
  { d: 'THU', f: 'Rest', ex: ['Recovery'], rest: true },
  { d: 'FRI', f: 'Pull · Skill', ex: ['Adv tuck FL 5×10s', 'Pull negatives 4×6'] },
  { d: 'SAT', f: 'Full body', ex: ['Muscle-up prep 4×3', 'Pistol sq 3×6'] }].
  map((d, i) =>
  <div key={i} className={`mp-week-row ${d.cur ? 'cur' : ''} ${d.rest ? 'rest' : ''}`}>
        <div className="day">{d.d}</div>
        <div className="meta">
          <div className="focus">{d.f}</div>
          <div className="sub">{d.ex[0]}{d.ex.length > 1 && ` · +${d.ex.length - 1} more`}</div>
        </div>
        <div className="status">
          {d.done && <span style={{ color: '#10B981' }}>✓</span>}
          {d.cur && <span className="cur-pill">TODAY</span>}
        </div>
      </div>
  )}
    <MiniTabBar active={2} />
  </div>;


/* ========== 5. ANALYZE ========== */
const AnalyzeDashScreen = () =>
<div className="mp">
    <div className="mp-h">
      <div>
        <div style={{ fontSize: 10, color: 'var(--text-4)', fontFamily: 'var(--font-mono)' }}>14-DAY AI ANALYSIS</div>
        <div className="mp-title" style={{ fontSize: 17 }}>Analyze</div>
      </div>
      <span style={{ fontSize: 9, color: 'var(--emerald)', fontFamily: 'var(--font-mono)', letterSpacing: '0.1em' }}>● LIVE</span>
    </div>
    <div className="mp-analyze-summary">
      <div style={{ fontSize: 11, color: 'var(--text-4)', fontFamily: 'var(--font-mono)' }}>OVERALL PROGRESS</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4 }}>
        <span style={{ fontSize: 28, fontWeight: 700, color: '#10B981' }}>+12%</span>
        <span style={{ fontSize: 10, color: 'var(--text-4)' }}>vs prev. 14d</span>
      </div>
      <svg viewBox="0 0 200 40" style={{ width: '100%', height: 32, marginTop: 4 }}>
        <path d="M0 30 L20 28 L40 26 L60 22 L80 24 L100 18 L120 14 L140 16 L160 10 L180 8 L200 5" fill="none" stroke="#10B981" strokeWidth="1.5" />
        <path d="M0 30 L20 28 L40 26 L60 22 L80 24 L100 18 L120 14 L140 16 L160 10 L180 8 L200 5 L200 40 L0 40 Z" fill="url(#agrad)" opacity="0.4" />
        <defs><linearGradient id="agrad" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stopColor="#10B981" stopOpacity="0.5" /><stop offset="1" stopColor="#10B981" stopOpacity="0" /></linearGradient></defs>
      </svg>
    </div>
    <div className="mp-insight-card str">
      <div className="i-tag">STRENGTHS · 2</div>
      <div className="i-line"><span style={{ color: '#10B981' }}>▲</span> Pulling volume up 24%</div>
      <div className="i-line"><span style={{ color: '#10B981' }}>▲</span> Static holds consistent (5/wk)</div>
    </div>
    <div className="mp-insight-card weak">
      <div className="i-tag" style={{ color: '#F59E0B' }}>WEAKNESSES · 2</div>
      <div className="i-line"><span style={{ color: '#F59E0B' }}>▼</span> Push:Pull ratio 1:3 — imbalance</div>
      <div className="i-line"><span style={{ color: '#F59E0B' }}>▼</span> No leg work in 12 days</div>
    </div>
    <div className="mp-insight-card rec">
      <div className="i-tag" style={{ color: '#3B82F6' }}>NEXT FOCUS</div>
      <div className="i-line">Add 2 push sessions · 1 leg day</div>
    </div>
    <MiniTabBar active={3} />
  </div>;


const AnalyzeDetailScreen = () =>
<div className="mp">
    <div className="mp-h">
      <span style={{ color: 'var(--text-4)' }}>‹</span>
      <div className="mp-title" style={{ fontSize: 16 }}>Push : Pull ratio</div>
      <span style={{ width: 14 }}></span>
    </div>
    <div className="mp-detail-card">
      <div className="mp-form-label" style={{ color: '#F59E0B' }}>IMBALANCE DETECTED</div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16, marginTop: 12, height: 100 }}>
        <div style={{ flex: 1, textAlign: 'center' }}>
          <div style={{ height: 30, background: '#F59E0B', borderRadius: '4px 4px 0 0' }}></div>
          <div style={{ fontSize: 18, fontWeight: 700, color: '#F59E0B', marginTop: 6 }}>1×</div>
          <div style={{ fontSize: 9, color: 'var(--text-4)' }}>Push</div>
        </div>
        <div style={{ flex: 1, textAlign: 'center' }}>
          <div style={{ height: 90, background: '#10B981', borderRadius: '4px 4px 0 0' }}></div>
          <div style={{ fontSize: 18, fontWeight: 700, color: '#10B981', marginTop: 6 }}>3×</div>
          <div style={{ fontSize: 9, color: 'var(--text-4)' }}>Pull</div>
        </div>
        <div style={{ flex: 1, textAlign: 'center', opacity: 0.4 }}>
          <div style={{ height: 60, background: 'var(--bg-3)', border: '1px dashed var(--text-5)', borderRadius: '4px 4px 0 0' }}></div>
          <div style={{ fontSize: 14, fontWeight: 700, marginTop: 6 }}>2×</div>
          <div style={{ fontSize: 9, color: 'var(--text-4)' }}>Target</div>
        </div>
      </div>
    </div>
    <div className="mp-rec-card">
      <div className="mp-form-label">RECOMMENDED — 14 DAYS</div>
      {[
    ['MON', 'Push session — Dips, HSPU progression'],
    ['THU', 'Push session — Decline push-ups, ring dips'],
    ['SAT', 'Leg day — Pistol squats, jumps']].
    map(([d, t], i) =>
    <div key={i} className="mp-rec-row">
          <span className="d">{d}</span>
          <span>{t}</span>
        </div>
    )}
    </div>
    <button className="mp-cta">Apply to my plan →</button>
    <MiniTabBar active={3} />
  </div>;


/* ========== 6. PROFILE / CERT / BADGE ========== */
const ProfileFullScreen = () =>
<div className="mp">
    <div className="mp-h">
      <div className="mp-title" style={{ fontSize: 17 }}>Profile</div>
      <Icon name="person" size={14} color="var(--text-4)" />
    </div>
    <div className="mp-profile-mini">
      <div className="av-mid" style={{ background: 'linear-gradient(135deg, #F59E0Baa, #10B98144)' }}></div>
      <div style={{ flex: 1 }}>
        <div style={{ fontWeight: 700, fontSize: 14 }}>Quentin Hoarau</div>
        <div style={{ fontSize: 10, color: 'var(--amber)' }}>★ ADVANCED · #2 Paris</div>
      </div>
      <div className="mp-score-pill">500</div>
    </div>
    <div className="mp-progress-detail">
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 9, fontFamily: 'var(--font-mono)', color: 'var(--text-4)' }}>
        <span>ADVANCED</span>
        <span>→ ELITE in 20 pts</span>
      </div>
      <div className="mp-bar" style={{ marginTop: 4 }}><i style={{ width: '96%', background: 'var(--amber)' }}></i></div>
    </div>
    <div className="mp-mini-breakdown">
      {[
    ['Physical', '300', '60%', '#10B981'],
    ['Exploration', '100', '20%', '#3B82F6'],
    ['Skills', '100', '20%', '#8B5CF6']].
    map(([n, v, p, c], i) =>
    <div key={i} className="bd">
          <div className="row1"><span className="dot" style={{ background: c }}></span><span className="n">{n}</span><span className="v">{v}</span></div>
          <Bar pct={parseInt(p)} color={c} />
        </div>
    )}
    </div>
    <div className="mp-section-title" style={{ marginTop: 8 }}>CERTIFIED · 3 / 6</div>
    <div className="mp-cert-strip">
      {[{ c: '#10B981', d: 'Pull' }, { c: '#10B981', d: 'Dips' }, { c: '#F59E0B', d: 'Push' }, { c: 'var(--bg-3)', d: '+3' }].map((b, i) =>
    <div key={i} className="cs-cell" style={{ borderColor: b.c + (b.c === 'var(--bg-3)' ? '' : '55') }}>
          <Icon name="play" size={10} color={b.c} />
          <span className="cs-l">{b.d}</span>
        </div>
    )}
    </div>
    <div className="mp-section-title">BADGES · 2 / 6</div>
    <div className="mp-badge-strip">
      {[{ c: '#10B981', n: 'Muscle-up' }, { c: '#8B5CF6', n: 'Handstand' }, { c: 'var(--bg-3)', n: 'Front Lever', off: true }, { c: 'var(--bg-3)', n: 'Planche', off: true }].map((b, i) =>
    <div key={i} className="bs-cell" style={{ borderColor: b.off ? 'var(--bg-3)' : b.c + '55', opacity: b.off ? 0.4 : 1 }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: b.c }}></span>
          <span style={{ fontSize: 8 }}>{b.n}</span>
        </div>
    )}
    </div>
    <MiniTabBar active={4} />
  </div>;


const CertDetailScreen = () =>
<div className="mp">
    <div className="mp-h"><span style={{ color: 'var(--text-4)' }}>‹</span><div className="mp-title" style={{ fontSize: 15 }}>Pull-up cert</div><span style={{ width: 12 }}></span></div>
    <div className="mp-video">
      <div className="play-overlay"><Icon name="play" size={22} color="#fff" /></div>
      <div className="vid-time">0:24</div>
      <div className="vid-tier">
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#10B981' }}></span>
        GREEN
      </div>
    </div>
    <div className="mp-cert-meta">
      <div className="cm-row"><span className="l">EXERCISE</span><span className="v">Pull-ups</span></div>
      <div className="cm-row"><span className="l">REPS DECLARED</span><span className="v">23</span></div>
      <div className="cm-row"><span className="l">AI AMPLITUDE</span><span className="v" style={{ color: '#10B981' }}>72%</span></div>
      <div className="cm-row"><span className="l">AI CONFIDENCE</span><span className="v" style={{ color: '#10B981' }}>81%</span></div>
      <div className="cm-row"><span className="l">VIEWS · COMMENTS</span><span className="v">412 · 18</span></div>
    </div>
    <div className="mp-tier-callout green">
      <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: '#10B981', letterSpacing: '0.1em' }}>● GREEN TIER</div>
      <div style={{ fontSize: 10, color: 'var(--text-3)', marginTop: 4, lineHeight: 1.4 }}>Amplitude ≥60% · Confidence ≥70% — Your stat is verified.</div>
    </div>
    <button className="mp-cta">Replace video →</button>
    <MiniTabBar active={4} />
  </div>;


const BadgeSubmitScreen = () =>
<div className="mp">
    <div className="mp-h"><span style={{ color: 'var(--text-4)' }}>‹</span><div className="mp-title" style={{ fontSize: 14 }}>Front Lever badge</div><span style={{ width: 12 }}></span></div>
    <div className="mp-video sm">
      <div className="play-overlay"><Icon name="play" size={18} color="#fff" /></div>
      <div className="vid-time">0:12</div>
    </div>
    <div className="mp-vote-card">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-4)', letterSpacing: '0.1em' }}>VOTING IN PROGRESS</div>
        <div style={{ fontSize: 10, color: '#F59E0B' }}>2d left</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
        <span style={{ fontSize: 22, fontWeight: 700, color: '#10B981' }}>8</span>
        <span style={{ fontSize: 11, color: 'var(--text-4)' }}>/ 10 votes needed</span>
      </div>
      <div className="mp-vote-bar">
        <div className="seg" style={{ width: '60%', background: '#10B981' }}></div>
        <div className="seg" style={{ width: '20%', background: '#EF4444' }}></div>
      </div>
      <div className="mp-vote-legend">
        <span><span style={{ color: '#10B981' }}>● 6 approve</span> · 75%</span>
        <span style={{ color: 'var(--text-4)' }}>Need 60% min</span>
      </div>
    </div>
    <div className="mp-section-title">VOTERS · ELITE & ADVANCED ONLY</div>
    <div className="mp-voters">
      {['#EF4444', '#F59E0B', '#10B981', '#EF4444', '#F59E0B', '#8B5CF6', '#10B981', '#F59E0B'].map((c, i) =>
    <div key={i} className="vt" style={{ background: `linear-gradient(135deg, ${c}aa, ${c}33)` }}>
          {i < 6 && <span className="cv">✓</span>}
          {i >= 6 && i < 8 && <span className="cv x">✕</span>}
        </div>
    )}
    </div>
    <div className="mp-callout-line">+50 pts to Skills score on approval</div>
    <MiniTabBar active={0} />
  </div>;


const BadgeWallScreen = () =>
<div className="mp">
    <div className="mp-h">
      <div className="mp-title" style={{ fontSize: 17 }}>Badges</div>
      <span style={{ fontSize: 10, color: 'var(--emerald)', fontFamily: 'var(--font-mono)' }}>3 / 6</span>
    </div>
    <div style={{ fontSize: 10, color: 'var(--text-4)' }}>Skills validated by community vote</div>
    <div className="mp-badge-grid">
      {[
    { n: 'Muscle-up', c: '#10B981', s: 'EARNED', d: 'Apr 14' },
    { n: 'Handstand', c: '#8B5CF6', s: 'EARNED', d: 'Mar 2' },
    { n: 'Human Flag', c: '#F59E0B', s: 'EARNED', d: 'Feb 8' },
    { n: 'Front Lever', c: '#F59E0B', s: 'VOTING', d: '8/10' },
    { n: 'Back Lever', c: 'var(--bg-3)', s: 'LOCKED', d: null, off: true },
    { n: 'Planche', c: 'var(--bg-3)', s: 'LOCKED', d: null, off: true }].
    map((b, i) =>
    <div key={i} className="bg-cell" style={{ opacity: b.off ? 0.4 : 1 }}>
          <div className="bg-circle" style={{ borderColor: b.off ? 'var(--bg-3)' : b.c + '55', color: b.c }}>
            <span style={{ fontSize: 18 }}>●</span>
          </div>
          <div className="bg-n">{b.n}</div>
          <div className="bg-s" style={{ color: b.s === 'EARNED' ? '#10B981' : b.s === 'VOTING' ? '#F59E0B' : 'var(--text-5)' }}>{b.s}</div>
          {b.d && <div className="bg-d">{b.d}</div>}
        </div>
    )}
    </div>
    <MiniTabBar active={0} />
  </div>;


const Ss = ({ src, alt = '' }) => (
  <img src={src} alt={alt} style={{
    width: '100%', height: '100%',
    objectFit: 'cover', objectPosition: 'top center',
    display: 'block', borderRadius: '28px'
  }} />
);
window.Ss = Ss;

/* Floating raw screenshot (no phone-in-phone) — tilted, hover lift */
const FloatingMockup = ({ src, alt = '', label, tilt = 0 }) => (
  <div className="floating-mockup-wrap" style={{ transform: `rotate(${tilt}deg)` }}>
    <img src={src} alt={alt} className="floating-mockup-img" />
    {label && <div className="mini-phone-label">{label}</div>}
  </div>
);
window.FloatingMockup = FloatingMockup;

/* Cycles through screenshots every `interval` ms with crossfade.
   `images` accepts:
     - string  → narrow single-phone mockup (~55% of container)
     - {src, wide:true} → combined multi-phone mockup (full container width) */
const MockupCarousel = ({ images, label, tilt = 0, interval = 3000 }) => {
  const { useState, useEffect } = React;
  const items = (images || []).map((x) => (typeof x === 'string' ? { src: x } : x));
  const [i, setI] = useState(0);
  useEffect(() => {
    if (items.length < 2) return;
    const id = setInterval(() => setI((p) => (p + 1) % items.length), interval);
    return () => clearInterval(id);
  }, [items.length, interval]);
  return (
    <div className="floating-mockup-wrap" style={{ transform: `rotate(${tilt}deg)` }}>
      <div className="floating-carousel">
        {items.map((it, idx) => (
          <img
            key={it.src}
            src={it.src}
            alt=""
            className={`carousel-img ${it.wide ? 'wide' : 'narrow'} ${idx === i ? 'active' : ''}`}
          />
        ))}
      </div>
      {label && <div className="mini-phone-label">{label}</div>}
    </div>
  );
};
window.MockupCarousel = MockupCarousel;

window.MiniPhone = MiniPhone;
window.Chip = Chip;
window.CompeteFiltersScreen = CompeteFiltersScreen;
window.CompeteProfileScreen = CompeteProfileScreen;
window.MapViewScreen = MapViewScreen;
window.MapListScreen = MapListScreen;
window.WorkoutLogScreen = WorkoutLogScreen;
window.ExercisePickerScreen = ExercisePickerScreen;
window.GTWGenerateScreen = GTWGenerateScreen;
window.GTWWeekScreen = GTWWeekScreen;
window.AnalyzeDashScreen = AnalyzeDashScreen;
window.AnalyzeDetailScreen = AnalyzeDetailScreen;
window.ProfileFullScreen = ProfileFullScreen;
window.CertDetailScreen = CertDetailScreen;
window.BadgeSubmitScreen = BadgeSubmitScreen;
window.BadgeWallScreen = BadgeWallScreen;