// pulsefit.jsx — PulseFit (workout tracking). Lo-fi + Hi-fi screens.

const PF = {
  coral: '#FF5A36',
  coralDeep: '#E5421F',
  yellow: '#FFE145',
  cream: '#FFF4E8',
  ink: '#1A1612',
  soft: '#6B6259',
  mint: '#A8F0C6',
};

// ============================================================
// LO-FI SCREENS
// ============================================================

const LoOnboarding = () => (
  <SkPhone>
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: 14, paddingTop: 24 }}>
      <div className="sk-img" style={{ height: 180, marginTop: 12 }} />
      <div className="sk-h" style={{ fontSize: 32, lineHeight: 1, marginTop: 4 }}>FIND YOUR<br/>STRIDE.</div>
      <SkLines count={2} widths={['100%', '80%']} />
      <div style={{ flex: 1 }} />
      <SkRect h={44} fill>get started →</SkRect>
      <SkRect h={36} style={{ borderStyle: 'none', background: 'transparent' }}>i already have an account</SkRect>
    </div>
    <SkNote top={140} right={-20} rotate={6} w={90}>hero illustr.</SkNote>
  </SkPhone>
);

const LoHome = () => (
  <SkPhone>
    <div style={{ paddingTop: 12 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div className="sk" style={{ fontSize: 12, opacity: 0.6 }}>Tues, mar 4</div>
          <div className="sk-h" style={{ fontSize: 22, lineHeight: 1 }}>hey, alex 👋</div>
        </div>
        <div className="sk-circle" style={{ width: 36, height: 36 }} />
      </div>
      <SkRect h={84} style={{ marginTop: 12, flexDirection: 'column', alignItems: 'flex-start', padding: 10 }}>
        <div className="sk" style={{ fontSize: 11, opacity: 0.7 }}>🔥 streak</div>
        <div className="sk-h" style={{ fontSize: 32, lineHeight: 1 }}>12 days</div>
        <div style={{ display: 'flex', gap: 4, marginTop: 6 }}>
          {Array.from({length:7}).map((_,i)=> <div key={i} className="sk-rect" style={{ width: 22, height: 14, background: i<5?'#1A1612':'transparent' }} />)}
        </div>
      </SkRect>
      <div className="sk" style={{ fontSize: 13, marginTop: 14, marginBottom: 6 }}>today's pick</div>
      <SkRect h={90} style={{ flexDirection: 'row', alignItems: 'stretch', padding: 8, gap: 8 }}>
        <div className="sk-img" style={{ width: 70, height: '100%' }} />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div className="sk-h" style={{ fontSize: 18, lineHeight: 1 }}>upper body blast</div>
          <SkLines count={2} widths={['80%','50%']} />
          <div className="sk-pill">⏱ 32min · 🔥 280cal</div>
        </div>
      </SkRect>
      <div className="sk" style={{ fontSize: 13, marginTop: 14, marginBottom: 6 }}>this week</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        <SkRect h={64} style={{ flexDirection: 'column', alignItems: 'flex-start', padding: 8 }}>
          <div className="sk" style={{ fontSize: 11, opacity: 0.6 }}>workouts</div>
          <div className="sk-h" style={{ fontSize: 24, lineHeight: 1 }}>4 / 5</div>
        </SkRect>
        <SkRect h={64} style={{ flexDirection: 'column', alignItems: 'flex-start', padding: 8 }}>
          <div className="sk" style={{ fontSize: 11, opacity: 0.6 }}>minutes</div>
          <div className="sk-h" style={{ fontSize: 24, lineHeight: 1 }}>128</div>
        </SkRect>
      </div>
    </div>
    <div className="sk-tabbar">
      {['home','plan','+','stats','me'].map((t,i)=>(
        <div key={i} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:2 }}>
          <div className="sk-tab-ico">{i===2?'+':''}</div>
          <span className="sk" style={{ fontSize: 9, opacity: i===0?1:0.5 }}>{t}</span>
        </div>
      ))}
    </div>
    <SkNote top={170} right={-30} rotate={5} w={100}>streak heatmap</SkNote>
  </SkPhone>
);

