// MUSIC — albums library
const { useState: useStateMu } = React;

const ALBUMS = [
  { n: "01", title: "Duality",             kana: "デュアリティ",           year: 2025, release: "FEB 13, 2025", tracks: 8,  vibe: "TECHNO · EDM · ROCK/METAL", accent: "var(--magenta)", cover: "assets/albums/01-duality.png" },
  { n: "02", title: "Fire Heart",          kana: "ファイア・ハート",         year: 2025, release: "MAR 23, 2025", tracks: 9,  vibe: "TECHNO · EDM · ROCK/METAL", accent: "var(--danger)", cover: "assets/albums/02-fireheart.png" },
  { n: "03", title: "Digital Blade",       kana: "デジタル・ブレード",       year: 2025, release: "MAY 02, 2025", tracks: 10, vibe: "TECHNO · EDM · ROCK/METAL", accent: "var(--cyan)",    cover: "assets/albums/03-digital-blade.png" },
  { n: "04", title: "Paradise",            kana: "パラダイス",               year: 2025, release: "JUN 24, 2025", tracks: 8,  vibe: "TECHNO · EDM · ROCK/METAL", accent: "var(--rose)",    cover: "assets/albums/04-paradise.png" },
  { n: "05", title: "Heavy Mental",        kana: "ヘヴィ・メンタル",         year: 2025, release: "SEP 01, 2025", tracks: 11, vibe: "ROCK/METAL",                accent: "var(--danger)", cover: "assets/albums/05-heavy-mental.png" },
  { n: "06", title: "Future Vision",       kana: "フューチャー・ヴィジョン", year: 2025, release: "OCT 06, 2025", tracks: 9,  vibe: "FUTURE J-K POP · CYBER EDM", accent: "var(--violet)", cover: "assets/albums/06-future-vision.png" },
  { n: "07", title: "Scream",              kana: "スクリーム",               year: 2025, release: "NOV 10, 2025", tracks: 8,  vibe: "ROCK/METAL",                accent: "var(--danger)", cover: "assets/albums/07-scream.png" },
  { n: "08", title: "Anime Covers Vol.01", kana: "アニメカバー Vol.01",      year: 2025, release: "DEC 01, 2025", tracks: 12, vibe: "ANIME COVERS",              accent: "var(--rose)",    cover: "assets/albums/08-anime-covers-01.png" },
  { n: "09", title: "Dare me",             kana: "デア・ミー",               year: 2025, release: "OCT 06, 2025", tracks: 7,  vibe: "FUTURE J-K POP · CYBER EDM", accent: "var(--magenta)", cover: "assets/albums/09-dare-me.png" },
  { n: "10", title: "Feelings",            kana: "フィーリングス",           year: 2026, release: "FEB 02, 2026", tracks: 9,  vibe: "ROCK/METAL",                accent: "var(--rose)",    cover: "assets/albums/10-feelings.png" },
  { n: "11", title: "Venom Hearts",        kana: "ヴェノム・ハーツ",         year: 2026, release: "MAR 20, 2026", tracks: 10, vibe: "FUTURE J-K POP · CYBER EDM", accent: "var(--violet)", cover: "assets/albums/11-venom-hearts.png" },
  { n: "12", title: "Anime Covers Vol.02", kana: "アニメカバー Vol.02",      year: 2026, release: "APR 25, 2026", tracks: 12, vibe: "ANIME COVERS",              accent: "var(--gold)",    cover: "assets/albums/12-anime-covers-02.png" },
];

