const { useState: useAboutState, useEffect: useAboutEffect } = React;

function DrumPads() {
  const [active, setActive] = useAboutState({});
  const keyMap = { 'q': 'KICK', 'w': 'SNR', 'e': 'HH', 'r': 'OH', 'a': 'CLAP', 's': 'C', 'd': 'E', 'f': 'G' };
  const order = ['KICK','SNR','HH','OH','CLAP','C','E','G'];
  const kbds  = ['Q','W','E','R','A','S','D','F'];

  const hit = (k) => {
    window.AudioKit.PADS[k].fn();
    setActive(a => ({ ...a, [k]: true }));
    setTimeout(() => setActive(a => ({ ...a, [k]: false })), 120);
  };

  useAboutEffect(() => {
    const h = (e) => {
      const k = keyMap[e.key.toLowerCase()];
      if (k) { e.preventDefault(); hit(k); }
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, []);

  return (
    <div className="drum-pads">
      <div className="head">
        <span>MPC-22 · <b>TRY ME</b></span>
        <span>CH-1 · VEL 100</span>
      </div>
      <div className="drum-grid">
        {order.map((k, i) => (
          <button
            key={k}
            className={"drum-pad" + (active[k] ? " active" : "")}
            onMouseDown={() => hit(k)}
          >
            <span className="kbd">[{kbds[i]}]</span>
            <b>{window.AudioKit.PADS[k].label}</b>
          </button>
        ))}
      </div>
    </div>
  );
}

function About() {
  return (
    <section className="container" id="about">
      <SectionHead
        num="[01] / ABOUT"
        title='Not a listening club. <em>A making club.</em>'
        sub="We're a group of 17 UMB students who love making music — beatmakers, topliners, DJs, guitarists, audio nerds, and the curious."
      />
      <div className="about-grid">
        <div>
          <div className="about-lead">
            The <em>home</em> for Producers, Artistis, DJs, and music lovers at <em>UMB!</em> - We do Live Music Events, Studio sessions, and More!
          </div>
          <p className="about-body">
            No audition. No gatekeeping. Show up on a event, plug in, and the room will meet you where you are. Whether you're opening Ableton for the first time or mixing your third EP. Our board rotates every semester and anyone can pitch an event.
          </p>
          <div className="hero-cta-row" style={{ marginTop: 24 }}>
            <a href="#events" className="btn primary">See what's on →</a>
            <a href="#watch" className="btn">Watch the room</a>
          </div>
        </div>

        <div>
 
          <DrumPads />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About, DrumPads });