/* global React */
// Brandbook — Hero, Nav, Section wrapper, Footer
const { useState, useEffect } = React;
function BbNav({ sections, active, onJump }) {
const [open, setOpen] = useState(false);
const activeLabel = sections.find(s => s.id === active)?.label ?? "Sections";
useEffect(() => {
if (!open) return;
const close = (e) => {
if (!e.target.closest?.("[data-bb-nav]")) setOpen(false);
};
const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
document.addEventListener("click", close);
document.addEventListener("keydown", onKey);
return () => {
document.removeEventListener("click", close);
document.removeEventListener("keydown", onKey);
};
}, [open]);
return (
{ e.stopPropagation(); setOpen(o => !o); }}
aria-haspopup="menu"
aria-expanded={open}
style={{
display: "inline-flex", alignItems: "center", gap: 10,
background: "transparent", color: "#1C1C1E",
border: "1.5px solid #1C1C1E", borderRadius: 999,
padding: "0 16px", height: 36,
font: "500 13px/1 Inter, sans-serif",
cursor: "pointer",
}}
>
{activeLabel}
{open && (
{sections.map(n => n.header ? (
{n.header}
) : (
{ onJump(n.id); setOpen(false); }}
style={{
display: "block", width: "100%", textAlign: "left",
background: active === n.id ? "#F5F1EB" : "transparent",
color: active === n.id ? "#1C1C1E" : "#3D3D3A",
border: "none", borderRadius: 10,
padding: "10px 14px",
font: active === n.id ? "600 13px/1 Inter, sans-serif" : "500 13px/1 Inter, sans-serif",
cursor: "pointer",
}}
onMouseEnter={(e) => { if (active !== n.id) e.currentTarget.style.background = "#F5F1EB"; }}
onMouseLeave={(e) => { if (active !== n.id) e.currentTarget.style.background = "transparent"; }}
>
{n.label}
))}
)}
);
}
function BbHero() {
return (
Bridgemaker, Brand & Style, v2.0 — Juli 2026
Ergebnis. KI-nativ.
Das Brandbook der Bridgemaker GmbH — abgeleitet aus dem Kanon in guidelines/ und dem gelebten
Design-System der Website: Glass & Karten, fluide Typografie, Gradient-Katalog, Motion, MD3 für Produkt-UIs.
);
}
function BbGroupHeader({ letter, label }) {
return (
);
}
function BbSection({ title, id, children, desc, num }) {
return (
{/* Headline, Lead drunter — Headlines max-w-xl, Leads max-w-2xl (Kanon §6) */}
{children}
);
}
function BbSwatch({ name, hex, usage, token, light }) {
const [copied, setCopied] = useState(false);
const isLight = light !== undefined ? light : ["#E","#F","#A","#D","#C","#B","#9"].some(p => hex.startsWith(p));
return (
{ navigator.clipboard?.writeText(hex); setCopied(true); setTimeout(() => setCopied(false), 1200); }}
style={{ cursor: "pointer", minWidth: 140, flex: "1 1 140px" }}>
{copied ? "Copied!" : hex}
{name}
{token &&
{token}
}
{usage &&
{usage}
}
