/* page-about.jsx — public-safe overview for the public site */

const PUBLIC_ABOUT_SENSES = [
  {
    sp: 'eoani',
    sense: { zh: '红外热成像 + 磁感受', en: 'Infrared thermography + magnetoreception' },
    detail: { zh: '热分辨约 0.01 K；方向来自磁场梯度。', en: 'Thermal resolution around 0.01 K; direction comes through magnetic gradients.' },
  },
  {
    sp: 'ketoi',
    sense: { zh: '主动声呐 + 偏振视觉', en: 'Active sonar + polarization vision' },
    detail: { zh: '时间分辨约 20 微秒；声学身份就是名字。', en: 'Temporal resolution around 20 microseconds; acoustic identity is a name.' },
  },
  {
    sp: 'huvari',
    sense: { zh: '电感受', en: 'Electroreception' },
    detail: { zh: '电场是空间、亲属与伤害的共同语言。', en: 'Electric fields carry space, kinship, and harm at once.' },
  },
  {
    sp: 'thavari',
    sense: { zh: '地震振动 + 暗光视觉', en: 'Seismic vibration + dim photic vision' },
    detail: { zh: '应变张量塑造八位环认知；冰壳以上不是天空，而是失明。', en: 'Strain tensors shape eight-bodied cognition; above the ice is not sky, but blindness.' },
  },
  {
    sp: 'human',
    sense: { zh: '可见光视觉 + 听觉', en: 'Visible-light vision + hearing' },
    detail: { zh: '人类用仪器补足缺失的磁感、电感与振动感知。', en: 'Humans use instruments to compensate for missing magnetic, electric, and seismic senses.' },
  },
];

const PUBLIC_ABOUT_FACTS = [
  { zh: '五个智慧物种', en: 'Five sapient species', noteZh: '五套感官、寿命与文明结构。', noteEn: 'Five sensoria, lifespans, and civilisational structures.' },
  { zh: '无超光速交通', en: 'No faster-than-light travel', noteZh: '无线电以年计，慢船以世纪计。', noteEn: 'Radio takes years; slow ships take centuries.' },
  { zh: '感官不可互译', en: 'Senses do not translate cleanly', noteZh: '语言先撞上生理边界。', noteEn: 'Language reaches biology before grammar.' },
  { zh: '危机沉淀为制度', en: 'Crises become institutions', noteZh: '历史不是背景，而是条约留下的形状。', noteEn: 'History is not backdrop; it is the shape treaties leave behind.' },
];

function PublicAboutSection({ label, title, titleEn, children }) {
  const { lang } = useLang();
  return (
    <section style={{paddingTop:72, borderTop:'1px solid var(--rule-soft)', marginTop:72}}>
      <div className="label">{label}</div>
      <h2 style={{fontFamily:'var(--font-serif-cjk)', fontSize:32, fontWeight:500, margin:'8px 0 18px', letterSpacing:'0.02em'}}>
        {title}
        <span style={{fontFamily:'var(--font-serif-latin)', fontStyle:'italic', fontSize:22, fontWeight:400, marginLeft:12, opacity:0.55}}>
          {titleEn}
        </span>
      </h2>
      <div style={{fontFamily:lang==='zh'?'var(--font-serif-cjk)':'var(--font-serif-latin)', fontSize:16, lineHeight:1.8}}>{children}</div>
    </section>
  );
}

function PublicAboutCard({ children, accent = 'var(--rule)' }) {
  return (
    <div style={{borderLeft:`3px solid ${accent}`, paddingLeft:16, paddingBottom:6, minWidth:0}}>
      {children}
    </div>
  );
}