const LoLibrary = () => (
  <SkPhone>
    <div style={{ paddingTop: 12 }}>
      <div className="sk-h" style={{ fontSize: 26, lineHeight: 1 }}>browse</div>
      <SkRect h={36} style={{ marginTop: 10 }}>🔍 search workouts</SkRect>
      <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
        {['all','strength','cardio','yoga','HIIT','core'].map((t,i)=> <span key={t} className="sk-pill" style={ i===0?{background:'#1A1612', color:'#fbf7ef'}:{}}>{t}</span>)}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 14 }}>
        {[
          ['Push Day','42min','hard'],
          ['Mobility Flow','18min','easy'],
          ['Leg Burner','36min','hard'],
          ['Core Crusher','22min','med'],
        ].map(([n,t,d])=>(
          <SkRect key={n} h={70} style={{ flexDirection:'row', padding: 6, gap: 8 }}>
            <div className="sk-img" style={{ width: 58, height: 58 }} />
            <div style={{ flex:1, display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'flex-start', gap:4 }}>
              <div className="sk-h" style={{ fontSize: 16, lineHeight: 1 }}>{n}</div>
              <SkLines count={1} widths={['70%']} />
              <div style={{ display:'flex', gap:4 }}>
                <span className="sk-pill">⏱ {t}</span>
                <span className="sk-pill">{d}</span>
              </div>
            </div>
          </SkRect>
        ))}
      </div>
    </div>
    <SkNote top={70} right={-10} rotate={3} w={80}>filters</SkNote>
  </SkPhone>
);

const LoActive = () => (
  <SkPhone>
    <div style={{ paddingTop: 8 }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <span className="sk" style={{ fontSize: 14 }}>✕</span>
        <span className="sk" style={{ fontSize: 12, opacity: 0.6 }}>exercise 3 / 8</span>
        <span className="sk" style={{ fontSize: 14 }}>⋯</span>
      </div>
      <div className="sk-img" style={{ height: 180, marginTop: 10 }} />
      <div className="sk-h" style={{ fontSize: 26, marginTop: 10, lineHeight: 1 }}>Dumbbell Press</div>
      <div className="sk" style={{ fontSize: 12, opacity:0.6 }}>chest · shoulders</div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8, marginTop: 14 }}>
        <SkRect h={56} style={{ flexDirection:'column', padding: 4 }}>
          <div className="sk" style={{ fontSize: 10, opacity:0.6 }}>set</div>
          <div className="sk-h" style={{ fontSize: 22, lineHeight: 1 }}>2 / 4</div>
        </SkRect>
        <SkRect h={56} style={{ flexDirection:'column', padding: 4 }}>
          <div className="sk" style={{ fontSize: 10, opacity:0.6 }}>reps</div>
          <div className="sk-h" style={{ fontSize: 22, lineHeight: 1 }}>12</div>
        </SkRect>
        <SkRect h={56} style={{ flexDirection:'column', padding: 4 }}>
          <div className="sk" style={{ fontSize: 10, opacity:0.6 }}>weight</div>
          <div className="sk-h" style={{ fontSize: 22, lineHeight: 1 }}>40lb</div>
        </SkRect>
      </div>
      <div style={{ marginTop: 16 }}>
        <SkRect h={50} fill>✓ complete set</SkRect>
      </div>
      <div style={{ display:'flex', gap: 8, marginTop: 10 }}>
        <SkRect h={36} style={{ flex: 1 }}>← prev</SkRect>
        <SkRect h={36} style={{ flex: 1 }}>skip →</SkRect>
      </div>
    </div>
    <SkNote top={210} left={-30} rotate={-6} w={90}>video demo</SkNote>
  </SkPhone>
);

const LoRest = () => (
  <SkPhone>
    <div style={{ paddingTop: 30, display:'flex', flexDirection:'column', alignItems:'center', height: '100%' }}>
      <div className="sk" style={{ fontSize: 12, opacity:0.6 }}>rest before next set</div>
      <div className="sk-circle" style={{ width: 220, height: 220, marginTop: 30, display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column', borderWidth: 3 }}>
        <div className="sk-h" style={{ fontSize: 70, lineHeight: 1 }}>0:42</div>
        <div className="sk" style={{ fontSize: 11, opacity:0.6 }}>of 1:00</div>
      </div>
      <div style={{ display:'flex', gap: 10, marginTop: 24 }}>
        <SkRect h={40} style={{ width: 80 }}>−10s</SkRect>
        <SkRect h={40} style={{ width: 80 }} fill>skip</SkRect>
        <SkRect h={40} style={{ width: 80 }}>+10s</SkRect>
      </div>
      <div className="sk" style={{ fontSize: 13, marginTop: 28, opacity: 0.7 }}>up next:</div>
      <div className="sk-h" style={{ fontSize: 22, marginTop: 4, lineHeight: 1 }}>incline press</div>
    </div>
    <SkNote top={140} right={-30} rotate={6} w={100}>animated ring</SkNote>
  </SkPhone>
);

const LoProgress = () => (
  <SkPhone>
    <div style={{ paddingTop: 12 }}>
      <div className="sk-h" style={{ fontSize: 26, lineHeight: 1 }}>your progress</div>
      <div style={{ display:'flex', gap: 6, marginTop: 10 }}>
        {['week','month','year','all'].map((t,i)=>(<span key={t} className="sk-pill" style={i===1?{background:'#1A1612',color:'#fbf7ef'}:{}}>{t}</span>))}
      </div>
      <SkRect h={140} style={{ marginTop: 12, padding: 8, flexDirection:'column', alignItems:'stretch' }}>
        <div className="sk" style={{ fontSize: 11, opacity:0.6 }}>active minutes</div>
        <div className="sk-h" style={{ fontSize: 24, lineHeight: 1 }}>523</div>
        <svg viewBox="0 0 200 60" style={{ width: '100%', marginTop: 6 }}>
          <polyline points="0,40 25,30 50,35 75,20 100,25 125,15 150,18 175,8 200,12" stroke={INK} strokeWidth="2" fill="none" />
          <polyline points="0,55 25,50 50,52 75,40 100,42 125,38 150,40 175,28 200,30" stroke={INK} strokeWidth="1.4" fill="none" strokeDasharray="3 3" />
        </svg>
      </SkRect>
      <div className="sk" style={{ fontSize: 13, marginTop: 12, marginBottom: 6 }}>achievements</div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 8 }}>
        {Array.from({length:8}).map((_,i)=>(
          <div key={i} className="sk-circle" style={{ aspectRatio:1, display:'flex', alignItems:'center', justifyContent:'center', background: i<3?'#FFE145':'transparent' }}>
            <span className="sk" style={{ fontSize: 18 }}>{['🏆','🔥','💪','⭐','','','',''][i]}</span>
          </div>
        ))}
      </div>
    </div>
    <SkNote top={220} left={-40} rotate={-7} w={110}>line chart w/ trend</SkNote>
  </SkPhone>
);

