/* Phone mockup — renders 4 real Onbars-style app screens that cycle */
const { useState, useEffect, useRef } = React;

const Icon = ({ name, size = 18, color = 'currentColor' }) => {
  const paths = {
    trophy: <><path d="M6 3h12v3a6 6 0 0 1-12 0V3z"/><path d="M3 5h3v2a3 3 0 0 1-3-3z"/><path d="M21 5h-3v2a3 3 0 0 0 3-3z"/><path d="M9 14h6l-1 4h-4l-1-4z"/><path d="M8 18h8v2H8z"/></>,
    map: <><path d="M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2z"/><path d="M9 4v14M15 6v14"/></>,
    barbell: <><path d="M4 8v8M8 6v12M16 6v12M20 8v8M8 12h8"/></>,
    chart: <><path d="M3 20h18M5 16l4-4 4 4 6-8"/></>,
    person: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></>,
    shield: <><path d="M12 2l8 3v7c0 4-3 8-8 10-5-2-8-6-8-10V5l8-3z"/><path d="M9 12l2 2 4-4"/></>,
    play: <path d="M8 5l11 7-11 7V5z"/>,
    flame: <><path d="M12 2c0 4 6 6 6 12a6 6 0 0 1-12 0c0-3 2-5 3-6 0 2 1 3 2 3 0-3-2-5 1-9z"/></>,
    star: <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z"/>,
    pin: <><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7z"/><circle cx="12" cy="9" r="3"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
};

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

const ScreenLeaderboard = () => (
  <div className="app-screen">
    <div className="app-header"><span>Compete</span></div>
    <div style={{display:'flex', gap:8, marginTop:4}}>
      <div style={{flex:1, padding:'10px', background:'var(--emerald)', borderRadius:999, color:'#053024', fontWeight:600, fontSize:12, textAlign:'center'}}>Leaderboard</div>
      <div style={{flex:1, padding:'10px', background:'var(--bg-2)', borderRadius:999, color:'var(--text-4)', fontSize:12, textAlign:'center'}}>Challenges</div>
    </div>
    <div style={{padding:14, border:'1.5px solid var(--emerald)', borderRadius:14, marginTop:4, display:'flex', alignItems:'center', gap:12}}>
      <div style={{width:36, height:36, borderRadius:'50%', background:'var(--emerald-dim)', display:'grid', placeItems:'center', color:'var(--emerald)', fontWeight:700, fontSize:13}}>#2</div>
      <div style={{flex:1}}>
        <div style={{fontWeight:600, fontSize:14}}>Quentin H.</div>
        <div style={{fontSize:11, color:'var(--text-4)'}}>500 pts</div>
      </div>
      <div style={{padding:'4px 10px', borderRadius:6, background:'rgba(245,158,11,0.15)', color:'var(--amber)', fontSize:10, fontWeight:600}}>ADVANCED</div>
    </div>
    {[
      {rk:'#1', n:'Lucas Martin', s:570, t:'Adv', c:'var(--amber)'},
      {rk:'#3', n:'Sofia Garcia', s:428, t:'Adv', c:'#B45309'},
      {rk:'#4', n:'Camille M.', s:388, t:'Int', c:'var(--text-5)'},
    ].map((r,i) => (
      <div key={i} style={{padding:10, background:'var(--bg-2)', borderRadius:12, display:'flex', alignItems:'center', gap:10}}>
        <div style={{width:24, fontSize:11, color:r.c, fontWeight:700}}>{r.rk}</div>
        <div style={{width:30, height:30, borderRadius:'50%', background:'var(--bg-3)'}}></div>
        <div style={{flex:1, fontSize:13, fontWeight:500}}>{r.n}</div>
        <div style={{fontSize:13, color:'var(--emerald)', fontWeight:700}}>{r.s}</div>
      </div>
    ))}
    <TabBar active={0} />
  </div>
);

const ScreenScore = () => {
  const r = 70, c = 2 * Math.PI * r;
  return (
    <div className="app-screen">
      <div className="app-header" style={{fontSize:18}}>
        <span style={{color:'var(--text-4)'}}>‹</span>
        <span>My Score</span>
        <span style={{width:14}}></span>
      </div>
      <div style={{textAlign:'center', marginTop:8}}>
        <div style={{fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-4)', letterSpacing:'0.15em'}}>SCORE ONBARS</div>
        <div style={{fontSize:60, fontWeight:700, color:'var(--emerald)', lineHeight:1, marginTop:4, fontFamily:'var(--font-display)'}}>500</div>
        <div style={{marginTop:8, display:'inline-block', padding:'4px 12px', background:'rgba(245,158,11,0.15)', color:'var(--amber)', borderRadius:999, fontSize:11, fontWeight:600}}>● Advanced</div>
      </div>
      <div style={{margin:'8px auto', position:'relative', width:140, height:140}}>
        <svg width="140" height="140" viewBox="0 0 160 160">
          <circle cx="80" cy="80" r={r} fill="none" stroke="var(--bg-3)" strokeWidth="14"/>
          <circle cx="80" cy="80" r={r} fill="none" stroke="var(--emerald)" strokeWidth="14" strokeLinecap="round" strokeDasharray={`${c*0.6} ${c}`} transform="rotate(-90 80 80)"/>
          <circle cx="80" cy="80" r={r} fill="none" stroke="var(--blue)" strokeWidth="14" strokeLinecap="round" strokeDasharray={`${c*0.2} ${c}`} strokeDashoffset={-c*0.6} transform="rotate(-90 80 80)"/>
          <circle cx="80" cy="80" r={r} fill="none" stroke="var(--violet)" strokeWidth="14" strokeLinecap="round" strokeDasharray={`${c*0.2} ${c}`} strokeDashoffset={-c*0.8} transform="rotate(-90 80 80)"/>
        </svg>
        <div style={{position:'absolute', inset:0, display:'grid', placeItems:'center', textAlign:'center'}}>
          <div>
            <div style={{fontSize:24, fontWeight:700, fontFamily:'var(--font-display)'}}>500</div>
            <div style={{fontSize:10, color:'var(--text-4)'}}>Advanced</div>
          </div>
        </div>
      </div>
      <div style={{padding:14, background:'var(--bg-2)', borderRadius:12, fontSize:11}}>
        {[
          {n:'Physical', c:'var(--emerald)', p:'60%'},
          {n:'Exploration', c:'var(--blue)', p:'20%'},
          {n:'Skills', c:'var(--violet)', p:'20%'},
        ].map((b,i)=>(
          <div key={i} style={{display:'flex', alignItems:'center', gap:8, padding:'6px 0'}}>
            <div style={{width:8, height:8, borderRadius:'50%', background:b.c}}></div>
            <div style={{flex:1}}>{b.n}</div>
            <div style={{fontWeight:700, color:b.c}}>{b.p}</div>
          </div>
        ))}
      </div>
      <TabBar active={4} />
    </div>
  );
};

const ScreenWorkout = () => (
  <div className="app-screen">
    <div className="app-header">
      <span>Workout</span>
      <div style={{width:32, height:32, borderRadius:'50%', background:'var(--emerald)', display:'grid', placeItems:'center', color:'#053024', fontSize:18, fontWeight:700}}>+</div>
    </div>
    <div style={{display:'flex', gap:8, marginTop:4}}>
      <div style={{flex:1, padding:'8px', background:'var(--bg-2)', borderRadius:10, color:'var(--emerald)', fontSize:12, fontWeight:600, textAlign:'center', border:'1px solid var(--emerald-dim)'}}>Workouts</div>
      <div style={{flex:1, padding:'8px', borderRadius:10, color:'var(--text-4)', fontSize:12, textAlign:'center'}}>Get to Work</div>
    </div>
    {[
      {n:'Pull', ex:[['Pull-ups','2×6 + 30 lb'],['L-Sit','2×12s'],['One Leg Front Lever','2×15s']]},
      {n:'Push', ex:[['Push-ups','2×10 · 33 lb'],['Australian Pull-ups','2×4'],['Dips','3×8']]},
    ].map((r,i)=>(
      <div key={i} style={{padding:14, background:'var(--bg-2)', borderRadius:14}}>
        <div style={{fontWeight:700, fontSize:14, marginBottom:8}}>{r.n}</div>
        {r.ex.map((e,j)=>(
          <div key={j} style={{display:'flex', alignItems:'center', gap:8, padding:'4px 0', fontSize:11}}>
            <div style={{width:18, height:18, borderRadius:4, background:'var(--emerald-dim)'}}></div>
            <div style={{flex:1, color:'var(--text-3)'}}>{e[0]}</div>
            <div style={{color:'var(--text-4)'}}>{e[1]}</div>
          </div>
        ))}
        <div style={{marginTop:8, fontSize:10, color:'var(--emerald)', fontWeight:600}}>{r.ex.length} exercises</div>
      </div>
    ))}
    <TabBar active={2} />
  </div>
);

const ScreenProfile = () => (
  <div className="app-screen">
    <div className="app-header" style={{justifyContent:'space-between'}}>
      <span>Profile</span>
      <Icon name="person" size={20} color="var(--text-4)" />
    </div>
    <div style={{display:'flex', alignItems:'center', gap:14, padding:12, background:'var(--bg-2)', borderRadius:14}}>
      <div style={{width:60, height:60, borderRadius:'50%', background:'var(--bg-3)', position:'relative'}}>
        <div style={{position:'absolute', bottom:-2, right:-2, width:22, height:22, borderRadius:'50%', background:'var(--amber)', border:'2px solid var(--bg-2)', display:'grid', placeItems:'center', color:'#000', fontSize:10, fontWeight:700}}>A</div>
      </div>
      <div style={{flex:1}}>
        <div style={{display:'flex', justifyContent:'space-around', textAlign:'center'}}>
          <div><div style={{fontWeight:700, fontSize:15}}>0</div><div style={{fontSize:9, color:'var(--text-4)'}}>Followers</div></div>
          <div><div style={{fontWeight:700, fontSize:15}}>1</div><div style={{fontSize:9, color:'var(--text-4)'}}>Following</div></div>
          <div><div style={{fontWeight:700, fontSize:15, color:'var(--amber)'}}>500</div><div style={{fontSize:9, color:'var(--text-4)'}}>Score</div></div>
        </div>
      </div>
    </div>
    <div>
      <div style={{fontSize:18, fontWeight:700}}>Quentin Hoarau</div>
      <div style={{fontSize:11, color:'var(--amber)', fontWeight:600}}>★ Advanced Athlete</div>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:8, padding:12, background:'var(--bg-1)', borderRadius:12}}>
      {[['23','Pull-ups'],['37','Dips'],['35','Push-ups'],['148lb','Weight']].map(([v,l],i)=>(
        <div key={i} style={{textAlign:'center'}}>
          <div style={{fontSize:15, fontWeight:700, color:'var(--emerald)'}}>{v}</div>
          <div style={{fontSize:9, color:'var(--text-4)'}}>{l}</div>
        </div>
      ))}
    </div>
    <div style={{display:'flex', gap:8}}>
      <div style={{flex:1, padding:'10px', background:'var(--bg-2)', borderRadius:10, textAlign:'center', fontSize:12, fontWeight:600}}>Edit Profile</div>
      <div style={{flex:1, padding:'10px', background:'var(--emerald)', color:'#053024', borderRadius:10, textAlign:'center', fontSize:12, fontWeight:700}}>Certify</div>
    </div>
    <div style={{padding:12, background:'var(--bg-2)', borderRadius:12}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:6}}>
        <span style={{fontWeight:700, color:'var(--amber)', fontSize:16}}>500</span>
        <span style={{padding:'2px 8px', background:'rgba(245,158,11,0.15)', color:'var(--amber)', borderRadius:6, fontSize:10, fontWeight:600}}>ADVANCED</span>
      </div>
      <div style={{height:4, background:'var(--bg-3)', borderRadius:2, overflow:'hidden'}}>
        <div style={{width:'72%', height:'100%', background:'var(--amber)'}}></div>
      </div>
      <div style={{fontSize:9, color:'var(--text-5)', marginTop:6}}>→ Elite</div>
    </div>
    <TabBar active={4} />
  </div>
);

const Phone = () => {
  const screens = [ScreenLeaderboard, ScreenScore, ScreenWorkout, ScreenProfile];
  const [i, setI] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setI(p => (p + 1) % screens.length), 3800);
    return () => clearInterval(id);
  }, []);
  const Current = screens[i];
  return (
    <div className="phone">
      <div className="phone-notch"></div>
      <div className="phone-screen">
        <div key={i} style={{height:'100%', animation:'screenIn 0.6s cubic-bezier(.34,1.5,.5,1)'}}>
          <Current />
        </div>
      </div>
    </div>
  );
};

window.Phone = Phone;
window.Icon = Icon;