// DATA LINKS — social tiles
const LINKS = [
  { id: "spotify",  label: "SPOTIFY",      kana: "スポティファイ", desc: "Official artist · streams & EPs",   url: "https://open.spotify.com/intl-en/artist/7A2CVZfgoNAlExeWDEDYq2", accent: "oklch(0.78 0.22 150)", icon: "▶", code: "LNK.001" },
  { id: "apple",    label: "APPLE MUSIC",  kana: "アップルミュージック", desc: "Lossless · hi-res sets",        url: "https://music.apple.com/en/artist/dj-gaia/1841370521",              accent: "oklch(0.78 0.12 340)", icon: "♪", code: "LNK.002" },
  { id: "youtube",  label: "YOUTUBE",      kana: "ユーチューブ",   desc: "Originals, covers & live VOD",       url: "https://www.youtube.com/@djgaiaffxiv?sub_confirmation=1",           accent: "oklch(0.68 0.22 25)",  icon: "▷", code: "LNK.003" },
  { id: "twitch",   label: "TWITCH",       kana: "ツイッチ",       desc: "Live sets · every week",              url: "https://www.twitch.tv/dj_gaia",                                      accent: "oklch(0.6 0.2 300)",   icon: "◉", code: "LNK.004" },
  { id: "discord",  label: "DISCORD",      kana: "ディスコード",   desc: "WOAH! crew · 1,200+ members",        url: "https://discord.gg/djgaia",                                          accent: "oklch(0.7 0.15 265)",  icon: "✦", code: "LNK.005" },
  { id: "instagram",label: "INSTAGRAM",    kana: "インスタグラム", desc: "In-game photos & moments",           url: "https://www.instagram.com/djgaia.ffxiv",                             accent: "oklch(0.72 0.22 20)",  icon: "◈", code: "LNK.006" },
  { id: "linktree", label: "ALL LINKS",    kana: "オールリンク",   desc: "Master index · everything",          url: "https://linktr.ee/djgaia",                                           accent: "var(--cyan)",          icon: "⎔", code: "LNK.007" },
];

function DataLinks() {
  return (
    <section id="links" className="page">
      <div className="sec-head">
        <div>
          <div className="tag">// 06 · DATA LINK PROTOCOL</div>
          <h2>TUNE <span style={{color: "var(--magenta)"}}>IN</span></h2>
        </div>
        <div className="sub">7 CHANNELS // ALWAYS LIVE</div>
      </div>

      <div style={styles_dl.grid}>
        {LINKS.map((l, i) => (
          <a key={l.id} href={l.url} target="_blank" rel="noopener" className="panel bracket-4" style={{...styles_dl.tile, borderColor: "var(--panel-stroke)"}}
             onMouseEnter={(e) => {
               e.currentTarget.style.transform = "translateY(-4px)";
               e.currentTarget.style.boxShadow = `0 0 32px ${l.accent}`;
               e.currentTarget.style.borderColor = l.accent;
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.transform = "translateY(0)";
               e.currentTarget.style.boxShadow = "none";
               e.currentTarget.style.borderColor = "var(--panel-stroke)";
             }}
          >
            <span className="bk tl"></span><span className="bk tr"></span>
            <span className="bk bl"></span><span className="bk br"></span>

            <div style={styles_dl.tileTop}>
              <div style={{
                width: 44, height: 44,
                border: `1px solid ${l.accent}`,
                color: l.accent, textShadow: `0 0 8px ${l.accent}`,
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "Orbitron", fontSize: 20,
                background: "oklch(0.08 0.04 300 / 0.8)",
              }}>{l.icon}</div>
              <div className="mono" style={{fontSize: 10, color: "var(--ink-faint)", letterSpacing: "0.25em"}}>{l.code}</div>
            </div>

            <div style={{flex: 1}}></div>

            <div>
              <div className="jp" style={{fontSize: 11, color: l.accent, letterSpacing: "0.2em", opacity: 0.85}}>{l.kana}</div>
              <div className="display" style={{fontSize: 22, letterSpacing: "0.06em", marginTop: 4}}>{l.label}</div>
              <div style={{fontSize: 13, color: "var(--ink-dim)", marginTop: 6}}>{l.desc}</div>
            </div>

            <div style={styles_dl.tileFoot}>
              <span className="mono" style={{fontSize: 10, letterSpacing: "0.2em", color: l.accent}}>CONNECT</span>
              <span style={{color: l.accent, fontFamily: "monospace"}}>→</span>
            </div>
          </a>
        ))}

        {/* CTA tile */}
        <div className="panel" style={{...styles_dl.tile, background: "linear-gradient(135deg, oklch(0.25 0.22 340 / 0.5), oklch(0.18 0.15 260 / 0.5))"}}>
          <div className="jp" style={{fontSize: 12, color: "var(--cyan)", letterSpacing: "0.25em"}}>またね！</div>
          <div className="display" style={{fontSize: 28, marginTop: 10, textWrap: "balance"}}>
            <span style={{color: "var(--magenta)"}}>WOAH!</span><br/>
            SEE YOU ON<br/>
            THE DANCE FLOOR
          </div>
          <div style={{fontSize: 12, color: "var(--ink-dim)", marginTop: 12}}>Half in-game. Half beyond. All heart.</div>
        </div>
      </div>
    </section>
  );
}

const styles_dl = {
  grid: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 },
  tile: {
    padding: 22,
    display: "flex", flexDirection: "column", gap: 14,
    minHeight: 220,
    textDecoration: "none",
    color: "var(--ink)",
    transition: "all .25s ease",
    background: "oklch(0.1 0.04 300 / 0.55)",
  },
  tileTop: { display: "flex", justifyContent: "space-between", alignItems: "center" },
  tileFoot: {
    display: "flex", justifyContent: "space-between", alignItems: "center",
    paddingTop: 12,
    borderTop: "1px solid var(--panel-stroke)",
  },
};

Object.assign(window, { DataLinks });