const LoComplete = () => (
  <SkPhone>
    <div style={{ paddingTop: 20, display:'flex', flexDirection:'column', alignItems:'center', height: '100%' }}>
      <div style={{ fontSize: 56, marginTop: 12 }}>🎉</div>
      <div className="sk-h" style={{ fontSize: 36, lineHeight: 1, marginTop: 6, textAlign:'center' }}>nailed it!</div>
      <div className="sk" style={{ fontSize: 13, opacity:0.7, marginTop: 4 }}>upper body blast · complete</div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8, width:'100%', marginTop: 22 }}>
        <SkRect h={70} style={{ flexDirection:'column', padding:4 }}>
          <div className="sk" style={{ fontSize: 10, opacity:0.6 }}>time</div>
          <div className="sk-h" style={{ fontSize: 20, lineHeight: 1 }}>32:14</div>
        </SkRect>
        <SkRect h={70} style={{ flexDirection:'column', padding:4 }}>
          <div className="sk" style={{ fontSize: 10, opacity:0.6 }}>cal</div>
          <div className="sk-h" style={{ fontSize: 20, lineHeight: 1 }}>284</div>
        </SkRect>
        <SkRect h={70} style={{ flexDirection:'column', padding:4 }}>
          <div className="sk" style={{ fontSize: 10, opacity:0.6 }}>sets</div>
          <div className="sk-h" style={{ fontSize: 20, lineHeight: 1 }}>24</div>
        </SkRect>
      </div>
      <div className="sk" style={{ fontSize: 12, marginTop: 18 }}>how'd that feel?</div>
      <div style={{ display:'flex', gap: 8, marginTop: 8 }}>
        {['😅','💪','🔥','🥵'].map(e=>(<div key={e} className="sk-circle" style={{ width:42, height:42, fontSize: 22, display:'flex', alignItems:'center', justifyContent:'center' }}>{e}</div>))}
      </div>
      <div style={{ flex:1 }} />
      <SkRect h={46} fill style={{ width: '100%' }}>share workout</SkRect>
      <SkRect h={36} style={{ borderStyle:'none', background:'transparent', width: '100%' }}>done</SkRect>
    </div>
    <SkNote top={250} right={-20} rotate={6} w={90}>feedback chip</SkNote>
  </SkPhone>
);

// ============================================================
// HI-FI SCREENS — Bold Gen Z
// ============================================================

