// RESIDENCIAS — weekly residency clubs
const { useState: useStateRs } = React;

const DAYS = [
  { key: "MON", full: "MONDAY",    kana: "月曜日" },
  { key: "TUE", full: "TUESDAY",   kana: "火曜日" },
  { key: "WED", full: "WEDNESDAY", kana: "水曜日" },
  { key: "THU", full: "THURSDAY",  kana: "木曜日" },
  { key: "FRI", full: "FRIDAY",    kana: "金曜日" },
  { key: "SAT", full: "SATURDAY",  kana: "土曜日" },
  { key: "SUN", full: "SUNDAY",    kana: "日曜日" },
];

const RESIDENCIES = [
  { name: "WOAH!",         day: "MON", home: true,  vibe: "TECHNO · EDM · METAL",  kana: "ウォア",        accent: "var(--magenta)",
    logo: "assets/clubs/woah.png",
    dc: "LIGHT · EUROPE", world: "ALPHA", district: "THE MIST", plot: "WARD 20 · PLOT 35" },
  { name: "GIPSY CAT",     day: "MON", vibe: "UNDERGROUND HOUSE",   kana: "ジプシー・キャット",    accent: "var(--rose)",
    logo: "assets/clubs/gipsy-cat.png",
    dc: "LIGHT · EUROPE", world: "ALPHA", district: "THE MIST", plot: "WARD 20 · PLOT 35" },
  { name: "URBAN",         day: "TUE", vibe: "STREET / HIP-HOP",    kana: "アーバン",               accent: "var(--cyan)" },
  { name: "IGNITE",        day: "THU", vibe: "HIGH-ENERGY EDM",     kana: "イグナイト",             accent: "var(--danger)" },
  { name: "PROJECT XIV",   day: "THU", vibe: "FUTURE / BASS",       kana: "プロジェクト14",          accent: "var(--violet)" },
  { name: "VELOCITY",      day: "FRI", vibe: "TRANCE / PROG",       kana: "ヴェロシティ",           accent: "var(--cyan)" },
  { name: "AMBROSIA",      day: "FRI", vibe: "SYNTH-POP · J-POP",   kana: "アンブロシア",           accent: "var(--rose)" },
  { name: "THE VOID",      day: "FRI", vibe: "DARK TECHNO",         kana: "ザ・ヴォイド",           accent: "var(--violet)" },
  { name: "AXIOM.EXE",     day: "FRI", vibe: "CYBER / DNB",         kana: "アクシオム.EXE",          accent: "var(--cyan)" },
  { name: "PHOENIX NIGHTS",day: "SAT", vibe: "FESTIVAL EDM",        kana: "フェニックス・ナイツ",   accent: "var(--gold)" },
  { name: "IGNITE",        day: "SAT", vibe: "HIGH-ENERGY EDM",     kana: "イグナイト",             accent: "var(--danger)" },
  { name: "CLUB SKYFALL",  day: "SAT", vibe: "OPEN AIR HOUSE",      kana: "クラブ・スカイフォール", accent: "var(--cyan)" },
  { name: "CLUB SCORDIA",  day: "SUN", vibe: "DEEP / MELODIC",      kana: "クラブ・スコルディア",   accent: "var(--violet)" },
  { name: "HEAVEN'S GATE", day: "SUN", vibe: "ETHEREAL TRANCE",     kana: "ヘブンズゲート",         accent: "var(--gold)" },
  { name: "MINX CLUB",     day: "SUN", vibe: "CLUB HOUSE",          kana: "ミンクス・クラブ",       accent: "var(--magenta)" },
  { name: "SELUNE",        day: "SUN", vibe: "LUNAR LOUNGE",        kana: "セルーネ",                accent: "var(--rose)" },
];

