/* page-eoani.jsx */

function PageEoani({ nav }) {
  const { lang } = useLang();
  return (
    <div className="sp sp-eoani">
      <div className="sp__inner">
        <header className="sp__hero">
          <div>
            <div className="sp__kicker"><span className="rule" /><T zh="物种 01 · SPECIES 01" en="SPECIES 01 · 物种 01" /></div>
            <h1 className="sp__title breath">
              <T zh="衡族" en="Eoani" />
              <span className="en">{lang==='zh' ? 'Eoani · "the balanced"' : '衡族 · "the balanced"'}</span>
            </h1>
            <p className="sp__lede">
              <T
                zh={<>在一颗永远朝向红矮星的星球上，潮汐锁定造就了一道凝固的晨昏。<br/>衡族（Eoani）以热的梯度看见，以磁的方向记忆。<br/>他们的“一代”是你的十代——而他们花了一千年才学会让自己活到一千岁。</>}
                en={<>On a world that always faces its red dwarf, tidal lock froze a single dawn into geography.<br/>The Eoani see by gradients of heat and remember by directions of magnetic field.<br/>Their generation is ten of yours — and it took them a thousand years to learn how to live a thousand years.</>}
              />
            </p>
          </div>
          <div className="sp__hero-viz">
            <EoaniTidalLock w={480} h={380} />
          </div>
        </header>

        <FactRow items={lang==='zh' ? [
          { label: '母星',   val: 'Ross 128 b', note: 'M4V · 潮汐锁定' },
          { label: '距太阳', val: '11.0', unit: 'ly' },
          { label: '恒星年龄', val: '~9.5', unit: 'Gyr', note: '约地球年龄 2 倍' },
          { label: '主感官',  val: 'IR + B', note: '红外热视觉 · 磁感受' },
        ] : [
          { label: 'Host',    val: 'Ross 128 b', note: 'M4V · tidally locked' },
          { label: 'From Sol', val: '11.0', unit: 'ly' },
          { label: 'Star age', val: '~9.5', unit: 'Gyr', note: '~2× Earth\'s age' },
          { label: 'Senses',   val: 'IR + B', note: 'thermal vision · magnetoreception' },
        ]} />

        <section>
          <div className="label"><T zh="§ 01 · 感官包" en="§ 01 · Sensory package" /></div>
          <h2><T zh="红外热视觉与磁感受" en="Infrared & Magnetoreception" /><span className="en">{lang==='zh'?'Infrared & Magnetoreception':'红外热视觉与磁感受'}</span></h2>

          <div className="sp__two">
            <div>
              <p>
                <T
                  zh={<>衡族眼部的感光细胞在 <span className="num">3–14 μm</span> 窗口峰值响应，角分辨 ~<span className="num">0.1–0.5°</span>，热分辨达到 <span className="num">毫开尔文</span>量级。他们不是“看见热”——他们 <em>读</em> 热。一张脸上八个腺体的温差就是一段连续的情绪文本。</>}
                  en={<>Eoani retinal cells peak in the <span className="num">3–14 μm</span> window, angular resolution ~<span className="num">0.1–0.5°</span>, thermal resolution at the <span className="num">milli-kelvin</span> level. They don't "see heat" — they <em>read</em> it. The temperature deltas across eight facial glands form a continuous emotional text.</>}
                />
                <Src n={1}/>
              </p>
              <p>
                <T
                  zh="磁感受依赖隐花色素自由基对与内耳磁铁矿颗粒。从出生起，地磁北是一个“方向词”，像你的“上”和“前”一样基本——“迷失方向”在衡族语里需要借词才能说出。"
                  en="Magnetoreception runs on cryptochrome radical pairs and magnetite in the inner ear. Magnetic-north is a deictic word from birth, as primary as your “up” or “forward” — “disoriented” has no native Eoani term and must be borrowed."
                />
              </p>
              <div className="sp__sidenote">
                <span className="label">Heuristic</span>
                <T
                  zh="衡族页面禁用蓝青色调。衡族红外感官里这些波段不存在；给他们看冷光等同于给你看紫外——数据上有，感知上无。"
                  en="Blue/cyan tones are forbidden on Eoani pages. These bands don't exist in Eoani perception; showing them cold light is like showing you ultraviolet — present in data, absent in qualia."
                />
              </div>
            </div>
            <div>
              <EoaniMagneticField />
              <div style={{fontSize:11, fontFamily:'var(--font-mono)', opacity:0.6, marginTop:8, letterSpacing:'0.08em'}}>
                <T zh="磁场矢量场 · 慢速漂移 · Ross 128 b 局部" en="Magnetic vector field · slow drift · Ross 128 b local" />
              </div>
            </div>
          </div>
        </section>

        <section>
          <div className="label"><T zh="§ 02 · 母星" en="§ 02 · Home world" /></div>
          <h2><T zh="潮汐锁定的晨昏" en="The Frozen Terminator" /><span className="en">{lang==='zh'?'The Frozen Terminator':'潮汐锁定的晨昏'}</span></h2>
          <div className="sp__two">
            <div>
              <p>
                <T
                  zh={<>Ross 128 b 距主星 <span className="num">0.049 AU</span>，轨道周期 <span className="num">9.87</span> 天，自转与公转锁死。永昼面温度峰值 ~380 K，永夜面 ~95 K。文明沿一道宽约 400 公里的晨昏带展开——一个环绕全行星的生态走廊。</>}
                  en={<>Ross 128 b orbits at <span className="num">0.049 AU</span>, period <span className="num">9.87</span> d, spin and orbit locked. Day-side peak ~380 K; night-side ~95 K. Civilization runs along a ~400 km terminator strip — a ring-shaped ecological corridor.</>}
                />
              </p>
              <p>
                <T
                  zh="M4V 恒星的紫外暴发被局部磁层偏转。衡族（Eoani）的大型建筑通常朝永夜方向敞开（热辐射散热效率高），而将永昼方向作为“工业背面”。"
                  en="M4V UV flares are deflected by local magnetospheric pockets. Major Eoani structures open toward the night side (radiative cooling is efficient there) and treat the day side as their “industrial back.”"
                />
              </p>
              <p>
                <T zh="他们没有“日”这个时间单位。时间按潮汐-热脉冲与生育周期计。"
                   en="They have no “day” as a time unit. Time is counted in tide-thermal pulses and reproductive cycles." />
              </p>
            </div>
            <div>
              <EoaniTidalLock w={520} h={320} />
            </div>
          </div>
        </section>

        <section>
          <div className="label"><T zh="§ 03 · 衡格" en="§ 03 · The Eoan Measure" /></div>
          <h2><T zh="五层种姓与千年寿命" en="Caste & Lifespan" /><span className="en">{lang==='zh'?'Caste & Lifespan':'五层衡格'}</span></h2>
          <p className="lead">
            <T
              zh={<>衡格（the Eoan Measure）是衡族社会的五级生物-政治层级。寿命被维持而非遗传：依赖一条持续运转的试剂供应链与冷链物流。若基础设施崩溃，一代之内便退回 <span className="num">~150–300</span> 岁的自然上限。</>}
              en={<>The Eoan Measure is a five-tier biopolitical hierarchy. Lifespan is <em>maintained</em>, not inherited — dependent on a continuous reagent supply and cold-chain. If the infrastructure collapses, lifespan reverts within one generation to the natural ceiling of <span className="num">~150–300</span> years.</>}
            />
            <Src n={2}/>
          </p>
          <div className="caste">
            {(lang==='zh' ? [
              { zh:'大衡', en:'Magni',        span:'1000+ 年',  pop:'~0.3%' },
              { zh:'衡者', en:'Eoan Integri', span:'600–900 年', pop:'~9%' },
              { zh:'半衡', en:'Mediari',      span:'200–400 年', pop:'~28%' },
              { zh:'微衡', en:'Infra-Eoani',  span:'80–150 年',  pop:'~48%' },
              { zh:'失衡', en:'Ephemeri',     span:'30–60 年',   pop:'~14%' },
            ] : [
              { zh:'Magni',         en:'大衡',       span:'1000+ yr',  pop:'~0.3%' },
              { zh:'Eoan Integri',  en:'衡者',       span:'600–900 yr', pop:'~9%' },
              { zh:'Mediari',       en:'半衡',       span:'200–400 yr', pop:'~28%' },
              { zh:'Infra-Eoani',   en:'微衡',       span:'80–150 yr',  pop:'~48%' },
              { zh:'Ephemeri',      en:'失衡',       span:'30–60 yr',   pop:'~14%' },
            ]).map((c,i)=>{
              const w = [1,0.85,0.6,0.38,0.18][i];
              return (
                <div key={i} className="caste__row">
                  <div className="name">{c.zh}<span className="en">{c.en}</span></div>
                  <div className="bar" style={{width:`${w*100}%`, justifySelf:'center', opacity: 1 - i*0.12}}>
                    <span className="lifespan">{c.span}</span>
                  </div>
                  <div className="pop">{c.pop}</div>
                </div>
              );
            })}
          </div>
          <EoaniMillenniumSlider />
        </section>

        <section>
          <div className="label"><T zh="§ 04 · 千年视角的政治经济" en="§ 04 · Political economy at millennial horizon" /></div>
          <h2><T zh="折现率与世纪资本" en="Millennial Capital" /><span className="en">{lang==='zh'?'Millennial Capital':'折现率与世纪资本'}</span></h2>
          <div className="sp__two">
            <div>
              <p>
                <T
                  zh={<>皮凯蒂的 r &gt; g 在衡族尺度被放大到千年。资本不是代际传递—— 它是<em>同一个人</em>持续操作八百年的账户。大衡（Magni） 阶层的年折现率 ~<span className="num">0.01%</span>， 人类为 ~<span className="num">5%</span>——对同一座三百年才回本的桥， 两族的现值估算相差四个数量级。</>}
                  en={<>Piketty's r &gt; g, scaled to a millennium. Capital here is not generational — it is <em>one person</em>'s account, run for eight hundred years. Magni discount at ~<span className="num">0.01%</span>/yr; humans at ~<span className="num">5%</span>. For a bridge that pays back in three centuries, the two species' present-value estimates diverge by four orders of magnitude.</>}
                />
              </p>
              <p>
                <T
                  zh="这催生了未来年岁协约（the Covenant of Years Yet to Come）：人类以未来健康岁月为抵押向衡族借贷；衡族以“允许你活得更久”作为付息方式。道德哲学与金融技术在此合流。"
                  en="This produced the Covenant of Years Yet to Come: humans borrow from Eoani against their future healthy years; the Eoani repay interest by “letting you live longer.” Moral philosophy and financial engineering merge."
                />
              </p>
            </div>
            <div>
              <div className="sp__sidenote">
                <span className="label"><T zh="帐簿危机 · 2944–2990" en="Ledger Crisis · 2944–2990" /></span>
                <T
                  zh={<>人类对衡族长寿试剂原料的禁运， 导致约 <span className="num">80,000</span> 位大衡 在一代之内过早死亡—— 相当于抹去四十万年的累积记忆与契约。 此后未来年岁协约（Covenant）成为制度支柱。</>}
                  en={<>A human embargo on Eoani longevity-reagent precursors caused ~<span className="num">80,000</span> Magni to die prematurely within one generation — erasing the equivalent of four hundred thousand cumulative years of memory and contracts. The Covenant became a pillar in response.</>}
                />
              </div>
              <div className="sp__sidenote">
                <span className="label"><T zh="加涣衡系 · 潮衡" en="Huvari-introgressed lineage · Aushrani" /></span>
                <T
                  zh={<>公元 <span className="num">2210</span> 年起， 一系列携带涣族（Huvari）电感受基因的融合种姓出生。 纯衡称其为失衡（Ephemeri）的变种； <span className="num">2380</span> 年双华妥协（Two-Bloom Accord） 承认潮衡（Aushrani）为第四种姓。</>}
                  en={<>From <span className="num">2210</span> CE, lineages carrying Huvari electroreceptive genes began to be born. Pure-Eoani classified them as variants of the Ephemeri caste; the <span className="num">2380</span> Two-Bloom Accord recognised the Aushrani as a fourth tier.</>}
                />
              </div>
            </div>
          </div>
        </section>

        <section>
          <div className="label"><T zh="§ 05 · 命名三阶段" en="§ 05 · Three names, one people" /></div>
          <h2><T zh="从熒族到潮衡" en="From Aúsari to Aushrani" /><span className="en">{lang==='zh'?'Three Names for One People':'三个名字，一个民族'}</span></h2>
          <NamingTimeline />
        </section>

      </div>
    </div>
  );
}

function NamingTimeline() {
  const { lang } = useLang();
  const phases = lang==='zh' ? [
    { zh:'熒族', en:'Aúsari', era:'前长寿时代', span:'< 自然 150 岁', t:'发光者、萤火。自然寿命时期，以磁感受与红外导航。', x:0 },
    { zh:'衡族', en:'Eoani',  era:'千年长寿后', span:'30 – 1300 岁', t:'均衡者。衡格五层建立，寿命成为社会契约。',         x:0.42 },
    { zh:'潮衡', en:'Aushrani', era:'涣族基因融合后', span:'80 – 400 岁', t:'双潮者。携带电感受基因的第四种姓。',            x:0.82 },
  ] : [
    { zh:'Aúsari',   en:'熒族',   era:'Pre-longevity',     span:'< natural 150 yr', t:'"The luminous." Natural lifespan; navigation by magnetoreception and IR.', x:0 },
    { zh:'Eoani',    en:'衡族',   era:'Post-millennial longevity', span:'30 – 1300 yr', t:'"The balanced." The five-tier Measure is founded; lifespan becomes a social contract.', x:0.42 },
    { zh:'Aushrani', en:'潮衡',   era:'Post-Huvari introgression', span:'80 – 400 yr', t:'"Twice-tided." Fourth tier; carry electroreceptive genes.', x:0.82 },
  ];
  return (
    <div style={{marginTop:40, position:'relative'}}>
      <div style={{position:'relative', height:3, background:'#f5e6d322', margin:'0 40px'}}>
        {phases.map(p => (
          <div key={p.en} style={{position:'absolute', left:`${p.x*100}%`, top:-6, width:14, height:14, background:'#e8821f', border:'2px solid #1a0e0a', borderRadius:'50%'}} />
        ))}
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:48, marginTop:40}}>
        {phases.map(p => (
          <div key={p.en}>
            <div className="label" style={{color:'var(--sp-accent)'}}>{p.era}</div>
            <div style={{fontFamily:'var(--font-serif-cjk)', fontSize:32, marginTop:8, fontWeight:500}}>
              {p.zh}
              <span style={{fontFamily:'var(--font-serif-latin)', fontStyle:'italic', fontSize:20, opacity:0.55, marginLeft:10}}>{p.en}</span>
            </div>
            <div style={{fontFamily:'var(--font-serif-latin)', fontSize:14, opacity:0.7, marginTop:4}}>{p.span}</div>
            <p style={{marginTop:12, fontSize:14}}>{p.t}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { PageEoani });