// docs.jsx — 개인정보처리방침 / 이용약관 / 만드는 사람 (KO/EN 이중언어 · 해시 라우트 모달)
const DC2 = window.KEITTA_COLORS;

const DOCS = {
  privacy: {
    title: { ko: '개인정보처리방침', en: 'Privacy Policy' },
    updated: { ko: '초안 · 2026.07 (최종 검토 전)', en: 'Draft · 2026.07 (pending review)' },
    body: [
      { h: { ko: '수집하는 항목', en: 'What we collect' },
        p: { ko: '베타 신청 시 이메일·이름, 그리고 신청 이유 및 선택 응답(판별 문항)을 수집합니다. 서비스 이용 중에는 사용자가 직접 입력한 투자 판단 기록(종목·행동·이유·감정 등)이 저장됩니다.',
             en: 'On beta sign-up we collect your email, name, reason for applying, and optional answers (fit questions). During use, the judgment records you enter yourself (ticker, action, reasoning, emotion, etc.) are stored.' } },
      { h: { ko: '이용 목적', en: 'How we use it' },
        p: { ko: '베타 운영과 사용자 응대, 서비스 개선을 위해 이용합니다. 수집된 기록은 개인을 식별할 수 없는 익명·집계 형태의 통계적 활용에 쓰일 수 있습니다.',
             en: 'To operate the beta, respond to users, and improve the service. Collected records may be used in anonymized, aggregated statistical form that cannot identify an individual.' } },
      { h: { ko: '보관 기간', en: 'Retention' },
        p: { ko: '회원 탈퇴 또는 삭제 요청 시 지체 없이 파기합니다. 다만 시스템 백업본은 최대 30일간 보존된 뒤 삭제됩니다.',
             en: 'Data is destroyed without delay upon account deletion or request. System backups are retained for up to 30 days before deletion.' } },
      { h: { ko: '이용자의 권리', en: 'Your rights' },
        p: { ko: '본인은 언제든 자신의 기록을 조회·삭제·내보내기(export) 할 수 있습니다. 요청은 아래 문의처로 접수합니다.',
             en: 'You may view, delete, or export your records at any time. Requests are received at the contact below.' } },
      { h: { ko: '문의처', en: 'Contact' },
        p: { ko: '개인정보 관련 문의: support@keitta.com', en: 'Privacy inquiries: support@keitta.com' } },
    ],
  },
  terms: {
    title: { ko: '이용약관', en: 'Terms of Service' },
    updated: { ko: '초안 · 2026.07 (게시 승인 전)', en: 'Draft · 2026.07 (pending approval)' },
    body: [
      { h: { ko: '서비스의 성격', en: 'Nature of the service' },
        p: { ko: 'Keitta는 이용자의 투자 판단을 기록하고 점검하도록 돕는 도구입니다. 투자자문·투자일임·종목 추천 서비스가 아니며, 특정 종목이나 시점의 매매를 권유하지 않습니다.',
             en: 'Keitta is a tool that helps you record and review your investment judgments. It is not investment advice, discretionary management, or stock recommendation, and does not solicit buying or selling of any specific security or timing.' } },
      { h: { ko: '판단과 책임', en: 'Judgment & responsibility' },
        p: { ko: '서비스가 제공하는 되물음·점검·점수는 이용자의 사고 과정을 비추기 위한 것이며, 모든 투자 판단과 그 결과에 대한 책임은 이용자 본인에게 있습니다.',
             en: 'The reflections, checks, and scores the service provides are meant to mirror your thinking process. All investment decisions and their outcomes are your own responsibility.' } },
      { h: { ko: '콘텐츠의 목적', en: 'Purpose of content' },
        p: { ko: '시뮬레이션·브리핑을 포함한 모든 콘텐츠는 교육 및 기록 목적으로 제공됩니다. 과거 사례는 사실에 기반하되 미래의 결과를 보장하지 않습니다.',
             en: 'All content, including simulations and briefings, is provided for educational and record-keeping purposes. Past cases are fact-based but do not guarantee future results.' } },
      { h: { ko: '계정과 데이터', en: 'Account & data' },
        p: { ko: '이용자는 자신의 데이터를 삭제·내보내기 할 수 있습니다. 삭제 시 백업본은 최대 30일간 보존된 뒤 파기됩니다.',
             en: 'You may delete or export your data. On deletion, backups are retained for up to 30 days before being destroyed.' } },
      { h: { ko: '약관의 변경', en: 'Changes to terms' },
        p: { ko: '약관이 변경되는 경우 시행 전에 서비스 내 공지 또는 이메일로 고지합니다.',
             en: 'If the terms change, we will notify you in-service or by email before they take effect.' } },
      { h: { ko: '문의처', en: 'Contact' },
        p: { ko: '서비스 관련 문의: support@keitta.com', en: 'Service inquiries: support@keitta.com' } },
    ],
  },
  about: {
    title: { ko: '만드는 사람', en: 'About' },
    updated: { ko: '', en: '' },
    body: [
      { h: { ko: '개인 개발자가 만들고 운영합니다', en: 'Built and run by an individual developer' },
        p: { ko: 'Keitta는 한 명의 개인 개발자가 만들고 직접 운영하는 서비스입니다.',
             en: 'Keitta is built and operated directly by a single individual developer.' } },
      { h: { ko: '만든 이유', en: 'Why it was made' },
        p: { ko: '(여기에 만든 이유가 들어갑니다 — 2~3문장.)', en: '(The reason it was made goes here — 2–3 sentences.)' } },
      { h: { ko: '연락처', en: 'Contact' },
        p: { ko: 'support@keitta.com', en: 'support@keitta.com' } },
    ],
  },
};

