// duel-profile.jsx — GTO Duel profile + analysis (mobile portrait, tabbed).
// Exports (to window): DuelProfile({ onBack, initialTab })

// ---------- icons for achievements ----------
function AchIcon({ name, color }) {
  const c = color;
  const common = { width: 26, height: 26, viewBox: '0 0 24 24', fill: 'none', stroke: c, strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const P = {
    first: <path d="M6 9l3 3-3 3m6 3h6M4 4h16v16H4z" />,
    flawless: <path d="M12 2l2.4 7.4H22l-6 4.5 2.3 7.1L12 16.7 5.7 21l2.3-7.1-6-4.5h7.6z" />,
    shield: <path d="M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z" />,
    heart: <path d="M12 21C5 16 3 12 3 8.5 3 6 5 4 7.5 4c1.6 0 3 .8 3.8 2 .8-1.2 2.2-2 3.8-2C18.5 4 20 6 20 8.5 20 12 19 16 12 21z" />,
    trend: <path d="M3 17l6-6 4 4 7-7M21 8v5h-5" />,
    flame: <path d="M12 2c2 4 6 5 6 10a6 6 0 11-12 0c0-2 1-3 2-4 0 2 2 3 2 1 0-3-1-5 2-7z" />,
    pin: <path d="M12 2a7 7 0 017 7c0 5-7 13-7 13S5 14 5 9a7 7 0 017-7z" />,
    bolt: <path d="M13 2L4 14h7l-1 8 9-12h-7z" />,
    flag: <path d="M5 21V4m0 0h11l-2 4 2 4H5" />,
    medal: <path d="M12 14a5 5 0 100-10 5 5 0 000 10zM9 13l-2 8 5-3 5 3-2-8" />,
    target: <path d="M12 22a10 10 0 100-20 10 10 0 000 20zm0-5a5 5 0 100-10 5 5 0 000 10zm0-4a1 1 0 100-2 1 1 0 000 2z" />,
    trophy: <path d="M7 4h10v4a5 5 0 01-10 0zM5 6H3v1a4 4 0 004 4M19 6h2v1a4 4 0 01-4 4M9 18h6M8 21h8" />,
    rocket: <path d="M5 15c-1 1-2 4-2 4s3-1 4-2m6-12c3 0 6 3 6 6l-7 7-4-4z" />,
  };
  return <svg {...common}>{P[name] || P.shield}</svg>;
}

const ACHIEVEMENTS = [
  { name: 'First Blood', icon: 'first', earned: 'Earned Jun 2026' },
  { name: 'Flawless', icon: 'flawless', earned: 'Earned Jun 2026' },
  { name: 'Untouchable', icon: 'shield', desc: 'Win a match in RNG mode without taking any damage' },
  { name: 'Close Call', icon: 'heart', desc: 'Win a match after dropping below 100 HP' },
  { name: 'Comeback King', icon: 'trend', desc: 'Win after trailing by 500+ HP at any point' },
  { name: 'Hot Streak', icon: 'flame', desc: 'Reach a 10+ perfect-decision streak' },
  { name: 'On Fire', icon: 'flame', desc: 'Reach a 15+ perfect-decision streak' },
  { name: 'Legendary', icon: 'pin', desc: 'Reach a 20+ perfect-decision streak' },
  { name: 'Power Player', icon: 'bolt', desc: 'Earn 5+ power-ups in a single match' },
  { name: 'Marathon', icon: 'flag', desc: 'Play 100 total matches' },
  { name: 'Veteran', icon: 'medal', desc: 'Play 500 total matches' },
  { name: 'Sharpshooter', icon: 'target', desc: 'Win 10 matches in a row' },
  { name: 'Finishing Blow', icon: 'trophy', desc: "Win a match by KO'ing with a Blast" },
  { name: 'Shield Wall', icon: 'shield', desc: 'Block 500+ total damage with Shields' },
  { name: 'Blaster', icon: 'rocket', desc: 'Deal 1000+ total Blast damage' },
];

function AchievementCard({ a }) {
  const earned = !!a.earned;
  return (
    <div style={{
      position: 'relative', background: earned ? 'rgba(233,154,40,0.07)' : 'rgba(255,255,255,0.025)',
      border: `1px solid ${earned ? 'rgba(233,154,40,0.3)' : 'rgba(255,255,255,0.06)'}`,
      borderRadius: 14, padding: '16px 12px', textAlign: 'center', minHeight: 132, boxSizing: 'border-box',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start', gap: 8,
    }}>
      {!earned && <span style={{ position: 'absolute', top: 9, right: 9 }}><Lock /></span>}
      <span style={{
        width: 46, height: 46, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: earned ? 'rgba(233,154,40,0.18)' : 'rgba(255,255,255,0.04)',
      }}>
        <AchIcon name={a.icon} color={earned ? '#E9971F' : 'rgba(255,255,255,0.32)'} />
      </span>
      <div style={{ fontFamily: 'var(--op-font-ui)', fontWeight: 700, fontSize: 13, color: earned ? '#fff' : 'rgba(255,255,255,0.6)' }}>{a.name}</div>
      <div style={{ fontFamily: 'var(--op-font-ui)', fontWeight: 400, fontSize: 11, lineHeight: 1.35, color: 'rgba(255,255,255,0.4)', textWrap: 'pretty' }}>{a.earned || a.desc}</div>
    </div>
  );
}

// ---------- Profile tab ----------
function IdentityCard() {
  return (
    <DarkCard pad={18}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 14 }}>
        <span style={{ width: 64, height: 64, borderRadius: 999, flexShrink: 0, border: '1px solid rgba(255,255,255,0.18)', overflow: 'hidden', display: 'block' }}>
          <img src="assets/user-portrait.jpg" alt="fresera" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </span>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: 'var(--op-font-display)', fontWeight: 700, fontSize: 22, color: '#fff' }}>fresera</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 3, flexWrap: 'wrap' }}>
            <span style={{ fontFamily: 'var(--op-font-display)', fontWeight: 700, fontSize: 17, color: 'rgba(255,255,255,0.55)' }}>1140.6</span>
            <span style={{ border: '1px solid rgba(255,255,255,0.18)', borderRadius: 999, padding: '2px 9px', fontFamily: 'var(--op-font-ui)', fontWeight: 700, fontSize: 9.5, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.5)' }}>UNRANKED</span>
          </div>
        </div>
      </div>
      <div style={{ fontFamily: 'var(--op-font-ui)', fontWeight: 600, fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>W/L: 4 / 20 &middot; Longest streak: 2</div>
      <div style={{ fontFamily: 'var(--op-font-ui)', fontWeight: 400, fontStyle: 'italic', fontSize: 12.5, color: 'rgba(255,255,255,0.4)', marginTop: 6 }}>Play ranked matches to earn your rating</div>
      <div style={{ marginTop: 12 }}><ProgressBar pct={20} color="var(--op-gold-50)" /></div>
    </DarkCard>
  );
}

function AchievementsGrid() {
  return (
    <div>
      <Eyebrow style={{ marginBottom: 12 }}>Achievements</Eyebrow>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {ACHIEVEMENTS.map((a) => <AchievementCard key={a.name} a={a} />)}
      </div>
    </div>
  );
}

function ProfileTab() {
  return (
    <div>
      <div style={{ marginBottom: 22 }}><IdentityCard /></div>
      <AchievementsGrid />
    </div>
  );
}

// ---------- Analysis: History ----------
const HISTORY = [
  { date: 'Jun 17, 5:40 PM', mode: 'Single Player', opp: 'Advanced', res: 'Loss', acc: '50.0% (1/2)', rng: '0/2', ev: '0/2', bl: '1/2', streak: 1 },
  { date: 'Jun 17, 5:39 PM', mode: 'Single Player', opp: 'Advanced', res: 'Loss', acc: '66.7% (2/3)', rng: '0/3', ev: '0/3', bl: '1/3', streak: 2 },
  { date: 'Jun 17, 5:06 PM', mode: 'Local PvP', opp: 'Player 2', res: 'Loss', acc: '0.0% (0/1)', rng: '0/1', ev: '1/1', bl: '0/1', streak: 0 },
  { date: 'Jun 12, 10:46 PM', mode: 'Local PvP', opp: 'Player 2', res: 'Win', acc: '\u2014', rng: '\u2014', ev: '\u2014', bl: '\u2014', streak: 0 },
  { date: 'Jun 12, 10:43 PM', mode: 'Local PvP', opp: 'Player 2', res: 'Win', acc: '100% (1/1)', rng: '0/1', ev: '0/1', bl: '0/1', streak: 1 },
  { date: 'Jun 12, 10:16 PM', mode: 'Single Player', opp: 'Advanced', res: 'Loss', acc: '66.7% (2/3)', rng: '0/3', ev: '1/3', bl: '0/3', streak: 1 },
  { date: 'Jun 5, 10:12 PM', mode: 'Single Player', opp: 'Advanced', res: 'Loss', acc: '100% (2/2)', rng: '0/2', ev: '0/2', bl: '0/2', streak: 2 },
];

function HistoryCard({ h }) {
  const win = h.res === 'Win';
  return (
    <DarkCard pad={13} style={{ marginBottom: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
        <span style={{ fontFamily: 'var(--op-font-ui)', fontWeight: 700, fontSize: 13, color: '#fff' }}>{h.date}</span>
        <span style={{ fontFamily: 'var(--op-font-ui)', fontWeight: 700, fontSize: 12.5, color: win ? 'var(--op-green-30)' : 'var(--op-red-40)' }}>{h.res}</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
        <span style={{ background: 'rgba(255,255,255,0.06)', borderRadius: 6, padding: '3px 8px', fontFamily: 'var(--op-font-ui)', fontWeight: 600, fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>{h.mode}</span>
        <span style={{ fontFamily: 'var(--op-font-ui)', fontWeight: 600, fontSize: 11.5, color: 'rgba(255,255,255,0.45)' }}>vs {h.opp} &middot; Chip EV</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
        <Metric k="Accuracy" v={h.acc} />
        <Metric k="EV miss" v={h.ev} />
        <Metric k="Blunders" v={h.bl} />
        <Metric k="Streak" v={h.streak} />
      </div>
    </DarkCard>
  );
}

function Metric({ k, v }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--op-font-ui)', fontWeight: 600, fontSize: 9.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.38)', marginBottom: 2 }}>{k}</div>
      <div style={{ fontFamily: 'var(--op-font-ui)', fontWeight: 700, fontSize: 12.5, color: '#fff' }}>{v}</div>
    </div>
  );
}

function HistoryView({ landscape }) {
  return (
    <div>
      <Eyebrow style={{ marginBottom: 12 }}>Match history</Eyebrow>
      <div style={{ display: landscape ? 'grid' : 'block', gridTemplateColumns: landscape ? '1fr 1fr' : undefined, columnGap: landscape ? 12 : 0 }}>
        {HISTORY.map((h, i) => <HistoryCard key={i} h={h} />)}
      </div>
    </div>
  );
}

// ---------- Analysis: Breakdown ----------
const BREAKDOWN = [
  { group: 'RNG Mode', rows: [
    { label: 'RNG On', dec: 2, acc: '50.0% (1/2)', bl: '50.0%', ev: '0.0%', dmg: '4487.5' },
    { label: 'RNG Off', dec: 10, acc: '70.0% (7/10)', bl: '10.0%', ev: '20.0%', dmg: '151.6' },
  ] },
  { group: 'Street', rows: [
    { label: 'Postflop', dec: 12, acc: '66.7% (8/12)', bl: '16.7%', ev: '16.7%', dmg: '874.3' },
    { label: 'Flop', dec: 11, acc: '63.6% (7/11)', bl: '18.2%', ev: '18.2%', dmg: '953.7' },
    { label: 'Turn', dec: 1, acc: '100% (1/1)', bl: '0.0%', ev: '0.0%', dmg: '0.0' },
  ] },
  { group: 'Pot Type', rows: [
    { label: 'Single Raise', dec: 7, acc: '57.1% (4/7)', bl: '28.6%', ev: '14.3%', dmg: '1495.0' },
    { label: '3-Bet', dec: 5, acc: '80.0% (4/5)', bl: '0.0%', ev: '20.0%', dmg: '5.3' },
  ] },
  { group: 'Position', rows: [
    { label: 'EP', dec: 2, acc: '50.0% (1/2)', bl: '0.0%', ev: '50.0%', dmg: '13.2' },
    { label: 'MP', dec: 1, acc: '100% (1/1)', bl: '0.0%', ev: '0.0%', dmg: '0.0' },
    { label: 'LP', dec: 4, acc: '100% (4/4)', bl: '0.0%', ev: '0.0%', dmg: '0.0' },
    { label: 'Blinds', dec: 5, acc: '40.0% (2/5)', bl: '40.0%', ev: '20.0%', dmg: '2093.0' },
  ] },
  { group: 'Stack Depth', rows: [
    { label: 'Medium (26\u201359bb)', dec: 10, acc: '80.0% (8/10)', bl: '0.0%', ev: '20.0%', dmg: '7.6' },
    { label: 'Deep (60bb+)', dec: 2, acc: '0.0% (0/2)', bl: '100%', ev: '0.0%', dmg: '5207.7' },
  ] },
  { group: 'Direction', rows: [
    { label: 'Too Tight', dec: 1, acc: '0.0% (0/1)', bl: '100%', ev: '0.0%', dmg: '8975.1' },
    { label: 'Too Aggressive', dec: 3, acc: '0.0% (0/3)', bl: '33.3%', ev: '66.7%', dmg: '505.4' },
  ] },
];

function BreakRow({ r }) {
  return (
    <div style={{ padding: '10px 2px', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 7 }}>
        <span style={{ fontFamily: 'var(--op-font-ui)', fontWeight: 700, fontSize: 13, color: '#fff' }}>{r.label}</span>
        <span style={{ fontFamily: 'var(--op-font-ui)', fontWeight: 700, fontSize: 12.5, color: 'var(--op-exodus-50)' }}>{r.acc}</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
        <Metric k="Dec" v={r.dec} />
        <Metric k="Blunders" v={r.bl} />
        <Metric k="EV miss" v={r.ev} />
        <Metric k="Avg dmg" v={r.dmg} />
      </div>
    </div>
  );
}

function BreakdownView() {
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
        <Eyebrow>Stats breakdown</Eyebrow>
        <button className="op-tap" style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'var(--op-font-ui)', fontWeight: 600, fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>Clear filters</button>
      </div>
      {/* key metric cards */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 18 }}>
        <BigStat v="66.7%" k="Accuracy" sub="8 / 12" />
        <BigStat v="16.7%" k="Blunders" sub="2 / 12" color="var(--op-red-40)" />
        <BigStat v="874" k="Avg dmg" sub="base" color="var(--op-gold-50)" />
      </div>
      <DarkCard pad={14}>
        {BREAKDOWN.map((g, i) => (
          <Accordion key={g.group} title={g.group} defaultOpen={i === 0}
            right={<span style={{ fontFamily: 'var(--op-font-ui)', fontWeight: 600, fontSize: 11, color: 'rgba(255,255,255,0.4)' }}>{g.rows.length}</span>}>
            {g.rows.map((r) => <BreakRow key={r.label} r={r} />)}
          </Accordion>
        ))}
      </DarkCard>
    </div>
  );
}

