// Footer
function Footer() {
  return (
    <footer style={styles_ft.wrap}>
      <div className="page" style={styles_ft.inner}>
        <div style={styles_ft.top}>
          <div>
            <div className="display" style={{fontSize: 48, lineHeight: 1}}>
              <span style={{color: "var(--magenta)", textShadow: "0 0 14px var(--magenta)"}}>WOAH!</span>
            </div>
            <div className="jp" style={{fontSize: 14, color: "var(--ink-dim)", marginTop: 8, letterSpacing: "0.2em"}}>
              ウォア! — また会おう
            </div>
          </div>
          <div style={{textAlign: "right"}}>
            <div className="mono" style={{fontSize: 10, color: "var(--cyan)", letterSpacing: "0.3em"}}>// END OF TRANSMISSION</div>
            <div className="display" style={{fontSize: 14, marginTop: 6}}>DJ GAIA · WORLD · v2.0.26</div>
          </div>
        </div>

        <div style={styles_ft.bar}>
          <div className="mono" style={{fontSize: 10, color: "var(--ink-faint)", letterSpacing: "0.25em"}}>
            FAN-MADE TRIBUTE SITE · UNOFFICIAL · CRAFTED WITH 🌸 FOR THE WOAH! CREW
          </div>
          <div style={{display: "flex", gap: 18}}>
            <span className="chip"><span className="dot cyan"></span>SYSTEM STABLE</span>
            <span className="chip"><span className="dot gold"></span>AUDIO SYNC OK</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

const styles_ft = {
  wrap: { marginTop: 120, borderTop: "1px solid var(--panel-stroke)", background: "linear-gradient(to bottom, transparent, oklch(0.05 0.03 300))" },
  inner: { paddingTop: 50, paddingBottom: 40 },
  top: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 20 },
  bar: {
    marginTop: 40, paddingTop: 20,
    borderTop: "1px solid var(--panel-stroke)",
    display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20,
  },
};

Object.assign(window, { Footer });