// HERO — key visual, title, CTA, character select
const { useState: useStateHe, useEffect: useEffectHe } = React;

const CHARACTERS = [
  {
    id: "neon",
    codename: "GAIA LOVE",
    kana: "ガイア・ラブ",
    set: "TECHNO // EDM",
    accent: "var(--magenta)",
    tag: "HIGH BPM · CLUB CORE",
    palette: "linear-gradient(135deg, oklch(0.4 0.25 340), oklch(0.25 0.2 300))",
    bpm: 138,
    stats: { Energy: 98, Hype: 94, Drop: 100, Aura: 88 },
  },
  {
    id: "crimson",
    codename: "CRIMSON GAIA",
    kana: "クリムゾン・ガイア",
    set: "ROCK // METAL",
    accent: "var(--danger)",
    tag: "RAW POWER · HEAVY",
    palette: "linear-gradient(135deg, oklch(0.42 0.22 20), oklch(0.22 0.12 350))",
    bpm: 156,
    stats: { Energy: 100, Hype: 91, Drop: 96, Aura: 95 },
  },
  {
    id: "sakura",
    codename: "SAKURA GAIA",
    kana: "サクラ・ガイア",
    set: "J-POP // SYNTH",
    accent: "var(--rose)",
    tag: "DREAM · KAWAII CORE",
    palette: "linear-gradient(135deg, oklch(0.55 0.18 10), oklch(0.35 0.16 320))",
    bpm: 120,
    stats: { Energy: 86, Hype: 99, Drop: 82, Aura: 100 },
  },
];

function useMadridClock() {
  const [t, setT] = useStateHe(() => new Date());
  useEffectHe(() => {
    const i = setInterval(() => setT(new Date()), 1000);
    return () => clearInterval(i);
  }, []);
  // Eorzea-offset: Madrid time minus 2 hours
  const shifted = new Date(t.getTime() - 2 * 60 * 60 * 1000);
  const hm = shifted.toLocaleTimeString("en-GB", {
    hour: "2-digit", minute: "2-digit",
    hour12: false, timeZone: "Europe/Madrid",
  });
  return hm;
}