function Residencias() {
  const [filter, setFilter] = useStateRs("ALL");

  const counts = DAYS.reduce((acc, d) => {
    acc[d.key] = RESIDENCIES.filter(r => r.day === d.key).length;
    return acc;
  }, {});
  const total = RESIDENCIES.length;

  const shown = filter === "ALL"
    ? RESIDENCIES
    : RESIDENCIES.filter(r => r.day === filter);

  return (
    <section id="residencias" className="page">
      <div className="sec-head">
        <div>
          <div className="tag">// 04 · WEEKLY CIRCUIT</div>
          <h2>RESI<span style={{color: "var(--cyan)"}}>DENCES</span></h2>
        </div>
        <div className="sub">{total} CLUBS · 7 NIGHTS · NON-STOP</div>
      </div>

      {/* Day filter */}
      <div style={styles_rs.filterRow}>
        <button onClick={() => setFilter("ALL")} style={{
          ...styles_rs.filterBtn,
          borderColor: filter === "ALL" ? "var(--magenta)" : "var(--panel-stroke)",
          background: filter === "ALL" ? "oklch(0.16 0.08 340 / 0.6)" : "oklch(0.1 0.04 300 / 0.4)",
          boxShadow: filter === "ALL" ? "0 0 18px var(--magenta)" : "none",
        }}>
          <div className="display" style={{fontSize: 12, letterSpacing: "0.2em"}}>ALL</div>
          <div className="mono" style={{fontSize: 9, color: "var(--ink-faint)", marginTop: 3}}>{total} GIGS</div>
        </button>
        {DAYS.map(d => {
          const n = counts[d.key] || 0;
          const active = filter === d.key;
          return (
            <button key={d.key} onClick={() => setFilter(d.key)} disabled={n === 0} style={{
              ...styles_rs.filterBtn,
              opacity: n === 0 ? 0.35 : 1,
              cursor: n === 0 ? "not-allowed" : "pointer",
              borderColor: active ? "var(--cyan)" : "var(--panel-stroke)",
              background: active ? "oklch(0.16 0.08 220 / 0.6)" : "oklch(0.1 0.04 300 / 0.4)",
              boxShadow: active ? "0 0 18px var(--cyan)" : "none",
            }}>
              <div className="display" style={{fontSize: 12, letterSpacing: "0.2em"}}>{d.key}</div>
              <div className="jp" style={{fontSize: 10, color: "var(--ink-faint)", marginTop: 3}}>{d.kana}</div>
              {n > 0 && (
                <div style={{
                  position: "absolute", top: -7, right: -7,
                  width: 20, height: 20,
                  borderRadius: "50%",
                  background: "var(--magenta)",
                  color: "var(--bg-0)",
                  fontFamily: "Orbitron",
                  fontSize: 10, fontWeight: 900,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  boxShadow: "0 0 10px var(--magenta)",
                }}>{n}</div>
              )}
            </button>
          );
        })}
      </div>

      {/* Grid of clubs */}
      <div style={styles_rs.grid}>
        {shown.map((r, i) => {
          const day = DAYS.find(d => d.key === r.day);
          return (
            <div key={i} className="panel bracket-4" style={{
              ...styles_rs.card,
              borderColor: r.home ? r.accent : "var(--panel-stroke)",
              boxShadow: r.home ? `0 0 24px ${r.accent}` : "none",
            }}>
              <span className="bk tl"></span><span className="bk tr"></span>
              <span className="bk bl"></span><span className="bk br"></span>

              <div style={styles_rs.cardArt}>
                <div style={{
                  position: "absolute", inset: 0,
                  background: `linear-gradient(135deg, ${r.accent.replace("var(","oklch(").replace(")","")} 0%, transparent 80%)`,
                  opacity: 0.25,
                }}></div>
                <div style={{
                  position: "absolute", inset: 0,
                  background: "repeating-linear-gradient(135deg, oklch(1 0 0 / 0.04) 0 10px, transparent 10px 20px)",
                }}></div>
                {/* Logo */}
                {r.logo && (
                  <div style={{
                    position: "absolute", inset: 0,
                    display: "flex", alignItems: "center", justifyContent: "center",
                    pointerEvents: "none",
                  }}>
                    <img src={r.logo} alt={r.name + " logo"} style={{
                      maxWidth: "62%", maxHeight: "78%",
                      objectFit: "contain",
                      filter: `drop-shadow(0 0 18px ${r.accent}) drop-shadow(0 4px 12px rgba(0,0,0,0.6))`,
                    }}/>
                  </div>
                )}
                {/* Equalizer mini */}
                <div style={{
                  position: "absolute", left: 14, bottom: 14,
                  display: "flex", alignItems: "flex-end", gap: 3, height: 24,
                }}>
                  {[60, 90, 45, 75, 30, 85, 55].map((h, k) => (
                    <i key={k} className="pulse" style={{
                      display: "block", width: 3, height: `${h}%`,
                      background: r.accent,
                      boxShadow: `0 0 4px ${r.accent}`,
                      animationDelay: `${k * 0.1}s`,
                    }}/>
                  ))}
                </div>
                {/* Day badge */}
                <div style={{
                  position: "absolute", top: 14, right: 14,
                  padding: "4px 10px",
                  border: `1px solid ${r.accent}`,
                  background: "oklch(0.08 0.04 300 / 0.85)",
                  color: r.accent,
                  fontFamily: "Orbitron",
                  fontSize: 10, fontWeight: 700, letterSpacing: "0.25em",
                }}>
                  {r.day}
                </div>
                {/* Home badge */}
                {r.home && (
                  <div style={{
                    position: "absolute", top: 14, left: 14,
                    padding: "4px 10px",
                    background: r.accent,
                    color: "var(--bg-0)",
                    fontFamily: "Orbitron",
                    fontSize: 9, fontWeight: 900, letterSpacing: "0.25em",
                  }}>★ HOME CLUB</div>
                )}
                <div style={{
                  position: "absolute", right: 14, bottom: 14,
                  fontFamily: "JetBrains Mono, monospace",
                  fontSize: 9, color: "oklch(0.8 0.02 300 / 0.6)",
                  letterSpacing: "0.25em",
                }}>{String(i + 1).padStart(3, "0")}</div>
              </div>

              <div style={styles_rs.cardBody}>
                <div className="jp" style={{fontSize: 11, color: r.accent, letterSpacing: "0.18em", opacity: 0.85}}>{r.kana}</div>
                <div className="display" style={{fontSize: 20, letterSpacing: "0.05em", marginTop: 4, textWrap: "balance"}}>{r.name}</div>
                <div className="mono" style={{fontSize: 10, color: "var(--ink-dim)", letterSpacing: "0.2em", marginTop: 8}}>{r.vibe}</div>

                {/* Location block */}
                {(r.dc || r.plot) && (
                  <div style={{
                    marginTop: 14, paddingTop: 12,
                    borderTop: "1px dashed var(--panel-stroke)",
                    display: "grid", gap: 6,
                  }}>
                    {r.dc && (
                      <div style={{display: "flex", justifyContent: "space-between", gap: 8}}>
                        <span className="mono" style={{fontSize: 9, color: "var(--ink-faint)", letterSpacing: "0.2em"}}>DC</span>
                        <span className="mono" style={{fontSize: 10, color: "var(--ink)", letterSpacing: "0.1em", textAlign: "right"}}>{r.dc}</span>
                      </div>
                    )}
                    {r.world && (
                      <div style={{display: "flex", justifyContent: "space-between", gap: 8}}>
                        <span className="mono" style={{fontSize: 9, color: "var(--ink-faint)", letterSpacing: "0.2em"}}>WORLD</span>
                        <span className="mono" style={{fontSize: 10, color: r.accent, letterSpacing: "0.1em", textAlign: "right"}}>★ {r.world}</span>
                      </div>
                    )}
                    {r.district && (
                      <div style={{display: "flex", justifyContent: "space-between", gap: 8}}>
                        <span className="mono" style={{fontSize: 9, color: "var(--ink-faint)", letterSpacing: "0.2em"}}>DISTRICT</span>
                        <span className="mono" style={{fontSize: 10, color: "var(--ink)", letterSpacing: "0.1em", textAlign: "right"}}>{r.district}</span>
                      </div>
                    )}
                    {r.plot && (
                      <div style={{display: "flex", justifyContent: "space-between", gap: 8}}>
                        <span className="mono" style={{fontSize: 9, color: "var(--ink-faint)", letterSpacing: "0.2em"}}>PLOT</span>
                        <span className="mono" style={{fontSize: 10, color: "var(--cyan)", letterSpacing: "0.1em", textAlign: "right"}}>{r.plot}</span>
                      </div>
                    )}
                  </div>
                )}

                <div style={styles_rs.cardFoot}>
                  <div>
                    <div className="mono" style={{fontSize: 9, color: "var(--ink-faint)", letterSpacing: "0.2em"}}>NIGHT</div>
                    <div className="display" style={{fontSize: 13, color: r.accent, marginTop: 2}}>{day?.full}</div>
                  </div>
                  <div style={{textAlign: "right"}}>
                    <div className="mono" style={{fontSize: 9, color: "var(--ink-faint)", letterSpacing: "0.2em"}}>STATUS</div>
                    <div className="display" style={{fontSize: 11, color: "var(--cyan)", marginTop: 2}}>
                      <span className="eq" style={{verticalAlign: "middle", marginRight: 6}}>
                        <i/><i/><i/><i/><i/>
                      </span>
                      RESIDENT
                    </div>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Week banner */}
      <div style={styles_rs.weekBanner}>
        <span className="mono" style={{fontSize: 10, color: "var(--cyan)", letterSpacing: "0.3em"}}>// WEEKLY SCHEDULE</span>
        <div style={{display: "flex", gap: 10, flex: 1, flexWrap: "wrap"}}>
          {DAYS.map(d => (
            <div key={d.key} style={styles_rs.weekPill}>
              <span className="display" style={{color: counts[d.key] ? "var(--magenta)" : "var(--ink-faint)"}}>{d.key}</span>
              <span className="mono" style={{color: "var(--ink-dim)"}}>·</span>
              <span className="mono" style={{color: counts[d.key] ? "var(--ink)" : "var(--ink-faint)"}}>{counts[d.key]} {counts[d.key] === 1 ? "SET" : "SETS"}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const styles_rs = {
  filterRow: {
    display: "flex", gap: 10, marginBottom: 32, flexWrap: "wrap",
  },
  filterBtn: {
    position: "relative",
    padding: "12px 20px",
    border: "1px solid var(--panel-stroke)",
    color: "var(--ink)",
    cursor: "pointer",
    fontFamily: "inherit",
    minWidth: 72,
    textAlign: "center",
    transition: "all .2s ease",
    clipPath: "polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%)",
  },
  grid: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
    gap: 16,
  },
  card: {
    display: "flex", flexDirection: "column",
    overflow: "hidden",
    transition: "all .25s ease",
  },
  cardArt: {
    position: "relative",
    aspectRatio: "16/10",
    background: "linear-gradient(135deg, oklch(0.18 0.08 300), oklch(0.12 0.04 300))",
    borderBottom: "1px solid var(--panel-stroke)",
    overflow: "hidden",
  },
  cardBody: {
    padding: 18,
  },
  cardFoot: {
    display: "flex", justifyContent: "space-between", alignItems: "flex-end",
    marginTop: 16, paddingTop: 14,
    borderTop: "1px solid var(--panel-stroke)",
  },
  weekBanner: {
    marginTop: 36,
    padding: "18px 22px",
    border: "1px solid var(--panel-stroke)",
    background: "oklch(0.1 0.04 300 / 0.6)",
    display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap",
  },
  weekPill: {
    display: "inline-flex", gap: 8, alignItems: "center",
    padding: "6px 12px",
    border: "1px solid var(--panel-stroke)",
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11,
    letterSpacing: "0.15em",
  },
};

Object.assign(window, { Residencias });