// info.jsx — How-to guide, Contact, Terms, Privacy screens

const IF = window.__cpMakeTheme();

// ─────────────────────────────────────────────────────────────
// Shared chrome
// ─────────────────────────────────────────────────────────────
function PageTop({ title, onBack }) {
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 30,
      background: IF.bg,
      padding: '54px 14px 8px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <button onClick={onBack} style={{
        width: 38, height: 38, borderRadius: 38,
        background: 'transparent', border: 'none', padding: 0,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer',
        WebkitTapHighlightColor: 'transparent',
      }}>
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
          <path d="M14 4L7 11l7 7" stroke={IF.ink} strokeWidth="1.8"
                strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
      <div style={{
        fontSize: 16, fontWeight: 600, color: IF.ink,
        letterSpacing: '-0.01em', whiteSpace: 'nowrap',
      }}>{title}</div>
      <div style={{ width: 38 }} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 사용법 안내 (Onboarding / how-to)
// ─────────────────────────────────────────────────────────────
const ONBOARDING_STEPS = [
  {
    n: '01', icon: '✏️', title: '한 줄로 담아요',
    desc: '홈 우상단 + 버튼을 눌러 한국어로 표현을 적으면 AI가 외국어와 발음을 만들어줘요. 톤(정중·친근·자동)도 미리 정할 수 있어요.',
  },
  {
    n: '02', icon: '📸', title: '스크린샷도 한꺼번에',
    desc: '메뉴판이나 안내문 사진을 골라 텍스트를 자동으로 감지해요. 원하는 문장만 골라 한 번에 씨앗으로 만들 수 있어요.',
  },
  {
    n: '03', icon: '📁', title: '주머니로 정리',
    desc: '여행이나 상황 단위로 폴더처럼 묶어요. 색상·아이콘·사진으로 표지를 꾸미고 자주 쓰는 건 홈에 고정해두세요.',
  },
  {
    n: '04', icon: '🤝', title: '친구와 공유',
    desc: '주머니 ⋯ 메뉴에서 QR이나 링크로 공유해요. 친구가 가입하면 둘 다 매일 한도가 +1개씩 늘어요.',
  },
  {
    n: '05', icon: '🔁', title: '꾸준히 복습',
    desc: '씨앗 상세에서 듣고 발음 따라하기. 매일 한 개씩만 봐도 볼주머니가 풍성해져요. 연속 학습 달력으로 동기부여까지.',
  },
];

