const { useState: useJoinState } = React;

const INTERESTS = ['Beatmaking', 'DJing', 'Songwriting', 'Mixing', 'Synths', 'Live band', 'Recording', 'A&R', 'Visuals/VJ', 'Events'];

function Join() {
  const [picked, setPicked] = useJoinState(new Set(['Beatmaking', 'Synths']));
  const toggle = (t) => setPicked(s => { const n = new Set(s); n.has(t) ? n.delete(t) : n.add(t); return n; });

  return (
    <section className="container" id="join">
      <div className="join-block">
        <div>
          <span className="hero-eyebrow" style={{ background: 'var(--c3)', color: 'var(--ink)' }}>
            <span className="live" style={{ background: 'var(--c1)' }} /> Rolling admissions · No audition
          </span>
          <h2 style={{ marginTop: 24 }}>
            Pull up. <em>Plug in.</em><br/>
            Make something.
          </h2>
          <p>
            Dues are $15/semester — covers snacks, printing, strings, solder, and the occasional guest workshop. If that's a stretch, say so; we waive it. No questions.
          </p>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--c3)', marginTop: 24 }}>
            ★ Beginner-friendly · ★ All genres · ★ 17 active members
          </p>
        </div>

        <form className="join-form" onSubmit={e => { e.preventDefault(); alert('See you Thursday at 7pm!'); }}>
          <h4>Membership form</h4>
          <div className="fieldset">
            <div className="field">
              <label>Full name</label>
              <input type="text" placeholder="Your name" />
            </div>
            <div className="field">
              <label>UMB email</label>
              <input type="email" placeholder="you@umb.edu" />
            </div>
            <div className="field">
              <label>What are you into? (pick any)</label>
              <div className="interests">
                {INTERESTS.map(t => (
                  <div key={t} className={"interest-chip" + (picked.has(t) ? " active" : "")} onClick={() => toggle(t)}>
                    {t}
                  </div>
                ))}
              </div>
            </div>
            <div className="field">
              <label>Experience level</label>
              <select>
                <option>Beginner — just starting out</option>
                <option>Dabbler — I've finished a track or two</option>
                <option>Active — I'm shipping stuff regularly</option>
                <option>Pro-ish — I play out / release</option>
              </select>
            </div>
          </div>
          <button type="submit" className="join-submit">Send membership request →</button>
        </form>
      </div>
    </section>
  );
}

window.Join = Join;