const HiShell = ({ children, dark = false, bg }) => (
  <div style={{
    width: 360, height: 740, borderRadius: 44, overflow: 'hidden',
    background: bg || PF.cream, position: 'relative',
    boxShadow: '0 30px 60px rgba(26,22,18,0.18), 0 0 0 1.5px rgba(26,22,18,0.4)',
    fontFamily: "'Space Grotesk', system-ui, sans-serif", color: PF.ink,
  }}>
    {/* island */}
    <div style={{ position:'absolute', top: 10, left: '50%', transform:'translateX(-50%)', width: 100, height: 28, borderRadius: 20, background:'#000', zIndex: 50 }} />
    {/* status */}
    <div style={{ position:'absolute', top: 12, left: 18, right: 18, display:'flex', justifyContent:'space-between', alignItems:'center', zIndex: 40, fontSize: 13, fontWeight: 600, color: dark ? '#fff' : PF.ink }}>
      <span>9:41</span>
      <span style={{ width: 100 }} />
      <span>● ●●● 100%</span>
    </div>
    {/* home indicator */}
    <div style={{ position:'absolute', bottom: 8, left: '50%', transform:'translateX(-50%)', width: 120, height: 4, borderRadius: 4, background: dark?'rgba(255,255,255,0.6)':'rgba(0,0,0,0.3)', zIndex: 60 }} />
    <div style={{ paddingTop: 50, height: 'calc(100% - 50px)', overflow:'auto' }}>{children}</div>
  </div>
);

const HiOnboarding = () => (
  <HiShell bg={PF.coral}>
    <div style={{ padding: '20px 24px', height: '100%', display: 'flex', flexDirection: 'column', color: '#fff' }}>
      <div style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 800, fontSize: 14, letterSpacing: 1 }}>PULSEFIT</div>
      <div style={{ flex: 1, position: 'relative', marginTop: 12 }}>
        <div style={{ position:'absolute', inset: 0, borderRadius: 28, background: `linear-gradient(140deg, ${PF.yellow}, #FFB347)`, overflow:'hidden' }}>
          <div style={{ position:'absolute', bottom: -20, left: '50%', transform:'translateX(-50%)', fontSize: 240, lineHeight: 1, filter: 'drop-shadow(0 12px 0 rgba(0,0,0,0.12))' }}>💪</div>
          <div style={{ position:'absolute', top: 20, left: 20, background: PF.ink, color: '#fff', borderRadius: 999, padding: '6px 14px', fontWeight: 700, fontSize: 12 }}>+ 12 day streak</div>
          <div style={{ position:'absolute', top: 80, right: 16, background: '#fff', color: PF.ink, borderRadius: 16, padding: '8px 12px', fontWeight: 700, fontSize: 12, transform:'rotate(6deg)', boxShadow:'0 6px 16px rgba(0,0,0,0.15)' }}>
            🔥 280 cal<br/><span style={{ fontSize: 10, fontWeight: 500, opacity: 0.6 }}>this morning</span>
          </div>
        </div>
      </div>
      <div style={{ fontFamily:"'Bricolage Grotesque', sans-serif", fontWeight: 800, fontSize: 56, lineHeight: 0.92, marginTop: 20 }}>
        find your<br/>stride.
      </div>
      <div style={{ fontSize: 14, opacity: 0.85, marginTop: 10, lineHeight: 1.35 }}>
        workouts that flex with your week. no equipment? no excuse. let's move.
      </div>
      <button style={{ marginTop: 20, background: PF.ink, color: '#fff', border: 0, borderRadius: 999, padding: '18px 24px', fontSize: 16, fontWeight: 700, fontFamily: 'inherit' }}>get started →</button>
      <button style={{ background:'transparent', color:'#fff', border: 0, padding: 10, fontWeight: 600, fontSize: 13 }}>i have an account</button>
    </div>
  </HiShell>
);

