// Communiqué — Team page

const CORE_TEAM = [
  { name: 'Fero Tane', role: 'Founder and Managing Director' },
  { name: 'Abdullah', role: 'Head of Campaigns / General Secretary' },
  { name: 'Jo Woods', role: 'Head of Investigations (OSINT)' },
  { name: 'Anton Manly', role: 'Editor-in-Chief' },
  { name: 'Riv', role: 'Finance Manager' },
  { name: 'Jonathan Turner', role: 'Head of Articles' },
  { name: 'Toulouse', role: 'Head of Design' },
];

const BOARD = [
  { name: 'Christy Nash', role: 'Board of Directors' },
  { name: 'Dagmar', role: 'Board of Directors' },
];

const TeamPage = () => (
  <div className="app">
    <Nav onMember={() => {}}/>
    <TopRibbon/>
    <ThemeToggle/>
    <main>
      <div className="container">
        <div className="page-hero">
          <div className="eyebrow">The Organisation</div>
          <h1>Team &amp; Specialisms</h1>
          <p className="subtitle">The core members who set objectives and run the day-to-day activities of Communiqué.</p>
        </div>

        <div className="team-grid">
          {CORE_TEAM.map(m => (
            <div className="team-card" key={m.name}>
              <div className="role">{m.role}</div>
              <div className="name">{m.name}</div>
            </div>
          ))}
        </div>

        <div className="team-board">
          <h2>Board of Directors</h2>
          <div className="team-board-list">
            {BOARD.map(m => (
              <div className="team-board-card" key={m.name}>
                <div className="role">{m.role}</div>
                <div className="name">{m.name}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </main>
    <Footer/>
  </div>
);

Object.assign(window, { TeamPage });