function DocsModal() {
  const [route, setRoute] = React.useState(() => (location.hash || '').replace('#', ''));
  const [lang, setLang] = React.useState(() => (window.KEITTA_GETLANG ? window.KEITTA_GETLANG() : 'ko'));
  React.useEffect(() => {
    const onHash = () => setRoute((location.hash || '').replace('#', ''));
    const onLang = () => setLang(window.KEITTA_GETLANG ? window.KEITTA_GETLANG() : 'ko');
    window.addEventListener('hashchange', onHash);
    window.addEventListener('keitta:lang', onLang);
    return () => { window.removeEventListener('hashchange', onHash); window.removeEventListener('keitta:lang', onLang); };
  }, []);
  const doc = DOCS[route];
  if (!doc) return null;
  const L = (o) => (o && (o[lang] != null ? o[lang] : o.ko)) || '';
  const close = () => { history.pushState('', document.title, location.pathname + location.search); setRoute(''); };
  const accent = DC2.body;

  return (
    <div onClick={close} style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(26,21,48,0.55)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '48px 20px', overflowY: 'auto' }}>
      <div onClick={e => e.stopPropagation()} style={{ width: '100%', maxWidth: 620, background: '#fff', borderRadius: 20, boxShadow: '0 30px 80px rgba(0,0,0,0.3)', overflow: 'hidden' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '22px 28px', borderBottom: '1px solid #F1ECFA', position: 'sticky', top: 0, background: '#fff' }}>
          <div>
            <div style={{ fontFamily: "'Fraunces', serif", fontSize: 22, fontWeight: 600, color: '#241C3D' }}>{L(doc.title)}</div>
            {L(doc.updated) && <div style={{ fontSize: 11.5, color: '#9A93AE', marginTop: 3 }}>{L(doc.updated)}</div>}
          </div>
          <button onClick={close} style={{ width: 34, height: 34, borderRadius: 10, border: '1px solid rgba(124,92,252,0.2)', background: '#fff', color: '#6A6480', fontSize: 16, cursor: 'pointer', flexShrink: 0 }}>✕</button>
        </div>
        <div style={{ padding: '10px 28px 32px' }}>
          {doc.body.map((row, i) => (
            <div key={i} style={{ paddingTop: 22 }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: accent, marginBottom: 7 }}>{L(row.h)}</div>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.7, color: '#3A3352' }}>{L(row.p)}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.LandingDocs = { DocsModal };