const socials = [
  { name: "bluesky", href: "https://bsky.app/profile/studiogibbeuse.bsky.social" },
  { name: "youtube", href: "https://www.youtube.com/@StudioGibbeuse" },
  { name: "instagram", href: "https://www.instagram.com/studiogibbeuse/" },
  { name: "tiktok", href: "https://www.tiktok.com/@gibbeusestudio" },
];

function Logo() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <img src="../../assets/logo-mark-white.svg" alt="" style={{ height: 34, width: 34, display: "block" }} />
      <span style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 500, color: "var(--text-on-void)", whiteSpace: "nowrap" }}>Studio Gibbeuse</span>
    </div>
  );
}

function Header() {
  return (
    <header style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "20px var(--space-6)", background: "var(--bg-void)", position: "sticky", top: 0, zIndex: 10,
      borderBottom: "1px solid var(--border-void-soft)",
    }}>
      <a href="index.html" style={{ textDecoration: "none", display: "flex" }}><Logo /></a>
      <nav style={{ display: "flex", gap: 32 }}>
        {[["games.html", "Games"], ["jobs.html", "Jobs"], ["about.html", "About"]].map(([href, label]) => (
          <a key={href} href={href} style={{
            fontFamily: "var(--font-mono)", fontSize: "var(--fs-label-mono)", letterSpacing: "var(--ls-label-mono)",
            textTransform: "uppercase", color: "var(--text-on-void-secondary)", textDecoration: "none",
          }}>{label}</a>
        ))}
      </nav>
      <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
        {socials.map((s) => (
          <a key={s.name} href={s.href} title={s.name} target="_blank" rel="noopener noreferrer" style={{ display: "flex" }}>
            <img src={`https://cdn.simpleicons.org/${s.name}/ffffff`} alt={s.name} width="17" height="17" style={{ opacity: 0.75 }} />
          </a>
        ))}
      </div>
    </header>
  );
}
window.Header = Header;
window.socials = socials;