const { useState: useHeroState, useEffect: useHeroEffect, useRef: useHeroRef } = React;

function Nav({ onJoin }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="nav-logo">
          <div className="nav-logo-mark" />
          <div className="nav-logo-text">
            <b>UMB Music Production</b>
            <span>Est. 2019 · Boston, MA</span>
          </div>
        </div>
        <div className="nav-links">
          <a href="#about">About</a>
          <a href="#events">Events</a>
          <a href="#gallery">Gallery</a>
          <a href="#spotlights">Spotlights</a>
          <a href="#studio">Studio</a>
          <a href="#watch">Watch</a>
          <a href="#blog">What's new</a>
        </div>
        <div className="nav-socials">
          <a href="https://instagram.com/umb.mpc" target="_blank" rel="noopener" aria-label="Instagram" title="Instagram">IG</a>
          <a href="https://www.tiktok.com/@umbmpc" target="_blank" rel="noopener" aria-label="TikTok" title="TikTok">TT</a>
          <a href="https://youtube.com/@umbmpc" target="_blank" rel="noopener" aria-label="YouTube" title="YouTube">YT</a>
          <a href="https://discord.gg/umbmpc" target="_blank" rel="noopener" aria-label="Discord" title="Discord">DC</a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  const [playing, setPlaying] = useHeroState(false);
  const [step, setStep] = useHeroState(-1);
  const toggle = () => {
    if (playing) { window.AudioKit.stopLoop(); setPlaying(false); setStep(-1); }
    else { window.AudioKit.playLoop((s) => setStep(s)); setPlaying(true); }
  };

  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div style={{ position: 'relative' }}>
            <span className="hero-eyebrow">
              <span className="live" /> Mic check · Spring '26 season open
            </span>

            <h1 className="hero-title">
              <span className="line">Beats,</span>
              <span className="line tight">synths <em>&</em></span>
              <span className="line">sleepless</span>
              <span className="line">nights.</span>
            </h1>

            <p className="hero-sub">
              A student-run music production club at UMass Boston. We make beats, break gear, run open decks, and teach each other how to finish the damn track.
            </p>

            <div className="hero-cta-row">
              <a href="#events" className="btn primary">Upcoming events</a>
              <a href="#watch" className="btn">Watch recent sets</a>
              <button className="btn accent-2" onClick={toggle}>
                {playing ? '■ Stop clubroom loop' : '▶ Play clubroom loop'}
              </button>
            </div>

            {/* Socials strip */}
            <div className="hero-socials">
              <span className="hero-socials-label">Find us →</span>
              <a href="https://instagram.com/umb.mpc" target="_blank" rel="noopener">Instagram</a>
              <a href="https://www.tiktok.com/@umbmpc" target="_blank" rel="noopener">TikTok</a>
              <a href="https://youtube.com/@umbmpc" target="_blank" rel="noopener">YouTube</a>
              <a href="https://soundcloud.com/umbmpc" target="_blank" rel="noopener">SoundCloud</a>
              <a href="https://discord.gg/umbmpc" target="_blank" rel="noopener">Discord</a>
            </div>

            {/* Stickers */}
            <div className="hero-stickers" style={{ inset: 0 }}>
              <div className="sticker" style={{ top: 8, right: -40, background: 'var(--c2)', transform: 'rotate(6deg)' }}>
                BOSTON · MA
              </div>
              <div className="sticker" style={{ bottom: 40, left: -30, background: 'var(--c4)', color: '#fff', transform: 'rotate(-8deg)' }}>
                404 BEATS FOUND
              </div>
            </div>
          </div>

          <div>
            <div className="hero-cassette">
              <div className="cass-label">
                <span>UMBMP · A-SIDE</span>
                <span>XLII</span>
              </div>
              <div className="cass-reels">
                <div className={"cass-reel" + (playing ? " spin" : "")}><span>◜◝◟◞</span></div>
                <div className={"cass-reel" + (playing ? " spin" : "")}><span>◜◝◟◞</span></div>
              </div>
              <div className="cass-screws"><span/><span/></div>
              <div className="cass-bottom">
                <span>{playing ? 'REC · ●' : 'IDLE'}</span>
                <span>{String(Math.floor(step < 0 ? 0 : step / 2)).padStart(2, '0')}:{String((step < 0 ? 0 : step) * 7 % 60).padStart(2, '0')}</span>
                <span>60 MIN</span>
              </div>
            </div>

            <div className="mini-player">
              <button className="play" onClick={toggle}>
                {playing ? '■' : '▶'}
              </button>
              <div className="track-info">
                <b>clubroom jam #42</b>
                <span>UMBMP Collective · 92 BPM · A minor</span>
              </div>
              <Waveform bars={28} playing={playing} color="var(--c1)" height={32} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero });