// TRACKS — discography deck
const { useState: useStateTr } = React;

const TRACKS = [
  { id: 1, title: "Eorzean Pulse",       kana: "エオルゼアン・パルス",   bpm: 132, dur: "4:18", genre: "TECHNO",    mood: "DRIVE",   accent: "var(--magenta)", plays: "1.2M" },
  { id: 2, title: "Sakura Circuit",      kana: "サクラ・サーキット",       bpm: 120, dur: "3:52", genre: "SYNTH-POP", mood: "DREAM",   accent: "var(--rose)",    plays: "842K" },
  { id: 3, title: "Woah! (Club Mix)",    kana: "ウォア!クラブ・ミックス", bpm: 140, dur: "5:04", genre: "EDM",       mood: "HYPE",    accent: "var(--cyan)",    plays: "2.6M" },
  { id: 4, title: "Crimson Aetheryte",   kana: "クリムゾン・エーテライト", bpm: 156, dur: "4:36", genre: "METAL",     mood: "RAGE",    accent: "var(--danger)",  plays: "598K" },
  { id: 5, title: "Half Moon Descent",   kana: "ハーフムーン・ディセント", bpm: 110, dur: "6:12", genre: "AMBIENT",   mood: "CHILL",   accent: "var(--violet)",  plays: "410K" },
  { id: 6, title: "Dynamis Drop",        kana: "ダイナミス・ドロップ",     bpm: 145, dur: "4:02", genre: "TECHNO",    mood: "DROP",    accent: "var(--magenta)", plays: "1.8M" },
];

