/* page-thavari.jsx */

function PageThavari({ nav }) {
  const { lang } = useLang();
  const [epoch, setEpoch] = React.useState(40);
  const pre = epoch < 50;
  return (
    <div className="sp sp-thavari">
      <div className="sp__inner">
        <header className="sp__hero">
          <div>
            <div className="sp__kicker"><span className="rule" /><T zh="物种 04 · SPECIES 04" en="SPECIES 04 · 物种 04" /></div>
            <h1 className="sp__title"><T zh="震族" en="Thavari" /><span className="en">{lang==='zh'?'Thavari · the strain-readers':'震族 · the strain-readers'}</span></h1>
            <p className="sp__lede">
              <T
                zh={<>震族（Thavari）住在一颗冰卫星的地下海洋。<br/>几公里厚的冰壳之上是他们无法看见、无法听见、无法触及的整个宇宙。<br/>他们从潮汐的应变里推断出宿主巨行星的存在——比任何望远镜都早。<br/>公元 <span className="num">2300</span> 年，一艘人类熔探穿透了冰壳。</>}
                en={<>The Thavari live in the sub-glacial ocean of an ice moon.<br/>Above several kilometres of shell sits an entire universe they cannot see, hear, or touch.<br/>They inferred their host gas giant from tidal strain alone — earlier than any telescope.<br/>In <span className="num">2300 CE</span>, a human melt-probe pierced the shell.</>}
              />
            </p>
          </div>
          <div className="sp__hero-viz" style={{display:'flex', alignItems:'center', justifyContent:'center'}}>
            <ThavariTensorRose w={340} h={340} />
          </div>
        </header>

        <FactRow items={lang==='zh' ? [
          { label: '母星',   val: '波江 ε · 冰卫星', note: 'K2V · ~8 亿年' },
          { label: '距太阳', val: '10.5', unit: 'ly' },
          { label: '栖地',   val: '地下海',  note: '冰壳 ~4.2 km' },
          { label: '主感官',  val: 'σᵢⱼ + IR', note: '张量应变 · 暗光' },
        ] : [
          { label: 'Host',     val: 'Eps Eri · ice moon', note: 'K2V · ~0.8 Gyr' },
          { label: 'From Sol', val: '10.5', unit: 'ly' },
          { label: 'Habitat',  val: 'sub-glacial sea',    note: 'shell ~4.2 km' },
          { label: 'Senses',   val: 'σᵢⱼ + IR',           note: 'strain tensor · dim light' },
        ]} />

        <section>
          <div className="label"><T zh="§ 01 · 感官包" en="§ 01 · Sensory package" /></div>
          <h2><T zh="振动、张量、暗光" en="Vibration, Tensor, Dim Light" /><span className="en">{lang==='zh'?'Vibration, Tensor, Dim Light':'振动、张量、暗光'}</span></h2>
          <div className="sp__two">
            <div>
              <p>
                <T
                  zh={<>震族（Thavari）的主感官是六维应变张量 σ<sub>ij</sub>—— 皮肤每一点同时读出六个独立分量。 这意味着他们的本能是张量微积分； 一位结环师（Ring-Knotter）能凭触觉解一个七阶偏微分方程。</>}
                  en={<>The primary Thavari sense is the six-component strain tensor σ<sub>ij</sub> — every patch of skin reads six independent components at once. Tensor calculus is therefore <em>instinctive</em>; a Ring-Knotter can solve a seventh-order PDE by touch.</>}
                />
              </p>
              <p>
                <T
                  zh={<>次要感官是暗光视觉：<span className="num">4 μm</span> 热液喷口的暗橙红辐射， 与 <span className="num">440–500 nm</span> 共生生物的蓝绿发光。 他们有光觉，但光在他们的认知里只是“稀有的甜味”，不是真相的媒介。</>}
                  en={<>Secondary is dim-light vision: dull-orange <span className="num">4 μm</span> radiation from hydrothermal vents and the blue-green <span className="num">440–500 nm</span> bioluminescence of symbionts. They <em>have</em> sight, but light is "a rare sweetness" in their cognition — not the medium of truth.</>}
                />
              </p>
              <div className="sp__sidenote">
                <span className="label">Heuristic</span>
                <T
                  zh="震族（Thavari）页面禁用亮白底。亮度差应远低于其他物种页；亮点稀疏、点状。阅读此页应该像在深海里看见浮游光。"
                  en="Bright white backgrounds are forbidden on Thavari pages. Luminance contrast must be far lower than other species pages; bright points are sparse and point-like. Reading should feel like seeing plankton-light in the deep."
                />
              </div>
            </div>
            <div>
              <ThavariOctothrone />
              <div className="label" style={{marginTop:8, textAlign:'center', color:'var(--sp-biolume)'}}><T zh="OCTOTHRONE · 八位协调认知" en="OCTOTHRONE · eight-bodied synchrony" /></div>
            </div>
          </div>
        </section>

        <section>
          <div className="label"><T zh="§ 02 · 本体论" en="§ 02 · Ontology" /></div>
          <h2><T zh="贝叶斯逆问题即感知" en="Bayesian Inversion as Perception" /><span className="en">{lang==='zh'?'Bayesian Inversion as Perception':'感知即逆问题'}</span></h2>
          <p className="lead">
            <T
              zh={<>你“看”到一只苹果——震族（Thavari）会说你偷懒了。 在他们眼里，感知永远是一个逆问题： 从局部振动数据推断全局结构。 他们的语言里，认为（believe）与测量（measure）是同一个词， 并携带一个必然附加的“后验概率”。</>}
              en={<>You "see" an apple — the Thavari would call this lazy. To them, perception is <em>always</em> an inverse problem: inferring global structure from local vibration. In their language, "believe" and "measure" are one word, and it carries an inseparable posterior probability.</>}
            />
          </p>
          <p>
            <T
              zh={<>他们从未“发现”概率论——它是他们的语法。 当人类在 <span className="num">2300</span> 年带来“确定的视觉证据”时， 震族（Thavari）礼貌但真诚地问： “你的先验是什么？”</>}
              en={<>They never <em>discovered</em> probability — it is their grammar. When humans brought "certain visual evidence" in <span className="num">2300</span>, the Thavari asked, politely and sincerely: <em>"What is your prior?"</em></>}
            />
          </p>
        </section>

        <section>
          <div className="label"><T zh="§ 03 · 集体认知" en="§ 03 · Collective cognition" /></div>
          <h2><T zh="八位环" en="Octothrones" /><span className="en">{lang==='zh'?'Octothrones · "A Person is Eight"':'"一人即八"'}</span></h2>
          <div className="sp__two">
            <div>
              <p>
                <T
                  zh="一个标准的震族（Thavari）决策单位是八人协调认知—— 共同的发光焦点支撑“集体感知为真理”的文化本体。 单个个体被视为半人（half-person）； 法律、艺术、记忆都以八为最小单元。"
                  en="A standard Thavari decision unit is an eight-body synchrony — a shared luminous focal point grounds the cultural ontology that collective perception is truth. A single individual is a <em>half-person</em>. Law, art, and memory take eight as their atomic unit."
                />
              </p>
              <p>
                <T
                  zh="这是集体人格危机（Collective Personhood Crisis）（危机 A）的源头—— 人类个体主义法律将八个协调认知视为“八个人”； 而一位震族（Thavari）的自我感是其余七位的叠加态。 当人类刑法“只处罚一个人”时，等同于切断八根神经中的一根。"
                  en={<>This is the root of the Collective Personhood Crisis (Crisis A). Human individualist law treats an eight-body synchrony as “eight people”; but a Thavari's sense of self is a superposition of the other seven. Punishing only one is equivalent to severing one of eight nerves.</>}
                />
              </p>
              <p>
                <T
                  zh={<>断环（Ring-Breaking）（危机 F）发生于 <span className="num">2612</span> 年—— 涣族（Huvari）工程实验的 EM 脉冲 意外使一个八位环（Octothrone）的同步丧失， 导致八位同时发疯。 此后环-同意协议（Ring-Consent Protocol）（支柱 I）建立。</>}
                  en={<>Ring-Breaking (Crisis F) occurred in <span className="num">2612</span> — a Huvari engineering pulse desynchronised an Octothrone, sending all eight bodies simultaneously psychotic. The Ring-Consent Protocol (Pillar I) followed.</>}
                />
              </p>
            </div>
            <div>
              <div style={{border:'1px solid var(--sp-rule)', padding:'20px 24px', background:'#ffc80008'}}>
                <div className="label" style={{color:'var(--sp-biolume)', opacity:1}}><T zh="震族等级" en="Thavari ranks" /></div>
                <table style={{width:'100%', marginTop:16, fontSize:13, borderCollapse:'collapse'}}>
                  <tbody>
                    {(lang==='zh' ? [
                      ['中环者','Mid-Ring'],['八位','Octothrone'],['结环师','Ring-Knotter'],['凿音者','Chisel-Voice']
                    ] : [
                      ['Mid-Ring','中环者'],['Octothrone','八位'],['Ring-Knotter','结环师'],['Chisel-Voice','凿音者']
                    ]).map((r,i)=>(
                      <tr key={i}>
                        <td style={{padding:'8px 0', borderTop: i?'1px solid var(--sp-rule)':'none'}}>{r[0]}</td>
                        <td style={{padding:'8px 0', textAlign:'right', fontFamily:'var(--font-mono)', opacity:0.7, borderTop: i?'1px solid var(--sp-rule)':'none'}}>{r[1]}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
                <p style={{fontSize:12, opacity:0.7, marginTop:16, lineHeight:1.7}}>
                  <T
                    zh={<>自然寿命 <span className="num">250–600</span> 年（四族最长）； 工程化仅小幅提升至 <span className="num">800–1000</span> 年—— 他们的代谢本就缓慢。</>}
                    en={<>Natural lifespan <span className="num">250–600</span> yr (longest of the four non-engineered species); engineered uplift only to <span className="num">800–1000</span> yr — their metabolism was already slow.</>}
                  />
                </p>
              </div>
            </div>
          </div>
        </section>

        <section>
          <div className="label"><T zh="§ 04 · 母世界" en="§ 04 · Home world" /></div>
          <h2><T zh="冰壳之下" en="Beneath the Shell" /><span className="en">{lang==='zh'?'Beneath the Shell':'冰壳之下'}</span></h2>
          <ThavariIceShell />
          <p className="lead" style={{marginTop:32}}>
            <T
              zh="经数公里厚冰壳不发射 EM 信号——震族（Thavari）长期处于其他物种的雷达盲区。他们没有广播过；他们只是推断着整个宇宙。"
              en="Several kilometres of ice mean no escaping EM — the Thavari sat in the others' radar blind spot for ages. They never broadcast; they merely inferred the entire universe."
            />
          </p>
        </section>

        <div className="ice-divider">
          <div className="ice-divider__label">— <T zh="冰壳" en="ICE SHELL" /> · <em>{lang==='zh'?'ICE SHELL':'冰壳'}</em> · ontological threshold —</div>
        </div>

        <section style={{paddingTop:24}}>
          <div className="label"><T zh="§ 05 · 本体论分水岭" en="§ 05 · Ontological watershed" /></div>
          <h2><T zh="破冰前 · 破冰后" en="Before & After the Break" /><span className="en">{lang==='zh'?'Before & After the Break':'破冰前后'}</span></h2>

          <div className="epoch-slider">
            <div className="epoch-slider__label">
              <span><T zh="破冰前 · INFERRED" en="BEFORE · INFERRED" /></span>
              <span><T zh="破冰后 · SEEN" en="AFTER · SEEN" /></span>
            </div>
            <input type="range" min="0" max="100" value={epoch} onChange={e => setEpoch(+e.target.value)} />

            <div className="epoch-slider__readout">
              <div>
                <h4><T zh="宇宙的来源" en="Source of the universe" /></h4>
                <p>{lang==='zh' ? (pre
                  ? '从潮汐应变、冰层共振、底层矿物梯度反演出来的——一个被贝叶斯后验精细校准的"几乎确定的宇宙"。'
                  : '通过熔探舱上传的光学与无线电数据——一个具象、刺眼、但带来许多意料之外边缘的宇宙。')
                  : (pre
                  ? 'Inverted from tidal strain, ice resonance, and basal mineral gradients — a "near-certain universe" finely tuned by Bayesian posteriors.'
                  : 'Uploaded optical and radio data from the melt-probe — concrete, glaring, and bringing many unexpected edges.')}
                </p>
              </div>
              <div>
                <h4><T zh="宿主巨行星" en="Host gas giant" /></h4>
                <p>{lang==='zh' ? (pre
                  ? '[推断] 质量 ~0.7 M♃，轨道 ~6.3 d，由潮汐加热的年度调制推得。'
                  : '[亲见] 质量 0.68 M♃，带有一道黯淡的环——冰层下从未想象到的装饰。')
                  : (pre
                  ? '[Inferred] mass ~0.7 M♃, period ~6.3 d, derived from annual modulation of tidal heating.'
                  : '[Seen] mass 0.68 M♃, wearing a dim ring — a decoration never imagined under the ice.')}
                </p>
              </div>
              <div>
                <h4><T zh="认知权威" en="Epistemic authority" /></h4>
                <p>{lang==='zh' ? (pre
                  ? '结环师的张量反演被视为最可信的真相源。'
                  : '人类提供的"视觉证据"引起广泛怀疑——被要求提交先验与方法论。')
                  : (pre
                  ? 'A Ring-Knotter\'s tensor inversion is the most trusted source of truth.'
                  : 'Human "visual evidence" raises widespread suspicion — priors and methodology are demanded.')}
                </p>
              </div>
              <div>
                <h4><T zh="焦虑源" en="Source of anxiety" /></h4>
                <p>{lang==='zh' ? (pre
                  ? '"有没有我们推断不到的东西？"——这是震族形而上学的核心问题。'
                  : '"现在我们亲见了——那些仍然推断不到的东西怎么办？"——焦虑被放大。')
                  : (pre
                  ? '"Is there anything we cannot infer?" — the central question of Thavari metaphysics.'
                  : '"Now that we have seen — what about what we still cannot infer?" — the anxiety is amplified.')}
                </p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}

Object.assign(window, { PageThavari });