/* MediaLibrary.jsx — video cards + filter chips + FAQ hook
   New card type (video thumbnail + duration badge + play overlay).
   Filter chips, card hover, and play accent reuse DS tokens.
   Rationale: spec §3.1 — SRIKI differentiator. "Parents who watched this
   ask…" hook converts viewers into consultation leads. */

const MEDIA = [
  { id: 'm1', kind: 'tv',    ratio: '16/9',
    title: ['매일경제 · 아이 돈 교육법',  'Maekyung · How to teach kids about money'],
    dur: ['8:42', '8:42'],
    src: ['매일경제', 'Maekyung'] },
  { id: 'm2', kind: 'short', ratio: '9/16',
    title: ['엄마표 금융교육 시작하기',  'Starting at-home finance education'],
    dur: ['0:58', '0:58'],
    src: ['유튜브', 'YouTube'] },
  { id: 'm3', kind: 'short', ratio: '9/16',
    title: ['용돈, 몇 살부터?',          'Allowance — at what age?'],
    dur: ['0:32', '0:32'],
    src: ['인스타', 'Instagram'] },
  { id: 'm4', kind: 'itw',   ratio: '16/9',
    title: ['한국경제 인터뷰 · 퀀트 엄마', 'Hankyung interview · Quant Mom'],
    dur: ['12:05', '12:05'],
    src: ['한국경제', 'Hankyung'] },
  { id: 'm5', kind: 'col',   ratio: '16/9',
    title: ['칼럼 · 복리의 마법은 거짓?', 'Column · Is the magic of compounding a lie?'],
    dur: ['읽기 5분', '5 min read'],
    src: ['브런치', 'Brunch'] },
  { id: 'm6', kind: 'tv',    ratio: '16/9',
    title: ['EBS · 수학으로 세상보기',   'EBS · Seeing the world through math'],
    dur: ['14:20', '14:20'],
    src: ['EBS', 'EBS'] },
];

const POPULAR_QA = [
  ['초1인데 너무 이르지 않나요?',     'Is grade 1 too early?'],
  ['학원·앱·학습지 다 해야 하나요?',  'Do we need all three: class, app, and weekly?'],
  ['수강료가 어떻게 되나요?',        'How much does it cost?'],
];

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

  const [filter, setFilter] = React.useState('all');
  const filters = [
    ['all',   'media.f.all'],
    ['tv',    'media.f.tv'],
    ['itw',   'media.f.itw'],
    ['col',   'media.f.col'],
    ['short', 'media.f.short'],
  ];

  const items = MEDIA.filter(m => filter === 'all' ? true : m.kind === filter);

  return (
    <section id="media" className="section">
      <div className="section-inner">
        <div className="eyebrow eyebrow-purple" style={{ marginBottom: 14 }}>{t('media.eyebrow')}</div>
        <h2 style={{
          fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
          fontSize: 'clamp(15px, 4.4vw, 36px)', fontWeight: 300, letterSpacing: '-0.4px',
          color: '#061b31', margin: 0, maxWidth: 760, lineHeight: 1.15,
          whiteSpace: 'nowrap',
        }}>{t('media.h2')}</h2>

        {/* Filters */}
        <div style={{ display: 'flex', gap: 8, marginTop: 24, flexWrap: 'wrap' }}>
          {filters.map(([id, key]) => (
            <button key={id} className="chip"
              aria-pressed={filter === id}
              onClick={() => setFilter(id)}
            >{t(key)}</button>
          ))}
        </div>

        {/* Cards */}
        <div className="media-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16, marginTop: 28,
        }}>
          {items.map(m => (
            <a key={m.id} href="#" className="card" style={{
              padding: 0, overflow: 'hidden', textDecoration: 'none',
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{
                position: 'relative',
                aspectRatio: m.ratio,
                background: 'linear-gradient(135deg, #1c1e54 0%, #0d253d 100%)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'rgba(255,255,255,0.4)',
                fontFamily: 'var(--font-mono)', fontSize: 11,
                textTransform: 'uppercase', letterSpacing: '0.08em',
              }}>
                {/* Play button */}
                <svg width="42" height="42" viewBox="0 0 24 24" fill="#7c3aed" style={{
                  filter: 'drop-shadow(0 4px 12px rgba(124,58,237,0.6))',
                }}>
                  <circle cx="12" cy="12" r="11" fill="rgba(255,255,255,0.95)"/>
                  <path d="M10 8l6 4-6 4z" fill="#7c3aed"/>
                </svg>
                {/* Duration badge */}
                <span style={{
                  position: 'absolute', right: 10, bottom: 10,
                  background: 'rgba(6,27,49,0.85)',
                  color: '#fff',
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  padding: '3px 7px', borderRadius: 4,
                  fontFeatureSettings: '"tnum"',
                }}>{pick(m.dur)}</span>
                {/* Source pill */}
                <span style={{
                  position: 'absolute', left: 10, top: 10,
                  background: 'rgba(255,255,255,0.95)',
                  color: '#061b31',
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  padding: '3px 7px', borderRadius: 4,
                  textTransform: 'uppercase', letterSpacing: '0.06em',
                }}>{pick(m.src)}</span>
              </div>
              <div style={{ padding: 16 }}>
                <div style={{
                  fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
                  fontSize: 15, fontWeight: 400, color: '#061b31', lineHeight: 1.4,
                }}>{pick(m.title)}</div>
              </div>
            </a>
          ))}
        </div>

        {/* Conversion hook */}
        <div style={{
          marginTop: 40, padding: 24,
          background: '#fafcfe', border: '1px solid #e5edf5', borderRadius: 8,
        }}>
          <div style={{
            fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
            fontSize: 16, fontWeight: 400, color: '#061b31', marginBottom: 14,
          }}>{t('media.faq')}</div>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
            {POPULAR_QA.map(q => (
              <li key={q[0]} style={{
                padding: '12px 0', borderTop: '1px solid #e5edf5',
                display: 'flex', alignItems: 'center', gap: 14,
                fontSize: 14, color: '#273951',
              }}>
                <span style={{ color: '#7c3aed', fontWeight: 500 }}>Q.</span>
                <span style={{ flex: 1 }}>{pick(q)}</span>
                <a href="#assessment" style={{ fontSize: 13, color: '#7c3aed' }}>{lang === 'ko' ? '답변 보기 →' : 'See answer →'}</a>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) { .media-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 480px) { .media-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

window.MediaLibrary = MediaLibrary;