// HUD pieces: top nav, side rail, status strip, ticker
const { useEffect: useEffectH, useState: useStateH } = React;

function TopNav({ onNav }) {
  const items = [
    { id: "hero",   label: "HOME",      kana: "ホーム" },
    { id: "tracks", label: "MUSIC",    kana: "ミュージック" },
    { id: "club",   label: "WOAH CLUB", kana: "クラブ" },
    { id: "residencias", label: "RESIDENCES", kana: "レジデンシー" },
    { id: "about",  label: "PROFILE",   kana: "プロフィール" },
    { id: "links",  label: "DATA LINK", kana: "リンク" },
  ];
  return (
    <header style={styles_nav.wrap}>
      <div style={styles_nav.left}>
        <div className="display" style={styles_nav.logo}>
          <span style={{color: "var(--magenta)", textShadow: "0 0 12px var(--magenta)"}}>◆</span>
          <span>GAIA</span>
          <span className="mono" style={styles_nav.logoSub}>/ WOAH!</span>
        </div>
      </div>
      <nav style={styles_nav.center}>
        {items.map(it => (
          <a key={it.id} href={`#${it.id}`} style={styles_nav.navItem}
             onClick={(e) => { e.preventDefault(); onNav?.(it.id); }}>
            <span className="display" style={styles_nav.navLabel}>{it.label}</span>
            <span className="jp" style={styles_nav.navKana}>{it.kana}</span>
          </a>
        ))}
      </nav>
      <div style={styles_nav.right}>
        <span className="chip"><span className="dot"></span>LIVE SIGNAL · 99.3%</span>
        <a href="#links" className="btn ghost" style={{padding: "10px 18px", fontSize: 11}}>
          <span>ENTER WORLD</span><span className="arrow">→</span>
        </a>
      </div>
    </header>
  );
}

const styles_nav = {
  wrap: {
    position: "sticky", top: 0, zIndex: 50,
    display: "grid",
    gridTemplateColumns: "1fr auto 1fr",
    alignItems: "center",
    padding: "18px 48px",
    background: "linear-gradient(to bottom, oklch(0.08 0.04 295 / 0.9), oklch(0.08 0.04 295 / 0.4))",
    borderBottom: "1px solid var(--panel-stroke)",
    backdropFilter: "blur(10px)",
  },
  left: { display: "flex", alignItems: "center", gap: 12 },
  logo: {
    display: "flex", alignItems: "center", gap: 10,
    fontSize: 22, letterSpacing: "0.12em",
  },
  logoSub: { color: "var(--ink-faint)", fontSize: 11, letterSpacing: "0.2em" },
  center: { display: "flex", gap: 8 },
  navItem: {
    display: "flex", flexDirection: "column", alignItems: "center",
    padding: "8px 16px", textDecoration: "none", color: "var(--ink)",
    border: "1px solid transparent",
    transition: "all .2s ease",
  },
  navLabel: { fontSize: 12, letterSpacing: "0.2em", fontWeight: 700 },
  navKana: { fontSize: 9, color: "var(--cyan)", letterSpacing: "0.15em", marginTop: 2, opacity: 0.75 },
  right: { display: "flex", alignItems: "center", gap: 14, justifyContent: "flex-end" },
};

function SideRail() {
  return (
    <aside className="side-rail" style={sraStyles.wrap} aria-hidden="true">
      <div style={sraStyles.vbar}>
        <div className="mono" style={sraStyles.vtext}>SYS::GAIA.WORLD // v2.0.26 // DC:: AETHER · PRIMAL · DYNAMIS · CHAOS · LIGHT · ELEMENTAL · MANA · META · GAIA</div>
      </div>
      <div style={sraStyles.badge} className="bracket">
        <div className="mono" style={{fontSize: 9, color: "var(--cyan)", letterSpacing: "0.2em"}}>FREQ</div>
        <div className="display" style={{fontSize: 22, color: "var(--magenta)"}}>128<span style={{fontSize: 10, color: "var(--ink-dim)"}}> BPM</span></div>
      </div>
    </aside>
  );
}
const sraStyles = {
  wrap: {
    position: "fixed", top: "50%", left: 12,
    transform: "translateY(-50%)",
    display: "flex", flexDirection: "column", gap: 20,
    zIndex: 5,
    pointerEvents: "none",
  },
  vbar: {
    writingMode: "vertical-rl",
    transform: "rotate(180deg)",
    height: 380,
    borderLeft: "1px solid var(--panel-stroke)",
    paddingLeft: 8,
  },
  vtext: { fontSize: 9, letterSpacing: "0.3em", color: "var(--ink-faint)" },
  badge: {
    padding: "10px 14px",
    background: "oklch(0.1 0.04 300 / 0.7)",
    border: "1px solid var(--panel-stroke)",
    textAlign: "center",
  },
};

function Ticker() {
  const phrase = [
    { text: "DJ GAIA" }, { text: "★", hl: true }, { text: "ANIME MADE DJ" },
    { text: "•" }, { text: "WOAH! CLUB" }, { text: "★", hl: true }, { text: "FINAL FANTASY XIV" },
    { text: "•" }, { text: "TECHNO / EDM / ROCK / METAL" }, { text: "★", hl: true },
    { text: "EORZEA TOUR 2026" }, { text: "•" }, { text: "EVERY DATA CENTER" },
    { text: "★", hl: true }, { text: "SPOTIFY · APPLE · YOUTUBE" }, { text: "•" }, { text: "LIVE DROPS WEEKLY" },
  ];
  const track = [...phrase, ...phrase];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {track.map((p, i) => (
          <span key={i} className={p.hl ? "hl" : ""}>{p.text}</span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { TopNav, SideRail, Ticker });