/* Testimonials.jsx — 3-tab review cards (parents / student work / awards)
   Reuses card + chip tokens. The only new token used is the gold star
   accent (.star-gold), which reuses the Hero finance-planet color so no
   new color is introduced. Rationale: spec §3.3. */

const REVIEWS = {
  parents: [
    { kind: 'video', name: ['이지영', 'Ji-Young Lee'], tag: ['학부모 · 초3 학부모', 'Parent · Grade 3'], dur: '1:24',
      body: ['아이가 처음으로 "왜?"를 묻기 시작했어요.', 'My child started asking "why" for the first time.'] },
    { kind: 'text',  name: ['박서영', 'Seo-Young Park'], tag: ['학부모 · 초5 학부모', 'Parent · Grade 5'],
      body: ['수업 후 30분 안에 카톡으로 일지가 와요. 어디서도 못 받아 본 서비스입니다.', 'A KakaoTalk note within 30 minutes of class. Nothing else comes close.'],
      stars: 5 },
    { kind: 'text',  name: ['김민지', 'Min-Ji Kim'], tag: ['학부모 · 중1 학부모', 'Parent · Grade 7'],
      body: ['"용돈을 어떻게 쓸까"를 아이가 먼저 계산하기 시작했어요.', 'My child started doing the math on how to spend her allowance.'],
      stars: 5 },
  ],
  students: [
    { kind: 'text',  name: ['최진영 · 초4', 'Jin-Young Choi · G4'], tag: ['모의투자 결과', 'Mock investing result'],
      body: ['3개월 모의투자 결과 +12% (배당주 분산 포트폴리오)', '12% return over 3 months (diversified dividend portfolio).'],
      stars: 5 },
    { kind: 'text',  name: ['하영 · 초6', 'Ha-Young · G6'],  tag: ['사업계획서', 'Business plan'],
      body: ['"학교 매점 옆에 채소 가게를 열자" — A4 8장 분량 사업계획서.', '"Let\'s open a veggie stand next to the school store" — 8-page business plan.'],
      stars: 5 },
    { kind: 'video', name: ['재영 · 초3', 'Jae-Young · G3'],  tag: ['발표 영상', 'Presentation'], dur: '2:14',
      body: ['수학 보드게임 직접 만들기 발표', 'Pitch: a math board game I made.'] },
  ],
  awards: [
    { kind: 'text',  name: ['KMC 2026', 'KMC 2026'], tag: ['국제 수학경시 · 동상', 'Math olympiad · Bronze'],
      body: ['중등반 김OO 학생 동상 수상 (전국 상위 5%)', 'Grade 7 student · bronze (top 5% nationally).'],
      stars: 5 },
    { kind: 'text',  name: ['금융 올림피아드', 'Finance Olympiad'], tag: ['예선 통과', 'Qualified for finals'],
      body: ['중등반 박OO 학생 본선 진출', 'Grade 8 student advanced to finals.'],
      stars: 5 },
    { kind: 'text',  name: ['학교 수학 경시', 'School math contest'], tag: ['단체 1위', '1st place · team'],
      body: ['초고반 6명 단체 출전 학교 단위 1위', '6 students entered together, 1st place school-wide.'],
      stars: 5 },
  ],
};

