/* match-legal.jsx — 服务条款 + 隐私政策(内容来自 legal-content.js · Deman One Corp) */
function LegalView({ en, onBack }){
  const [doc, setDoc] = useState('tos');
  const L = window.LEGAL || {};
  const html = (L[doc + (en ? '_en' : '_zh')]) || '';
  const tabs = [
    ['tos',     en ? 'Terms of Service' : '服务条款',  'shield'],
    ['privacy', en ? 'Privacy Policy'   : '隐私政策',  'shield']
  ];
  return (
    <div className="wrap" style={{ padding:'24px 26px 70px', maxWidth:1180 }}>
      <button className="chip" style={{ cursor:'pointer', marginBottom:18 }} onClick={onBack}><Ic k="back" w={14}/> {en?'Back':'返回'}</button>
      <span className="eyebrow">{en?'LEGAL':'法律文件'}</span>
      <h2 className="h2" style={{ marginTop:10, marginBottom:6 }}>{en?'Legal Documents':'法律文件'}</h2>
      <p className="lede" style={{ fontSize:14 }}>{en?'Terms of Service & Privacy Policy. Switch language with EN / 中文 in the top bar.':'服务条款与隐私政策。点右上角 EN / 中文 切换语言。'}</p>

      <div style={{ display:'grid', gridTemplateColumns:'230px 1fr', gap:38, alignItems:'start', marginTop:28 }} className="lg-grid">
        <aside style={{ position:'sticky', top:90 }}>
          <div className="card" style={{ padding:10, display:'flex', flexDirection:'column', gap:5 }}>
            {tabs.map(([k,label,icon])=>(
              <button key={k} onClick={()=>{ setDoc(k); window.scrollTo({top:0,behavior:'smooth'}); }} style={{
                display:'flex', alignItems:'center', gap:10, padding:'11px 13px', borderRadius:'var(--r-sm)', border:'none', cursor:'pointer',
                fontFamily:'var(--cn)', fontWeight:700, fontSize:14, textAlign:'left',
                background: doc===k ? 'var(--v-sig)' : 'transparent', color: doc===k ? '#fff' : 'var(--text-dim)' }}>
                <Ic k={icon} w={17}/> {label}
              </button>
            ))}
          </div>
          <div style={{ fontFamily:'var(--mono)', fontSize:11, color:'var(--text-mute)', lineHeight:1.8, marginTop:16, padding:'0 4px' }}>
            Deman One Corp<br/>demanone.com · info@demanone.com<br/>Version 1.0 · 2026-06-01
          </div>
        </aside>

        <article className="lg-doc">
          <h3 className="h3" style={{ fontSize:'clamp(24px,3vw,32px)', marginBottom:14 }}>{tabs.find(t=>t[0]===doc)[1]}</h3>
          <div dangerouslySetInnerHTML={{ __html: html }} />
        </article>
      </div>
    </div>
  );
}
window.LegalView = LegalView;