// CLUB — live set countdown + upcoming sets
const { useState: useStateCl, useEffect: useEffectCl } = React;

const SETS = [
  { dc: "AETHER",    venue: "WOAH! CLUB · GILGAMESH",  date: "APR 26 · 22:00 ET",  theme: "TECHNO NIGHT",     tag: "headline", t: 2*3600 + 14*60 },
  { dc: "PRIMAL",    venue: "THE CRYSTAL STAGE · BEHEMOTH", date: "APR 29 · 21:00 CT", theme: "EDM FEST",      tag: "festival", t: 5*24*3600 },
  { dc: "DYNAMIS",   venue: "NEON TEMPLE · MARILITH",  date: "MAY 02 · 20:00 PT",  theme: "METAL DROP",        tag: "late",     t: 8*24*3600 },
  { dc: "CHAOS",     venue: "SAKURA ROOM · OMEGA",     date: "MAY 05 · 22:00 GMT", theme: "J-POP SYNTH",       tag: "cozy",     t: 11*24*3600 },
];

function useCountdown(secondsStart) {
  const [s, setS] = useStateCl(secondsStart);
  useEffectCl(() => {
    const i = setInterval(() => setS(v => (v > 0 ? v - 1 : 0)), 1000);
    return () => clearInterval(i);
  }, []);
  return s;
}

function fmt(s) {
  const d = Math.floor(s / 86400);
  const h = Math.floor((s % 86400) / 3600);
  const m = Math.floor((s % 3600) / 60);
  const sec = s % 60;
  return [d, h, m, sec];
}

function Club() {
  const t = useCountdown(SETS[0].t);
  const [D, H, M, S] = fmt(t);

  return (
    <section id="club" className="page">
      <div className="sec-head">
        <div>
          <div className="tag">// 03 · LIVE OPS · NEXT UP</div>
          <h2>WOAH! <span style={{color: "var(--cyan)"}}>CLUB</span></h2>
        </div>
        <div className="sub">NEXT GIG LOADING · ALL DATA CENTERS</div>
      </div>

      <div style={styles_cl.grid}>
        {/* Feature gig */}
        <div className="panel bracket-4" style={styles_cl.feat}>
          <span className="bk tl"></span><span className="bk tr"></span>
          <span className="bk bl"></span><span className="bk br"></span>

          <div style={styles_cl.featTop}>
            <div>
              <span className="chip"><span className="dot"></span>HEADLINE SET · LIVE SOON</span>
            </div>
            <div className="mono" style={{fontSize: 11, color: "var(--ink-faint)"}}>MISSION ID · GAIA-2026-074</div>
          </div>

          <div style={styles_cl.featMid}>
            <div className="mono" style={{fontSize: 12, color: "var(--cyan)", letterSpacing: "0.3em"}}>{SETS[0].dc} · DATA CENTER</div>
            <div className="display" style={{fontSize: "clamp(36px, 4.5vw, 56px)", marginTop: 6, textWrap: "balance"}}>
              <span style={{color: "var(--magenta)", textShadow: "0 0 14px var(--magenta)"}}>TECHNO</span> NIGHT
            </div>
            <div className="jp" style={{fontSize: 16, color: "var(--ink-dim)", marginTop: 6}}>テクノ・ナイト — 真夜中のクラブ</div>
            <div className="mono" style={{fontSize: 12, color: "var(--ink-dim)", marginTop: 14}}>
              {SETS[0].venue} · {SETS[0].date}
            </div>
          </div>

          <div style={styles_cl.timerRow}>
            {[
              {k: "DAYS",    v: D},
              {k: "HOURS",   v: H},
              {k: "MINUTES", v: M},
              {k: "SECONDS", v: S},
            ].map(({k, v}) => (
              <div key={k} style={styles_cl.timeCell}>
                <div className="display" style={styles_cl.timeNum}>{String(v).padStart(2,"0")}</div>
                <div className="mono" style={styles_cl.timeLab}>{k}</div>
              </div>
            ))}
          </div>

          <div style={{display: "flex", gap: 14, marginTop: 20, flexWrap: "wrap"}}>
            <a className="btn" href="https://www.twitch.tv/dj_gaia" target="_blank" rel="noopener">
              <span>JOIN ON TWITCH</span><span className="arrow">▶</span>
            </a>
            <a className="btn ghost" href="https://discord.gg/djgaia" target="_blank" rel="noopener">
              <span>RSVP · DISCORD</span><span className="arrow">→</span>
            </a>
          </div>
        </div>

        {/* Upcoming */}
        <div style={styles_cl.upcoming}>
          <div className="mono" style={{fontSize: 11, color: "var(--cyan)", letterSpacing: "0.25em", marginBottom: 14}}>// UPCOMING · QUEUE</div>
          {SETS.slice(1).map((g, i) => (
            <div key={i} className="panel" style={styles_cl.gigRow}>
              <div style={{display: "flex", flexDirection: "column", alignItems: "center", minWidth: 60, padding: "0 6px 0 0", borderRight: "1px solid var(--panel-stroke)"}}>
                <div className="display" style={{fontSize: 22, color: "var(--magenta)"}}>{g.date.split(" ")[1]}</div>
                <div className="mono" style={{fontSize: 10, color: "var(--ink-faint)"}}>{g.date.split(" ")[0]}</div>
              </div>
              <div style={{flex: 1, minWidth: 0}}>
                <div className="mono" style={{fontSize: 10, color: "var(--cyan)", letterSpacing: "0.25em"}}>{g.dc}</div>
                <div className="display" style={{fontSize: 15, letterSpacing: "0.03em", marginTop: 2}}>{g.theme}</div>
                <div className="mono" style={{fontSize: 10, color: "var(--ink-dim)", marginTop: 3}}>{g.venue}</div>
              </div>
              <div className="eq"><i/><i/><i/><i/><i/></div>
              <div className="mono" style={{fontSize: 10, color: "var(--ink-faint)", width: 60, textAlign: "right"}}>{g.date.split(" ")[3] || ""}</div>
            </div>
          ))}

          <div style={{marginTop: 16, padding: "14px 18px", border: "1px dashed var(--panel-stroke)", textAlign: "center"}}>
            <span className="mono" style={{fontSize: 10, color: "var(--ink-faint)", letterSpacing: "0.25em"}}>
              BOOKINGS OPEN · DM ON DISCORD FOR CUSTOM SETS
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

const styles_cl = {
  grid: { display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 28 },
  feat: { padding: 32, display: "flex", flexDirection: "column", gap: 20 },
  featTop: { display: "flex", justifyContent: "space-between", alignItems: "center" },
  featMid: { paddingTop: 4 },
  timerRow: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginTop: 4 },
  timeCell: {
    padding: "16px 10px", textAlign: "center",
    background: "oklch(0.1 0.04 300 / 0.6)",
    border: "1px solid var(--panel-stroke)",
    position: "relative",
  },
  timeNum: { fontSize: "clamp(32px, 3.5vw, 52px)", color: "var(--magenta)", textShadow: "0 0 12px var(--magenta)", lineHeight: 1 },
  timeLab: { fontSize: 10, color: "var(--ink-faint)", letterSpacing: "0.3em", marginTop: 6 },
  upcoming: { display: "flex", flexDirection: "column", gap: 10 },
  gigRow: {
    display: "flex", alignItems: "center", gap: 16,
    padding: "14px 16px",
  },
};

Object.assign(window, { Club });