/* FAQ.jsx — filter chips + accordion (single-open)
   Reuses .chip + .accordion-head + .accordion-body tokens defined in
   sriki-brand.css. Rationale: spec §5.1. */

const FAQ_DATA = [
  { cat: 'fee', q: ['수강료는 어떻게 되나요?', 'How much does it cost?'],
    a: ['반·학년·프로그램에 따라 다릅니다. 무료 진단 신청 후 안내드립니다.',
        'Depends on the cohort and program. We share pricing after the free check-up.'] },
  { cat: 'fee', q: ['형제 할인이 있나요?', 'Sibling discount?'],
    a: ['둘째 자녀부터 10% 할인됩니다. 결제 화면에서 자동 적용됩니다.',
        'A 10% sibling discount applies automatically at checkout for the second child onward.'] },
  { cat: 'refund', q: ['환불 정책은 어떻게 되나요?', 'What is the refund policy?'],
    a: ['수강 시작 전: 전액 환불. 시작 후: 학원법에 따른 일할 계산. 자세한 내용은 푸터 환불 규정 참조.',
        'Before the term starts: full refund. After: prorated per Korean education law. See refund policy in footer.'] },
  { cat: 'miss', q: ['결석하면 보강이 되나요?', 'Make-up classes for absences?'],
    a: ['같은 주 다른 반(수↔금) 보강이 기본입니다. 주별 1회 보강 가능합니다.',
        'You can make up in the other weekday cohort (Wed ↔ Fri), once per week.'] },
  { cat: 'app', q: ['앱만 써도 되나요?', 'Can we use only the app?'],
    a: ['가능합니다. 단, 수업+학습지+앱이 모두 연결될 때 학습 효과가 가장 큽니다.',
        'Yes, but learning impact is greatest when class, weekly, and app are used together.'] },
  { cat: 'app', q: ['앱은 어떤 기기에서 동작하나요?', 'Which devices support the app?'],
    a: ['iOS 16 이상, Android 12 이상. 한 계정당 최대 2대 기기 등록.',
        'iOS 16+, Android 12+. Up to 2 devices per account.'] },
  { cat: 'grade', q: ['학년이 바뀌면 어떻게 되나요?', 'What happens when grade changes?'],
    a: ['3월 신학년 전환 시 자동 진급됩니다. 학년 조정이 필요한 경우 상담을 통해 변경합니다.',
        'Automatically promoted each March. Adjustments are handled via consultation.'] },
];

const FAQ = () => {
  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 [openIdx, setOpenIdx] = React.useState(0);

  const filters = [
    ['all',    'faq.f.all'],
    ['fee',    'faq.f.fee'],
    ['refund', 'faq.f.refund'],
    ['miss',   'faq.f.miss'],
    ['app',    'faq.f.app'],
    ['grade',  'faq.f.grade'],
  ];

  const items = FAQ_DATA.filter(f => filter === 'all' ? true : f.cat === filter);

  return (
    <section id="faq" className="section" style={{
      background: 'linear-gradient(180deg, #F8FAFC 0%, #ffffff 100%)',
    }}>
      <div className="section-inner">
        <div className="label-ko" style={{ marginBottom: 16 }}>{t('faq.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, lineHeight: 1.22,
          whiteSpace: 'nowrap',
        }}>{t('faq.h2')}</h2>

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

        <div style={{
          marginTop: 28,
          background: '#fff',
          border: '1px solid #E2E8F0',
          borderRadius: 14,
          padding: '4px 26px',
          boxShadow: '0 1px 2px rgba(15,23,42,0.04)',
        }}>
          {items.map((f, i) => (
            <div key={i}>
              <button
                className="accordion-head"
                aria-expanded={openIdx === i}
                onClick={() => setOpenIdx(openIdx === i ? -1 : i)}
                style={{
                  borderBottom: i === items.length - 1 && openIdx !== i ? 'none' : undefined,
                }}
              >
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
                  color: '#6D28D9', letterSpacing: '0.06em',
                  width: 32, flexShrink: 0,
                }}>Q.</span>
                <span style={{ flex: 1 }}>{pick(f.q)}</span>
                <svg className="chev" width="18" height="18" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="6 9 12 15 18 9"/>
                </svg>
              </button>
              {openIdx === i && (
                <div className="accordion-body" style={{
                  display: 'flex', gap: 14, alignItems: 'flex-start',
                  borderBottom: i === items.length - 1 ? 'none' : undefined,
                }}>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
                    color: '#92400E', letterSpacing: '0.06em',
                    width: 32, flexShrink: 0,
                    marginTop: 2,
                  }}>A.</span>
                  <span>{pick(f.a)}</span>
                </div>
              )}
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 28, padding: '18px 22px',
          background: 'linear-gradient(90deg, rgba(109,40,217,0.05), rgba(245,158,11,0.04))',
          border: '1px solid #EEF2F7', borderRadius: 12,
          display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
          justifyContent: 'center',
        }}>
          <span style={{ fontSize: 14, fontWeight: 500, color: '#475569' }}>
            {lang === 'ko' ? '더 궁금하시면 1:1 문의로 연결해 드립니다.' : 'Still have questions? We\'ll connect you 1:1.'}
          </span>
          <Button variant="primary" size="sm">{lang === 'ko' ? '카카오 문의 →' : 'Ask on Kakao →'}</Button>
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;