const HiHome = () => (
  <HiShell>
    <div style={{ padding: '8px 20px 100px' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div>
          <div style={{ fontSize: 12, color: PF.soft, fontWeight: 500 }}>TUE · MAR 4</div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 30, lineHeight: 1.05 }}>hey, alex 👋</div>
        </div>
        <div style={{ width: 44, height: 44, borderRadius: 999, background: PF.yellow, border: `2px solid ${PF.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 20 }}>🦊</div>
      </div>

      {/* Streak card */}
      <div style={{ marginTop: 18, background: PF.ink, color: '#fff', borderRadius: 24, padding: 18, position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', top: -30, right: -20, fontSize: 130, opacity: 0.2 }}>🔥</div>
        <div style={{ fontSize: 12, opacity: 0.7, fontWeight: 600 }}>STREAK</div>
        <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 48, lineHeight: 1 }}>12 <span style={{ fontSize: 18, opacity: 0.8 }}>days</span></div>
        <div style={{ display:'flex', gap: 4, marginTop: 12 }}>
          {Array.from({length:7}).map((_,i)=>(
            <div key={i} style={{ flex: 1, height: 28, borderRadius: 6, background: i<5? PF.coral : 'rgba(255,255,255,0.15)', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 11, fontWeight: 700 }}>{'MTWTFSS'[i]}</div>
          ))}
        </div>
      </div>

      {/* Today's pick */}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginTop: 20 }}>
        <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18 }}>today's pick</div>
        <div style={{ fontSize: 12, color: PF.soft, fontWeight: 600 }}>see all →</div>
      </div>
      <div style={{ marginTop: 10, borderRadius: 22, overflow:'hidden', background: PF.coral, color: '#fff', padding: 16, position:'relative' }}>
        <div style={{ position:'absolute', top: -10, right: -20, fontSize: 110, transform:'rotate(-12deg)', opacity: 0.95 }}>🏋️</div>
        <div style={{ display:'inline-block', background: PF.yellow, color: PF.ink, fontSize: 10, fontWeight: 800, padding:'4px 8px', borderRadius: 6 }}>FOR YOU</div>
        <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 26, lineHeight: 1.05, marginTop: 8 }}>Upper Body<br/>Blast</div>
        <div style={{ display:'flex', gap: 8, marginTop: 12 }}>
          <span style={{ background:'rgba(255,255,255,0.25)', borderRadius: 999, padding: '4px 10px', fontSize: 11, fontWeight: 600 }}>⏱ 32 min</span>
          <span style={{ background:'rgba(255,255,255,0.25)', borderRadius: 999, padding: '4px 10px', fontSize: 11, fontWeight: 600 }}>🔥 280 cal</span>
        </div>
      </div>

      {/* Stats grid */}
      <div style={{ display:'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 14 }}>
        <div style={{ borderRadius: 18, background: PF.yellow, padding: 14, border: `2px solid ${PF.ink}` }}>
          <div style={{ fontSize: 11, fontWeight: 700 }}>WORKOUTS</div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 32, lineHeight: 1 }}>4<span style={{ fontSize: 18, opacity: 0.6 }}> / 5</span></div>
        </div>
        <div style={{ borderRadius: 18, background: PF.mint, padding: 14, border: `2px solid ${PF.ink}` }}>
          <div style={{ fontSize: 11, fontWeight: 700 }}>MINUTES</div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 32, lineHeight: 1 }}>128</div>
        </div>
      </div>
    </div>
    {/* Tab bar */}
    <div style={{ position:'absolute', bottom: 0, left: 0, right: 0, height: 80, background: '#fff', borderTop: `2px solid ${PF.ink}`, display:'flex', alignItems:'center', justifyContent:'space-around', paddingBottom: 18 }}>
      {[['🏠','home',true],['📅','plan'],['',''],['📊','stats'],['👤','me']].map(([i,l,a],idx)=>(
        idx===2 ? <div key={idx} style={{ width: 52, height: 52, marginTop: -22, background: PF.coral, borderRadius: 999, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 28, fontWeight: 700, border:`2px solid ${PF.ink}`, boxShadow:'0 6px 0 rgba(26,22,18,0.2)' }}>+</div>
        : <div key={idx} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap: 2, opacity: a?1:0.55 }}>
            <div style={{ fontSize: 20 }}>{i}</div>
            <div style={{ fontSize: 10, fontWeight: 700 }}>{l}</div>
          </div>
      ))}
    </div>
  </HiShell>
);

const HiLibrary = () => (
  <HiShell>
    <div style={{ padding: '8px 20px 30px' }}>
      <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 36, lineHeight: 1 }}>browse</div>
      <div style={{ marginTop: 14, background:'#fff', border: `2px solid ${PF.ink}`, borderRadius: 16, padding: '14px 16px', display:'flex', alignItems:'center', gap: 10, fontSize: 14, color: PF.soft, fontWeight: 500 }}>
        <span>🔍</span> search 200+ workouts
      </div>
      <div style={{ display:'flex', gap: 8, marginTop: 14, flexWrap: 'wrap' }}>
        {[['all',true],['strength'],['cardio'],['yoga'],['HIIT'],['core']].map(([t,a])=>(
          <span key={t} style={{ background: a?PF.ink:'#fff', color: a?'#fff':PF.ink, border: `2px solid ${PF.ink}`, borderRadius: 999, padding: '7px 14px', fontWeight: 700, fontSize: 12 }}>{t}</span>
        ))}
      </div>

      {/* Hero card */}
      <div style={{ marginTop: 16, borderRadius: 24, padding: 18, background: PF.yellow, border: `2px solid ${PF.ink}`, position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', right: -10, top: -10, fontSize: 110, transform: 'rotate(15deg)' }}>🤸</div>
        <div style={{ fontSize: 10, fontWeight: 800 }}>NEW THIS WEEK</div>
        <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 24, lineHeight: 1, marginTop: 6, maxWidth: '70%' }}>Mobility Mondays</div>
        <div style={{ fontSize: 12, marginTop: 6, fontWeight: 500, maxWidth: '70%' }}>5 sessions to unstiff your week.</div>
      </div>

      <div style={{ marginTop: 18, fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18 }}>popular now</div>

      <div style={{ display:'flex', flexDirection:'column', gap: 12, marginTop: 12 }}>
        {[
          ['Push Day','42 min','HARD', PF.coral, '🏋️'],
          ['Mobility Flow','18 min','EASY', PF.mint, '🧘'],
          ['Leg Burner','36 min','HARD', PF.ink, '🔥'],
          ['Core Crusher','22 min','MED', PF.yellow, '💥'],
        ].map(([n,t,d,bg,e],i)=>(
          <div key={n} style={{ display:'flex', gap: 12, alignItems:'center', background:'#fff', border:`2px solid ${PF.ink}`, borderRadius: 18, padding: 10 }}>
            <div style={{ width: 64, height: 64, borderRadius: 14, background: bg, color: bg===PF.ink?'#fff':PF.ink, border:`2px solid ${PF.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 28 }}>{e}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 17 }}>{n}</div>
              <div style={{ display:'flex', gap: 6, marginTop: 4 }}>
                <span style={{ fontSize: 11, fontWeight: 600, color: PF.soft }}>⏱ {t}</span>
                <span style={{ fontSize: 10, fontWeight: 800, color: PF.ink, background: PF.cream, border: `1.5px solid ${PF.ink}`, borderRadius: 6, padding: '1px 5px' }}>{d}</span>
              </div>
            </div>
            <div style={{ width: 36, height: 36, borderRadius: 999, background: PF.ink, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight: 800 }}>›</div>
          </div>
        ))}
      </div>
    </div>
  </HiShell>
);

