/* Curriculum.jsx — grade-stage tabs + 3-track ratio bar
   New component (not in DS). Reuses chip + card tokens.
   The 8-cell horizontal bar maps the violet/blue/gold track palette
   inherited from Hero planets — keeps brand consistency without inventing
   new color tokens. Rationale: spec §2.5. */

const CURRICULUM = {
  low:    { math: 4, thinking: 3, finance: 1, /* of 8 */
            bullets: ['kc.low.1', 'kc.low.2', 'kc.low.3'] },
  high:   { math: 4, thinking: 2, finance: 2,
            bullets: ['kc.high.1', 'kc.high.2', 'kc.high.3'] },
};

const BULLETS = {
  /* 저학년 1-3 */
  'kc.low.1':  ['수 감각·자릿수·기본 연산',           'Number sense, place value, basic operations'],
  'kc.low.2':  ['패턴 찾기와 추론 놀이',              'Pattern recognition and reasoning play'],
  'kc.low.3':  ['용돈의 시작 — 갖고 싶음 vs 필요함',   'First allowance — wants vs needs'],
  /* 고학년 4-6 */
  'kc.high.1': ['분수·소수의 의미와 연산',            'Fractions and decimals: meaning and operations'],
  'kc.high.2': ['도형의 추론과 비례 감각',            'Geometric reasoning and proportions'],
  'kc.high.3': ['저축·복리·기회비용 (수학으로 증명)',  'Savings, compounding, opportunity cost — proved with math'],
};