function PageAbout({ nav }) {
  const { lang } = useLang();
  return (
    <div className="page" style={{maxWidth:1080}}>
      <header style={{borderBottom:'1px solid var(--rule)', paddingBottom:48, marginBottom:8}}>
        <div className="label"><T zh="公开入口" en="Public entrance" /></div>
        <h1 style={{fontFamily:'var(--font-serif-cjk)', fontSize:'clamp(48px, 8vw, 88px)', lineHeight:1.05, margin:'18px 0 18px', fontWeight:600}}>
          <T zh="关于缓约" en="About Slow Compact" />
        </h1>
        <p style={{fontSize:18, lineHeight:1.65, maxWidth:760, color:'color-mix(in oklab, var(--ink) 76%, transparent)', margin:0}}>
          <strong><T zh="缓约" en="Slow Compact" /></strong>
          <T zh="是一个科学严谨的多物种宇宙。五个智慧物种在不同恒星邻域演化出彼此难以互译的感官、寿命与文明结构；它们因物理而隔离，又因物理而相遇。"
             en=" is a scientifically grounded five-species universe. Five sapient species evolve in different stellar neighbourhoods, each with sensoria, lifespans, and institutions that resist clean translation; physics keeps them apart, and physics eventually brings them together." />
        </p>
      </header>

      <PublicAboutSection label={<T zh="基本形状" en="Basic shape" />} title={<T zh="这个宇宙是什么" en="What This Universe Is" />} titleEn={lang==='zh'?'What This Universe Is':'这个宇宙是什么'}>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))', gap:22}}>
          {PUBLIC_ABOUT_FACTS.map((fact, i) => (
            <PublicAboutCard key={i}>
              <div style={{fontFamily:'var(--font-serif-cjk)', fontSize:18, fontWeight:500}}>{lang==='zh'?fact.zh:fact.en}</div>
              <p style={{fontSize:14, opacity:0.72, margin:'4px 0 0'}}>{lang==='zh'?fact.noteZh:fact.noteEn}</p>
            </PublicAboutCard>
          ))}
        </div>
      </PublicAboutSection>

      <PublicAboutSection label={<T zh="五感速查" en="Sensory field guide" />} title={<T zh="五种世界入口" en="Five Ways Into the World" />} titleEn={lang==='zh'?'Five Ways Into the World':'五种世界入口'}>
        <p style={{maxWidth:760, marginTop:0, opacity:0.76}}>
          <T zh="每个物种的页面都以其原生感官为入口。这里不是把外星人画成人类能一眼读懂的样子，而是让视觉结构模拟它们的感知逻辑。"
             en="Each species page begins from its native sensorium. The public site does not render aliens as instantly human-readable figures; it lets visual structure approximate how their perception works." />
        </p>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(230px, 1fr))', gap:20, marginTop:26}}>
          {PUBLIC_ABOUT_SENSES.map(item => {
            const sp = SPECIES.find(s => s.id === item.sp);
            const accent = sp ? sp.color : 'var(--rule)';
            return (
              <button key={item.sp} onClick={() => nav(sp.path)} style={{textAlign:'left', border:'1px solid var(--rule)', padding:18, minHeight:178, background:'color-mix(in oklab, var(--paper-2) 38%, var(--paper))'}}>
                <div style={{display:'flex', alignItems:'baseline', gap:8, flexWrap:'wrap'}}>
                  <span style={{color:accent, letterSpacing:'0.12em', fontFamily:'var(--font-sans-cjk)', fontSize:12, fontWeight:600}}>{lang==='zh'?sp.zh:sp.en}</span>
                  <span style={{fontFamily:'var(--font-serif-latin)', fontStyle:'italic', fontSize:13, opacity:0.55}}>{lang==='zh'?sp.en:sp.zh}</span>
                </div>
                <div style={{fontSize:16, fontWeight:500, marginTop:12}}>{lang==='zh'?item.sense.zh:item.sense.en}</div>
                <p style={{fontSize:13, lineHeight:1.6, opacity:0.72, margin:'8px 0 0'}}>{lang==='zh'?item.detail.zh:item.detail.en}</p>
              </button>
            );
          })}
        </div>
      </PublicAboutSection>

      <PublicAboutSection label={<T zh="从哪里开始" en="Where to start" />} title={<T zh="公开站如何阅读" en="How To Read the Public Site" />} titleEn={lang==='zh'?'How To Read':'阅读路径'}>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap:20}}>
          {[
            { titleZh:'先选一个物种', titleEn:'Pick a species first', bodyZh:'从最陌生的感官系统开始：衡族的热-磁世界，鲸语族的声学海洋，涣族的电场，震族的应变环，或人类的仪器化视角。', bodyEn:'Start from the sensorium that feels most foreign: Eoani thermal-magnetic space, Ketoi acoustic seas, Huvari electric fields, Thavari strain-rings, or human instrumentation.', actionZh:'打开物种选择器', actionEn:'Open species selector', go:'/' },
            { titleZh:'再看作品索引', titleEn:'Then use the works index', bodyZh:'公开站提供故事摘要与部分互动预览；完整正文仍在会员阅读器中。', bodyEn:'The public site provides story summaries and selected interactive previews; full text remains in the member reader.', actionZh:'回到首页作品索引', actionEn:'Back to works index', go:'/' },
            { titleZh:'试一个公开预览', titleEn:'Try a public preview', bodyZh:'带公开预览的作品会在本站打开，保留故事的感官机制而不发布完整正文。', bodyEn:'Works with public previews open here, preserving the sensory mechanism without publishing the full text.', actionZh:'打开《镜响》预览', actionEn:'Open Mirror-Echo preview', go:'/story/mirror-echo' },
          ].map(card => (
            <button key={card.titleEn} onClick={() => nav(card.go)} style={{textAlign:'left', border:'1px solid var(--rule)', padding:20, background:'var(--paper)'}}>
              <div style={{fontSize:18, fontWeight:500}}>{lang==='zh'?card.titleZh:card.titleEn}</div>
              <p style={{fontSize:13, opacity:0.72, margin:'8px 0 18px', lineHeight:1.65}}>{lang==='zh'?card.bodyZh:card.bodyEn}</p>
              <span style={{fontFamily:'var(--font-sans-cjk)', fontSize:11, letterSpacing:'0.14em', borderBottom:'1px solid currentColor'}}>{lang==='zh'?card.actionZh:card.actionEn}</span>
            </button>
          ))}
          <a href={PRIVATE_APP_URL} style={{display:'block', textAlign:'left', border:'1px solid var(--ink)', padding:20, background:'color-mix(in oklab, var(--ink) 7%, transparent)'}}>
            <div style={{fontSize:18, fontWeight:500}}><T zh="进入会员阅读器" en="Open the member reader" /></div>
            <p style={{fontSize:13, opacity:0.72, margin:'8px 0 18px', lineHeight:1.65}}>
              <T zh="会员阅读器承载完整草稿正文、互动可视化组件与更密集的世界资料。" en="The member reader hosts full draft texts, interactive visualization modules, and denser world reference material." />
            </p>
            <span style={{fontFamily:'var(--font-sans-cjk)', fontSize:11, letterSpacing:'0.14em', borderBottom:'1px solid currentColor'}}><T zh="打开 app.slowcompact.com" en="Open app.slowcompact.com" /></span>
          </a>
        </div>
      </PublicAboutSection>
    </div>
  );
}

Object.assign(window, { PageAbout });