const SPOTS = [
  {
    name: "Kiki Low",
    role: "Producer · Senior, Music Dept.",
    bio: "Glitchy R&B and ambient loops. Just finished her debut EP 'signal loss' using only a TX-6 and a cracked copy of Max.",
    tags: ['R&B', 'Ambient', 'Max/MSP'],
    label: 'APR RESIDENT',
  },
  {
    name: "BARON",
    role: "DJ / Beatmaker · Junior, CS",
    bio: "Boston-bred UK garage and 2-step. Runs the First Friday open decks. Builds his own Max for Live devices.",
    tags: ['Garage', 'House', 'DJ'],
    label: 'MEMBER OF THE MONTH',
  },
  {
    name: "Noor & the Soft Noise",
    role: "Band · Mixed class of 2026–28",
    bio: "Four-piece shoegaze collective that met at our first Thursday meeting. Just signed to local label Tape Hiss.",
    tags: ['Shoegaze', 'Live band'],
    label: 'NEW SIGNING',
  },
];

function Spotlights() {
  return (
    <section className="container" id="spotlights">
      <SectionHead
        num="[04] / SPOTLIGHTS"
        title="Members making <em>moves.</em>"
        sub="Every month we highlight members shipping tracks, landing gigs, or otherwise cooking. Want to be featured? DM us."
      />
      <div className="spotlights">
        {SPOTS.map((s, i) => (
          <div className="spot" key={i}>
            <div className="cover">
              <div className="ph" />
              <div className="cover-label">{s.label}</div>
            </div>
            <div className="body">
              <h4>{s.name}</h4>
              <div className="role">{s.role}</div>
              <p className="bio">{s.bio}</p>
              <div className="tags">
                {s.tags.map(t => <span key={t}>{t}</span>)}
              </div>
              <div className="mini-wave">
                {Array.from({ length: 36 }).map((_, j) => {
                  const h = 4 + Math.abs(Math.sin((i + 1) * (j + 1) * 0.37)) * 24;
                  return <i key={j} style={{ height: h + 'px' }} />;
                })}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Spotlights = Spotlights;