function Hero() {
  const [charIx, setCharIx] = useStateHe(0);
  const char = CHARACTERS[charIx];
  const clock = useMadridClock();

  return (
    <section id="hero" style={styles_hero.wrap}>
      <div style={styles_hero.floatTag}>
        <span className="chip"><span className="dot"></span>SYS.ONLINE · EORZEA TIME {clock}</span>
      </div>

      {/* Title block */}
      <div style={styles_hero.titleCol}>
        <div style={styles_hero.preTitle}>
          <span className="chip"><span className="dot gold"></span>CHAPTER 01 · THE ANIME MADE DJ</span>
        </div>

        <h1 style={styles_hero.bigTitle}>
          <span className="jp" style={styles_hero.kanaTop}>アニメメイド · ディージェイ</span>
          <span className="display neon" style={styles_hero.line1}>DJ GAIA</span>
          <span className="display" style={styles_hero.line2}>
            <span style={{color: "var(--ink)"}}>WOAH!</span>
            <span style={{color: "var(--magenta)", textShadow: "0 0 14px var(--magenta)"}}> // </span>
            <span style={{color: "var(--cyan)", textShadow: "0 0 14px var(--cyan)"}}>WORLD</span>
          </span>
          <span className="zd" style={styles_hero.line3}>EORZEA TOUR · 2026</span>
        </h1>

        <p style={styles_hero.blurb}>
          Half Romanian, half Japanese. Raised on Roblox decks and GTA radios, now spinning across every data center in Final Fantasy XIV. Techno, EDM, rock, metal — all made with heart, chaos and a lil' bit of pure anime energy. <span style={{color: "var(--magenta)"}}>Woah!</span>
        </p>

        <div style={styles_hero.ctaRow}>
          <a href="#tracks" className="btn">
            <span>START THE SET</span><span className="arrow">▶</span>
          </a>
          <a href="#club" className="btn ghost">
            <span>ENTER WOAH! CLUB</span><span className="arrow">→</span>
          </a>
        </div>

        <div style={styles_hero.metaRow}>
          <MetaCell label="Main Job" value="Anime DJ" kana="アニメDJ" />
          <MetaCell label="Home Club" value="WOAH!" kana="クラブ" />
          <MetaCell label="Race" value="Half 🌹 Half 🌸" kana="ハーフ" />
          <MetaCell label="Weapon" value="CDJ-3000" kana="武器" />
        </div>

        {/* Inline music player — fills the gap under meta row */}
        {window.HeroPlayer && <window.HeroPlayer />}
      </div>

      {/* Key visual */}
      <div style={styles_hero.visualCol}>
        <KeyVisual char={char} />

        {/* Character select */}
        <div style={styles_hero.selectRow}>
          <div style={{display: "flex", alignItems: "center", gap: 12, marginBottom: 10}}>
            <span className="mono" style={{fontSize: 11, color: "var(--cyan)", letterSpacing: "0.25em"}}>// SELECT SET</span>
            <span style={{flex: 1, height: 1, background: "var(--panel-stroke)"}}></span>
            <span className="mono" style={{fontSize: 10, color: "var(--ink-faint)"}}>0{charIx + 1}/0{CHARACTERS.length}</span>
          </div>
          <div style={styles_hero.charGrid}>
            {CHARACTERS.map((c, i) => (
              <button key={c.id}
                onClick={() => setCharIx(i)}
                style={{
                  ...styles_hero.charBtn,
                  borderColor: i === charIx ? c.accent : "var(--panel-stroke)",
                  background: i === charIx ? c.palette : "oklch(0.1 0.04 300 / 0.5)",
                  boxShadow: i === charIx ? `0 0 24px ${c.accent}` : "none",
                }}>
                <div className="placeholder-art" style={{ width: "100%", aspectRatio: "1/1", marginBottom: 8, border: "none", background: c.palette, opacity: 0.7, position: "relative" }}>
                  <div style={{position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center"}}>
                    <div className="spin" style={{
                      width: "60%", aspectRatio: "1/1", borderRadius: "50%",
                      background: "radial-gradient(circle, var(--bg-0) 20%, transparent 22%, var(--bg-0) 24%, transparent 26%, oklch(0.3 0.1 300) 28%, var(--bg-0) 48%)",
                      border: `2px solid ${c.accent}`,
                      boxShadow: `0 0 20px ${c.accent}`,
                    }}></div>
                  </div>
                </div>
                <div className="display" style={{ fontSize: 11, letterSpacing: "0.15em", color: "var(--ink)" }}>{c.codename.split(" ")[0]}</div>
                <div className="mono" style={{ fontSize: 9, color: "var(--ink-dim)", marginTop: 2 }}>{c.set}</div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function MetaCell({ label, value, kana }) {
  return (
    <div style={{ flex: 1, borderLeft: "1px solid var(--panel-stroke)", paddingLeft: 14, minWidth: 0 }}>
      <div className="mono" style={{ fontSize: 9, color: "var(--cyan)", letterSpacing: "0.2em" }}>{label.toUpperCase()}</div>
      <div className="display" style={{ fontSize: 16, marginTop: 4, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{value}</div>
      <div className="jp" style={{ fontSize: 10, color: "var(--ink-faint)", marginTop: 2 }}>{kana}</div>
    </div>
  );
}

function KeyVisual({ char }) {
  return (
    <div className="bracket-4" style={styles_hero.kvWrap}>
      <span className="bk tl"></span><span className="bk tr"></span>
      <span className="bk bl"></span><span className="bk br"></span>

      {/* Glow */}
      <div style={{
        position: "absolute", inset: -40,
        background: `radial-gradient(ellipse at 50% 40%, ${char.accent.replace("var(", "oklch(").replace(")","")}, transparent 60%)`,
        opacity: 0.35, filter: "blur(40px)", pointerEvents: "none",
      }}></div>

      {/* Art */}
      <div style={{
        width: "100%", aspectRatio: "3/4",
        background: `url('assets/gaia-kv.jpg') center/cover no-repeat, ${char.palette}`,
        border: "1px solid var(--panel-stroke)",
        position: "relative",
        overflow: "hidden",
      }}>
        {/* Radial rings */}
        <div style={{
          position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)",
          width: "92%", aspectRatio: "1/1",
          borderRadius: "50%",
          border: "1px solid oklch(1 0 0 / 0.12)",
          pointerEvents: "none",
        }}></div>
        <div style={{
          position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)",
          width: "70%", aspectRatio: "1/1",
          borderRadius: "50%",
          border: "1px dashed oklch(1 0 0 / 0.18)",
          animation: "spin 40s linear infinite",
          pointerEvents: "none",
        }}></div>
        {/* Scanline overlay */}
        <div style={{
          position: "absolute", inset: 0,
          background: "repeating-linear-gradient(to bottom, transparent 0 2px, oklch(1 0 0 / 0.04) 2px 3px)",
          pointerEvents: "none",
        }}></div>
        {/* Gradient wash */}
        <div style={{
          position: "absolute", inset: 0,
          background: `linear-gradient(to bottom, transparent 55%, oklch(0.08 0.04 300 / 0.85) 100%)`,
          pointerEvents: "none",
        }}></div>
        {/* Kana across */}
        <div style={{
          position: "absolute", left: 16, bottom: 16, right: 16,
          display: "flex", justifyContent: "space-between", alignItems: "flex-end"
        }}>
          <div>
            <div className="mono" style={{fontSize: 10, color: "var(--cyan)", letterSpacing: "0.2em"}}>UNIT 01</div>
            <div className="display" style={{fontSize: 20, letterSpacing: "0.08em"}}>{char.codename}</div>
            <div className="jp" style={{fontSize: 11, color: "var(--ink-dim)"}}>{char.kana}</div>
          </div>
          <div style={{textAlign: "right"}}>
            <div className="mono" style={{fontSize: 10, color: "var(--ink-dim)", letterSpacing: "0.2em"}}>BPM</div>
            <div className="display" style={{fontSize: 22, color: char.accent, textShadow: `0 0 12px ${char.accent}`}}>{char.bpm}</div>
          </div>
        </div>
      </div>

      {/* Stat overlay bottom */}
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14,
        padding: "16px 18px",
        background: "oklch(0.08 0.04 300 / 0.85)",
        borderTop: `1px solid ${char.accent}`,
      }}>
        {Object.entries(char.stats).map(([k, v]) => (
          <div key={k}>
            <div className="mono" style={{ fontSize: 9, color: "var(--ink-dim)", letterSpacing: "0.2em" }}>{k.toUpperCase()}</div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 4 }}>
              <div className="display" style={{ fontSize: 16, color: char.accent, width: 32 }}>{v}</div>
              <div style={{ flex: 1, height: 3, background: "oklch(0.2 0.06 300)", overflow: "hidden" }}>
                <div style={{ width: `${v}%`, height: "100%", background: char.accent, boxShadow: `0 0 6px ${char.accent}` }}></div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

const styles_hero = {
  wrap: {
    display: "grid",
    gridTemplateColumns: "1.05fr 1fr",
    gap: 64,
    padding: "60px 0 40px",
    position: "relative",
    minHeight: "calc(100vh - 80px)",
  },
  floatTag: { position: "absolute", top: 20, right: 0 },
  titleCol: { display: "flex", flexDirection: "column", justifyContent: "center", gap: 32 },
  preTitle: {},
  bigTitle: { display: "flex", flexDirection: "column", gap: 4 },
  kanaTop: { fontSize: 14, color: "var(--cyan)", letterSpacing: "0.3em", marginBottom: 12 },
  line1: { fontSize: "clamp(64px, 9vw, 140px)", lineHeight: 0.95, letterSpacing: "0.01em" },
  line2: { fontSize: "clamp(40px, 5.5vw, 80px)", lineHeight: 1, letterSpacing: "0.02em" },
  line3: { fontSize: "clamp(14px, 1.2vw, 18px)", marginTop: 18, color: "var(--ink-dim)" },
  blurb: { fontSize: 17, lineHeight: 1.55, color: "var(--ink-dim)", maxWidth: 560, textWrap: "pretty" },
  ctaRow: { display: "flex", gap: 16, flexWrap: "wrap" },
  metaRow: { display: "flex", gap: 0, marginTop: 8, borderTop: "1px solid var(--panel-stroke)", paddingTop: 20 },
  visualCol: { display: "flex", flexDirection: "column", gap: 24, justifyContent: "center" },
  kvWrap: { position: "relative" },
  selectRow: {},
  charGrid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 },
  charBtn: {
    textAlign: "left",
    padding: 10,
    cursor: "pointer",
    border: "1px solid var(--panel-stroke)",
    color: "var(--ink)",
    transition: "all .2s ease",
    fontFamily: "inherit",
  },
};

Object.assign(window, { Hero });