// Team page

function TeamPage() {
  const members = [
    {
      name: '陳志康', en: 'K. CHEN', role: 'FOUNDER · SYSTEM ENGINEER',
      bio: '以系統工程與校正為本業，負責 3D 模擬與現場測量，推動工作流程標準化。',
      specs: [['主要角色', 'SYS ENG / FOH'], ['使用工具', 'SMAART / AC'], ['年資', '12 YRS'], ['主場地', 'ARENA']]
    },
    {
      name: '張星奎', en: 'S. CHANG', role: 'CO-FOUNDER · FOH ENGINEER',
      bio: '劇場與音樂演出的現場混音師，擅長把測量結果轉譯為聽感上的決策。',
      specs: [['主要角色', 'FOH MIX'], ['使用工具', 'DiGiCo / SD'], ['年資', '14 YRS'], ['主場地', 'THEATRE']]
    },
    {
      name: '小黑', en: 'HEI',      role: 'MONITOR ENGINEER',
      bio: '專精無線系統與 IEM 管理，負責現場 RF 規劃與藝人端聽監。',
      specs: [['主要角色', 'MON / RF'], ['使用工具', 'Shure Axient'], ['年資', '8 YRS'], ['主場地', 'FESTIVAL']]
    },
    {
      name: '阿傑', en: 'JEFF',      role: 'SYSTEM TECH',
      bio: '熟悉主流 PA 品牌架設與維護，負責現場系統的架設、接線與除錯。',
      specs: [['主要角色', 'SYS TECH'], ['使用工具', 'd&b / L-A'], ['年資', '6 YRS'], ['主場地', 'OUTDOOR']]
    },
    {
      name: '小雨', en: 'YU',        role: 'PROJECT COORDINATOR',
      bio: '串接客戶、場地與製作端的橋樑，確保每份技術文件準時到位。',
      specs: [['主要角色', 'PM'], ['使用工具', 'Notion / AC'], ['年資', '5 YRS'], ['主場地', 'ALL']]
    },
    {
      name: '一鳴', en: 'MING',      role: 'ACOUSTIC CONSULTANT',
      bio: '空間聲學與建築模擬顧問，負責複雜場地的事前預測與問題排除方案。',
      specs: [['主要角色', 'ACOUSTICS'], ['使用工具', 'EASE / CATT'], ['年資', '10 YRS'], ['主場地', 'VENUE']]
    },
  ];

  return (
    <div className="page shell">
      <div className="sec-head" style={{ marginTop: 24 }}>
        <div className="sec-label"><span className="sec-label-num">05</span>鐵吹成員 / TEAM</div>
        <div>
          <h2 className="sec-title">
            <span className="zh">一群願意把事情想清楚的人</span>
            <span className="en">ENGINEERS · MIXERS · OPERATORS</span>
          </h2>
        </div>
      </div>

      <div className="team-grid">
        {members.map((m, i) => (
          <div key={i} className="member">
            <div className="member-photo">
              <Placeholder label={`PORTRAIT · ${m.en}`} />
            </div>
            <div>
              <div className="member-role">{m.role}</div>
              <div className="member-name" style={{ marginTop: 6 }}>
                {m.name}
                <span className="en">{m.en}</span>
              </div>
            </div>
            <p className="member-bio">{m.bio}</p>
            <div className="member-specs">
              {m.specs.map(([k, v], j) => (
                <div key={j} className="row"><span>{k.toUpperCase()}</span><span>{v}</span></div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { TeamPage });