const { Card, Badge, Tabs, Stat, PrismRule, Button, Switch, Tooltip } = window.PrismDS;

// Strategy data lives in /content/strategies.ts — see CONTENT.md.

function StrategyScreen() {
  const P = PrismContent.strategiesPage;
  const list = PrismContent.pick(PrismContent.strategies);
  const [tab, setTab] = React.useState(list.length ? list[0].id : '');
  const [log, setLog] = React.useState(false);
  const d = list.find(x => x.id === tab) || list[0];
  if (!d) return null;
  return (
    <div>
      <div style={{ background: 'var(--bg-inverse)', padding: '72px 40px 0', position: 'relative', overflow: 'hidden' }}>
        <img src={window.RES('../../assets/logo-mark.png')} alt="" style={{ position: 'absolute', right: -50, top: -40, width: 320, opacity: .1 }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <PrismRule />
          <h1 style={{ font: 'var(--type-h1)', color: '#fff', margin: '20px 0 12px' }}>{T(P.title)}</h1>
          <p style={{ font: 'var(--type-body-lg)', color: 'rgba(255,255,255,.72)', maxWidth: 620, margin: 0 }}>
            {T(P.lead)}
          </p>
          <div style={{ marginTop: 40 }}>
            <div style={{ display: 'flex', gap: 36 }}>
              {list.map(v => (
                <button key={v.id} onClick={() => setTab(v.id)} style={{
                  background: 'transparent', border: 'none', cursor: 'pointer', padding: '0 0 16px',
                  font: 'var(--type-h4)', color: tab === v.id ? '#fff' : 'rgba(255,255,255,.55)',
                  borderBottom: '2px solid ' + (tab === v.id ? 'var(--brand-accent)' : 'transparent'), transition: 'var(--transition-base)'
                }}>{T(v.name)}</button>
              ))}
            </div>
          </div>
        </div>
      </div>

      <Section>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-display-en)', fontSize: 12, letterSpacing: '.06em', color: 'var(--brand-secondary)', textTransform: 'uppercase' }}>{d.en}</div>
            <h2 style={{ font: 'var(--type-h2)', fontWeight: 600, color: 'var(--text-heading)', margin: '12px 0 16px' }}>{T(d.heading)}</h2>
            <p style={{ font: 'var(--type-body-lg)', color: 'var(--text-muted)', margin: 0, maxWidth: 560 }}>{T(d.lead)}</p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 28, marginTop: 40 }}>
              {d.metrics.map(m => (
                <div key={T(m.label)} style={{ borderTop: '1px solid var(--border-hairline)', paddingTop: 14 }}>
                  <div style={{ font: 'var(--type-caption)', color: 'var(--text-muted)' }}>
                    {m.tooltip
                      ? <Tooltip content={T(m.tooltip)}><span style={{ borderBottom: '1px dashed var(--border-strong)', cursor: 'help' }}>{T(m.label)}</span></Tooltip>
                      : T(m.label)}
                  </div>
                  <div style={{ fontFamily: 'var(--font-display-en)', fontSize: 26, color: 'var(--text-heading)', marginTop: 6 }}>{m.value}</div>
                </div>
              ))}
            </div>
          </div>
          <Card padding="lg">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ font: 'var(--type-h4)', color: 'var(--text-heading)' }}>{T(P.chartTitle)}</div>
              <Switch size="sm" checked={log} onChange={e => setLog(e.target.checked)} label={T(P.logScaleLabel)} />
            </div>
            <svg viewBox="0 0 400 210" style={{ width: '100%', marginTop: 20 }}>
              <defs><linearGradient id="sg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#7EC8E3" stopOpacity=".32" /><stop offset="1" stopColor="#7EC8E3" stopOpacity="0" /></linearGradient></defs>
              {[0, 1, 2, 3, 4].map(i => <line key={i} x1="0" y1={18 + i * 42} x2="400" y2={18 + i * 42} stroke="var(--grid-line)" />)}
              <path d={log ? 'M0 176 L50 150 L100 156 L150 124 L200 110 L250 96 L300 70 L350 58 L400 40 L400 210 L0 210 Z' : 'M0 186 L50 174 L100 178 L150 148 L200 134 L250 130 L300 92 L350 76 L400 46 L400 210 L0 210 Z'} fill="url(#sg)" style={{ transition: 'd .3s' }} />
              <path d={log ? 'M0 176 L50 150 L100 156 L150 124 L200 110 L250 96 L300 70 L350 58 L400 40' : 'M0 186 L50 174 L100 178 L150 148 L200 134 L250 130 L300 92 L350 76 L400 46'} fill="none" stroke="var(--series-1)" strokeWidth="2" />
            </svg>
            <div style={{ display: 'grid', gap: 12, marginTop: 22, paddingTop: 18, borderTop: '1px solid var(--border-hairline)' }}>
              {d.facts.map(f => (
                <div key={T(f.label)} style={{ display: 'flex', justifyContent: 'space-between', font: 'var(--type-body)' }}>
                  <span style={{ color: 'var(--text-muted)' }}>{T(f.label)}</span><span style={{ color: 'var(--text-body)', fontWeight: 'var(--fw-medium)' }}>{T(f.value)}</span>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </Section>

      <Section tone="subtle" eyebrow={P.riskSection.eyebrow} title={T(P.riskSection.title)} tight>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
          {P.riskCards.map(rc => (
            <Card key={T(rc.title)} variant="flat" padding="lg">
              <h3 style={{ font: 'var(--type-h4)', color: 'var(--text-heading)', margin: 0 }}>{T(rc.title)}</h3>
              <p style={{ font: 'var(--type-body)', color: 'var(--text-muted)', margin: '10px 0 0' }}>{T(rc.description)}</p>
            </Card>
          ))}
        </div>
      </Section>
    </div>
  );
}
Object.assign(window, { StrategyScreen });