function Music() {
  const [sel, setSel] = useStateMu(0);
  const a = ALBUMS[sel];

  return (
    <section id="tracks" className="page">
      <div className="sec-head">
        <div>
          <div className="tag">// 02 · DISCOGRAPHY</div>
          <h2>MU<span style={{color: "var(--magenta)"}}>SIC</span></h2>
        </div>
        <div className="sub">{ALBUMS.length} ALBUMS // ARTWORK & TRACKS UPLOADING SOON</div>
      </div>

      {/* Featured album player */}
      <div style={styles_mu.feat}>
        <div className="panel bracket-4" style={styles_mu.featCard}>
          <span className="bk tl"></span><span className="bk tr"></span>
          <span className="bk bl"></span><span className="bk br"></span>

          <div style={styles_mu.cover}>
            {a.cover ? (
              <div style={{
                position: "absolute", inset: 0,
                background: `url('${a.cover}') center/cover no-repeat`,
              }}></div>
            ) : (
              <>
                <div style={{
                  position: "absolute", inset: 0,
                  background: `linear-gradient(135deg, ${a.accent.replace("var(","oklch(").replace(")","")}, oklch(0.12 0.04 300))`,
                  opacity: 0.85,
                }}></div>
                <div style={{
                  position: "absolute", inset: 0,
                  background: "repeating-linear-gradient(135deg, oklch(1 0 0 / 0.05) 0 10px, transparent 10px 22px)",
                }}></div>
              </>
            )}

            {/* Spinning disc behind */}
            <div className="spin" style={{
              position: "absolute", right: "-18%", top: "50%",
              transform: "translateY(-50%)",
              width: "70%", aspectRatio: "1/1",
              borderRadius: "50%",
              background: "radial-gradient(circle, oklch(0.1 0.02 300) 28%, oklch(0.14 0.03 300) 30%, oklch(0.08 0.02 300) 50%, oklch(0.12 0.03 300) 52%, oklch(0.08 0.02 300) 70%, oklch(0.14 0.03 300) 72%, oklch(0.06 0.02 300))",
              border: `2px solid ${a.accent}`,
              boxShadow: `0 0 40px ${a.accent}`,
              opacity: 0.6,
            }}></div>

            {a.cover && (
              <div style={{
                position: "absolute", inset: 0,
                background: "linear-gradient(to top, oklch(0.05 0.04 300 / 0.85) 0%, transparent 40%, oklch(0.05 0.04 300 / 0.35) 100%)",
                pointerEvents: "none",
              }}></div>
            )}
            <div style={{position: "relative", padding: 28, height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between"}}>
              <div>
                <span className="chip"><span className="dot"></span>ALBUM · {a.n}{a.release ? ` · ${a.release}` : ""}</span>
              </div>
              {!a.cover && (
                <div>
                  <div className="display" style={{fontSize: 11, color: "oklch(1 0 0 / 0.6)", letterSpacing: "0.3em"}}>ALBUM · {a.n}</div>
                  <div className="display" style={{fontSize: "clamp(32px, 3.8vw, 54px)", lineHeight: 1, marginTop: 8, textWrap: "balance", textShadow: `0 0 14px ${a.accent}`}}>{a.title}</div>
                  <div className="jp" style={{fontSize: 13, color: "oklch(1 0 0 / 0.7)", marginTop: 6}}>{a.kana}</div>
                </div>
              )}
            </div>
          </div>

          <div style={styles_mu.featPanel}>
            <div style={{display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14}}>
              <span className="chip"><span className="dot pulse"></span>PREVIEW · LOADING</span>
              <span className="mono" style={{fontSize: 10, color: "var(--ink-faint)"}}>DJ GAIA · {a.year}</span>
            </div>

            <div className="mono" style={{fontSize: 11, color: a.accent, letterSpacing: "0.25em"}}>{a.vibe}</div>
            <div className="display" style={{fontSize: 28, marginTop: 6, letterSpacing: "0.03em"}}>{a.title}</div>

            {/* Waveform placeholder */}
            <div style={styles_mu.wave}>
              {Array.from({length: 64}).map((_, i) => {
                const h = 20 + Math.abs(Math.sin(i * 0.5 + sel) * Math.cos(i * 0.3) * 80);
                return <i key={i} style={{
                  display: "block", width: 3, height: `${Math.min(100, h)}%`,
                  background: "oklch(0.25 0.06 300)",
                }}/>;
              })}
            </div>
            <div style={{display: "flex", justifyContent: "space-between", marginTop: 6}}>
              <span className="mono" style={{fontSize: 10, color: "var(--ink-faint)"}}>00:00</span>
              <span className="mono" style={{fontSize: 10, color: "var(--ink-faint)"}}>--:--</span>
            </div>

            <div style={styles_mu.ctrlRow}>
              <button style={styles_mu.ctrlBtn} disabled>◀◀</button>
              <button style={{...styles_mu.ctrlBtn, ...styles_mu.play, background: a.accent}} disabled title="Player unlocks when tracks are uploaded">▶</button>
              <button style={styles_mu.ctrlBtn} disabled>▶▶</button>
              <div style={{flex: 1}}></div>
              <div className="mono" style={{fontSize: 10, color: "var(--ink-dim)"}}>TRACKS</div>
              <div className="display" style={{fontSize: 20, color: a.accent, textShadow: `0 0 8px ${a.accent}`}}>{String(a.tracks).padStart(2, "0")}</div>
            </div>

            <div style={styles_mu.unlockNote}>
              <span className="mono" style={{fontSize: 10, color: "var(--ink-faint)", letterSpacing: "0.2em"}}>
                ◇ PLAYER UNLOCKS WHEN COVERS & TRACKS ARE UPLOADED
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Album grid */}
      <div style={styles_mu.grid}>
        {ALBUMS.map((al, i) => (
          <button key={al.n} onClick={() => setSel(i)} style={{
            ...styles_mu.tile,
            borderColor: i === sel ? al.accent : "var(--panel-stroke)",
            boxShadow: i === sel ? `0 0 20px ${al.accent}` : "none",
          }}>
            <div style={styles_mu.tileCover}>
              {al.cover ? (
                <div style={{
                  position: "absolute", inset: 0,
                  background: `url('${al.cover}') center/cover no-repeat`,
                }}></div>
              ) : (
                <>
                  <div style={{
                    position: "absolute", inset: 0,
                    background: `linear-gradient(135deg, ${al.accent.replace("var(","oklch(").replace(")","")}, oklch(0.1 0.04 300))`,
                    opacity: 0.75,
                  }}></div>
                  <div style={{
                    position: "absolute", inset: 0,
                    background: "repeating-linear-gradient(135deg, oklch(1 0 0 / 0.04) 0 8px, transparent 8px 16px)",
                  }}></div>
                </>
              )}
              <div style={{
                position: "absolute", left: 10, top: 10,
                fontFamily: "Orbitron",
                fontSize: 11, fontWeight: 900,
                letterSpacing: "0.25em",
                color: "oklch(1 0 0 / 0.9)",
              }}>#{al.n}</div>
              {i === sel && (
                <div style={{
                  position: "absolute", right: 10, top: 10,
                  padding: "3px 8px",
                  background: al.accent,
                  color: "var(--bg-0)",
                  fontFamily: "Orbitron",
                  fontSize: 9, fontWeight: 900, letterSpacing: "0.2em",
                }}>▶ PLAYING</div>
              )}
              <div style={{
                position: "absolute", left: 10, bottom: 10,
                fontFamily: "JetBrains Mono, monospace",
                fontSize: 9,
                color: "oklch(1 0 0 / 0.7)",
                letterSpacing: "0.2em",
              }}>{al.year}</div>
            </div>
            <div style={styles_mu.tileBody}>
              <div className="display" style={{fontSize: 13, letterSpacing: "0.03em", textWrap: "balance"}}>{al.title}</div>
              <div className="jp" style={{fontSize: 10, color: "var(--ink-faint)", marginTop: 3}}>{al.kana}</div>
              <div style={{display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 8}}>
                <span className="mono" style={{fontSize: 9, color: "var(--ink-dim)", letterSpacing: "0.2em"}}>{al.vibe.split(" · ")[0]}</span>
                <span className="mono" style={{fontSize: 10, color: al.accent}}>{al.tracks} TRX</span>
              </div>
            </div>
          </button>
        ))}
      </div>
    </section>
  );
}

const styles_mu = {
  feat: { marginBottom: 28 },
  featCard: {
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    minHeight: 360,
  },
  cover: {
    position: "relative",
    borderRight: "1px solid var(--panel-stroke)",
    overflow: "hidden",
    minHeight: 360,
  },
  featPanel: {
    padding: 28,
    display: "flex", flexDirection: "column", gap: 4,
  },
  wave: {
    marginTop: 20,
    display: "flex", alignItems: "flex-end", gap: 2,
    height: 56,
    padding: "0 2px",
    borderBottom: "1px solid var(--panel-stroke)",
  },
  ctrlRow: {
    display: "flex", alignItems: "center", gap: 10, marginTop: 14,
  },
  ctrlBtn: {
    width: 34, height: 34,
    border: "1px solid var(--panel-stroke)",
    background: "oklch(0.12 0.04 300 / 0.5)",
    color: "var(--ink-dim)",
    cursor: "not-allowed",
    fontFamily: "Orbitron, sans-serif",
    fontSize: 11,
    opacity: 0.5,
  },
  play: { width: 48, color: "var(--bg-0)", border: "none", fontSize: 14, opacity: 0.9, cursor: "not-allowed" },
  unlockNote: {
    marginTop: 18, padding: "10px 12px",
    border: "1px dashed var(--panel-stroke)",
    textAlign: "center",
  },
  grid: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
    gap: 14,
  },
  tile: {
    padding: 0,
    border: "1px solid var(--panel-stroke)",
    background: "oklch(0.1 0.04 300 / 0.5)",
    color: "var(--ink)",
    cursor: "pointer",
    fontFamily: "inherit",
    textAlign: "left",
    transition: "all .2s ease",
    display: "flex", flexDirection: "column",
  },
  tileCover: {
    position: "relative",
    aspectRatio: "1/1",
    overflow: "hidden",
  },
  tileBody: {
    padding: 12,
    flex: 1,
  },
};

Object.assign(window, { Music });