/* page-human.jsx */

function PageHuman({ nav }) {
  const { lang } = useLang();
  return (
    <div className="sp sp-human">
      <div className="sp__inner">
        <header className="sp__hero">
          <div>
            <div className="sp__kicker"><span className="rule" /><T zh="物种 05 · SPECIES 05" en="SPECIES 05 · 物种 05" /></div>
            <h1 className="sp__title"><T zh="人类" en="Human" /><span className="en">2200–2300</span></h1>
            <p className="sp__lede">
              <T
                zh={<>公元 <span className="num">2089</span> 年，月球背面的射电阵列接收到来自 82 G. Eridani 方向的窄带调制。 那一刻，人类第一次确知自己不孤独。<br/> 我们花了一个世纪发射出第一艘能抵达邻星的船。 在邻居们的尺度上，<strong>我们刚到这里</strong>。</>}
                en={<>In <span className="num">2089 CE</span>, the lunar far-side array picked up narrowband modulation from 82 G. Eridani. At that moment, humans first knew they were not alone.<br/>It took us a century to launch the first ship that could reach a neighbour star. On our neighbours' timescale, <strong>we just arrived</strong>.</>}
              />
            </p>
          </div>
          <div className="sp__hero-viz">
            <HumanContactDelay w={520} h={360} />
          </div>
        </header>

        <FactRow items={lang==='zh' ? [
          { label: '时代',   val: '2200–2300', note: '聚变文明 · 太阳系全域' },
          { label: '健康寿命', val: '~150', unit: 'y', note: 'CIRBP/TP53 启发' },
          { label: '主感官',  val: 'VIS + HUD', note: '可见光 + 仪表整合' },
          { label: '到达邻星', val: '50–210', unit: 'y', note: '0.1 c 聚变船' },
        ] : [
          { label: 'Era',         val: '2200–2300', note: 'fusion era · Sol-system-wide' },
          { label: 'Healthspan',  val: '~150', unit: 'y', note: 'CIRBP/TP53-inspired' },
          { label: 'Senses',      val: 'VIS + HUD', note: 'visible + instrument fusion' },
          { label: 'To neighbour', val: '50–210', unit: 'y', note: '0.1 c fusion ship' },
        ]} />

        <section>
          <div className="label"><T zh="§ 01 · 感官包" en="§ 01 · Sensory package" /></div>
          <h2><T zh="可见光 + 仪表整合" en="Visible Light + Instrument Fusion" /><span className="en">{lang==='zh'?'The Humble Band':'谦卑的窄带'}</span></h2>
          <div className="sp__two">
            <div>
              <p>
                <T
                  zh={<>我们只看 <span className="num">380–700 nm</span>——太阳辐射峰附近的一道窄带。 我们的“听觉”带宽是鲸语族（Ketoi）的 <span className="num">1/40</span>。 我们几乎不感磁场，几乎不感电场。 五族之中，我们的生物感官最窄、最晚启用、最依赖工具扩展。</>}
                  en={<>We see only <span className="num">380–700 nm</span> — a narrow band near the solar peak. Our "hearing" bandwidth is roughly <span className="num">1/40</span> that of the Ketoi. We barely feel magnetic or electric fields. Of the five species, our biological senses are the narrowest, the latest activated, and the most dependent on tooling.</>}
                />
              </p>
              <p>
                <T
                  zh={<>但我们制造感官。 <span className="num">2200</span> 年的标准公民 HUD 同时显示 红外、偏振、射频、磁通、血气、轨道元素—— 我们通过仪器与邻居们的原生感官短暂共情。 这不是劣势；这是我们的文明特征。</>}
                  en={<>But we <em>build</em> senses. A standard <span className="num">2200</span>-era civilian HUD simultaneously displays IR, polarisation, RF, magnetic flux, blood gas, orbital elements — through instruments we briefly share our neighbours' native sensoria. This is not a deficit; it is our civilisational signature.</>}
                />
              </p>
            </div>
            <div>
              <div className="dash">
                {(lang==='zh' ? [
                  { l:'VIS',  v:'380', u:'nm↗700', c:'可见光波段' },
                  { l:'IR',   v:'—',   u:'',       c:'需 HUD 转译' },
                  { l:'UV',   v:'—',   u:'',       c:'需 HUD 转译' },
                  { l:'RF',   v:'—',   u:'',       c:'需 HUD 转译' },
                  { l:'B',    v:'—',   u:'',       c:'需罗盘' },
                  { l:'E',    v:'—',   u:'',       c:'需电表' },
                ] : [
                  { l:'VIS',  v:'380', u:'nm↗700', c:'visible band' },
                  { l:'IR',   v:'—',   u:'',       c:'HUD-translated' },
                  { l:'UV',   v:'—',   u:'',       c:'HUD-translated' },
                  { l:'RF',   v:'—',   u:'',       c:'HUD-translated' },
                  { l:'B',    v:'—',   u:'',       c:'compass needed' },
                  { l:'E',    v:'—',   u:'',       c:'meter needed' },
                ]).map((d,i)=>(
                  <div key={i} className="dash__cell">
                    <div className="label">{d.l}</div>
                    <div className="val">{d.v}<span className="unit">{d.u}</span></div>
                    <div className="caption">{d.c}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section>
          <div className="label"><T zh="§ 02 · 太阳系全域" en="§ 02 · Sol-system-wide" /></div>
          <h2><T zh="从水星到泰坦" en="Mercury to Titan" /><span className="en">{lang==='zh'?'Mercury to Titan':'从水星到泰坦'}</span></h2>
          <HumanSolarSystem w={1280} h={260} />
          <div className="sp__two" style={{marginTop:48}}>
            <div>
              <p>
                <T
                  zh={<><span className="num">2060</span>：火星永久定居。 <span className="num">2080</span>：月球工业区全面运转。 <span className="num">2100</span>：木卫二冰下研究站。 <span className="num">2140</span>：土卫六大气殖民。 <span className="num">2200</span>：小行星带矿业稳定供给内太阳系。</>}
                  en={<><span className="num">2060</span>: permanent Mars settlement. <span className="num">2080</span>: lunar industrial zone fully operational. <span className="num">2100</span>: Europa sub-ice station. <span className="num">2140</span>: Titan atmospheric colony. <span className="num">2200</span>: belt mining steadily supplying the inner system.</>}
                />
              </p>
              <p>
                <T
                  zh="治理是碎片化的—— 地球、火星、木星组团、土星组团各有独立议会。 与衡族（Eoani）千年统一的衡格（Eoan Measure）形成鲜明对照。 长寿文明取笑人类的“季度选举”； 人类回敬他们“千年的规划误差”。"
                  en={<>Governance is fragmented — Earth, Mars, the Jovian league, and the Saturnian league each run independent legislatures. The contrast with the Eoani's millennial-unified Measure is sharp. The long-lived mock human “quarterly elections”; humans return fire on “millennial planning errors”.</>}
                />
              </p>
            </div>
            <div>
              <HumanMagellan />
              <div className="label" style={{marginTop:8, opacity:0.7}}><T zh="MAGELLAN Ⅰ · 2250 年发射 · 至波江 ε 冰卫星" en="MAGELLAN Ⅰ · launched 2250 · bound for Eps Eri ice moon" /></div>
            </div>
          </div>
        </section>

        <section>
          <div className="label"><T zh="§ 03 · 寿命不对称" en="§ 03 · Lifespan asymmetry" /></div>
          <h2><T zh="我们在邻居们的刻度上" en="Our Span on Their Ruler" /><span className="en">{lang==='zh'?'Our Span on Their Ruler':'邻居刻度上的我们'}</span></h2>
          <HumanLifespan />
          <p className="lead" style={{marginTop:32}}>
            <T
              zh="大衡（Magni）观察人类外交的感受， 大致等同于你观察一群草履虫起草宪法。 这不是贬低；这是时间尺度的诚实事实。 所有条约偏袒长寿者——因为 等待本身就是他们最擅长的外交工具。"
              en="A Magni watching human diplomacy feels roughly the way you would feel watching a colony of paramecia draft a constitution. This is not contempt; it is the honest fact of timescales. Every treaty favours the long-lived — because <em>waiting</em> is the diplomatic tool they wield best."
            />
          </p>
        </section>

        <section>
          <div className="label">§ 04 · 2089</div>
          <h2><T zh="月背阵列的那一刻" en="The Moment We Knew" /><span className="en">{lang==='zh'?'The Moment We Knew':'月背阵列那一刻'}</span></h2>
          <div className="sp__two">
            <div>
              <p>
                <T
                  zh={<>2089 年 8 月，月球背面射电阵列检测到来自 82 G. Eridani 方向的窄带调制信号。 带宽 <span className="num">0.6 Hz</span>，持续 <span className="num">~47</span> 秒， 携带清晰的数学前缀（质数序列 + π 展开）。</>}
                  en={<>August 2089: the lunar far-side radio array detects a narrowband modulated signal toward 82 G. Eridani. Bandwidth <span className="num">0.6 Hz</span>, duration <span className="num">~47</span> s, with an unambiguous mathematical preamble (prime sequence + π expansion).</>}
                />
              </p>
              <p>
                <T
                  zh={<>那一秒之后人类再无“孤独宇宙”的选项。 从那时起至麦哲伦一号（Magellan I）抵达的 <span className="num">211</span> 年之间， “我们知道有邻居，但还没去过”的心理张力催生了 聚变推进、深空医学、跨物种语言学、行星法哲学—— 一整代学科的爆发。</>}
                  en={<>After that second, "lonely universe" was no longer an option. In the <span className="num">211</span> years between then and Magellan I's arrival, the psychic tension of "we know we have neighbours but haven't visited" generated fusion propulsion, deep-space medicine, xenolinguistics, planetary-law philosophy — an entire generational burst of disciplines.</>}
                />
              </p>
              <p>
                <T
                  zh={<><span className="num">2128</span>：首次贸易语广播（朝 82 G. Eri）。<br/> <span className="num">2170</span>：Starshot 级 0.2c 微探测器发射。<br/> <span className="num">2250</span>：麦哲伦一号（Magellan I）发射，0.1 c。<br/> <span className="num">2300</span>：人类-震族首次接触。</>}
                  en={<><span className="num">2128</span>: first Trade-Language broadcast (toward 82 G. Eri).<br/><span className="num">2170</span>: first Starshot-class 0.2 c micro-probes.<br/><span className="num">2250</span>: Magellan I launches at 0.1 c.<br/><span className="num">2300</span>: first contact with the Thavari.</>}
                />
              </p>
            </div>
            <div>
              <div style={{border:'1px solid var(--sp-rule)', padding:'24px', background:'#0a0e1a08'}}>
                <div className="label">CRISIS INVENTORY · 2600–3100</div>
                <table style={{width:'100%', marginTop:16, fontSize:12, borderCollapse:'collapse'}}>
                  <thead>
                    <tr style={{borderBottom:'1px solid var(--sp-rule)', textAlign:'left'}}>
                      <th style={{padding:'8px 4px', fontFamily:'var(--font-mono)'}}>#</th>
                      <th style={{padding:'8px 4px'}}><T zh="危机" en="Crisis" /></th>
                      <th style={{padding:'8px 4px', textAlign:'right', fontFamily:'var(--font-mono)'}}><T zh="起" en="From" /></th>
                      <th style={{padding:'8px 4px'}}><T zh="主题" en="Theme" /></th>
                    </tr>
                  </thead>
                  <tbody>
                    {[
                      ['A','集体人格','Collective Personhood','2470','何为人？','What is a person?'],
                      ['D','声窃分裂','Song Theft Schism','2598','何为身份？','What is identity?'],
                      ['F','断环',    'Ring-Breaking',     '2612','何为事故？','What is an accident?'],
                      ['B','干扰战争','Jamming War',       '2780','何为痛？','What is pain?'],
                      ['E','纯衡起义','Pure-Caste Rising', '2850','何为物种？','What is a species?'],
                      ['C','帐簿危机','Ledger Crisis',     '2944','何为未来生命？','What is future life?'],
                    ].map(r=>(
                      <tr key={r[0]} style={{borderBottom:'1px solid var(--sp-rule)'}}>
                        <td style={{padding:'8px 4px', fontFamily:'var(--font-mono)', color:'var(--sp-accent)'}}>{r[0]}</td>
                        <td style={{padding:'8px 4px'}}>{lang==='zh'?r[1]:r[2]}<span style={{display:'block', fontSize:10, opacity:0.6, fontStyle:'italic'}}>{lang==='zh'?r[2]:r[1]}</span></td>
                        <td style={{padding:'8px 4px', textAlign:'right', fontFamily:'var(--font-mono)'}}>{r[3]}</td>
                        <td style={{padding:'8px 4px', opacity:0.8}}>{lang==='zh'?r[4]:r[5]}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
                <p style={{fontSize:11, opacity:0.6, marginTop:12, lineHeight:1.65}}>
                  <T zh="六项具名危机中有五项直接涉及人类。我们到得晚，撞得多。"
                     en="Five of six named crises involve humans directly. We arrived late, and collided often." />
                </p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}

Object.assign(window, { PageHuman });