function HowToScreen({ accent, onBack }) {
  return (
    <div style={{ paddingBottom: 60 }}>
      <PageTop title="사용법 안내" onBack={onBack} />

      <div style={{ padding: '12px 24px 0' }}>
        <div style={{
          fontSize: 28, fontWeight: 700, color: IF.ink,
          letterSpacing: '-0.03em', lineHeight: 1.15,
          textWrap: 'balance',
        }}>5분이면<br/>충분해요</div>
        <div style={{
          marginTop: 10,
          fontSize: 14, color: IF.ink2,
          letterSpacing: '-0.01em', lineHeight: 1.5,
        }}>CheekPouch는 표현을 담아두고 다시 만나는 앱이에요.<br/>
        다섯 단계만 알면 바로 시작할 수 있어요.</div>
      </div>

      <div style={{
        padding: '28px 22px 0',
        display: 'flex', flexDirection: 'column', gap: 12,
      }}>
        {ONBOARDING_STEPS.map(s => (
          <div key={s.n} style={{
            padding: '16px 16px',
            background: IF.surface,
            border: `0.5px solid ${IF.hairline}`,
            borderRadius: 16,
            display: 'flex', alignItems: 'flex-start', gap: 14,
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: 12,
              background: `${accent}14`,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
              fontSize: 22,
            }}>{s.icon}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 8,
                marginBottom: 4,
              }}>
                <span style={{
                  fontSize: 10, fontWeight: 700, color: accent,
                  letterSpacing: '0.12em',
                  fontFamily: 'ui-monospace, SFMono-Regular, monospace',
                }}>{s.n}</span>
                <span style={{
                  width: 14, height: 1, background: accent, opacity: 0.4,
                }} />
              </div>
              <div style={{
                fontSize: 16, fontWeight: 700, color: IF.ink,
                letterSpacing: '-0.02em', lineHeight: 1.25,
              }}>{s.title}</div>
              <div style={{
                marginTop: 6,
                fontSize: 13, color: IF.ink2,
                letterSpacing: '-0.01em', lineHeight: 1.55,
              }}>{s.desc}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Tip footer */}
      <div style={{
        margin: '24px 22px 0',
        padding: '14px 16px',
        background: `linear-gradient(135deg, ${accent}14 0%, ${accent}06 100%)`,
        border: `0.5px solid ${accent}30`,
        borderRadius: 14,
        display: 'flex', alignItems: 'flex-start', gap: 10,
      }}>
        <span style={{ fontSize: 18, lineHeight: 1, marginTop: 1 }}>💡</span>
        <div style={{ flex: 1 }}>
          <div style={{
            fontSize: 13, fontWeight: 700, color: IF.ink,
            letterSpacing: '-0.01em',
          }}>꿀팁</div>
          <div style={{
            marginTop: 3,
            fontSize: 12.5, color: IF.ink2,
            letterSpacing: '-0.01em', lineHeight: 1.55,
          }}>여행 출발 전에 주머니를 미리 만들어두면, 도착해서 마주친 표현을 바로 적절한 폴더에 담을 수 있어요.</div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 문의하기 (Contact)
// ─────────────────────────────────────────────────────────────
const CONTACT_CATEGORIES = [
  { value: 'bug',      label: '오류 신고',    icon: '🐛' },
  { value: 'feature',  label: '기능 제안',    icon: '💡' },
  { value: 'account',  label: '계정·결제',    icon: '💳' },
  { value: 'content',  label: '번역 품질',    icon: '🌐' },
  { value: 'other',    label: '그 외 문의',   icon: '✉️' },
];

function ContactScreen({ accent, onBack }) {
  const [category, setCategory] = React.useState('bug');
  const [text, setText] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [attached, setAttached] = React.useState(false);
  const [sent, setSent] = React.useState(false);

  const send = () => {
    if (!text.trim()) return;
    setSent(true);
    setTimeout(() => {
      setText(''); setAttached(false); setSent(false);
    }, 2400);
  };

  const canSend = text.trim().length > 0;

  return (
    <div style={{ paddingBottom: 60 }}>
      <PageTop title="문의하기" onBack={onBack} />

      <div style={{ padding: '12px 24px 0' }}>
        <div style={{
          fontSize: 24, fontWeight: 700, color: IF.ink,
          letterSpacing: '-0.03em', lineHeight: 1.15,
        }}>어떤 일로<br/>찾아주셨나요?</div>
        <div style={{
          marginTop: 10,
          fontSize: 13.5, color: IF.ink2,
          letterSpacing: '-0.01em', lineHeight: 1.55,
        }}>보통 하루 안에 답변드려요.<br/>주말과 공휴일은 영업일 기준으로 처리돼요.</div>
      </div>

      {/* Category */}
      <div style={{ padding: '24px 22px 0' }}>
        <div style={{
          padding: '0 6px 10px',
          fontSize: 11, fontWeight: 600, color: IF.ink3,
          letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>문의 유형</div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
        }}>
          {CONTACT_CATEGORIES.map(c => {
            const on = category === c.value;
            return (
              <button key={c.value} onClick={() => setCategory(c.value)} style={{
                padding: '12px 8px',
                background: on ? `${accent}14` : IF.surface,
                border: on ? `1.5px solid ${accent}` : `0.5px solid ${IF.hairline}`,
                borderRadius: 12,
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                cursor: 'pointer', fontFamily: 'inherit',
                WebkitTapHighlightColor: 'transparent',
                minHeight: 76,
              }}>
                <span style={{ fontSize: 22, lineHeight: 1 }}>{c.icon}</span>
                <span style={{
                  fontSize: 11.5, fontWeight: on ? 700 : 600,
                  color: on ? accent : IF.ink,
                  letterSpacing: '-0.01em',
                  whiteSpace: 'nowrap',
                }}>{c.label}</span>
              </button>
            );
          })}
        </div>
      </div>

      {/* Message */}
      <div style={{ padding: '24px 22px 0' }}>
        <div style={{
          padding: '0 6px 10px',
          fontSize: 11, fontWeight: 600, color: IF.ink3,
          letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>내용</div>
        <textarea
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder={
            category === 'bug' ? '어떤 상황에서 어떤 오류가 발생했는지 적어주세요'
            : category === 'feature' ? '어떤 기능이 있으면 좋을지 적어주세요'
            : '내용을 자세히 적어주세요'
          }
          maxLength={500}
          style={{
            width: '100%', minHeight: 160,
            background: IF.surface2,
            border: `1px solid ${IF.hairlineStrong}`,
            borderRadius: 14,
            padding: 14,
            fontFamily: 'inherit', fontSize: 15, color: IF.ink,
            outline: 'none', resize: 'none',
            letterSpacing: '-0.01em', lineHeight: 1.55,
            boxSizing: 'border-box',
          }}
        />
        <div style={{
          marginTop: 6,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <button onClick={() => setAttached(!attached)} style={{
            height: 28, padding: '0 10px', borderRadius: 999,
            background: attached ? `${accent}14` : 'transparent',
            color: attached ? accent : IF.ink2,
            border: `0.5px solid ${attached ? `${accent}50` : IF.hairlineStrong}`,
            display: 'inline-flex', alignItems: 'center', gap: 5,
            fontFamily: 'inherit', fontSize: 11.5, fontWeight: 500,
            letterSpacing: '-0.01em', cursor: 'pointer',
            WebkitTapHighlightColor: 'transparent',
          }}>
            <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
              <path d="M10 6L6.5 9.5a2 2 0 0 0 2.8 2.8l4-4a4 4 0 0 0-5.6-5.6L3.5 6.5a6 6 0 0 0 8.5 8.5"
                    stroke={attached ? accent : IF.ink2} strokeWidth="1.4"
                    strokeLinecap="round" strokeLinejoin="round" fill="none"/>
            </svg>
            {attached ? '스크린샷 첨부됨' : '스크린샷 첨부'}
          </button>
          <span style={{
            fontSize: 11, color: IF.ink3,
            fontVariantNumeric: 'tabular-nums',
          }}>{text.length} / 500</span>
        </div>
      </div>

      {/* Email */}
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{
          padding: '0 6px 10px',
          fontSize: 11, fontWeight: 600, color: IF.ink3,
          letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>답변받을 이메일 <span style={{ color: IF.ink3, fontWeight: 500, letterSpacing: '-0.01em', textTransform: 'none', marginLeft: 4 }}>(선택)</span></div>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="me@example.com"
          style={{
            width: '100%', height: 46,
            background: IF.surface2,
            border: `1px solid ${IF.hairlineStrong}`,
            borderRadius: 12,
            padding: '0 14px',
            fontFamily: 'inherit', fontSize: 15, color: IF.ink,
            outline: 'none', letterSpacing: '-0.01em',
            boxSizing: 'border-box',
          }}
        />
        <div style={{
          marginTop: 6, padding: '0 6px',
          fontSize: 11.5, color: IF.ink3,
          letterSpacing: '-0.01em', lineHeight: 1.5,
        }}>비워두면 가입하신 계정으로 답변드려요</div>
      </div>

      {/* Send */}
      <div style={{ padding: '24px 22px 0' }}>
        <button onClick={send} disabled={!canSend || sent} style={{
          width: '100%', height: 52, borderRadius: 14,
          background: sent ? '#4A8A52' : (canSend ? accent : `${accent}30`),
          color: '#FFF', border: 'none',
          fontFamily: 'inherit', fontSize: 15, fontWeight: 700,
          letterSpacing: '-0.01em',
          cursor: canSend && !sent ? 'pointer' : 'default',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          transition: 'background 0.2s ease',
          WebkitTapHighlightColor: 'transparent',
        }}>
          {sent ? (
            <>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M3 7.2l2.8 2.8L11 5" stroke="#FFF" strokeWidth="2.4"
                      strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              보냈어요
            </>
          ) : '문의 보내기'}
        </button>
        <div style={{
          marginTop: 12, padding: '0 6px',
          textAlign: 'center',
          fontSize: 11.5, color: IF.ink3,
          letterSpacing: '-0.01em', lineHeight: 1.6,
        }}>
          또는 <span style={{
            color: IF.ink, fontWeight: 600, textDecoration: 'underline',
          }}>help@cheekpouch.app</span>로 직접 메일을 보내주세요
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 이용약관 / 개인정보 처리방침 — long-form
// ─────────────────────────────────────────────────────────────
const TERMS_SECTIONS = [
  { n: 1, title: '서비스 안내', body: [
    'CheekPouch(이하 "서비스")는 사용자가 외국어 표현을 수집·정리·복습할 수 있도록 돕는 모바일 앱입니다.',
    '서비스는 무료로 제공되는 기본 기능과 유료로 제공되는 Pro 기능으로 구성됩니다.',
  ]},
  { n: 2, title: '가입과 계정', body: [
    '서비스는 Apple, Google, 카카오 등 외부 인증 수단으로 가입할 수 있습니다.',
    '사용자는 정확한 정보를 제공해야 하며, 계정을 타인에게 양도하거나 공유해서는 안 됩니다.',
    '계정 탈퇴는 언제든 설정 화면에서 요청할 수 있으며, 탈퇴 시 모든 데이터가 안전하게 삭제됩니다.',
  ]},
  { n: 3, title: '콘텐츠와 책임', body: [
    '사용자가 직접 입력한 표현, 주머니, 메모 등의 콘텐츠는 사용자에게 저작권이 있습니다.',
    'AI가 생성한 번역과 발음은 참고용이며, 정확성을 보증하지 않습니다. 중요한 상황에서는 전문 번역을 권장합니다.',
    '서비스는 사용자가 입력한 콘텐츠를 임의로 공개하거나 제3자에게 제공하지 않습니다.',
  ]},
  { n: 4, title: '유료 구독 (Pro)', body: [
    'Pro 구독은 월 단위로 자동 갱신됩니다. 첫 가입 시 7일 무료 체험이 제공됩니다.',
    '구독을 해지하면 다음 결제일부터 무료 등급으로 전환되며, 그 전까지는 Pro 기능을 계속 이용할 수 있습니다.',
    '환불은 각 앱스토어의 정책에 따라 처리됩니다.',
  ]},
  { n: 5, title: '서비스 이용 제한', body: [
    '다음 행위에 대해 서비스 이용이 제한될 수 있습니다: 욕설·차별·혐오 표현 공유, 저작권 침해, 자동화된 대량 요청, 서비스의 기술적 안정성을 해치는 행위.',
    '제한 사유는 사용자에게 통지되며, 이의가 있을 경우 문의를 통해 검토를 요청할 수 있습니다.',
  ]},
  { n: 6, title: '면책', body: [
    '서비스는 정기 점검, 통신 장애, 천재지변 등 합리적인 통제 범위를 벗어나는 사유로 인한 손해에 대해 책임을 지지 않습니다.',
    '서비스를 통해 제공되는 학습 결과는 사용자의 노력에 따라 달라지며, 특정 학습 효과를 보장하지 않습니다.',
  ]},
  { n: 7, title: '약관의 변경', body: [
    '약관이 변경되는 경우 시행일 7일 전부터 앱 내 공지를 통해 안내합니다.',
    '중대한 변경의 경우 30일 전 공지하며, 사용자가 변경에 동의하지 않을 경우 계정을 탈퇴할 수 있습니다.',
  ]},
];

const PRIVACY_SECTIONS = [
  { n: 1, title: '수집하는 정보', body: [
    '가입 시: 이름(닉네임), 이메일, 프로필 사진(선택), 외부 인증 ID.',
    '사용 중: 씨앗·주머니 등 직접 입력한 콘텐츠, 사용 로그(접속 시간, 기기 정보, 앱 버전).',
    '결제 시: 결제 수단의 마지막 4자리, 결제 시각. 씨앗 번호 전체는 저장하지 않습니다.',
  ]},
  { n: 2, title: '이용 목적', body: [
    '서비스 제공: 가입한 사용자의 씨앗과 주머니를 안전하게 보관하고 동기화합니다.',
    '품질 개선: 익명화된 사용 패턴을 분석해 기능을 개선합니다.',
    '고객 지원: 문의 처리와 공지 발송에 이용합니다.',
  ]},
  { n: 3, title: '보관 기간', body: [
    '계정 정보·콘텐츠: 회원 탈퇴 시까지. 탈퇴 후 30일간 복구를 위해 백업되며 이후 영구 삭제됩니다.',
    '결제 기록: 관련 법률에 따라 5년간 보관됩니다.',
    '문의 기록: 처리 완료 후 3년간 보관됩니다.',
  ]},
  { n: 4, title: '제3자 제공', body: [
    '원칙적으로 개인정보를 외부에 제공하지 않습니다.',
    '예외: 법령에 따른 요청, 사용자가 명시적으로 동의한 경우(예: 주머니 공유 시 공유 대상에게 일부 정보 노출).',
  ]},
  { n: 5, title: '처리 위탁', body: [
    '클라우드 인프라(서버 호스팅, 백업): 안전한 데이터 보관을 위해 위탁합니다.',
    'AI 번역 처리: 입력한 표현은 번역을 위해 모델 처리 서버로 전송되며, 처리 후 즉시 폐기됩니다. 학습용으로 사용되지 않습니다.',
  ]},
  { n: 6, title: '사용자 권리', body: [
    '본인의 정보를 언제든 열람·수정·삭제할 수 있습니다. 설정 > 도움말 > 문의하기를 통해 요청해주세요.',
    '데이터 내보내기: 모든 씨앗과 주머니를 CSV·JSON 형식으로 받을 수 있습니다.',
    '동의 철회: 동의했던 항목을 언제든 철회할 수 있으며, 일부 기능 이용이 제한될 수 있습니다.',
  ]},
  { n: 7, title: '문의', body: [
    '개인정보 관련 문의는 help@cheekpouch.app으로 보내주세요.',
    '개인정보 보호책임자: 김OO (privacy@cheekpouch.app)',
  ]},
];

function LegalScreen({ title, sections, accent, lastUpdated, onBack }) {
  return (
    <div style={{ paddingBottom: 60 }}>
      <PageTop title={title} onBack={onBack} />

      <div style={{ padding: '12px 24px 0' }}>
        <div style={{
          fontSize: 26, fontWeight: 700, color: IF.ink,
          letterSpacing: '-0.03em', lineHeight: 1.15,
        }}>{title}</div>
        <div style={{
          marginTop: 10,
          display: 'inline-flex', alignItems: 'center', gap: 5,
          padding: '4px 10px', borderRadius: 999,
          background: 'rgba(60,42,20,0.05)',
          fontSize: 11, color: IF.ink2,
          letterSpacing: '-0.01em',
        }}>
          <svg width="11" height="11" viewBox="0 0 14 14" fill="none">
            <circle cx="7" cy="7" r="5.5" stroke={IF.ink2} strokeWidth="1.2"/>
            <path d="M7 4v3l2 1.5" stroke={IF.ink2} strokeWidth="1.2" strokeLinecap="round"/>
          </svg>
          마지막 업데이트 · {lastUpdated}
        </div>
      </div>

      {/* TOC */}
      <div style={{ padding: '24px 22px 0' }}>
        <div style={{
          padding: '0 6px 10px',
          fontSize: 11, fontWeight: 600, color: IF.ink3,
          letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>목차</div>
        <div style={{
          background: IF.surface,
          border: `0.5px solid ${IF.hairline}`,
          borderRadius: 14,
          overflow: 'hidden',
        }}>
          {sections.map((s, i) => (
            <a key={s.n} href={`#sec-${s.n}`} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '12px 14px',
              borderTop: i === 0 ? 'none' : `0.5px solid ${IF.hairline}`,
              textDecoration: 'none',
              fontFamily: 'inherit',
            }}>
              <span style={{
                width: 22, textAlign: 'center',
                fontSize: 11, fontWeight: 700, color: accent,
                fontFamily: 'ui-monospace, SFMono-Regular, monospace',
                flexShrink: 0,
              }}>{String(s.n).padStart(2, '0')}</span>
              <span style={{
                flex: 1,
                fontSize: 13.5, fontWeight: 500, color: IF.ink,
                letterSpacing: '-0.01em',
              }}>{s.title}</span>
              <svg width="6" height="10" viewBox="0 0 8 14" fill="none">
                <path d="M1.5 1.5L6.5 7L1.5 12.5" stroke={IF.ink3} strokeWidth="1.6"
                      strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
          ))}
        </div>
      </div>

      {/* Body */}
      <div style={{
        padding: '24px 22px 0',
        display: 'flex', flexDirection: 'column', gap: 18,
      }}>
        {sections.map(s => (
          <div key={s.n} id={`sec-${s.n}`} style={{
            padding: '16px 18px',
            background: IF.surface,
            border: `0.5px solid ${IF.hairline}`,
            borderRadius: 16,
            scrollMarginTop: 60,
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8,
              marginBottom: 10,
            }}>
              <span style={{
                fontSize: 11, fontWeight: 700, color: accent,
                fontFamily: 'ui-monospace, SFMono-Regular, monospace',
                letterSpacing: '0.06em',
              }}>{String(s.n).padStart(2, '0')}</span>
              <span style={{
                width: 14, height: 1, background: accent, opacity: 0.4,
              }} />
              <span style={{
                fontSize: 16, fontWeight: 700, color: IF.ink,
                letterSpacing: '-0.02em',
              }}>{s.title}</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {s.body.map((p, i) => (
                <p key={i} style={{
                  margin: 0,
                  fontSize: 13.5, color: IF.ink2,
                  letterSpacing: '-0.01em', lineHeight: 1.65,
                  textWrap: 'pretty',
                }}>{p}</p>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Footer */}
      <div style={{
        margin: '24px 22px 0',
        padding: '14px 16px',
        background: 'rgba(60,42,20,0.04)',
        borderRadius: 12,
        fontSize: 12, color: IF.ink2,
        letterSpacing: '-0.01em', lineHeight: 1.55,
        textAlign: 'center',
      }}>
        문의: <span style={{ color: IF.ink, fontWeight: 600 }}>help@cheekpouch.app</span>
      </div>
    </div>
  );
}

function TermsScreen({ accent, onBack }) {
  return <LegalScreen title="이용약관" sections={TERMS_SECTIONS}
                       accent={accent} lastUpdated="2026년 3월 14일"
                       onBack={onBack} />;
}
function PrivacyScreen({ accent, onBack }) {
  return <LegalScreen title="개인정보 처리방침" sections={PRIVACY_SECTIONS}
                       accent={accent} lastUpdated="2026년 3월 14일"
                       onBack={onBack} />;
}

// ─────────────────────────────────────────────────────────────
// 오픈소스 라이선스
// ─────────────────────────────────────────────────────────────
const OSS_LICENSES = [
  { name: 'React',           version: '18.3.1', license: 'MIT' },
  { name: 'Pretendard',      version: '1.3.9',  license: 'SIL OFL 1.1' },
  { name: 'Noto Sans',       version: '2.013',  license: 'SIL OFL 1.1' },
  { name: 'Noto Sans JP',    version: '2.002',  license: 'SIL OFL 1.1' },
  { name: 'Popmotion',       version: '11.0.5', license: 'MIT' },
];

function LicensesScreen({ accent, onBack }) {
  return (
    <div style={{ paddingBottom: 60 }}>
      <PageTop title="오픈소스 라이선스" onBack={onBack} />

      <div style={{ padding: '12px 24px 0' }}>
        <div style={{
          fontSize: 22, fontWeight: 700, color: IF.ink,
          letterSpacing: '-0.03em', lineHeight: 1.2,
        }}>오픈소스 라이선스</div>
        <div style={{
          marginTop: 10,
          fontSize: 13.5, color: IF.ink2,
          letterSpacing: '-0.01em', lineHeight: 1.55,
        }}>CheekPouch는 훌륭한 오픈소스 프로젝트 덕분에 만들어졌어요. 감사한 마음으로 이름을 남깁니다.</div>
      </div>

      <div style={{ padding: '24px 22px 0' }}>
        <div style={{
          background: IF.surface,
          border: `0.5px solid ${IF.hairline}`,
          borderRadius: 14,
          overflow: 'hidden',
        }}>
          {OSS_LICENSES.map((it, i) => (
            <button key={it.name} style={{
              width: '100%',
              padding: '14px 16px',
              borderTop: i === 0 ? 'none' : `0.5px solid ${IF.hairline}`,
              background: 'transparent', border: 'none',
              display: 'flex', alignItems: 'center', gap: 12,
              cursor: 'pointer', fontFamily: 'inherit',
              textAlign: 'left',
              WebkitTapHighlightColor: 'transparent',
            }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontSize: 14.5, fontWeight: 600, color: IF.ink,
                  letterSpacing: '-0.01em',
                }}>{it.name}</div>
                <div style={{
                  marginTop: 2,
                  fontSize: 11.5, color: IF.ink3,
                  letterSpacing: '-0.01em',
                  fontFamily: 'ui-monospace, SFMono-Regular, monospace',
                }}>v{it.version}</div>
              </div>
              <span style={{
                height: 22, padding: '0 9px', borderRadius: 999,
                background: 'rgba(60,42,20,0.06)',
                color: IF.ink2,
                display: 'inline-flex', alignItems: 'center',
                fontSize: 11, fontWeight: 600,
                letterSpacing: '-0.01em',
                fontFamily: 'ui-monospace, SFMono-Regular, monospace',
              }}>{it.license}</span>
            </button>
          ))}
        </div>
      </div>

      <div style={{
        margin: '20px 22px 0',
        padding: '14px 16px',
        background: 'rgba(60,42,20,0.04)',
        borderRadius: 12,
        fontSize: 12, color: IF.ink2,
        letterSpacing: '-0.01em', lineHeight: 1.55,
        textAlign: 'center',
      }}>
        라이선스 전문은 각 프로젝트 페이지에서 확인하실 수 있어요
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Rating sheet
// ─────────────────────────────────────────────────────────────
function RatingSheet({ accent, onClose }) {
  const [rating, setRating] = React.useState(0);
  const [done, setDone] = React.useState(false);

  const submit = () => {
    if (rating === 0) return;
    setDone(true);
    setTimeout(onClose, 1800);
  };

  return (
    <CSheetShell onClose={onClose} maxHeight="auto">
      <div style={{ padding: '4px 24px 0', textAlign: 'center' }}>
        <div style={{
          fontSize: 56, lineHeight: 1, marginBottom: 8,
        }}>{done ? '💌' : '⭐️'}</div>
        <div style={{
          fontSize: 20, fontWeight: 700, color: IF.ink,
          letterSpacing: '-0.03em', lineHeight: 1.25,
          textWrap: 'balance',
        }}>{done ? '감사해요!' : '몇 점을 주실 수 있나요?'}</div>
        <div style={{
          marginTop: 8,
          fontSize: 13, color: IF.ink2,
          letterSpacing: '-0.01em', lineHeight: 1.55,
        }}>{done ? '여러분의 별점이 큰 힘이 돼요' : '4점 이상이면 앱스토어로 안내해드려요'}</div>
      </div>

      {!done && (
        <div style={{
          padding: '20px 22px 0',
          display: 'flex', justifyContent: 'center', gap: 6,
        }}>
          {[1, 2, 3, 4, 5].map(n => {
            const on = rating >= n;
            return (
              <button key={n} onClick={() => setRating(n)} style={{
                width: 44, height: 44, padding: 0, border: 'none',
                background: 'transparent', cursor: 'pointer',
                fontSize: 30, lineHeight: 1,
                filter: on ? 'none' : 'grayscale(1) opacity(0.3)',
                transition: 'transform 0.12s ease, filter 0.18s ease',
                WebkitTapHighlightColor: 'transparent',
              }}
              onMouseDown={(e) => (e.currentTarget.style.transform = 'scale(1.18)')}
              onMouseUp={(e) => (e.currentTarget.style.transform = 'scale(1)')}
              onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
              >⭐️</button>
            );
          })}
        </div>
      )}

      <div style={{ padding: '24px 22px 0', display: 'flex', gap: 10 }}>
        {!done && (
          <button onClick={onClose} style={{
            flex: 1, height: 48, borderRadius: 14,
            background: 'transparent', color: IF.ink2,
            border: `1px solid ${IF.hairlineStrong}`,
            fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
            cursor: 'pointer',
            WebkitTapHighlightColor: 'transparent',
          }}>나중에</button>
        )}
        <button onClick={done ? onClose : submit} disabled={!done && rating === 0} style={{
          flex: done ? 1 : 2, height: 48, borderRadius: 14,
          background: (done || rating > 0) ? accent : `${accent}30`,
          color: '#FFF', border: 'none',
          fontFamily: 'inherit', fontSize: 15, fontWeight: 600,
          letterSpacing: '-0.01em',
          cursor: (done || rating > 0) ? 'pointer' : 'default',
          WebkitTapHighlightColor: 'transparent',
        }}>{done ? '닫기' : (rating >= 4 ? '앱스토어로 이동' : '보내기')}</button>
      </div>
    </CSheetShell>
  );
}

// ─────────────────────────────────────────────────────────────
// Social links sheet
// ─────────────────────────────────────────────────────────────
const SOCIAL_LINKS = [
  { id: 'instagram', label: 'Instagram', handle: '@cheekpouch.app', color: '#E1306C', bg: '#FCE5EE' },
  { id: 'threads',   label: 'Threads',   handle: '@cheekpouch',     color: '#000',    bg: 'rgba(0,0,0,0.06)' },
  { id: 'twitter',   label: 'X',         handle: '@cheekpouch',     color: '#000',    bg: 'rgba(0,0,0,0.06)' },
  { id: 'youtube',   label: 'YouTube',   handle: '@cheekpouch',     color: '#FF0000', bg: '#FFE5E5' },
];

function SocialLinksSheet({ accent, onClose }) {
  return (
    <CSheetShell onClose={onClose} maxHeight="auto">
      <div style={{ padding: '0 24px 4px' }}>
        <div style={{
          fontSize: 19, fontWeight: 700, color: IF.ink,
          letterSpacing: '-0.02em',
        }}>소셜에서 만나요</div>
        <div style={{
          marginTop: 6,
          fontSize: 13, color: IF.ink2,
          letterSpacing: '-0.01em', lineHeight: 1.5,
        }}>새 기능 소식, 학습 팁, 사용자 이야기를 공유해요</div>
      </div>

      <div style={{
        padding: '18px 16px 0',
        display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        {SOCIAL_LINKS.map(s => (
          <button key={s.id} style={{
            padding: '12px 14px',
            background: IF.surface2,
            border: `0.5px solid ${IF.hairline}`,
            borderRadius: 12,
            display: 'flex', alignItems: 'center', gap: 12,
            cursor: 'pointer', fontFamily: 'inherit',
            textAlign: 'left',
            WebkitTapHighlightColor: 'transparent',
          }}>
            <span style={{
              width: 36, height: 36, borderRadius: 10,
              background: s.bg, color: s.color,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
              fontSize: 15, fontWeight: 800,
              letterSpacing: '-0.02em',
            }}>{s.label[0]}</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontSize: 14.5, fontWeight: 600, color: IF.ink,
                letterSpacing: '-0.01em',
              }}>{s.label}</div>
              <div style={{
                marginTop: 2,
                fontSize: 11.5, color: IF.ink3,
                letterSpacing: '-0.01em',
                fontFamily: 'ui-monospace, SFMono-Regular, monospace',
              }}>{s.handle}</div>
            </div>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}>
              <path d="M6 2h8v8" stroke={IF.ink2} strokeWidth="1.5" strokeLinecap="round"/>
              <path d="M14 2L7 9M3 4v9a1 1 0 0 0 1 1h9" stroke={IF.ink2} strokeWidth="1.5"
                    strokeLinecap="round" strokeLinejoin="round" fill="none"/>
            </svg>
          </button>
        ))}
      </div>

      <div style={{ padding: '18px 22px 0' }}>
        <button onClick={onClose} style={{
          width: '100%', height: 48, borderRadius: 14,
          background: 'transparent', color: IF.ink,
          border: `1px solid ${IF.hairlineStrong}`,
          fontFamily: 'inherit', fontSize: 15, fontWeight: 500,
          cursor: 'pointer',
          WebkitTapHighlightColor: 'transparent',
        }}>닫기</button>
      </div>
    </CSheetShell>
  );
}

function CSheetShell({ children, onClose, maxHeight = '88%' }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 200,
      display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
    }}>
      <div onClick={onClose} style={{
        position: 'absolute', inset: 0,
        background: 'rgba(31, 24, 18, 0.40)',
        animation: 'cp-fade-bg 0.25s ease',
      }} />
      <div style={{
        position: 'relative',
        background: IF.surface,
        borderTopLeftRadius: 26, borderTopRightRadius: 26,
        paddingBottom: 28,
        maxHeight,
        boxShadow: '0 -8px 32px rgba(31,24,18,0.16)',
        animation: 'cp-sheet-up 0.32s cubic-bezier(0.22, 1, 0.36, 1)',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{
          width: 38, height: 4.5, borderRadius: 4,
          background: 'rgba(31,24,18,0.18)',
          margin: '8px auto 14px',
        }} />
        {children}
      </div>
    </div>
  );
}

Object.assign(window, {
  HowToScreen, ContactScreen, TermsScreen, PrivacyScreen,
  LicensesScreen, RatingSheet, SocialLinksSheet,
});