const Curriculum = () => {
  const t = window.useT();
  const { lang } = React.useContext(window.LangContext);
  const pick = pair => pair[lang === 'ko' ? 0 : 1];

  const [tab, setTab] = React.useState('high');
  const data = CURRICULUM[tab];
  const total = data.math + data.thinking + data.finance;

  const tabs = [
    ['low',  'cur.tab.1'],
    ['high', 'cur.tab.2'],
  ];

  const cellColor = key =>
    key === 'math'     ? { bg: '#A78BFA', deep: '#5B21B6' } :
    key === 'thinking' ? { bg: '#3B82F6', deep: '#1E40AF' } :
                         { bg: '#F59E0B', deep: '#92400E' };

  /* 3 proportional segments — replaces former 8-cell bar + separate legend */
  const segments = [
    { key: 'math',     label: t('cur.math'),     n: data.math,     c: cellColor('math') },
    { key: 'thinking', label: t('cur.thinking'), n: data.thinking, c: cellColor('thinking') },
    { key: 'finance',  label: t('cur.finance'),  n: data.finance,  c: cellColor('finance') },
  ];
  const segPct = n => Math.round(n / total * 100);

  return (
    <section id="curriculum" className="section">
      <div className="section-inner">
        <div className="label-ko" style={{ marginBottom: 16 }}>{t('cur.eyebrow')}</div>
        <h2 style={{
          fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
          fontSize: 'clamp(15px, 4.6vw, 38px)', fontWeight: 700, letterSpacing: '-0.4px',
          color: '#0B1727', margin: 0, maxWidth: 760, lineHeight: 1.22,
          whiteSpace: 'nowrap',
        }}>{t('cur.h2')}</h2>

        {/* Tabs */}
        <div style={{ display: 'flex', gap: 8, marginTop: 32, flexWrap: 'wrap' }}>
          {tabs.map(([id, key]) => (
            <button key={id}
              className="chip"
              aria-pressed={tab === id}
              onClick={() => setTab(id)}
              style={{ fontSize: 14, padding: '10px 18px' }}
            >{t(key)}</button>
          ))}
        </div>

        {/* Ratio panel */}
        <div className="card" style={{ marginTop: 24, padding: 32 }}>
          {/* Proportional bar — 3 segments carry their own label/%/slot count.
              Replaces the previous "8 numbered blocks + separate legend" pattern. */}
          <div className="sriki-trackbar" style={{
            display: 'flex',
            height: 96, borderRadius: 14,
            overflow: 'hidden',
            border: '1px solid #E2E8F0',
            boxShadow: '0 1px 2px rgba(15,23,42,0.04), 0 10px 28px -14px rgba(15,23,42,0.18)',
            marginBottom: 12,
          }}>
            {segments.map((seg, idx) => (
              <div key={seg.key} className="sriki-trackbar-seg" style={{
                flex: seg.n,
                minWidth: 64,
                background: `linear-gradient(180deg, ${seg.c.bg} 0%, ${seg.c.deep} 140%)`,
                color: '#fff',
                padding: '16px 12px',
                display: 'flex', flexDirection: 'column',
                alignItems: 'center', justifyContent: 'space-between',
                textAlign: 'center',
                position: 'relative',
                borderLeft: idx === 0 ? 'none' : '1px solid rgba(255,255,255,0.18)',
                boxShadow: 'inset 0 -2px 0 rgba(0,0,0,0.10)',
                overflow: 'hidden',
              }}>
                <div className="sriki-trackbar-label" style={{
                  fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
                  fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em',
                  textShadow: '0 1px 2px rgba(0,0,0,0.15)',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  maxWidth: '100%',
                }}>{seg.label}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 8 }}>
                  <span className="tnum sriki-trackbar-pct" style={{
                    fontFamily: 'var(--font-sans)', fontFeatureSettings: '"tnum"',
                    fontSize: 28, fontWeight: 800, letterSpacing: '-0.6px',
                    lineHeight: 1,
                    whiteSpace: 'nowrap',
                  }}>{segPct(seg.n)}%</span>
                </div>
              </div>
            ))}
          </div>
          <style>{`
            /* Tablet — bar still horizontal but segment chrome trimmed so the
               smallest segment (1/8 = 12.5% width) can still hold its label. */
            @media (max-width: 767px) {
              .sriki-trackbar { height: 64px !important; border-radius: 10px !important; }
              .sriki-trackbar-seg {
                padding: 8px 6px !important;
                min-width: 0 !important;
              }
              .sriki-trackbar-label { font-size: 11px !important; }
              .sriki-trackbar-pct { font-size: 17px !important; letter-spacing: -0.3px !important; }
            }
            /* Phone — drop font further so even the 1-slot finance band fits
               its "13%" without clipping. Padding tight to maximise glyph room. */
            @media (max-width: 480px) {
              .sriki-trackbar { height: 60px !important; }
              .sriki-trackbar-seg { padding: 6px 4px !important; }
              .sriki-trackbar-label { font-size: 10px !important; }
              .sriki-trackbar-pct { font-size: 14px !important; letter-spacing: -0.25px !important; }
            }
            /* Ultra-narrow (≤360px iPhone SE) — last-resort shrink. */
            @media (max-width: 360px) {
              .sriki-trackbar-pct { font-size: 12px !important; }
              .sriki-trackbar-label { font-size: 9px !important; }
            }
          `}</style>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 10,
            color: '#94A3B8', textAlign: 'center', marginBottom: 28,
            textTransform: 'uppercase', letterSpacing: '0.10em',
          }}>{lang === 'ko' ? `주당 ${total}슬롯 기준 트랙 비중` : `Track share across ${total} weekly slots`}</div>

          {/* Bullets */}
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
            {data.bullets.map(b => (
              <li key={b} style={{
                display: 'flex', gap: 14, alignItems: 'flex-start',
                fontSize: 15, color: '#1E293B', lineHeight: 1.65,
                fontWeight: 500,
              }}>
                <span style={{
                  width: 22, height: 22, borderRadius: 6,
                  background: 'rgba(109,40,217,0.10)',
                  color: '#6D28D9',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0, marginTop: 2,
                }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="20 6 9 17 4 12"/>
                  </svg>
                </span>
                <span>{pick(BULLETS[b])}</span>
              </li>
            ))}
          </ul>

          <div style={{ display: 'flex', gap: 10, marginTop: 28, flexWrap: 'nowrap' }}>
            <Button variant="primary"   size="md">{t('cur.pdf')} ↓</Button>
            <Button variant="secondary" size="md">{t('cur.diag')} →</Button>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Curriculum = Curriculum;