const HiActive = () => (
  <HiShell dark bg={PF.ink}>
    <div style={{ padding: '8px 20px', color: '#fff', height: '100%', display:'flex', flexDirection:'column' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div style={{ width: 36, height: 36, borderRadius: 999, background:'rgba(255,255,255,0.1)', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 18 }}>✕</div>
        <div style={{ fontSize: 12, fontWeight: 700, opacity: 0.7 }}>EXERCISE 3 OF 8</div>
        <div style={{ width: 36, height: 36, borderRadius: 999, background:'rgba(255,255,255,0.1)', display:'flex', alignItems:'center', justifyContent:'center' }}>⋯</div>
      </div>
      {/* progress dots */}
      <div style={{ display:'flex', gap: 4, marginTop: 14 }}>
        {Array.from({length:8}).map((_,i)=>(
          <div key={i} style={{ flex: 1, height: 5, borderRadius: 999, background: i<2?PF.coral : i===2 ? PF.yellow : 'rgba(255,255,255,0.15)' }} />
        ))}
      </div>

      <div style={{ marginTop: 16, borderRadius: 22, height: 240, background: `linear-gradient(150deg, ${PF.coral}, ${PF.coralDeep})`, position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', inset: 0, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 130 }}>🏋️</div>
        <div style={{ position:'absolute', top: 12, left: 12, background:'rgba(0,0,0,0.4)', borderRadius: 999, padding:'4px 10px', fontSize: 11, fontWeight: 700, backdropFilter:'blur(8px)' }}>▶ form demo · 0:24</div>
      </div>

      <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 30, lineHeight: 1, marginTop: 16 }}>Dumbbell Press</div>
      <div style={{ fontSize: 12, opacity: 0.6, marginTop: 4, fontWeight: 600 }}>CHEST · SHOULDERS · TRICEPS</div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8, marginTop: 16 }}>
        {[['SET','2/4'],['REPS','12'],['LB','40']].map(([l,v])=>(
          <div key={l} style={{ background:'rgba(255,255,255,0.08)', borderRadius: 14, padding: 12, textAlign:'left' }}>
            <div style={{ fontSize: 10, fontWeight: 700, opacity: 0.6 }}>{l}</div>
            <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 28, lineHeight: 1 }}>{v}</div>
          </div>
        ))}
      </div>

      <div style={{ flex: 1 }} />
      <button style={{ background: PF.coral, color: '#fff', border: 0, borderRadius: 999, padding: '20px 24px', fontSize: 17, fontWeight: 800, fontFamily: 'inherit', boxShadow: `0 8px 0 ${PF.coralDeep}` }}>
        ✓  COMPLETE SET
      </button>
    </div>
  </HiShell>
);

const HiRest = () => (
  <HiShell dark bg={PF.ink}>
    <div style={{ padding: '8px 20px', color:'#fff', height:'100%', display:'flex', flexDirection:'column', alignItems:'center' }}>
      <div style={{ alignSelf:'stretch', display:'flex', justifyContent:'space-between' }}>
        <div style={{ width: 36, height: 36, borderRadius: 999, background:'rgba(255,255,255,0.1)', display:'flex', alignItems:'center', justifyContent:'center' }}>✕</div>
        <div style={{ fontSize: 12, fontWeight: 700, opacity: 0.7, marginTop: 8 }}>REST</div>
        <div style={{ width: 36 }} />
      </div>
      <div style={{ marginTop: 30, position:'relative', width: 260, height: 260, display:'flex', alignItems:'center', justifyContent:'center' }}>
        <svg viewBox="0 0 100 100" style={{ position:'absolute', inset: 0, transform:'rotate(-90deg)' }}>
          <circle cx="50" cy="50" r="46" stroke="rgba(255,255,255,0.1)" strokeWidth="5" fill="none" />
          <circle cx="50" cy="50" r="46" stroke={PF.yellow} strokeWidth="5" fill="none" strokeLinecap="round" strokeDasharray="289" strokeDashoffset="120" />
        </svg>
        <div style={{ textAlign:'center' }}>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 84, lineHeight: 1 }}>0:42</div>
          <div style={{ fontSize: 12, opacity: 0.5, fontWeight: 600 }}>OF 1:00</div>
        </div>
      </div>
      <div style={{ display:'flex', gap: 10, marginTop: 30 }}>
        <button style={{ background:'rgba(255,255,255,0.1)', color:'#fff', border:0, borderRadius: 999, padding:'14px 20px', fontWeight: 700, fontSize: 14, fontFamily:'inherit' }}>−10s</button>
        <button style={{ background: PF.yellow, color: PF.ink, border:0, borderRadius: 999, padding:'14px 26px', fontWeight: 800, fontSize: 14, fontFamily:'inherit' }}>SKIP →</button>
        <button style={{ background:'rgba(255,255,255,0.1)', color:'#fff', border:0, borderRadius: 999, padding:'14px 20px', fontWeight: 700, fontSize: 14, fontFamily:'inherit' }}>+10s</button>
      </div>
      <div style={{ marginTop: 36, textAlign:'center' }}>
        <div style={{ fontSize: 12, opacity: 0.5, fontWeight: 700 }}>UP NEXT</div>
        <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 26, marginTop: 4 }}>Incline Press</div>
        <div style={{ fontSize: 12, opacity: 0.6, marginTop: 2 }}>4 sets · 10 reps · 35 lb</div>
      </div>
    </div>
  </HiShell>
);

const HiProgress = () => (
  <HiShell>
    <div style={{ padding: '8px 20px 30px' }}>
      <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 36, lineHeight: 1 }}>progress</div>
      <div style={{ display:'flex', gap: 6, marginTop: 14, background: '#fff', border:`2px solid ${PF.ink}`, borderRadius: 999, padding: 4 }}>
        {['week','month','year','all'].map((t,i)=>(
          <button key={t} style={{ flex:1, border:0, borderRadius: 999, padding: '8px 0', fontWeight: 700, fontSize: 12, background: i===1?PF.ink:'transparent', color: i===1?'#fff':PF.ink, fontFamily:'inherit' }}>{t}</button>
        ))}
      </div>
      {/* Chart card */}
      <div style={{ marginTop: 14, background: PF.coral, color:'#fff', borderRadius: 22, padding: 18, border:`2px solid ${PF.ink}` }}>
        <div style={{ fontSize: 12, fontWeight: 700, opacity: 0.85 }}>ACTIVE MINUTES</div>
        <div style={{ display:'flex', alignItems:'baseline', gap: 8 }}>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 48, lineHeight: 1 }}>523</div>
          <div style={{ background: PF.yellow, color: PF.ink, fontSize: 11, fontWeight: 800, padding:'2px 8px', borderRadius: 6 }}>↑ 23%</div>
        </div>
        <svg viewBox="0 0 280 90" style={{ width:'100%', marginTop: 8 }}>
          <defs>
            <linearGradient id="pfg" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#fff" stopOpacity="0.4" />
              <stop offset="1" stopColor="#fff" stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d="M0,70 L35,55 L70,60 L105,30 L140,40 L175,20 L210,30 L245,8 L280,18 L280,90 L0,90 Z" fill="url(#pfg)" />
          <polyline points="0,70 35,55 70,60 105,30 140,40 175,20 210,30 245,8 280,18" stroke={PF.yellow} strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          {[0,35,70,105,140,175,210,245].map((x,i)=>(
            <text key={i} x={x} y="86" fill="rgba(255,255,255,0.6)" fontSize="9" fontWeight="600">{['M','T','W','T','F','S','S','M'][i]}</text>
          ))}
        </svg>
      </div>
      {/* Personal records */}
      <div style={{ marginTop: 18, fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18 }}>achievements</div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10, marginTop: 10 }}>
        {[
          ['🏆','7-day streak', PF.yellow],
          ['💪','100 push-ups', PF.mint],
          ['🔥','5k cal burned', PF.coral],
          ['⭐','First week!', '#fff'],
        ].map(([e,t,bg])=>(
          <div key={t} style={{ background: bg, border: `2px solid ${PF.ink}`, borderRadius: 16, padding: 12, color: bg===PF.coral?'#fff':PF.ink }}>
            <div style={{ fontSize: 28 }}>{e}</div>
            <div style={{ fontWeight: 800, fontSize: 13, marginTop: 4 }}>{t}</div>
          </div>
        ))}
      </div>
    </div>
  </HiShell>
);

