/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

// ===== Services / Four Modules =====
function Services() {
  const cards = [
    {
      idx: 'M-01 · MILKY WAY', en: 'COMMAND CENTER', zh: '控制中心',
      desc: '代號取自銀河系，象徵系統核心匯流節點。彙整災區所有受困者的生理數據與位置，可視化儀表板並接收氣象署 PWS 警報，於強震後主動發送 LoRa 長前導碼喚醒深層信標。',
      specs: [
        ['核心', 'Raspberry Pi 5'],
        ['無線', 'SX1262 · 433MHz'],
        ['天線', '高增益全向'],
        ['上連', 'PWS / CBS'],
      ],
      icon: (
        <svg viewBox="0 0 64 64" fill="none">
          <rect x="6" y="20" width="52" height="34" stroke="#1d6fe0" strokeWidth="0.7" />
          <line x1="6" y1="28" x2="58" y2="28" stroke="#1d6fe0" strokeWidth="0.5" />
          <circle cx="11" cy="24" r="1.2" fill="#e8401b" />
          <circle cx="15" cy="24" r="1.2" fill="#ffb547" />
          <circle cx="19" cy="24" r="1.2" fill="#4ddca8" />
          <path d="M14 36 L22 36 L26 32 L30 40 L34 34 L38 36 L50 36" stroke="#1d6fe0" strokeWidth="0.7" fill="none" />
          <path d="M32 6 L32 14 M28 10 L36 10 M26 8 L38 12" stroke="#1d6fe0" strokeWidth="0.7" />
          <circle cx="32" cy="6" r="1.5" fill="#1d6fe0" />
        </svg>
      ),
    },
    {
      idx: 'M-02 · ANDROMEDA', en: 'RESCUE BEACON', zh: '生存信標背包',
      desc: '代號取自仙女星系，象徵距離遠但可独立運作之關鍵節點。整合於避難背包，平時低功耗休眠，災後由控制中心喚醒或偵測震動自動啟動。',
      specs: [
        ['控制器', 'ESP32-S3 DUAL'],
        ['LoRa', 'SX1262'],
        ['UWB', 'BU04 / DW3000'],
        ['待機', '0.1 mA · 1 年'],
      ],
      icon: (
        <svg viewBox="0 0 64 64" fill="none">
          <path d="M22 18 L22 12 Q22 8 26 8 L38 8 Q42 8 42 12 L42 18" stroke="#1d6fe0" strokeWidth="0.7" />
          <rect x="14" y="18" width="36" height="38" rx="2" stroke="#1d6fe0" strokeWidth="0.7" />
          <rect x="20" y="26" width="24" height="14" stroke="#1d6fe0" strokeWidth="0.5" strokeDasharray="2 2" />
          <line x1="32" y1="6" x2="32" y2="2" stroke="#1d6fe0" strokeWidth="0.7" />
          <circle cx="32" cy="2" r="1.2" fill="#1d6fe0">
            <animate attributeName="opacity" from="1" to="0.2" dur="1.5s" repeatCount="indefinite" />
          </circle>
          <circle cx="32" cy="48" r="3" fill="none" stroke="#e8401b" strokeWidth="0.7" />
          <circle cx="32" cy="48" r="1.2" fill="#e8401b" />
        </svg>
      ),
    },
    {
      idx: 'M-03 · BYOD', en: 'BIOMETRIC WATCH', zh: '智慧手錶生理感知',
      desc: '採 BYOD（Bring Your Own Device）概念，不歸屬於系統硬體。直接利用受困者手腕上的既有設備，提供最直觀準確的心率與血氧數據，作為檢傷分類的第一優先權重。',
      specs: [
        ['感測', 'PPG · 心率 / SpO₂'],
        ['連線', 'BLE 5.0'],
        ['規格', 'Heart Rate Profile'],
        ['機型', 'Garmin · Apple'],
      ],
      icon: (
        <svg viewBox="0 0 64 64" fill="none">
          <rect x="22" y="20" width="20" height="24" rx="3" stroke="#1d6fe0" strokeWidth="0.7" />
          <rect x="24" y="22" width="16" height="20" rx="2" stroke="#1d6fe0" strokeWidth="0.5" />
          <path d="M22 20 L22 14 Q22 10 26 10 L38 10 Q42 10 42 14 L42 20" stroke="#1d6fe0" strokeWidth="0.7" />
          <path d="M22 44 L22 50 Q22 54 26 54 L38 54 Q42 54 42 50 L42 44" stroke="#1d6fe0" strokeWidth="0.7" />
          <path d="M27 32 L30 32 L31 28 L33 36 L35 32 L37 32" stroke="#e8401b" strokeWidth="0.7" />
          <text x="32" y="42" fill="#1d6fe0" fontSize="3" textAnchor="middle" fontFamily="JetBrains Mono">88BPM</text>
        </svg>
      ),
    },
    {
      idx: 'M-04 · CYGNUS X-1', en: 'RESCUE RADAR', zh: '搜救員手持雷達',
      desc: '代號取自天鵝座 X-1 黑洞，象徵主動探測之吸引特性。提供第一線搜救人員「最後十公尺」精確引導，解決 GPS 於災難環境失效的問題。',
      specs: [
        ['UWB', 'BU04 / PDOA'],
        ['精度', '4.2 cm 視距'],
        ['顯示', 'OLED 0.96"'],
        ['外殼', 'ABS · 非金屬'],
      ],
      icon: (
        <svg viewBox="0 0 64 64" fill="none">
          <rect x="18" y="14" width="28" height="36" rx="2" stroke="#1d6fe0" strokeWidth="0.7" />
          <rect x="22" y="18" width="20" height="14" stroke="#1d6fe0" strokeWidth="0.5" />
          <path d="M32 25 L32 20 M28 24 L36 24" stroke="#e8401b" strokeWidth="0.7" />
          <polygon points="32,20 30,25 34,25" fill="#e8401b" />
          <text x="32" y="30" fill="#1d6fe0" fontSize="2.5" textAnchor="middle" fontFamily="JetBrains Mono">4.2m</text>
          <circle cx="26" cy="40" r="1.5" stroke="#1d6fe0" strokeWidth="0.5" />
          <circle cx="32" cy="40" r="1.5" stroke="#1d6fe0" strokeWidth="0.5" />
          <circle cx="38" cy="40" r="1.5" stroke="#1d6fe0" strokeWidth="0.5" />
          <rect x="28" y="50" width="8" height="6" stroke="#1d6fe0" strokeWidth="0.5" />
        </svg>
      ),
    },
  ];

  return (
    <section id="system">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <span className="label">[ 02 ]</span>
            <span className="label">/ 四大模組系統</span>
          </div>
          <h2 className="h2 reveal">
            四個模組，<br />
            一條穿透廢墟的生命線。
          </h2>
        </div>
      </div>

      <div className="container">
        <div className="services-grid reveal-stagger">
          {cards.map((c) => (
            <article key={c.idx} className="service-card" data-hover>
              <div className="idx">{c.idx}</div>
              <div className="icon">{c.icon}</div>
              <h3>
                <span className="en">{c.en}</span>
                <span className="zh">{c.zh}</span>
              </h3>
              <p className="desc">{c.desc}</p>
              <div className="specs">
                {c.specs.map(([k, v]) => (
                  <div className="row" key={k}>
                    <span className="k">{k}</span>
                    <span className="v">{v}</span>
                  </div>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Transmission Chain =====
function Chain() {
  const nodes = [
    { name: '智慧手錶', en: '生理感知', icon: '⌚' },
    { name: '生存背包', en: '信標節點', icon: '◫' },
    { name: '指揮中心', en: '控制台', icon: '◆' },
    { name: '手持雷達', en: '現場引導', icon: '◈' },
  ];
  const links = [
    { proto: 'BLE 5.0', freq: '2.4 GHz · ≤10m' },
    { proto: 'LoRa CSS', freq: '433 MHz · 穿透' },
    { proto: 'LoRa P2P', freq: '433 MHz · 廣播' },
  ];

  return (
    <section id="chain">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <span className="label">[ 03 ]</span>
            <span className="label">/ 傳輸鏈路</span>
          </div>
          <h2 className="h2 reveal">
            生理訊號的<br />
            四段旅程。
          </h2>
        </div>

        <div className="chain reveal">
          <div className="chain-track">
            {nodes.map((n, i) => (
              <React.Fragment key={i}>
                <div className="chain-node" data-hover>
                  <div className="node-icon">
                    <NodeIcon idx={i} />
                  </div>
                  <div>
                    <div className="node-name">{n.name}</div>
                    <div className="node-en">{n.en}</div>
                  </div>
                </div>
                {i < nodes.length - 1 && (
                  <div className="chain-link">
                    <div className="protocol">{links[i].proto}</div>
                    <div className="freq">{links[i].freq}</div>
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>

        <div className="product-rows">
          {[
            { idx: '04 / a', name: '生理訊號採集', en: '起點·手錶量測', desc: '受困者佩戴的智慧手錶持續監測心率與血氧，透過 BLE 點對點將數據封包傳送至防護箱內的 ESP32 核心控制器，避免設備因長距發射過度耗電。', stat: { big: 'BLE', sub: '2.4GHz · 10m · 0.1mA' } },
            { idx: '04 / b', name: '破障穿透傳輸', en: '433MHz LoRa 繞射', desc: '藉由 433MHz 之長波長繞射，訊號穿透鹽水/鋼筋混凝土等效結構（地下五層樓深度），將數據回傳至廢墟外的指揮中心。CSS 擴頻可在負 SNR 下解碼。', stat: { big: '−126 dBm', sub: 'RSSI · 可解碼' } },
            { idx: '04 / c', name: '指揮分發', en: '指令下達', desc: '指揮中心將心跳數據轉發至第一線手持雷達。搜救員直接於螢幕查閱受困者即時生理趨勢，動態修正救援策略與挖掘優先順序。', stat: { big: 'L0 — L8', sub: '信號分階 · 廣播' } },
            { idx: '04 / d', name: '精確定位導航', en: '最後十公尺 UWB 引導', desc: '搜救員手持雷達採用 UWB PDOA 雙天線技術，提供視距 4.2cm、非視距 28.5cm 之測距精度。結合 LoRa RSSI 校正多路徑反射誤差，引導最後挖掘。', stat: { big: '4.2 cm', sub: '視距精度' } },
          ].map((p) => (
            <div key={p.idx} className="product-row" data-hover>
              <div className="idx">{p.idx}</div>
              <div>
                <div className="name">{p.name}<span className="en">{p.en}</span></div>
                <div className="desc">{p.desc}</div>
              </div>
              <div className="stat">
                <span className="big">{p.stat.big}</span>
                {p.stat.sub}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function NodeIcon({ idx }) {
  if (idx === 0) return (
    <svg viewBox="0 0 48 48" width="48" height="48" fill="none">
      <rect x="16" y="14" width="16" height="20" rx="2.5" stroke="#1d6fe0" strokeWidth="0.8" />
      <path d="M16 14 L16 10 Q16 7 19 7 L29 7 Q32 7 32 10 L32 14" stroke="#1d6fe0" strokeWidth="0.8" />
      <path d="M16 34 L16 38 Q16 41 19 41 L29 41 Q32 41 32 38 L32 34" stroke="#1d6fe0" strokeWidth="0.8" />
      <path d="M19 24 L22 24 L23 21 L25 27 L27 24 L29 24" stroke="#e8401b" strokeWidth="0.8" />
    </svg>
  );
  if (idx === 1) return (
    <svg viewBox="0 0 48 48" width="48" height="48" fill="none">
      <rect x="12" y="14" width="24" height="28" rx="2" stroke="#1d6fe0" strokeWidth="0.8" />
      <path d="M16 14 L16 10 Q16 6 20 6 L28 6 Q32 6 32 10 L32 14" stroke="#1d6fe0" strokeWidth="0.8" />
      <line x1="24" y1="6" x2="24" y2="2" stroke="#1d6fe0" strokeWidth="0.8" />
      <circle cx="24" cy="2" r="1" fill="#1d6fe0" />
      <rect x="17" y="22" width="14" height="8" stroke="#1d6fe0" strokeWidth="0.5" strokeDasharray="2 2" />
    </svg>
  );
  if (idx === 2) return (
    <svg viewBox="0 0 48 48" width="48" height="48" fill="none">
      <rect x="6" y="14" width="36" height="22" stroke="#1d6fe0" strokeWidth="0.8" />
      <line x1="6" y1="20" x2="42" y2="20" stroke="#1d6fe0" strokeWidth="0.5" />
      <circle cx="9" cy="17" r="0.8" fill="#e8401b" />
      <circle cx="12" cy="17" r="0.8" fill="#ffb547" />
      <circle cx="15" cy="17" r="0.8" fill="#4ddca8" />
      <path d="M10 28 L16 28 L19 24 L22 32 L25 26 L28 28 L38 28" stroke="#1d6fe0" strokeWidth="0.8" />
    </svg>
  );
  return (
    <svg viewBox="0 0 48 48" width="48" height="48" fill="none">
      <rect x="14" y="10" width="20" height="32" rx="2" stroke="#1d6fe0" strokeWidth="0.8" />
      <rect x="17" y="14" width="14" height="10" stroke="#1d6fe0" strokeWidth="0.5" />
      <path d="M24 19 L24 16 M21 18 L27 18" stroke="#e8401b" strokeWidth="0.8" />
      <polygon points="24,15 22,19 26,19" fill="#e8401b" />
      <circle cx="20" cy="30" r="1" stroke="#1d6fe0" strokeWidth="0.5" />
      <circle cx="24" cy="30" r="1" stroke="#1d6fe0" strokeWidth="0.5" />
      <circle cx="28" cy="30" r="1" stroke="#1d6fe0" strokeWidth="0.5" />
    </svg>
  );
}

// ===== Experiments / Data =====
function Experiments() {
  return (
    <section id="data">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <span className="label">[ 04 ]</span>
            <span className="label">/ 場域驗證</span>
          </div>
          <h2 className="h2 reveal">
            兩場實驗，<br />
            一個驗證後的物理事實。
          </h2>
        </div>

        <div className="experiments reveal-stagger">
          <div className="experiment">
            <div className="tag">實驗 01 · 電磁雜訊背景</div>
            <div className="big">900<span className="unit"> m</span></div>
            <div className="ttl">於台鐵、高鐵、高壓電塔的極限干擾下的有效通訊距離</div>
            <div className="body">
              在強烈背景電磁輻射與突波雜訊環境中，LoRa CSS 擴頻仍能於負 SNR 條件下穩定解碼。傳統 2.4GHz 在同場景下不足 50m，本系統提升 18 倍。
            </div>
          </div>
          <div className="experiment">
            <div className="tag">實驗 02 · 鹽水等效穿透</div>
            <div className="big">15<span className="unit"> cm</span></div>
            <div className="ttl">3.3% 鹽水穿透 = 空氣中 3.6 公里 = 地下五層樓</div>
            <div className="body">
              採用 Motley-Keenan 模型量化建築結構衰減。即便在等效地下五層樓的極端環境下，RSSI 仍維持 −126 dBm 可解碼狀態。
            </div>
          </div>
          <div className="experiment">
            <div className="tag">實驗 03 · UWB 測距精度</div>
            <div className="big">4.2<span className="unit"> cm</span></div>
            <div className="ttl">視距環境下 UWB 平均測距誤差</div>
            <div className="body">
              非視距穿牆誤差約 28.5 cm，足以有效縮小挖掘範圍。PDOA 相位差技術於 5m 內角度誤差小於 5 度，提供搜救員精確引導。
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Team =====
function Team() {
  const members = [
    { name: '葉柔昀', role: '領隊·進隊生', focus: '隊長；磁場通訊分析與穿透實驗設計。', tags: ['射頻', '系統'], glyph: '葉' },
    { name: '朱晢瑞', role: '進隊生', focus: 'ESP32-S3 韌體、SX1262 LoRa 射頻調校與 CAD 低功耗待機。', tags: ['ESP32', 'LoRa'], glyph: '朱' },
    { name: '潘彥熏', role: '進隊生', focus: 'UWB BU04 PDOA 解算、UI/App 開發與異質數據融合演算法。', tags: ['UWB', 'App'], glyph: '潘' },
    // { name: '張詠竣 老師', role: '指導老師', focus: '研究方法論指導、實驗設計與學術文獻爬梳；指導本作品參與全國科展工程學科組。', tags: ['指導'], glyph: '張' },
    // { name: '王勝毓 老師', role: '指導老師', focus: '電子電路與韌體實作指導；資通類競賽方向與技術文件審閱。', tags: ['指導'], glyph: '王' },
    // { name: '指導單位', role: '學校', focus: '國立新竹高級工業職業學校 · 新竹市立數位實驗高級中等學校。第 66 屆全國科展工程學科（一）。', tags: ['新竹高工', '數位實驗'], glyph: '校' },
  ];

  return (
    <section id="team">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <span className="label">[ 05 ]</span>
            <span className="label">/ 團隊</span>
          </div>
          <h2 className="h2 reveal">
            把物理寫成韌體，<br />
            把韌體變成生命線。
          </h2>
        </div>

        <div className="team-grid reveal-stagger">
          {members.map((m, i) => (
            <div key={i} className="team-card" data-hover>
              <div className="team-portrait">{m.glyph}</div>
              <div className="role">{m.role}</div>
              <div className="name">{m.name}</div>
              {m.focus && <div className="focus">{m.focus}</div>}
              <div className="meta">
                {m.tags.map((t) => <span key={t}>· {t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Footer =====
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-mark">
              聯動守護<br />
              <span className="en">LinkGuard-E · 震災搜救通訊系統</span>
            </div>
            <p style={{ color: 'var(--fg-1)', fontSize: 13, marginTop: 24, maxWidth: 380, lineHeight: 1.6 }}>
              中華民國中小學科展分區特優 · 第 22 屆全國電子設計創意競賽 SI10 佳作 · 中學生小論文競賽甲等。
              基於 Sub-GHz LoRa 異質網路與超寬頻定位之廢墟穿透搜救通訊系統，
              整合 LoRa CSS、UWB PDOA 與 BLE 5.0 三項技術。
            </p>
          </div>
          <div>
            <h4>系統</h4>
            <ul>
              <li><a href="#mission" data-hover>任務</a></li>
              <li><a href="#system" data-hover>模組</a></li>
              <li><a href="#architecture" data-hover>v0.4 架構</a></li>
              <li><a href="#chain" data-hover>傳輸鏈路</a></li>
              <li><a href="#data" data-hover>實證</a></li>
            </ul>
          </div>
          <div>
            <h4>技術核心</h4>
            <ul>
              <li><a data-hover>Semtech SX1262</a></li>
              <li><a data-hover>BU04 DW3000 UWB</a></li>
              <li><a data-hover>ESP32-S3</a></li>
              <li><a data-hover>SwiftUI / Compose</a></li>
            </ul>
          </div>
          <div>
            <h4>參考單位</h4>
            <ul>
              <li><a href="https://www.nfa.gov.tw/" target="_blank" rel="noopener" data-hover>內政部消防署</a></li>
              <li><a href="https://www.insarag.org/" target="_blank" rel="noopener" data-hover>INSARAG 國際搜救諮詢</a></li>
              <li><a data-hover>中華民國 115.03.23</a></li>
            </ul>
          </div>
        </div>
        <div className="container footer-bottom" style={{ padding: '24px 0 0' }}>
          <span>© 2026 LinkGuard Team · 系統狀態穩定</span>
          <span>v0.6.6 · 版本 433MHz</span>
        </div>
      </div>
    </footer>
  );
}

window.LGSections = { Services, Chain, Experiments, Team, Footer };