function Footer() {
  const items = [
    { label: "YouTube", href: "https://www.youtube.com/@tomos_aiagent" },
    { label: "X (Twitter)", href: "https://x.com/tomos_aiagent" },
    { label: "note", href: "https://note.com/tomolabnote/n/n1fa6ccd7c3bf" },
    { label: "コラム PiYo Labo", href: "https://piyoai.b-steep.com/" },
  ];

  return (
    <footer style={{ background: "var(--navy-900)", color: "rgba(255,255,255,0.8)" }}>
      <div className="wrap" style={{ paddingTop: 32, paddingBottom: 32 }}>
        <div>
          <h4 style={{
            margin: 0, fontSize: 11, fontWeight: 600, letterSpacing: "0.2em",
            fontFamily: "var(--font-mono)", color: "rgba(255,255,255,0.55)",
          }}>
            / フォロー
          </h4>
          <ul style={{
            margin: "18px 0 0", padding: 0, listStyle: "none",
            display: "flex", flexWrap: "wrap", gap: "16px 32px",
          }}>
            {items.map((it) => (
              <li key={it.label}>
                <a
                  href={it.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ fontSize: 13, color: "rgba(255,255,255,0.82)" }}
                >
                  {it.label}
                </a>
              </li>
            ))}
          </ul>
        </div>

        <div style={{
          marginTop: 40, paddingTop: 20,
          borderTop: "1px solid rgba(255,255,255,0.12)",
          fontSize: 11.5, letterSpacing: "0.06em",
          color: "rgba(255,255,255,0.55)",
        }}>
          © 2026 株式会社B-Steep
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;