/* page-extras.jsx — /timeline, /contact, /about */

function PageTimeline({ nav }) {
  const { lang } = useLang();
  return (
    <div className="page">
      <header style={{borderBottom:'1px solid var(--rule)', paddingBottom:40, marginBottom:40}}>
        <div className="label"><T zh="完整跨物种时间线" en="Full cross-species timeline" /></div>
        <h1 style={{fontFamily:'var(--font-serif-cjk)', fontSize:64, margin:'16px 0 8px', fontWeight:500}}>
          <T zh="时间线" en="Timeline" />
          <span style={{fontFamily:'var(--font-serif-latin)', fontStyle:'italic', fontSize:28, opacity:0.55, marginLeft:16, fontWeight:400}}>
            {lang==='zh' ? 'The Five-Species Timeline' : 'Five-Species Chronology'}
          </span>
        </h1>
        <p style={{fontSize:15, opacity:0.75, maxWidth:720, marginTop:8}}>
          <T
            zh="从涣族（Huvari）首次探测 Ross 128 废热 (1712) 到叙事当下 (4500)。时间单位以世纪为刻度；无线电延迟与飞船抵达分别标注。"
            en="From the Huvari first detection of Ross 128 waste heat (1712) to the narrative present (4500). Centuries are the native unit; radio lag and ship arrival are annotated separately." />
        </p>
      </header>

      <div style={{display:'grid', gridTemplateColumns:'160px 1fr', gap:48}}>
        {TIMELINE_EVENTS.map((e, i) => {
          const txt = lang === 'zh' ? e.zh : e.en;
          return (
            <React.Fragment key={i}>
              <div style={{borderRight:'1px solid var(--rule-soft)', paddingRight:24, textAlign:'right', fontFamily:'var(--font-serif-latin)', fontSize:28, fontWeight:500, paddingTop:16}}>
                {e.year}
              </div>
              <div style={{paddingBottom:32, borderBottom:'1px solid var(--rule-soft)', paddingTop:16}}>
                <div style={{display:'flex', alignItems:'center', gap:12, flexWrap:'wrap'}}>
                  {e.who.split(' ').map(w => {
                    const sp = SPECIES.find(x => x.id === w);
                    return sp ? (
                      <span key={w} style={{fontSize:11, letterSpacing:'0.15em', padding:'2px 10px', border:`1px solid ${sp.color}`, color:sp.color, fontFamily:'var(--font-sans-cjk)'}}>
                        {lang==='zh'?sp.zh:sp.en}
                      </span>
                    ) : (
                      <span key={w} style={{fontSize:11, letterSpacing:'0.15em', padding:'2px 10px', border:'1px solid var(--rule)', opacity:0.7, fontFamily:'var(--font-sans-cjk)'}}>
                        {w === 'all' ? (lang==='zh'?'全族':'All species') : w}
                      </span>
                    );
                  })}
                  {e.pin && <span className="label" style={{color:'#b8431e'}}><T zh="◆ 关键节点" en="◆ Anchor" /></span>}
                </div>
                <div style={{fontSize:22, fontFamily:'var(--font-serif-cjk)', fontWeight:500, marginTop:10}}>{txt.t}</div>
                <div style={{fontSize:14, opacity:0.75, marginTop:6, lineHeight:1.7}}>{txt.d}</div>
              </div>
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
}

function PageContact({ nav }) {
  const { lang } = useLang();
  return (
    <div className="page">
      <header style={{borderBottom:'1px solid var(--rule)', paddingBottom:40, marginBottom:40}}>
        <div className="label"><T zh="谁 · 何时 · 以何种方式" en="Who · When · How" /></div>
        <h1 style={{fontFamily:'var(--font-serif-cjk)', fontSize:64, margin:'16px 0 8px', fontWeight:500}}>
          <T zh="接触矩阵" en="Contact Matrix" />
          <span style={{fontFamily:'var(--font-serif-latin)', fontStyle:'italic', fontSize:28, opacity:0.55, marginLeft:16, fontWeight:400}}>
            {lang==='zh' ? 'Contact Matrix' : '接触矩阵'}
          </span>
        </h1>
      </header>
      <div className="matrix">
        <MatrixGrid />
        <MatrixLegend />
      </div>

      <section style={{marginTop:96}}>
        <div className="label"><T zh="§ · 光时与飞船延迟" en="§ · Light-time and ship lag" /></div>
        <h2 style={{fontFamily:'var(--font-serif-cjk)', fontSize:32, fontWeight:500, margin:'4px 0 16px'}}>
          <T zh="距离即政策" en="Distance as Policy" />
          <span style={{fontFamily:'var(--font-serif-latin)', fontStyle:'italic', fontSize:22, opacity:0.55, marginLeft:12, fontWeight:400}}>
            {lang==='zh' ? 'Distance as Policy' : '距离即政策'}
          </span>
        </h2>
        <p style={{fontSize:15, opacity:0.8, maxWidth:680, lineHeight:1.8}}>
          <T zh="无线电往返延迟从 11 年（人类 ↔ 波江 ε）到 42 年（涣族母星 ↔ Ross 128）不等。0.1 c 聚变船飞到任何邻居需要 50–210 年。这让光时外交成为五族共同的技术——长寿者主导条款，短命者提前起草遗嘱。"
             en="Radio round-trips run from 11 yr (Human ↔ Epsilon Eridani) to 42 yr (Huvari home ↔ Ross 128). A 0.1 c fusion slow-ship needs 50–210 yr to reach any neighbour. This makes light-lag diplomacy a shared technology — the long-lived dictate clauses, the short-lived draft wills early." />
        </p>
        <div style={{marginTop:32}}>
          <HumanContactDelay w={800} h={360} />
        </div>
      </section>
    </div>
  );
}

function PageAbout({ nav }) {
  const { lang } = useLang();
  return (
    <div className="page" style={{maxWidth:900}}>
      <header style={{borderBottom:'1px solid var(--rule)', paddingBottom:40, marginBottom:40}}>
        <div className="label"><T zh="项目说明" en="Project notes" /></div>
        <h1 style={{fontFamily:'var(--font-serif-cjk)', fontSize:64, margin:'16px 0 8px', fontWeight:500}}>
          <T zh="关于" en="About" />
          <span style={{fontFamily:'var(--font-serif-latin)', fontStyle:'italic', fontSize:28, opacity:0.55, marginLeft:16, fontWeight:400}}>Slow Compact</span>
        </h1>
      </header>

      <div style={{fontSize:16, lineHeight:1.85, fontFamily:lang==='zh'?'var(--font-serif-cjk)':'var(--font-serif-latin)'}}>
        <p>
          <strong><T zh="缓约" en="Slow Compact" /></strong>
          <T zh="（Slow Compact）是一个科学严谨的多物种宇宙创意项目。它既不是电子游戏，也不是影视 IP 的宣传站——它是一份正在生长的世界观文档的视觉外壳。"
             en=" is a scientifically grounded multi-species worldbuilding project. It is neither a game nor a media-IP promo site — it is the visual shell of a living canon document." />
        </p>

        <h2 style={{fontFamily:'inherit', fontSize:28, fontWeight:500, marginTop:56}}><T zh="创作纲领 · Four Tenets" en="Four Tenets" /></h2>

        <p><strong><T zh="I. 真实物理。" en="I. Real physics. " /></strong>
          <T zh="没有超光速。星际距离以光年计；接触跨度以世纪计。唯一的信使是电磁波与物质——两者都慢。任何“几年到达邻星”的暗示，以 bug 论处。"
             en="No FTL. Interstellar distances in light-years; contact arcs in centuries. Only photons and matter — both slow. Any hint of “arriving at the next star in a few years” is treated as a bug." /></p>

        <p><strong><T zh="II. 感官非对称。" en="II. Sensory asymmetry. " /></strong>
          <T zh="每个物种有一套原生感官 OS，塑造其数学、建筑、法律、诗歌。翻译永远有损。任意两族沟通时，总有一方在自己的第二母语里。这是本项目所有冲突的第一性原理。"
             en="Each species runs a native sensory OS that shapes its mathematics, architecture, law, poetry. Translation is always lossy. In any pair, at least one side speaks a second language. This is the first-principles source of every conflict." /></p>

        <p><strong><T zh="III. 寿命非对称。" en="III. Lifespan asymmetry. " /></strong>
          <T zh="从 30 年到 1300 年——这种不对称扭曲了外交、契约、金融与亲情。所有条约偏袒长寿者；所有危机源自此不对称被忽视的瞬间。衡族的千年视角与人类的季度视角不能调和，只能制度化。"
             en="From 30 years to 1,300 — this asymmetry warps diplomacy, contracts, finance, kinship. Every treaty favours the long-lived; every crisis is a moment when the asymmetry was ignored. Eoani millennial horizons and human quarterly horizons cannot be reconciled — only institutionalised." /></p>

        <p><strong><T zh="IV. 冲突源自真实动力学。" en="IV. Conflict from real dynamics. " /></strong>
          <T zh="不是“坏人”做坏事，而是不同感官-寿命-经济结构的文明在同一个宇宙里无意互相伤害。本项目研究这些伤害如何被制度化解——六项具名危机、五项制度支柱，构成跨物种政治哲学的测试台。"
             en="Not villains, but civilisations with different sensoria, lifespans, and economies harming one another by accident. The project studies how those harms get institutionalised away — six named crises and five institutional pillars form a testbed for cross-species political philosophy." /></p>

        <h2 style={{fontFamily:'inherit', fontSize:28, fontWeight:500, marginTop:56}}><T zh="引用规范 · Citation" en="Citation" /></h2>
        <p>
          <T zh="所有物种名首次出现采用 中文（English）配对；物种名每次出现都标注英文变体（衡族（Eoani）是固定搭配，不拆分）。数字、年份、距离单位（ly、c、年）保留阿拉伯数字。所有数据源的文末标记"
             en="Species names appear paired (English first in this language). Numerals, years, and units (ly, c, yr) stay in Arabic numerals. Source markers at the end of each data point" />
          <code style={{fontFamily:'var(--font-mono)', fontSize:13, padding:'2px 6px', background:'var(--paper-2)', margin:'0 4px'}}>[source-id]</code>
          <T zh="指向站内 canon 文档锚点。" en="point to canon-document anchors." />
        </p>

        <h2 style={{fontFamily:'inherit', fontSize:28, fontWeight:500, marginTop:56}}><T zh="视觉语言 · Visual Tenets" en="Visual Tenets" /></h2>
        <p>
          <strong><T zh="所有可视化为程序化 SVG。" en="All visuals are procedural SVG. " /></strong>
          <T zh="本站不使用任何 raster 图片、不使用 AI 生成插画。可视化即数学：磁力线、频谱图、电场线、张量玫瑰、轨道力学。此即项目的“科学即美学”核心——一张图应该能被推导，而不只是观看。"
             en="No raster images, no AI illustration. The visual IS the math: field lines, spectrograms, electric fields, strain-tensor roses, orbital mechanics. Each figure should be derivable, not merely viewable." />
        </p>
        <p>
          <strong><T zh="每物种页是该物种感官的视觉化身。" en="Each species page is the embodiment of that species' senses. " /></strong>
          <T zh="进入 /eoani 像戴上一副红外眼镜；进入 /ketoi 像沉入水下；进入 /huvari 像穿上电感受手套；进入 /thavari 像把光关掉、把听觉换成触觉；进入 /human 像打开一台 2280 年的笔电。"
             en="Entering /eoani is putting on infrared goggles; /ketoi is sinking underwater; /huvari is pulling on an electroreceptive glove; /thavari is killing the lights and trading sight for touch; /human is opening a 2280-era laptop." />
        </p>

        <h2 style={{fontFamily:'inherit', fontSize:28, fontWeight:500, marginTop:56}}><T zh="禁止清单 · Forbidden Tropes" en="Forbidden Tropes" /></h2>
        <ul style={{fontFamily:lang==='zh'?'var(--font-sans-cjk)':'var(--font-sans-latin)', fontSize:14, lineHeight:1.9, opacity:0.85}}>
          <li>× <T zh="通用太空科幻 HUD：发光扫描线、十字准星、雷达扫描" en="generic space-opera HUDs: glowing scanlines, crosshairs, sweeping radar" /></li>
          <li>× <T zh="AI 生成的“外星”插画、人物头像、星球渲染" en="AI-generated alien illustrations, character portraits, planet renders" /></li>
          <li>× <T zh="“曲速” / “虫洞” / “传送门”" en='"warp" / "wormhole" / "portal"' /></li>
          <li>× <T zh="Iron Man / Mass Effect / Destiny 式全息 UI" en="Iron Man / Mass Effect / Destiny-style holographic UI" /></li>
          <li>× <T zh="Web3 / blockchain / NFT 美学" en="Web3 / blockchain / NFT aesthetics" /></li>
          <li>× <T zh="外星象形文字或假外星字体" en="alien hieroglyphs or fake-alien typefaces" /></li>
          <li>× <T zh="在非人类视角中偷渡人类视觉隐喻" en="smuggling human visual metaphors into non-human perspectives" /></li>
          <li>× <T zh="装饰性 emoji 或通用 icon 库滥用" en="decorative emoji or generic icon-library overuse" /></li>
        </ul>

        <hr style={{margin:'80px 0 40px', border:0, borderTop:'1px solid var(--rule)'}} />
        <p style={{fontSize:13, opacity:0.65, fontFamily:lang==='zh'?'var(--font-sans-cjk)':'var(--font-sans-latin)'}}>
          <T zh="Canon v4.2 · 2026 编 · Rev 0.  本站为项目视觉外壳，内容随 canon 更新同步。"
             en="Canon v4.2 · 2026 edition · Rev 0. This site is the visual shell of the canon and tracks updates." />
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { PageTimeline, PageContact, PageAbout });