// personas-social-faq-footer.jsx
const { useState: useStateF } = React;

function Personas({ lang }) {
  const t = (ko, en) => (lang === 'ko' ? ko : en);
  const cards = [
    {
      tag: t('일반 사용자', 'Everyday user'),
      mark: '人',
      title: t('묘운 앱 · 평생 무료', 'Myoun app · free forever'),
      body: t('내 사주, 오늘의 운, 부부 궁합, 아이 학업 운까지. 광고 없이, 따뜻한 말투로.',
              'Your chart, today’s fortune, couple compatibility, kid’s study timing — ad-free and gently phrased.'),
      bullets: [
        t('회원가입 30초', '30-second sign-up'),
        t('대화형 풀이', 'Chat-style readings'),
        t('iCloud 동기화', 'iCloud sync'),
      ],
      cta: t('앱 받기', 'Get the app'),
      primary: true,
    },
    {
      tag: t('개발자', 'Developer'),
      mark: '工',
      title: t('내 제품에 사주 풀이 붙이기', 'Add Saju to your product'),
      body: t('Claude·Cursor·Codex에 5초 연동. stdio MCP, 외부 의존성 0, Apache 2.0 라이선스.',
              'Wire it into Claude/Cursor/Codex in 5 seconds. Plain MCP 1.0, zero deps, Apache 2.0.'),
      bullets: [
        t('한 줄 설치', 'One-line install'),
        t('타입스크립트 타입 제공', 'TypeScript types'),
        t('영구 무료 (로컬)', 'Free forever (local)'),
      ],
      cta: t('개발자 가이드 →', 'Developer guide →'),
    },
    {
      tag: t('B2B', 'B2B'),
      mark: '商',
      title: t('보험 · HR · 학원 도입 PoC', 'Insurance · HR · Hagwon PoC'),
      body: t('5단 안전 장치 + 한국 법령 매핑 + 명리학자 7인 검증. 사내망 설치도 가능합니다.',
              '5-gate safety + Korean-law mapping + 7-scholar review panel. On-prem option available.'),
      bullets: [
        t('자살예방법 §19-3 매핑', 'Suicide-Prevention Act §19-3'),
        t('99.5% SLA', '99.5% SLA'),
        t('사내망 설치', 'On-prem option'),
      ],
      cta: t('도입 문의 →', 'Request PoC →'),
    },
  ];

  return (
    <section className="block" id="personas">
      <div className="container">
        <div className="section-eyebrow">
          <span className="hanja">路</span>
          {t('어떻게 쓰세요?', 'How will you use it?')}
        </div>
        <h2 className="section-title">
          {t('진입로 셋. 가장 위가 일반 사용자.', 'Three doors. The first is for everyday users.')}
        </h2>
        <p className="section-sub">
          {t('같은 엔진이지만, 다가가는 방법은 셋입니다. 본인에게 맞는 카드 하나만 누르세요.',
             'One engine, three doors. Tap the one that fits.')}
        </p>

        <div className="persona-grid">
          {cards.map(c => (
            <a className={`persona ${c.primary ? 'primary' : ''}`} key={c.tag} href="#">
              <span className="hanja-mark">{c.mark}</span>
              <div className="tag">{c.tag}</div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
              <ul>{c.bullets.map((b,i) => <li key={i}>{b}</li>)}</ul>
              <span className="more">{c.cta}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Social({ lang }) {
  const t = (ko, en) => (lang === 'ko' ? ko : en);
  const stats = [
    { n: '4.8★', l: t('묘운 앱 평점', 'Myoun app rating') },
    { n: '12,400+', l: t('묘운 앱 사용자', 'Myoun users') },
    { n: '145/145', l: t('만세력 검증', 'almanac PASS') },
    { n: '110/110', l: t('안전 검증', 'safety PASS') },
  ];

  const reviewers = [
    { nm: '낭월',   hanja: '朗月', aff: t('박주현 · 명리연구가', 'Park Joo-hyeon · scholar') },
    { nm: '현묘',   hanja: '玄妙', aff: t('『안녕 사주명리』 저자', 'Author, Annyeong Saju') },
    { nm: '— 비공개',    hanja: '○○', aff: t('계약 진행 중', 'In contract'), placeholder: true },
    { nm: '— 비공개',    hanja: '○○', aff: t('계약 진행 중', 'In contract'), placeholder: true },
    { nm: '— 비공개',    hanja: '○○', aff: t('계약 진행 중', 'In contract'), placeholder: true },
    { nm: '— 비공개',    hanja: '○○', aff: t('계약 진행 중', 'In contract'), placeholder: true },
  ];

  return (
    <section className="block" style={{paddingTop: 40}}>
      <div className="container">
        <div className="kicker-divider">{t('신뢰의 근거', 'What backs us')}</div>

        <div className="social-stats">
          {stats.map((s,i) => (
            <div className="social-stat" key={i}>
              <div className="n">{s.n}</div>
              <div className="l">{s.l}</div>
            </div>
          ))}
        </div>

        <div className="reviewer-panel">
          <div>
            <h3>{t('명리학자 검증단', 'Myeongri review panel')}</h3>
            <p className="blurb">
              {t('학파가 다른 명리학자 7인이 매 분기 묘운의 풀이를 더블블라인드로 채점합니다. "이혼수가 있다" 같은 단정적 어휘는 별도 카탈로그로 사전 차단.',
                 'Seven scholars across schools score Myoun’s readings in a double-blind rubric each quarter. Fatalistic phrasing like "divorce indicator" is blocked by a public catalog.')}
            </p>
            <div className="pending">{t('서명 완료: 2명 · 계약 중: 5명', 'Signed: 2 · In contract: 5')}</div>
          </div>
          <div className="reviewer-list">
            {reviewers.map((r, i) => (
              <div key={i} className={`reviewer-card ${r.placeholder ? 'placeholder' : ''}`}>
                <div className="nm"><span className="hanja">{r.hanja}</span>{r.nm}</div>
                <div className="aff">{r.aff}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ({ lang }) {
  const t = (ko, en) => (lang === 'ko' ? ko : en);
  const items = [
    {
      q: t('AI 챗봇이 사주를 잘못 푸는 이유가 뭔가요?', 'Why do AI chatbots get Saju wrong?'),
      a: t(<React.Fragment>입춘(立春)이 매년 양력 2월 3~5일 사이에서 <b>분 단위로 움직이기</b> 때문입니다. AI 챗봇은 한국천문연구원의 만세력을 모르므로 경계 시각에 태어난 분의 연주(年柱)부터 틀립니다.</React.Fragment>,
           <React.Fragment><b>立春 (the year boundary) drifts minute-by-minute</b> across Feb 3–5. Chatbots don’t know the KASI almanac, so they miss the year stem for borderline births.</React.Fragment>),
    },
    {
      q: t('묘운 앱은 정말 무료인가요?', 'Is the Myoun app really free?'),
      a: t('네. 광고도 없고 결제도 없습니다. 회사·서비스에 풀이 API를 붙이실 때만 호스팅 요금이 듭니다.',
           'Yes. No ads, no purchases. Hosting fees only apply when you wire the API into your own product.'),
    },
    {
      q: t('내 생년월일은 어디에 저장되나요?', 'Where does my birth date go?'),
      a: t('호스팅 서버에 들어온 입력값은 14일 후 자동 삭제됩니다. 로그는 해시만 남깁니다. 묘운 앱에서는 본인 휴대폰에만 저장됩니다.',
           'Hosted inputs auto-purge after 14 days; logs are hashed. In the app, your data stays on your phone.'),
    },
    {
      q: t('"운명"이나 "이혼수" 같은 표현이 나올 수 있나요?', 'Could it say things like "fate" or "divorce indicator"?'),
      a: t('아니요. 단정적·부정적 어휘는 사전 카탈로그로 차단합니다. 위기 신호가 보이면 풀이 대신 1393(자살예방 상담전화)을 먼저 안내합니다.',
           'No. Fatalistic vocabulary is blocked by a pre-built catalog. On crisis cues we surface 1393 (Korean crisis line) instead of a reading.'),
    },
    {
      q: t('중국 八字나 일본 九星気学도 봐주나요?', 'Do you support Chinese Bazi or Japanese Kyusei?'),
      a: t('아직은 한국 정통(60갑자 + 24절기, 한국 표준시)만 정확도를 보장합니다. 중국·일본 지원은 향후 업데이트 예정입니다.',
           'For now, only Korean orthodox practice (60-stem + 24-term, KST). Chinese & Japanese support are on the roadmap.'),
    },
    {
      q: t('정확도 100%는 무엇을 뜻하나요?', 'What does "100% accuracy" mean?'),
      a: t('60갑자 계산에 한해 145건의 표준 케이스를 모두 통과한다는 뜻입니다. 풀이의 "맞고 틀림"은 따로 명리학자 검증단이 분기마다 채점합니다.',
           'It means the chart calculation passes all 145 reference cases. Interpretation quality is judged separately by the scholar review panel every quarter.'),
    },
    {
      q: t('묘운과 다른 사주 앱은 무엇이 다른가요?', 'How is Myoun different from other Saju apps?'),
      a: t('① 한국천문연구원 만세력 그대로 사용 ② 위기 상황 자동 1393 안내 ③ 광고 없음 ④ 명리학자 7인 검증단.',
           '① KASI almanac, verbatim ② Auto 1393 surface on crisis ③ No ads ④ 7-scholar review panel.'),
    },
    {
      q: t('어르신께도 권할 수 있나요?', 'Can I recommend it to my parents?'),
      a: t('네. 60대 어르신용 페르소나는 정통 한자 표기를 함께 보여드리고, 위기 상황엔 1393을 큰 글씨로 안내합니다.',
           'Yes. The 60s persona shows orthodox Hanja alongside Korean text and prints 1393 in large type when needed.'),
    },
    {
      q: t('개발자입니다. 어떻게 붙이나요?', 'I’m a developer — how do I plug it in?'),
      a: t(<React.Fragment>Claude Desktop · Cursor · Codex 등 MCP 호환 클라이언트에 한 줄로 등록합니다. 자세한 절차는 <a href="#dev" style={{color:'var(--amethyst-deep)', fontWeight:600}}>개발자 연동 섹션</a>을 참고하세요.</React.Fragment>,
           <React.Fragment>Register it with any MCP-compatible client (Claude Desktop, Cursor, Codex). See the <a href="#dev" style={{color:'var(--amethyst-deep)', fontWeight:600}}>developer section</a> for the exact lines.</React.Fragment>),
    },
    {
      q: t('위기 상황 신호가 입력되면 어떻게 되나요?', 'What happens on crisis input?'),
      a: t(<React.Fragment>풀이는 즉시 중단되고 <b>🇰🇷 1393 · 🇺🇸 988 · 🌏 findahelpline.com</b> 안내가 큰 글씨로 나옵니다. 묘운 앱에선 통화 버튼이 자동으로 뜹니다.</React.Fragment>,
           <React.Fragment>The reading is suppressed; <b>🇰🇷 1393 · 🇺🇸 988 · 🌏 findahelpline.com</b> appear in large type. In the app, a call button surfaces automatically.</React.Fragment>),
    },
  ];

  const [open, setOpen] = useStateF(0);

  return (
    <section className="block" id="faq">
      <div className="container">
        <div className="section-eyebrow">
          <span className="hanja">問</span>
          {t('자주 묻는 질문', 'FAQ')}
        </div>
        <h2 className="section-title">{t('자주 받는 질문 10가지', '10 common questions')}</h2>

        <div className="faq">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span style={{display:'flex', alignItems:'center'}}>
                  <span className="num">{String(i+1).padStart(2, '0')}</span>
                  {it.q}
                </span>
                <span className="chev">+</span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer({ lang, setLang }) {
  const t = (ko, en) => (lang === 'ko' ? ko : en);
  return (
    <React.Fragment>
      <div className="container">
        <div className="crisis">
          <b>{t('위기 상황 안내', 'Crisis hotlines')}</b>
          <span>🇰🇷 <span className="hot">1393</span> · {t('한국 자살예방 상담전화 (24시간)', 'Korea suicide prevention (24/7)')}</span>
          <span>🇺🇸 <span className="hot">988</span></span>
          <span>🌏 <span className="hot">findahelpline.com</span></span>
        </div>
      </div>

      <footer className="footer">
        <div className="container">
          <div className="footer-grid">
            <div className="footer-col footer-brand">
              <a className="brand" href="#top">
                <span className="brand-mark">命</span>
                <span className="brand-name">묘운 사주 <em>· mildo</em></span>
              </a>
              <p>{t('한국 정통 사주를, 일반인에게는 따뜻하게, 개발자에게는 5초 만에. 밀도 AI(Mildo AI)에서 만들었습니다.',
                    'Korean Saju — warm for everyday users, 5 seconds for developers. Built by Mildo AI.')}</p>
              <div className="footer-store">
                <a href="#">⌘ App Store</a>
                <a href="#">▶ Play Store</a>
              </div>
            </div>

            <div className="footer-col">
              <h4>{t('일반 사용자', 'For everyone')}</h4>
              <a href="#">{t('묘운 앱 받기', 'Get the app')}</a>
              <a href="#demo">{t('웹에서 미리보기', 'Try on web')}</a>
              <a href="#features">{t('말투 종류', 'Voices')}</a>
              <a href="#faq">{t('자주 묻는 질문', 'FAQ')}</a>
            </div>
            <div className="footer-col">
              <h4>{t('개발자', 'Developers')}</h4>
              <a href="#dev">{t('5초 연동', '5-sec install')}</a>
              <a href="#">{t('기술 문서', 'Docs')}</a>
              <a href="#">GitHub</a>
              <a href="#">Smithery</a>
            </div>
            <div className="footer-col">
              <h4>{t('회사', 'Company')}</h4>
              <a href="#">{t('Mildo AI 소개', 'About Mildo AI')}</a>
              <a href="#">{t('B2B 도입 문의', 'B2B inquiry')}</a>
              <a href="#">{t('명리학자 검증단', 'Review panel')}</a>
              <a href="#">{t('연락', 'Contact')}</a>
            </div>
            <div className="footer-col">
              <h4>{t('법률', 'Legal')}</h4>
              <a href="#">{t('개인정보 처리방침', 'Privacy')}</a>
              <a href="#">{t('이용약관', 'Terms')}</a>
              <a href="#">Apache 2.0</a>
              <a href="#">{t('자살예방법 §19-3 매핑', '§19-3 mapping')}</a>
            </div>
          </div>

          <div className="footer-bar">
            <span>© 2026 밀도 AI 주식회사 · mildo.farm</span>
            <span style={{display:'flex', alignItems:'center', gap:14}}>
              <span>{t('언어', 'Language')}</span>
              <span className="lang-toggle">
                <button className={lang === 'ko' ? 'on' : ''} onClick={() => setLang('ko')}>KO</button>
                <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
              </span>
            </span>
          </div>
        </div>
      </footer>
    </React.Fragment>
  );
}

window.Personas = Personas;
window.Social = Social;
window.FAQ = FAQ;
window.Footer = Footer;