/* Stable initials avatar — colored chip from name */
const AVATAR_PALETTE = [
  { bg: 'linear-gradient(135deg, #A78BFA 0%, #6D28D9 100%)', fg: '#fff' },
  { bg: 'linear-gradient(135deg, #60A5FA 0%, #1E40AF 100%)', fg: '#fff' },
  { bg: 'linear-gradient(135deg, #F59E0B 0%, #92400E 100%)', fg: '#fff' },
  { bg: 'linear-gradient(135deg, #F472B6 0%, #9D174D 100%)', fg: '#fff' },
  { bg: 'linear-gradient(135deg, #34D399 0%, #065F46 100%)', fg: '#fff' },
];
function avatarFor(name) {
  const code = [...name].reduce((s, ch) => s + ch.charCodeAt(0), 0);
  return AVATAR_PALETTE[code % AVATAR_PALETTE.length];
}
function initial(name) {
  /* Pick the first Hangul/letter character */
  return (name.match(/[가-힯A-Za-z]/) || ['•'])[0];
}

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

  const [tab, setTab] = React.useState('parents');
  const tabs = [
    ['parents',  'rev.tab.p'],
    ['students', 'rev.tab.s'],
    ['awards',   'rev.tab.a'],
  ];

  const items = REVIEWS[tab];

  return (
    <section id="reviews" className="section">
      <div className="section-inner">
        <div className="label-ko" style={{ marginBottom: 16 }}>{t('rev.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('rev.h2')}</h2>

        <div style={{ display: 'flex', gap: 8, marginTop: 28, flexWrap: 'wrap' }}>
          {tabs.map(([id, key]) => (
            <button key={id} className="chip"
              aria-pressed={tab === id}
              onClick={() => setTab(id)}
            >{t(key)}</button>
          ))}
        </div>

        <div className="rev-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 18, marginTop: 28,
        }}>
          {items.map((r, i) => {
            const av = avatarFor(pick(r.name));
            return (
              <div key={i} className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 14 }}>
                {r.kind === 'video' ? (
                  <div style={{
                    position: 'relative', aspectRatio: '16/10', borderRadius: 10,
                    background:
                      'radial-gradient(circle at 30% 30%, rgba(167,139,250,0.30), transparent 60%),' +
                      'linear-gradient(135deg, #1c1e54 0%, #0d253d 100%)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    overflow: 'hidden',
                  }}>
                    <span aria-hidden="true" style={{
                      width: 52, height: 52, borderRadius: '50%',
                      background: '#fff',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      boxShadow: '0 8px 28px rgba(0,0,0,0.35)',
                    }}>
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                        <path d="M8 5l11 7-11 7z" fill="#6D28D9"/>
                      </svg>
                    </span>
                    <span style={{
                      position: 'absolute', right: 10, bottom: 10,
                      background: 'rgba(11,23,39,0.85)', color: '#fff',
                      fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
                      padding: '3px 8px', borderRadius: 4,
                      fontFeatureSettings: '"tnum"',
                    }}>{r.dur}</span>
                  </div>
                ) : (
                  <div style={{
                    fontFamily: 'Georgia, serif', fontSize: 56,
                    color: '#C4B5FD', lineHeight: 0.6, height: 28,
                  }}>“</div>
                )}

                <div style={{
                  fontSize: 15.5, fontWeight: 500,
                  color: '#1E293B', lineHeight: 1.65,
                  flex: 1,
                }}>{pick(r.body)}</div>

                <div style={{
                  marginTop: 4, paddingTop: 14, borderTop: '1px solid #EEF2F7',
                  display: 'flex', alignItems: 'center', gap: 12,
                }}>
                  <span aria-hidden="true" style={{
                    width: 36, height: 36, borderRadius: '50%',
                    background: av.bg, color: av.fg,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 700,
                    flexShrink: 0,
                  }}>{initial(pick(r.name))}</span>
                  <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
                    <span style={{ fontSize: 14, fontWeight: 700, color: '#0B1727' }}>{pick(r.name)}</span>
                    <span style={{ fontSize: 11, color: '#64748B', marginTop: 2 }}>{pick(r.tag)}</span>
                  </div>
                  {r.stars && (
                    <span className="star-gold tnum" style={{
                      marginLeft: 'auto', fontSize: 14, letterSpacing: 1,
                    }}>
                      {'★'.repeat(r.stars)}
                    </span>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ marginTop: 28, textAlign: 'right' }}>
          <Button variant="ghost" size="sm">{t('rev.more')}</Button>
        </div>
      </div>

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

window.Testimonials = Testimonials;