function BigStat({ v, k, sub, color = '#fff' }) {
  return (
    <DarkCard pad={12} style={{ textAlign: 'center' }}>
      <div style={{ fontFamily: 'var(--op-font-display)', fontWeight: 700, fontSize: 21, color }}>{v}</div>
      <div style={{ fontFamily: 'var(--op-font-ui)', fontWeight: 700, fontSize: 10, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.45)', marginTop: 2 }}>{k}</div>
      <div style={{ fontFamily: 'var(--op-font-ui)', fontWeight: 600, fontSize: 10.5, color: 'rgba(255,255,255,0.35)', marginTop: 1 }}>{sub}</div>
    </DarkCard>
  );
}

// ---------- Analysis: Hands ----------
const HANDS = [
  { date: 'Jun 17, 5:40 PM', m: 12, h: 2, cards: ['Jc', 'Kh'], rng: '67', board: ['5s', '8h', 'Kc'], stack: '60 bb', street: 'Flop', pos: 'BB', opp: 'CO', facing: 'Bet', picked: 'Fold', correct: 'Raise 6.11', dir: 'Too Tight' },
  { date: 'Jun 17, 5:40 PM', m: 12, h: 0, cards: ['Ah', 'Ac'], rng: '29', board: ['5h', '9c', 'Jd'], stack: '60 bb', street: 'Flop', pos: 'BTN', opp: 'LJ', facing: 'No action', picked: 'Bet 8.45', correct: 'Bet 8.45', dir: '\u2014' },
  { date: 'Jun 17, 5:39 PM', m: 11, h: 4, cards: ['7h', 'Qc'], rng: '\u2014', board: ['2c', '3d', 'Kc'], stack: '60 bb', street: 'Flop', pos: 'BB', opp: 'SB', facing: 'No action', picked: 'Bet 57.58', correct: 'Check', dir: 'Too Aggressive' },
  { date: 'Jun 17, 5:38 PM', m: 11, h: 2, cards: ['9d', 'Jc'], rng: '\u2014', board: ['4h', '6s', '7d'], stack: '50 bb', street: 'Flop', pos: 'BTN', opp: 'SB', facing: 'No action', picked: 'Bet 3.3', correct: 'Bet 3.3', dir: '\u2014' },
  { date: 'Jun 12, 10:41 PM', m: 7, h: 0, cards: ['4d', '5h'], rng: '\u2014', board: ['8h', '9c', 'Ad'], stack: '40 bb', street: 'Flop', pos: 'BB', opp: 'SB', facing: 'No action', picked: 'Check', correct: 'Check', dir: '\u2014' },
];

function HandCard({ hd }) {
  const correctMove = hd.dir === '\u2014';
  return (
    <DarkCard pad={13} style={{ marginBottom: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 11 }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <CardRow codes={hd.cards} w={28} />
          <span style={{ color: 'rgba(255,255,255,0.25)', fontSize: 12 }}>on</span>
          <CardRow codes={hd.board} w={24} />
        </span>
        {!correctMove
          ? <span style={{ background: 'rgba(80,181,255,0.16)', color: '#50B5FF', borderRadius: 6, padding: '3px 8px', fontFamily: 'var(--op-font-ui)', fontWeight: 700, fontSize: 10, letterSpacing: '0.03em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>{hd.dir}</span>
          : <span style={{ color: 'var(--op-green-30)', fontSize: 16 }}>&#10003;</span>}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 11, flexWrap: 'wrap' }}>
        <Tag>{hd.date}</Tag><Tag>M{hd.m} &middot; H{hd.h}</Tag><Tag>{hd.stack}</Tag><Tag>{hd.street}</Tag><Tag>{hd.pos} v {hd.opp}</Tag>{hd.rng !== '\u2014' && <Tag>RNG {hd.rng}</Tag>}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
        <Metric k="Facing" v={hd.facing} />
        <Metric k="Picked" v={hd.picked} />
        <Metric k="Correct" v={hd.correct} />
      </div>
    </DarkCard>
  );
}

function Tag({ children }) {
  return <span style={{ background: 'rgba(255,255,255,0.05)', borderRadius: 6, padding: '3px 7px', fontFamily: 'var(--op-font-ui)', fontWeight: 600, fontSize: 10.5, color: 'rgba(255,255,255,0.6)', whiteSpace: 'nowrap' }}>{children}</span>;
}

function HandsView({ landscape }) {
  return (
    <div>
      <Eyebrow style={{ marginBottom: 12 }}>Hand log</Eyebrow>
      <div style={{ display: landscape ? 'grid' : 'block', gridTemplateColumns: landscape ? '1fr 1fr' : undefined, columnGap: landscape ? 12 : 0 }}>
        {HANDS.map((hd, i) => <HandCard key={i} hd={hd} />)}
      </div>
    </div>
  );
}

// ---------- Analysis tab (sub-tabs) ----------
function SubTabs({ value, onChange }) {
  const tabs = [{ k: 'history', l: 'History' }, { k: 'breakdown', l: 'Breakdown' }, { k: 'hands', l: 'Hands' }];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, background: 'rgba(255,255,255,0.05)', borderRadius: 12, padding: 4, border: '1px solid rgba(255,255,255,0.07)', marginBottom: 18 }}>
      {tabs.map((t) => {
        const active = t.k === value;
        return (
          <button key={t.k} onClick={() => onChange(t.k)} className="op-tap" style={{
            border: 'none', cursor: 'pointer', borderRadius: 9, padding: '10px 4px',
            fontFamily: 'var(--op-font-ui)', fontWeight: 700, fontSize: 12.5, transition: 'all 0.18s',
            background: active ? 'var(--op-exodus-70)' : 'transparent', color: active ? '#fff' : 'rgba(255,255,255,0.55)',
          }}>{t.l}</button>
        );
      })}
    </div>
  );
}

function AnalysisTab({ landscape }) {
  const [sub, setSub] = React.useState('history');
  return (
    <div>
      <SubTabs value={sub} onChange={setSub} />
      {sub === 'history' && <HistoryView landscape={landscape} />}
      {sub === 'breakdown' && <BreakdownView />}
      {sub === 'hands' && <HandsView landscape={landscape} />}
    </div>
  );
}

// ---------- Top tabs ----------
function TopTabs({ value, onChange, landscape }) {
  const tabs = [{ k: 'profile', l: 'Profile' }, { k: 'analysis', l: 'Analysis' }];
  return (
    <div style={{ display: 'flex', gap: 24, padding: landscape ? '0 32px 0 60px' : '0 16px', borderBottom: '1px solid rgba(255,255,255,0.06)', background: 'rgba(11,12,19,0.6)', backdropFilter: 'blur(8px)' }}>
      {tabs.map((t) => {
        const active = t.k === value;
        return (
          <button key={t.k} onClick={() => onChange(t.k)} className="op-tap" style={{
            background: 'none', border: 'none', cursor: 'pointer', padding: '12px 2px 13px', position: 'relative',
            fontFamily: 'var(--op-font-ui)', fontWeight: 700, fontSize: 14.5, color: active ? '#fff' : 'rgba(255,255,255,0.4)',
          }}>
            {t.l}
            {active && <span style={{ position: 'absolute', left: 0, right: 0, bottom: -1, height: 2.5, background: 'var(--op-exodus-70)', borderRadius: 2 }}></span>}
          </button>
        );
      })}
    </div>
  );
}

function DuelProfile({ onBack, initialTab = 'profile', landscape }) {
  const [tab, setTab] = React.useState(initialTab);
  const backBtn = <button onClick={onBack} className="op-tap" style={{ cursor: 'pointer', background: 'none', border: '1px solid rgba(255,255,255,0.2)', borderRadius: 10, padding: '9px 13px', fontFamily: 'var(--op-font-ui)', fontWeight: 700, fontSize: 12, color: '#fff', whiteSpace: 'nowrap' }}>Back to Duel</button>;

  if (landscape) {
    const tabBtn = (k, l) => (
      <button key={k} onClick={() => setTab(k)} className="op-tap" style={{
        textAlign: 'left', cursor: 'pointer', borderRadius: 10, padding: '11px 14px', border: 'none',
        background: tab === k ? 'var(--op-exodus-70)' : 'rgba(255,255,255,0.05)',
        color: tab === k ? '#fff' : 'rgba(255,255,255,0.6)',
        fontFamily: 'var(--op-font-ui)', fontWeight: 700, fontSize: 14,
      }}>{l}</button>
    );
    const sidebar = (
      <React.Fragment>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
          <div style={{ fontFamily: 'var(--op-font-display)', fontWeight: 700, fontSize: 21, color: '#fff' }}>Duel Profile</div>
          {backBtn}
        </div>
        <IdentityCard />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 16 }}>
          {tabBtn('profile', 'Profile')}
          {tabBtn('analysis', 'Analysis')}
        </div>
        <div style={{ flex: 1 }}></div>
      </React.Fragment>
    );
    return (
      <ScreenShell landscape sidebar={sidebar}>
        {tab === 'profile' ? <AchievementsGrid /> : <AnalysisTab />}
      </ScreenShell>
    );
  }

  const header = (
    <div>
      <FlowTopBar title="Duel Profile" onBack={onBack} landscape={landscape}
        right={backBtn} />
      <TopTabs value={tab} onChange={setTab} landscape={landscape} />
    </div>
  );
  return (
    <ScreenShell header={header} padBody={16} landscape={landscape}>
      {tab === 'profile' ? <ProfileTab /> : <AnalysisTab landscape={landscape} />}
    </ScreenShell>
  );
}

Object.assign(window, { DuelProfile });