// Services page

function ServicesPage({ onNavigate }) {
  const services = [
    {
      num: 'SVC.01',
      zh: '系統設計與模擬',
      en: 'SYSTEM DESIGN & SIMULATION',
      desc: '依據場地條件、觀眾席配置與演出類型，使用 d&b ArrayCalc、L-Acoustics Soundvision、Meyer MAPP XT 等業界工具，在進場前完成聲學設計與預測。',
      specs: ['3D ACOUSTIC SIM', 'LINE ARRAY PRED', 'SUB ALIGNMENT', 'COVERAGE MAP']
    },
    {
      num: 'SVC.02',
      zh: '系統校正與測量',
      en: 'SYSTEM CALIBRATION',
      desc: '以 SMAART 為主要測量工具，進行頻率響應、脈衝響應、殘響、清晰度等項目的現場測量，讓每一個座位區都能得到精準且一致的聲音體驗。',
      specs: ['SMAART v9', 'RTA 1/24 OCT', 'IMPULSE MEASURE', 'STI VERIFY']
    },
    {
      num: 'SVC.03',
      zh: '現場音響執行',
      en: 'LIVE SOUND ENGINEERING',
      desc: '從 FOH、Monitor、RF 管理到系統工程，由熟悉流程與工具的團隊完整執行。每場演出都會產出可追溯的校正報告與測量紀錄。',
      specs: ['FOH MIXING', 'MONITORS', 'RF COORDINATION', 'SYSTEM TECH']
    },
    {
      num: 'SVC.04',
      zh: '技術探討與講座',
      en: 'WORKSHOPS & TRAINING',
      desc: '固定舉辦測量、校正、3D 模擬等主題的公開課程；也不定期受邀至音響公司內部提供客製化的技術探討與導入諮詢。',
      specs: ['PUBLIC SESSIONS', 'IN-HOUSE TRAIN', 'TOOLCHAIN AUDIT', 'SOP CONSULT']
    },
  ];

  return (
    <div className="page shell">
      <div className="sec-head" style={{ marginTop: 24 }}>
        <div className="sec-label"><span className="sec-label-num">02</span>服務內容 / SERVICES</div>
        <div>
          <h2 className="sec-title">
            <span className="zh">我們提供的技術服務</span>
            <span className="en">FROM SIMULATION TO SHOWTIME</span>
          </h2>
          <p style={{ color: 'var(--text-2)', fontSize: 15, maxWidth: 560, marginTop: 20 }}>
            以科學工具與可追溯的工作流程，把你的演出從「大概沒問題」推到「每個座位都對」。
          </p>
        </div>
      </div>

      <div className="services-grid">
        {services.map((s) => (
          <div key={s.num} className="service-card" onClick={() => onNavigate('contact')}>
            <div className="service-num">
              <span>{s.num} / 0{services.indexOf(s)+1}</span>
              <span className="service-arr">↗</span>
            </div>
            <h3 className="service-title">
              {s.zh}
              <span className="en">{s.en}</span>
            </h3>
            <p className="service-desc">{s.desc}</p>
            <div className="service-specs">
              {s.specs.map((sp) => <span key={sp} className="spec">{sp}</span>)}
            </div>
          </div>
        ))}
      </div>

      <div className="divider-label">TOOLCHAIN · 我們使用的工具</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, border: '1px solid var(--line)' }}>
        {[
          ['SMAART',       'v9',        'RATIONAL ACOUSTICS'],
          ['ARRAYCALC',    'v11',       'd&b AUDIOTECHNIK'],
          ['SOUNDVISION',  'v2.7',      'L-ACOUSTICS'],
          ['MAPP XT',      'v2',        'MEYER SOUND'],
          ['EASE',         'v5',        'AFMG'],
          ['DANTE CTRL',   'v4.7',      'AUDINATE'],
        ].map(([name, ver, vendor], i) => (
          <div key={i} style={{
            padding: 24,
            borderRight: i < 5 ? '1px solid var(--line)' : 0,
            fontFamily: 'var(--mono)', display: 'grid', gap: 4,
          }}>
            <div style={{ fontSize: 14, color: 'var(--text)', fontWeight: 600, letterSpacing: '0.02em' }}>{name}</div>
            <div style={{ fontSize: 11, color: 'var(--accent)' }}>{ver}</div>
            <div style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.08em', marginTop: 8 }}>{vendor}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ServicesPage });