function Tracks() {
  const [sel, setSel] = useStateTr(2);
  const t = TRACKS[sel];

  return (
    <section id="tracks" className="page">
      <div className="sec-head">
        <div>
          <div className="tag">// 02 · DISCOGRAPHY DECK</div>
          <h2>TRACK <span style={{color: "var(--magenta)"}}>LIBRARY</span></h2>
        </div>
        <div className="sub">LOADED: {TRACKS.length} // STREAMS: 7.4M+</div>
      </div>

      <div style={styles_tr.grid}>
        {/* Now Playing */}
        <div className="panel bracket-4" style={styles_tr.np}>
          <span className="bk tl"></span><span className="bk tr"></span>
          <span className="bk bl"></span><span className="bk br"></span>

          <div style={styles_tr.npHead}>
            <span className="chip"><span className="dot pulse"></span>NOW PLAYING · CH.{String(sel+1).padStart(2,"0")}</span>
            <span className="mono" style={{fontSize: 10, color: "var(--ink-faint)"}}>AUDIO.STREAM.LIVE</span>
          </div>

          <div style={styles_tr.npBody}>
            {/* Record */}
            <div style={styles_tr.vinyl}>
              <div className="spin" style={{...styles_tr.vinylDisc, boxShadow: `0 0 40px ${t.accent}`}}>
                <div style={{...styles_tr.vinylLabel, background: t.accent}}>
                  <span className="display" style={{fontSize: 10, color: "var(--bg-0)"}}>GAIA</span>
                </div>
              </div>
              <div style={styles_tr.vinylArm}></div>
            </div>

            <div style={{flex: 1, minWidth: 0}}>
              <div className="mono" style={{fontSize: 11, color: t.accent, letterSpacing: "0.25em"}}>{t.genre} // {t.mood}</div>
              <div className="display" style={styles_tr.npTitle}>{t.title}</div>
              <div className="jp" style={{fontSize: 14, color: "var(--ink-dim)", marginTop: 2}}>{t.kana}</div>

              {/* Waveform */}
              <div style={styles_tr.wave}>
                {Array.from({length: 64}).map((_, i) => {
                  const h = 20 + Math.abs(Math.sin(i * 0.6) * Math.cos(i * 0.2) * 80) + (i % 5) * 4;
                  const active = i < 22;
                  return <i key={i} style={{
                    width: 3, height: `${Math.min(100, h)}%`,
                    background: active ? t.accent : "oklch(0.25 0.06 300)",
                    boxShadow: active ? `0 0 4px ${t.accent}` : "none",
                  }}/>;
                })}
              </div>

              <div style={styles_tr.wavMeta}>
                <span className="mono" style={{color: t.accent}}>01:24</span>
                <span className="mono" style={{color: "var(--ink-faint)"}}>{t.dur}</span>
              </div>

              <div style={styles_tr.ctrlRow}>
                <button style={styles_tr.ctrlBtn}>◀◀</button>
                <button style={{...styles_tr.ctrlBtn, ...styles_tr.play, background: t.accent}}>▶</button>
                <button style={styles_tr.ctrlBtn}>▶▶</button>
                <div style={{flex: 1}}></div>
                <div className="mono" style={{fontSize: 10, color: "var(--ink-dim)"}}>BPM</div>
                <div className="display" style={{fontSize: 20, color: t.accent, textShadow: `0 0 8px ${t.accent}`}}>{t.bpm}</div>
              </div>
            </div>
          </div>
        </div>

        {/* Track list */}
        <div style={styles_tr.list}>
          {TRACKS.map((tr, i) => (
            <button key={tr.id} onClick={() => setSel(i)} style={{
              ...styles_tr.row,
              borderColor: i === sel ? tr.accent : "var(--panel-stroke)",
              background: i === sel ? "oklch(0.16 0.08 300 / 0.8)" : "oklch(0.1 0.04 300 / 0.5)",
              boxShadow: i === sel ? `0 0 20px ${tr.accent.replace("var(", "oklch(").replace(")","")}` : "none",
            }}>
              <div className="display" style={{fontSize: 14, color: tr.accent, width: 30}}>{String(i+1).padStart(2,"0")}</div>
              <div style={{flex: 1, textAlign: "left"}}>
                <div className="display" style={{fontSize: 15, letterSpacing: "0.04em"}}>{tr.title}</div>
                <div className="mono" style={{fontSize: 10, color: "var(--ink-faint)", marginTop: 2, letterSpacing: "0.2em"}}>
                  {tr.genre} · {tr.mood} · {tr.plays} PLAYS
                </div>
              </div>
              <div className="eq" style={{opacity: i === sel ? 1 : 0}}>
                <i/><i/><i/><i/><i/>
              </div>
              <div className="mono" style={{fontSize: 11, color: "var(--ink-dim)", width: 44, textAlign: "right"}}>{tr.dur}</div>
              <div className="display" style={{fontSize: 13, color: "var(--ink)", width: 50, textAlign: "right"}}>{tr.bpm}</div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

const styles_tr = {
  grid: { display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 28, alignItems: "stretch" },
  np: { padding: 28, display: "flex", flexDirection: "column", gap: 18 },
  npHead: { display: "flex", justifyContent: "space-between", alignItems: "center" },
  npBody: { display: "flex", gap: 24, alignItems: "center", flex: 1 },
  npTitle: { fontSize: 32, letterSpacing: "0.02em", marginTop: 6, textWrap: "balance" },
  vinyl: { position: "relative", width: 180, height: 180, flexShrink: 0 },
  vinylDisc: {
    width: "100%", height: "100%",
    borderRadius: "50%",
    background: "radial-gradient(circle, oklch(0.1 0.02 300) 28%, oklch(0.15 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 oklch(0.2 0.04 300)",
    position: "relative",
    display: "flex", alignItems: "center", justifyContent: "center",
  },
  vinylLabel: {
    width: "36%", aspectRatio: "1/1", borderRadius: "50%",
    display: "flex", alignItems: "center", justifyContent: "center",
  },
  vinylArm: {
    position: "absolute", top: -8, right: -4,
    width: 70, height: 4,
    background: "linear-gradient(to right, var(--hud), var(--panel-stroke))",
    transformOrigin: "right",
    transform: "rotate(22deg)",
    borderRadius: 2,
  },
  wave: {
    marginTop: 20,
    display: "flex", alignItems: "flex-end", gap: 2,
    height: 64,
    padding: "0 2px",
    borderBottom: "1px solid var(--panel-stroke)",
  },
  wavMeta: {
    display: "flex", justifyContent: "space-between", marginTop: 6,
    fontSize: 11,
  },
  ctrlRow: {
    display: "flex", alignItems: "center", gap: 10, marginTop: 16,
  },
  ctrlBtn: {
    width: 36, height: 36,
    border: "1px solid var(--panel-stroke)",
    background: "oklch(0.12 0.04 300 / 0.6)",
    color: "var(--ink)",
    cursor: "pointer",
    fontFamily: "Orbitron, sans-serif",
    fontSize: 11,
  },
  play: { width: 52, color: "var(--bg-0)", border: "none", fontSize: 14 },
  list: { display: "flex", flexDirection: "column", gap: 8 },
  row: {
    display: "flex", alignItems: "center", gap: 14,
    padding: "14px 18px",
    border: "1px solid var(--panel-stroke)",
    color: "var(--ink)",
    cursor: "pointer",
    fontFamily: "inherit",
    transition: "all .2s ease",
  },
};

Object.assign(window, { Tracks });