// problem-solution.jsx — 일반인 친화 카피
const { useState: useState_ps } = React;

function Problem({ lang }) {
  const t = (ko, en) => (lang === 'ko' ? ko : en);
  const stats = [
    {
      n: '35–70', unit: '%',
      title: t('AI 챗봇 사주가 틀린 비율', 'Chatbot Saju error rate'),
      body: t('월주·일주가 가장 자주 틀립니다. 입춘(立春)이 매년 양력 2월 3~5일 사이에서 분 단위로 움직이기 때문입니다.',
              'Month and day stems fail most — 立春 (the year boundary) drifts minute-by-minute between Feb 3–5 every year.'),
      src: t('121건 정밀 검증', '121 measured cases'),
    },
    {
      n: '±90', unit: '분',
      title: t('절기 시각 오차', 'Solar-term timing drift'),
      body: t('한국천문연구원 만세력을 참조하지 않으면 평균 90분 어긋납니다. 경계 시각에 태어난 분은 사주 자체가 바뀝니다.',
              'Without the KASI almanac, term-entry timing slips ~90 minutes. Borderline births get a different chart entirely.'),
      src: t('KASI 1900–2050 데이터', 'KASI 1900–2050 dataset'),
    },
    {
      n: '0', unit: t('개', ''),
      title: t('AI 챗봇의 안전 장치', 'Chatbot safety gates'),
      body: t('자살예방법, 자본시장법, 차별금지법 — 한국 법률 매핑이 없습니다. "이혼수가 있네요" 같은 부정적 어휘도 그대로 나옵니다.',
              'No mapping to Korean law (Suicide-Prevention, Capital Markets, Anti-Discrimination). Negative tropes pass through unchecked.'),
      src: t('내부 카탈로그 감사', 'Internal trope audit'),
    },
  ];

  return (
    <section className="block" id="problem">
      <div className="container">
        <div className="section-eyebrow">
          <span className="hanja">問</span>
          {t('왜 묘운인가', 'Why Myoun')}
        </div>
        <h2 className="section-title">
          {t('일반 AI 챗봇은 사주를 모릅니다.', 'Generic AI chatbots don’t actually know Saju.')}
        </h2>
        <p className="section-sub">
          {t(
            '한국 사주는 60갑자, 24절기, 한국 표준시 — 세 가지를 동시에 정확히 알아야 합니다. 하나만 틀려도 사주 전체가 바뀝니다.',
            'Korean Saju needs three things at once: the 60-stem cycle, the 24 solar terms, and Korean standard time. Miss one and the chart slips.'
          )}
        </p>

        <div className="stat-row">
          {stats.map((s, i) => (
            <div className="stat-card" key={i}>
              <div className="stat-num">{s.n}<small>{s.unit}</small></div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="src">{s.src}</div>
            </div>
          ))}
        </div>

        <div className="pullquote">
          <q>
            {t('사주는 답이 아니라 대화입니다. 어휘부터 따뜻해야 합니다.',
               'A Saju reading is a conversation, not a verdict. The vocabulary itself has to be kind.')}
          </q>
          <cite><b>— 현묘 (玄妙)</b> · 『안녕, 사주명리』 저자</cite>
        </div>
      </div>
    </section>
  );
}

function Solution({ lang }) {
  const t = (ko, en) => (lang === 'ko' ? ko : en);
  const features = [
    {
      mark: '時',
      title: t('분(分) 단위 정확', 'Minute-precise'),
      body: t('한국천문연구원이 발표한 1900~2050년 입춘·24절기 시각을 그대로 씁니다. 매번 업데이트할 때마다 145건 회귀 검증.',
              'Uses KASI’s published 1900–2050 立春 and 24-term timestamps directly. 145-case regression on every update.'),
      stat: '145/145', label: t('정밀 검증 통과', 'golden-set PASS'),
    },
    {
      mark: '安',
      title: t('위기 상황 5단 안전', '5-gate hard safety'),
      body: t('우울·자살 신호가 입력되면 풀이 대신 1393(한국 자살예방 상담전화)을 안내합니다. 운명을 단정하지 않고, 부정 어휘를 거릅니다.',
              'When suicidal cues appear, we suppress the reading and surface 1393 (Korean crisis line) instead. No fatalism, no negative tropes.'),
      stat: '110/110', label: t('안전 시나리오 통과', 'safety PASS'),
    },
    {
      mark: '聲',
      title: t('나에게 맞는 말투', 'Your kind of voice'),
      body: t('60대 어르신께는 정통 한자 + 1393 안내, 30대에게는 친근한 일상어, 매니아에게는 학파 인용 — 12개 페르소나 × 4단계 깊이.',
              '60s: orthodox Hanja + 1393. 30s: warm everyday. Enthusiast: scholar citations. 12 personas × 4 depths.'),
      stat: '48', label: t('말투 조합', 'voice combinations'),
    },
  ];
  const masters = [
    { name: '낭월',   hanja: '朗月',   tag: '박주현' },
    { name: '현묘',   hanja: '玄妙',   tag: '안녕 사주명리' },
    { name: '박재완', hanja: '朴在玩', tag: '명리요강' },
    { name: '김현희', hanja: '金賢姬', tag: '여명' },
    { name: '도계',   hanja: '陶溪',   tag: '3대 정통' },
    { name: '자강',   hanja: '自彊',   tag: '3대 정통' },
    { name: '제산',   hanja: '霽山',   tag: '3대 정통' },
    { name: '고미숙', hanja: '高美淑', tag: '낭송 시리즈' },
  ];

  return (
    <section className="block" id="features">
      <div className="container">
        <div className="section-eyebrow">
          <span className="hanja">解</span>
          {t('묘운이 해주는 일', 'What Myoun does')}
        </div>
        <h2 className="section-title">
          {t('정확하고, 따뜻하고, 안전하게.', 'Accurate, kind, and safe.')}
        </h2>
        <p className="section-sub">
          {t(
            '천문 데이터는 기관 자료를 쓰고, 풀이는 8명의 한국 명리학자에게서 익힌 30가지 화법으로 합니다. 단정적이지 않고, 위기 상황엔 먼저 안내합니다.',
            'Chart data from the national observatory; readings phrased in 30 patterns drawn from eight Korean myeongri scholars. Never fatalistic; crisis triggers come first.'
          )}
        </p>

        <div className="feature-grid">
          {features.map((f, i) => (
            <div className="feat" key={i}>
              <div className="feat-mark">{f.mark}</div>
              <h3>{f.title}</h3>
              <p>{f.body}</p>
              <div className="feat-stat">
                <b>{f.stat}</b><span>{f.label}</span>
              </div>
            </div>
          ))}
        </div>

        <div className="masters">
          <div className="masters-label">
            <b>30가지 화법</b>
            {t('한국 명리학자 8인의 글에서 정제', 'Distilled from 8 Korean myeongri scholars')}
          </div>
          <ul className="masters-list">
            {masters.map(m => (
              <li key={m.name}>
                <span className="hanja">{m.hanja}</span>{m.name} · <span style={{opacity:.6}}>{m.tag}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

window.Problem = Problem;
window.Solution = Solution;