const BOARD = [
  { name: 'Alex',              role: 'Co-President',         major: 'Business · Sr',       hails: 'Quincy',       vibe: 'Alt-R&B topliner',         tools: ['Ableton', 'SM7B', 'Op-1'],        accent: 'var(--c1)' },
  { name: 'Digvijay Mahawar',     role: 'Co-President',       major: 'CS · Sr',          hails: 'Dorchester',     vibe: 'cyberpunk + EDM',     tools: ['Spotify'],         accent: 'var(--c2)' },
  { name: 'Dylan Dao',        role: 'Creative Director',            major: 'Finance · Sr',     hails: 'Quincy',         vibe: 'Synthpop + spreadsheets',  tools: ['Logic', 'Prophet-5'],             accent: 'var(--c3)' },
  { name: 'Ariana Kreider',          role: 'Treasurer',          major: 'Design · Jr',      hails: 'Brighton',       vibe: 'Warehouse DJ kid',         tools: ['Rekordbox', 'CDJ-3000'],          accent: 'var(--c4)' },
  { name: 'Yoyo Frozay',     role: 'Event Planners',       major: 'Sociology · Soph', hails: 'Hyde Park',      vibe: 'Neo-soul + spoken word',   tools: ['Pro Tools', 'Rhodes'],            accent: 'var(--c5)' },
  { name: 'Delilah Dao',     role: 'Event Planners',       major: 'Audio Eng · Sr',   hails: 'East Boston',    vibe: 'Treats every room like a mix', tools: ['Pro Tools', 'UAD'],           accent: 'var(--c6)' },
  { name: 'Saffron',          role: 'Media Lead',   major: 'Music · Soph',     hails: 'Malden',         vibe: 'Ambient drone + tape',     tools: ['Reaper', 'Tascam 388'],           accent: 'var(--c1)' },
  { name: 'Joaquim',        role: 'Graphic Designers',       major: 'EE · Jr',          hails: 'Nashua, NH',     vibe: 'Breakcore on a budget',     tools: ['Renoise', 'Pocket Operators'],   accent: 'var(--c2)' },
  { name: 'Jasmine',       role: 'Graphic Designer',                  major: 'Comms · Sr',       hails: 'Providence',     vibe: 'DJ + crate digger',         tools: ['Serato', 'SP-404'],              accent: 'var(--c3)' },
  { name: 'Neel',        role: 'Public Relations',         major: 'Film · Jr',        hails: 'Medford',        vibe: 'Doc edits + music videos',  tools: ['Premiere', 'FR24'],              accent: 'var(--c4)' },
  { name: 'Rayan Mansour',       role: 'Public Relations',         major: 'Marketing · Soph', hails: 'Brockton',       vibe: 'Drill + afrobeats',         tools: ['CapCut', 'FL Studio'],           accent: 'var(--c5)' },
  { name: 'Mariah',         role: 'Committee Member',          major: 'Design · Sr',      hails: 'Newton',         vibe: 'Zines and risograph',       tools: ['Figma', 'Procreate'],            accent: 'var(--c6)' },
  { name: 'Khang Nguyen',      role: 'Committee Member',        major: 'Music Ed · Jr',    hails: 'Revere',         vibe: 'Teaches sidechain like scripture', tools: ['Ableton', 'Push 3'],      accent: 'var(--c1)' },
  { name: 'Molly McLaughin',         role: 'Committee Member',             major: 'Poli Sci · Sr',    hails: 'Roxbury',        vibe: 'Afro-house + organizer',    tools: ['Logic', 'Model:Cycles'],         accent: 'var(--c2)' },
  { name: 'Leonard Gelin',  role: 'Committee Member',           major: 'Theater · Jr',     hails: 'Somerville',     vibe: 'Shoegaze pedal hoarder',    tools: ['Behringer X32', 'Big Muff'],     accent: 'var(--c3)' },
  { name: 'Dev Joshi',      role: 'Committee Member',          major: 'Business · Soph',  hails: 'Cambridge',      vibe: 'Booking agent energy',      tools: ['Google Cal', 'Venmo'],           accent: 'var(--c4)' },
  { name: 'Flanny',     role: 'UNC',            major: 'Useless degree · Retired',     hails: 'Brockton',       vibe: 'I cannot stop, 2 times', tools: ['Plex', '4TB SSD'],              accent: 'var(--c5)' },
];

function initials(name) {
  return name.split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase();
}

function Board() {
  return (
    <section className="container" id="board">
      <SectionHead
        num="[05] / BOARD"
        title="Meet the <em>board.</em>"
        sub="17 students currently running the club. We rotate every Spring — anyone can pitch to join in April."
      />

      <div className="board-meta">
        <div className="mono">● 17 ACTIVE · SPRING '26 TERM</div>
        <div className="mono" style={{ color: 'var(--muted)' }}>ELECTIONS · LAST WEEK OF APRIL</div>
      </div>

      <div className="board-grid">
        {BOARD.map((m, i) => (
          <article className="board-card" key={m.name} style={{ '--accent': m.accent }}>
            <div className="board-card-head">
              <div className="board-avatar">
                <span>{initials(m.name)}</span>
              </div>
              <div className="board-id">
                <span className="mono">#{String(i + 1).padStart(2, '0')} · {m.hails}</span>
                <h4>{m.name}</h4>
                <div className="board-role">{m.role}</div>
              </div>
            </div>
            <div className="board-meta-row">
              <span className="mono">{m.major}</span>
              <span className="mono">"{m.vibe}"</span>
            </div>
            <div className="board-tools">
              {m.tools.map(t => <span key={t}>{t}</span>)}
            </div>
          </article>
        ))}
      </div>

      <p className="board-footnote mono">
        Want in? → The board opens applications the last week of April. DM @umb.mpc or email mpc@umb.edu.
      </p>
    </section>
  );
}

window.Board = Board;