const HiComplete = () => (
  <HiShell bg={PF.yellow}>
    <div style={{ padding: '8px 20px 40px', height: '100%', display:'flex', flexDirection:'column' }}>
      <div style={{ fontSize: 80, lineHeight: 1, marginTop: 14, alignSelf:'center' }}>🎉</div>
      <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 64, lineHeight: 0.9, marginTop: 14, textAlign:'center' }}>NAILED<br/>IT!</div>
      <div style={{ fontSize: 13, fontWeight: 600, opacity: 0.7, textAlign:'center', marginTop: 10 }}>Upper Body Blast · complete</div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8, marginTop: 22 }}>
        {[['TIME','32:14',PF.ink,'#fff'],['CAL','284',PF.coral,'#fff'],['SETS','24','#fff',PF.ink]].map(([l,v,bg,fg])=>(
          <div key={l} style={{ background: bg, color: fg, border:`2px solid ${PF.ink}`, borderRadius: 16, padding: 14, textAlign:'center' }}>
            <div style={{ fontSize: 10, fontWeight: 700, opacity: 0.7 }}>{l}</div>
            <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 26, lineHeight: 1, marginTop: 2 }}>{v}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 22, textAlign:'center', fontSize: 13, fontWeight: 700 }}>how'd that feel?</div>
      <div style={{ display:'flex', gap: 8, marginTop: 10, justifyContent:'center' }}>
        {[['😅','easy'],['💪','solid'],['🔥','hard',true],['🥵','brutal']].map(([e,l,a])=>(
          <div key={l} style={{ background: a?PF.ink:'#fff', color: a?'#fff':PF.ink, border:`2px solid ${PF.ink}`, borderRadius: 16, padding: '10px 8px', textAlign:'center', width: 60 }}>
            <div style={{ fontSize: 22 }}>{e}</div>
            <div style={{ fontSize: 10, fontWeight: 700, marginTop: 2 }}>{l}</div>
          </div>
        ))}
      </div>
      <div style={{ flex: 1 }} />
      <button style={{ background: PF.ink, color:'#fff', border:0, borderRadius: 999, padding: '18px 24px', fontSize: 16, fontWeight: 800, fontFamily:'inherit' }}>share workout 📤</button>
      <button style={{ background:'transparent', color: PF.ink, border:0, padding: 12, fontWeight: 700, fontSize: 13 }}>done</button>
    </div>
  </HiShell>
);

// ============================================================
// PAGE
// ============================================================
const SCREENS = [
  ['onboarding', '01 · Welcome', LoOnboarding, HiOnboarding],
  ['home', '02 · Home', LoHome, HiHome],
  ['library', '03 · Workouts', LoLibrary, HiLibrary],
  ['active', '04 · Active', LoActive, HiActive],
  ['rest', '05 · Rest', LoRest, HiRest],
  ['progress', '06 · Progress', LoProgress, HiProgress],
  ['complete', '07 · Complete', LoComplete, HiComplete],
];

function PulseFitApp() {
  return (
    <DesignCanvas>
      <DCSection id="lofi" title="LO-FI · PulseFit" subtitle="Sketchy wireframes — structure, hierarchy, flow">
        {SCREENS.map(([id, label, Lo]) => (
          <DCArtboard key={id} id={'lo-'+id} label={label} width={340} height={700}>
            <div data-screen-label={'Lo · ' + label} style={{ width: '100%', height: '100%', background: '#fbf7ef', display:'flex', alignItems:'center', justifyContent:'center', padding: 8, fontFamily:"'Patrick Hand', cursive" }}>
              <Lo />
            </div>
          </DCArtboard>
        ))}
      </DCSection>
      <DCSection id="hifi" title="HI-FI · PulseFit" subtitle="Bold Gen-Z direction — coral, yellow, big chunky type">
        {SCREENS.map(([id, label, , Hi]) => (
          <DCArtboard key={id} id={'hi-'+id} label={label} width={380} height={780}>
            <div data-screen-label={'Hi · ' + label} style={{ width: '100%', height: '100%', display:'flex', alignItems:'center', justifyContent:'center', padding: 10, background:'transparent' }}>
              <Hi />
            </div>
          </DCArtboard>
        ))}
      </DCSection>
    </DesignCanvas>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<PulseFitApp />);