/* Books.jsx — book cover + chapter↔unit mapping diagram
   New dashed-line diagram uses the DS `--color-border-dashed` token
   (#362baa) — originally reserved for "drop zone" placeholders, here
   repurposed for "to be connected" mapping. Tokens unchanged.
   Rationale: spec §3.2. */

const MAPPING = [
  [['Ch.1 돈은 어디서 오는가',  'Ch.1 Where money comes from'],   ['초저 1단원 — 노동과 보수',  'Low elementary · Unit 1 — Work & pay']],
  [['Ch.2 저축과 시간의 가치',  'Ch.2 Saving and the value of time'],['초저 3단원 — 저축의 시작',  'Low elementary · Unit 3 — Starting to save']],
  [['Ch.3 위험과 확률',         'Ch.3 Risk and probability'],     ['초고 5단원 — 위험관리',     'High elementary · Unit 5 — Risk management']],
  [['Ch.4 빚과 신용',           'Ch.4 Debt and credit'],          ['초고 6단원 — 신용 입문',     'High elementary · Unit 6 — Intro to credit']],
  [['Ch.5 투자와 분산',         'Ch.5 Investing and diversification'],['중등 4단원 — 분산투자',  'Middle school · Unit 4 — Diversification']],
  [['Ch.6 가치와 가격',         'Ch.6 Value and price'],          ['중등 5단원 — 가격이론',     'Middle school · Unit 5 — Price theory']],
];

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

  return (
    <section id="book" className="section" style={{ background: '#fafcfe' }}>
      <div className="section-inner">
        <div className="eyebrow eyebrow-purple" style={{ marginBottom: 14 }}>{t('book.eyebrow')}</div>

        <div className="book-row" style={{
          display: 'grid', gridTemplateColumns: '300px 1fr', gap: 48,
          alignItems: 'start',
        }}>
          {/* Cover */}
          <div style={{
            width: 300, aspectRatio: '2/3',
            background:
              'linear-gradient(135deg, #4434d4 0%, #7c3aed 35%, #b9b9f9 100%)',
            borderRadius: 6,
            boxShadow: 'rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.10) 0px 18px 36px -18px',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            padding: '28px 22px', color: '#fff',
          }}>
            <div className="eyebrow eyebrow-light" style={{ color: 'rgba(255,255,255,0.7)' }}>
              SRIKI PRESS · 2025
            </div>
            <div>
              <div style={{
                fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
                fontSize: 28, fontWeight: 300, lineHeight: 1.1,
                letterSpacing: '-0.4px', whiteSpace: 'pre-line',
              }}>{lang === 'ko' ? '퀀트 엄마의\n금융 수업' : 'Quant Mom\'s\nFinance Class'}</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 12 }}>
                {lang === 'ko' ? '정재은 지음' : 'by Jaeeun Jung'}
              </div>
            </div>
          </div>

          {/* Right column */}
          <div>
            <div style={{
              fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
              fontSize: 32, fontWeight: 300, letterSpacing: '-0.64px',
              color: '#061b31', lineHeight: 1.18,
            }}>{t('book.title')}</div>
            <div style={{ fontSize: 16, color: '#64748d', marginTop: 8 }}>{t('book.sub')}</div>

            <div style={{ display: 'flex', gap: 10, marginTop: 22, flexWrap: 'wrap' }}>
              <Button variant="primary"   size="md">{t('book.preview')} ↓</Button>
              <Button variant="secondary" size="md">{t('book.buy.kyobo')} →</Button>
              <Button variant="secondary" size="md">{t('book.buy.yes24')} →</Button>
              <Button variant="secondary" size="md">{t('book.buy.aladin')} →</Button>
            </div>

            <div className="eyebrow" style={{ marginTop: 36, marginBottom: 14 }}>
              {t('book.map.h')}
            </div>

            {/* Mapping diagram */}
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {MAPPING.map((row, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '1fr auto 1fr',
                  gap: 20, alignItems: 'center',
                  padding: '14px 0',
                  borderTop: i === 0 ? '0' : '1px solid #e5edf5',
                }}>
                  <div style={{
                    fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
                    fontSize: 14, color: '#061b31', fontWeight: 400,
                  }}>{pick(row[0])}</div>
                  <div className="dashed-line" style={{
                    width: 80, height: 0,
                  }} />
                  <div style={{
                    fontSize: 13, color: '#7c3aed',
                  }}>{pick(row[1])}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .book-row { grid-template-columns: 1fr !important; }
          .book-row > div:first-child { width: 220px !important; }
        }
      `}</style>
    </section>
  );
};

window.Books = Books;