/* page-home.jsx */

function PageHome({ nav }) {
  const { lang } = useLang();
  return (
    <div className="home">
      <header className="home__hero">
        <div>
          <div className="label"><T zh="缓约 · 多物种宇宙" en="SLOW COMPACT · A Five-Species Universe" /></div>
          <h1><T zh="缓约" en="Slow Compact" /></h1>
          <div className="sub">
            <T
              zh="在 25 光年 × 50 光年的恒星透镜里，五个文明用五种感官触及彼此。没有曲速、没有心灵感应、没有魔法——只有聚变慢船、无线电延迟、千年的耐心，以及五种从根本上不可互译的感知世界。"
              en="Inside a 25 ly × 50 ly stellar lens, five civilisations reach each other through five different senses. No warp, no telepathy, no magic — only fusion slow-ships, radio lag, millennial patience, and five fundamentally untranslatable sensory worlds." />
          </div>
        </div>
        <aside className="aside">
          <dl>
            <dt>Canon</dt><dd>v4.2 · 2026</dd>
            <dt><T zh="尺度" en="Scale" /></dt><dd><T zh="25 × 50 光年 · ~100 恒星" en="25 × 50 ly · ~100 stars" /></dd>
            <dt><T zh="叙事跨度" en="Narrative span" /></dt><dd><T zh="公元 1712 – 4500" en="CE 1712 – 4500" /></dd>
            <dt><T zh="物种数" en="Species" /></dt><dd>5</dd>
            <dt><T zh="危机代号" en="Crisis codes" /></dt><dd>A · B · C · D · E · F</dd>
            <dt><T zh="制度支柱" en="Institutional pillars" /></dt><dd>I · II · III · IV · V</dd>
          </dl>
        </aside>
      </header>

      <section>
        <div className="label"><T zh="§1 · 选一副感官" en="§1 · Pick a sensory world" /></div>
        <h2><T zh="物种选择器" en="Species Selector" /><span className="en">{lang==='zh'?'Species Selector':'物种选择器'}</span></h2>
        <div className="selector">
          {SPECIES.map(s => (
            <button key={s.id} className="selector__card" onClick={() => nav(s.path)}>
              <div className="viz"><HomeCardViz id={s.id} /></div>
              <h3>{lang==='zh'?s.zh:s.en}<span className="en">{lang==='zh'?s.en:s.zh}</span></h3>
              <div className="meta">
                <span>{lang==='zh'?s.hostZh:s.hostEn}</span>
                <span><span className="num">{s.ly.toFixed(1)}</span> ly · {s.star}</span>
              </div>
              <div className="blurb">{lang==='zh'?s.blurbZh:s.blurbEn}</div>
            </button>
          ))}
        </div>
      </section>

      <section>
        <div className="label"><T zh="§2 · 谁何时以何种方式遇见了谁" en="§2 · Who met whom, when, how" /></div>
        <h2><T zh="接触矩阵" en="Contact Matrix" /><span className="en">{lang==='zh'?'Contact Matrix':'接触矩阵'}</span></h2>
        <div className="matrix">
          <MatrixGrid />
          <MatrixLegend />
        </div>
      </section>

      <section>
        <div className="label"><T zh="§3 · 三千年的接触史" en="§3 · Three millennia of contact" /></div>
        <h2><T zh="时间线" en="Timeline" /><span className="en">1700 – 4500</span></h2>
        <p style={{opacity:0.7, fontSize:14, marginTop:4, maxWidth:720}}>
          <T zh="横向滚动。固定节点以圆点标出；危机时代紧接合作时代。" en="Scroll horizontally. Pinned events are dotted; crisis eras run flush with cooperation eras." />
        </p>
        <Timeline />
      </section>

      <section>
        <div className="label"><T zh="§4 · 当前张力" en="§4 · Live tensions" /></div>
        <h2><T zh="故事引擎" en="Story Engines" /><span className="en">{lang==='zh'?'Story Engines':'故事引擎'}</span></h2>
        <p style={{opacity:0.7, fontSize:14, marginTop:4, maxWidth:720}}>
          <T zh="十张活跃引擎 + 三张已解决引擎（灰色）。点击任一物种标签跳入该族页。" en="Ten live engines plus three resolved (grey). Each tag links into a species page." />
        </p>
        <div className="engines">
          {ENGINES.map(e => (
            <article key={e.id} className={'engine' + (String(e.id).match(/^[A-Z]$/) ? ' resolved' : '')}>
              <div className="engine__num">ENGINE · {String(e.id).padStart(2, '0')}</div>
              <div className="engine__name">
                {lang==='zh'?e.zh:e.en}
                <span className="en">{lang==='zh'?e.en:e.zh}</span>
              </div>
              <p>{lang==='zh'?e.tZh:e.tEn}</p>
              <div className="engine__tags">
                {(lang==='zh'?e.tags.zh:e.tags.en).map(t => <span key={t} className="tag">{t}</span>)}
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="creed">
        <div className="label"><T zh="§5 · 项目纲领" en="§5 · Manifesto" /></div>
        <div>
          <p>
            <strong><T zh="真实物理。" en="Real physics. " /></strong>
            <T zh="没有超光速。星际距离以光年计；接触跨度以世纪计。唯一的信使是电磁波与物质——两者都慢。"
               en="No FTL. Interstellar distances are measured in light-years; contact arcs in centuries. The only messengers are electromagnetic waves and matter — both slow." />
          </p>
          <p>
            <strong><T zh="感官非对称。" en="Sensory asymmetry. " /></strong>
            <T zh="每个物种有一套原生感官，塑造其数学、建筑、法律、诗歌。翻译永远有损。当任意两族沟通时，总有一方在“自己的第二母语”里。"
               en="Each species has a native sensorium that shapes its mathematics, architecture, law, poetry. Translation is always lossy. In any pair, at least one side speaks in its second language." />
          </p>
          <p>
            <strong><T zh="寿命非对称。" en="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 traces to a moment when this asymmetry was ignored." />
          </p>
          <p>
            <strong><T zh="冲突源自真实动力学。" en="Conflict from real dynamics. " /></strong>
            <T zh="不是“坏人”做坏事，而是不同感官-寿命-经济结构的文明在同一个宇宙里无意互相伤害。我们研究这些伤害如何被制度化解。"
               en="Not villains, but civilisations with different sensoria, lifespans, and economies inadvertently harming one another in shared space. We study how those harms get institutionalised — and undone." />
          </p>
        </div>
        <div style={{textAlign:'right'}}>
          <button className="label" onClick={() => nav('/about')}><T zh="阅读全文 →" en="Read the full brief →" /></button>
        </div>
      </section>
    </div>
  );
}

function MatrixGrid() {
  const { lang } = useLang();
  const lookup = {};
  CONTACT_EVENTS.forEach(e => {
    lookup[e.a + '_' + e.b] = e; lookup[e.b + '_' + e.a] = e;
  });
  return (
    <div className="matrix__grid">
      <div className="hdr" />
      {SPECIES.map(s => (
        <div key={s.id} className="hdr">{lang==='zh'?s.zh:s.en}<span className="en">{lang==='zh'?s.en:s.zh}</span></div>
      ))}
      {SPECIES.map(row => (
        <React.Fragment key={row.id}>
          <div className="hdr row-hdr">{lang==='zh'?row.zh:row.en}</div>
          {SPECIES.map(col => {
            if (row.id === col.id) return <div key={col.id} className="cell-self" />;
            const e = lookup[row.id + '_' + col.id];
            if (!e) return <div key={col.id} className="cell-none">—</div>;
            return (
              <div key={col.id} className={'cell-evt' + (e.hot ? ' hot' : '')}>
                <span className="yr">{e.year}</span>
                <span className="mode">{lang==='zh'?e.label.zh:e.label.en}</span>
                <div className="mode" style={{opacity:0.7}}>{lang==='zh'?e.sub.zh:e.sub.en}</div>
              </div>
            );
          })}
        </React.Fragment>
      ))}
    </div>
  );
}

function MatrixLegend() {
  const { lang } = useLang();
  const pins = [
    { y: 1712, zh: '涣族探测到 Ross 128 方向的废热与脉冲无线电异常。', en: 'Huvari detect waste heat and pulsed radio toward Ross 128.' },
    { y: 1791, zh: '涣族-衡族双向无线电确认。五族史的零点。', en: 'Huvari–Eoani two-way radio handshake. Year zero of five-species history.' },
    { y: 2089, zh: '月背阵列确认来自 82 G. Eri 的窄带调制——人类首次确知不孤独。', en: 'Lunar far-side array confirms narrowband modulation from 82 G. Eri — humans first know they\'re not alone.' },
    { y: 2180, zh: '涣族-衡族首次物理会面，Ross 128 b 轨道。', en: 'Huvari–Eoani first physical meeting, Ross 128 b orbit.' },
    { y: 2300, zh: '人类熔探《麦哲伦一号》穿透冰壳，与震族首次接触。', en: 'Human melt-probe Magellan Ⅰ pierces the ice shell — first contact with Thavari.' },
    { y: 2500, zh: '五方协议——所有五族首次书面相互承认。', en: 'The Five-Party Accord — first written mutual recognition.' },
  ];
  return (
    <aside className="matrix__legend">
      <h4><T zh="关键节点" en="Anchor points" /></h4>
      <ul>
        {pins.map(p => (
          <li key={p.y}>
            <span className="yr">{p.y}</span>
            <span>{lang==='zh'?p.zh:p.en}</span>
          </li>
        ))}
      </ul>
      <p style={{fontSize:12, opacity:0.65, lineHeight:1.65, marginTop:24}}>
        <T zh="灰色斜线表示同族对角。空格表示尚未直接接触（经由中继联络）。注意：物理抵达的延迟远大于无线电联络—— 0.1 c 飞船需要 50–210 年到达任何邻居。"
           en="Diagonal cells are own-species. Empty cells mean no direct contact (relay only). Physical arrival lags radio by far — a 0.1 c ship needs 50–210 yr to reach any neighbour." />
      </p>
    </aside>
  );
}

function Timeline() {
  const { lang } = useLang();
  const min = 1700, max = 4550;
  const scale = y => ((y - min) / (max - min)) * 1700 + 40;
  const vertical = TIMELINE_EVENTS.map((e, i) => ({ ...e, top: 60 + (i % 4) * 82 }));
  return (
    <div className="timeline">
      <div className="timeline__inner" style={{ height: 460 }}>
        <div className="timeline__axis" style={{ marginTop: 420 }}>
          {[1700, 1800, 2000, 2200, 2400, 2600, 2800, 3000, 3200, 3600, 4000, 4500].map(y => (
            <div key={y} className="timeline__tick" style={{ left: `${scale(y)}px` }}>
              <span className="y">{y}</span>
            </div>
          ))}
        </div>
        {vertical.map(e => {
          const txt = lang === 'zh' ? e.zh : e.en;
          return (
            <div key={e.year + txt.t} className="timeline__event"
                 style={{ left: `${scale(e.year)}px`, top: `${e.top}px` }}>
              <div className="dot" style={e.pin ? { background: 'var(--eoani)' } : {}} />
              <span className="yr">{e.year}</span>
              <div style={{fontWeight:500, marginTop:2}}>{txt.t}</div>
              <div style={{opacity:0.65, marginTop:2}}>{txt.d}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { PageHome });