// Tech articles page

function TechPage() {
  const articles = [
    { date: '2025.11.02', title: '從 SMAART 的 Transfer Function 談系統校正的基本功', tags: ['SMAART', 'MEASUREMENT'], read: '12 min' },
    { date: '2025.09.18', title: 'Line Array 垂直指向與曲度設計的三個常見誤解',       tags: ['LINE ARRAY', 'DESIGN'], read: '8 min' },
    { date: '2025.07.24', title: 'Sub-Array：如何讓低頻在觀眾席均勻分布',              tags: ['SUBWOOFER', 'ALIGNMENT'], read: '15 min' },
    { date: '2025.05.30', title: '殘響時間 T60 到底該怎麼量？以及該量幾次？',          tags: ['ACOUSTICS', 'MEASURE'], read: '10 min' },
    { date: '2025.03.12', title: 'STI 清晰度量測的前置作業清單',                        tags: ['STI', 'WORKFLOW'], read: '6 min' },
    { date: '2024.12.20', title: '為什麼我們堅持每一場演出都要做現場測量',              tags: ['PHILOSOPHY', 'SOP'], read: '5 min' },
    { date: '2024.10.08', title: 'ArrayCalc 與 Soundvision 常見對應設定表',             tags: ['ARRAYCALC', 'SOUNDVISION'], read: '11 min' },
  ];

  return (
    <div className="page shell">
      <div className="sec-head" style={{ marginTop: 24 }}>
        <div className="sec-label"><span className="sec-label-num">04</span>技術探討 / TECH NOTES</div>
        <div>
          <h2 className="sec-title">
            <span className="zh">我們學到的、我們寫下來</span>
            <span className="en">FIELD NOTES FROM THE FOH</span>
          </h2>
          <p style={{ color: 'var(--text-2)', fontSize: 15, maxWidth: 560, marginTop: 20 }}>
            測量工具、系統校正、聲學設計——我們把每次實戰累積的經驗整理成文字與課程，與整個產業一起進步。
          </p>
        </div>
      </div>

      <div className="tech-grid">
        <div className="tech-featured">
          <div className="thumb">
            <Placeholder label="FEATURED · MEASUREMENT DEEP-DIVE" />
          </div>
          <div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.1em' }}>FEATURED · 2025.11.02</div>
            <h3>從 SMAART 的 Transfer Function 談系統校正的基本功</h3>
            <p>測量是為了做出決定。這篇文章從最基礎的 Transfer Function 講起，釐清我們到底在看什麼、能信任什麼，以及哪些讀數是系統告訴你「該動手了」的提示。</p>
            <div style={{ marginTop: 24, display: 'flex', gap: 10, alignItems: 'center' }}>
              <button className="btn btn-primary">READ ARTICLE <span className="arr">→</span></button>
              <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>12 min · SMAART, MEASUREMENT</span>
            </div>
          </div>
        </div>
        {articles.slice(1).map((a, i) => (
          <div key={i} className="tech-row">
            <span className="date">{a.date}</span>
            <span className="title">{a.title}</span>
            <div className="tags">{a.tags.map(t => <span key={t} className="tag">{t}</span>)}</div>
            <span className="read">{a.read}</span>
            <span className="arr">→</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { TechPage });