// ╔════════════════════════════════════════════════════════════╗
// ║  BSB · Theme system — REV.02                              ║
// ║  • Theme B = Agritech (clean, bleu/vert, données live)    ║
// ║  • Theme C = Chanvre Forward (hemp-first, sage/green)     ║
// ║  Mêmes pages, mêmes composants — palette/typo paramétrées ║
// ╚════════════════════════════════════════════════════════════╝

// ── Logo image (used in nav + footer + homes) ───────────────
// Real BSB logo (JPEG 331×152, white bg). Aspect ≈ 2.18.
const LOGO_SRC = "assets/logo.jpeg";
function BrandLogo({ height = 36, onDark = false, onClick }) {
  const w = Math.round(height * (331 / 152));
  return (
    <a onClick={onClick} style={{ cursor: onClick ? "pointer" : "default",
      display: "inline-flex", alignItems: "center",
      background: onDark ? "#FFFFFF" : "transparent",
      padding: onDark ? "6px 10px" : 0,
      borderRadius: onDark ? 10 : 0, lineHeight: 0 }}>
      <img src={LOGO_SRC} alt="Bergerac Seed &amp; Breeding"
        style={{ height, width: w, display: "block", objectFit: "contain" }}/>
    </a>
  );
}

// Brand source (BRAND palette extraite de rev2.jsx — c'est la base)
const BRAND_BASE = {
  green: "#1F4E3D",
  green2: "#2E6B53",
  greenSoft: "#E5F0EA",
  blue: "#1B5E8C",
  blue2: "#3B82B5",
  blueSoft: "#E1EFF7",
  hemp: "#8FA86E",
  hemp2: "#7A9558",
  hempSoft: "#EEF2E5",
  gold: "#C8A24A",
  paper: "#F8F5EE",
  paper2: "#EFEAD9",
  ink: "#0F1A14",
  line: "rgba(15,26,20,.12)",
  line2: "rgba(15,26,20,.22)",
};

const FONT_STACKS = {
  display: '"Fraunces", "Cormorant Garamond", Georgia, serif',
  body: '"Manrope", "Inter", system-ui, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
  sans: '"Inter Tight", "Inter", system-ui, sans-serif',
  archivo: '"Archivo", "Inter Tight", system-ui, sans-serif',
};

// ── THEME B — Agritech ─────────────────────────────────────────
// Clean, scientifique, sans-serif weighty (Archivo), data-first.
// Accent primaire = vert; secondaire = bleu (science); gold = chaleur tabac.
const THEME_B = {
  id: "B", name: "Agritech",
  bg: "#FAFAF7",
  bg2: "#F2F1ED",
  surface: BRAND_BASE.paper,
  ink: BRAND_BASE.ink,
  inkSoft: "rgba(15,26,20,.7)",
  inkMuted: "rgba(15,26,20,.55)",
  primary: BRAND_BASE.green,        // vert · marque, R&D
  primary2: BRAND_BASE.green2,
  primarySoft: BRAND_BASE.greenSoft,
  secondary: BRAND_BASE.blue,       // bleu · science
  secondarySoft: BRAND_BASE.blueSoft,
  accent: BRAND_BASE.gold,          // gold · tabac
  hempSoft: BRAND_BASE.hempSoft,
  hempInk: BRAND_BASE.hemp2,
  line: BRAND_BASE.line,
  line2: BRAND_BASE.line2,
  // Typo
  display: FONT_STACKS.archivo,     // Archivo bold
  displayWeight: 800,
  body: FONT_STACKS.body,
  mono: FONT_STACKS.mono,
  // Style hooks
  radius: 12,
  radiusLg: 16,
  buttonRadius: 10,
  pillRadius: 999,
  eyebrowMark: "●",
  // Density
  heroSize: "clamp(56px, 7.5vw, 104px)",
  h2Size: 64,
  letterSpacing: "-.035em",
  italic: false,                    // pas d'italique en headline B
};

// ── THEME C — Chanvre Forward ──────────────────────────────────
// Editorial, lighter, serif-driven (Fraunces), italiques chaleureuses.
// Accent primaire = hemp (sage); secondaire = green; tabac mis discrètement.
const THEME_C = {
  id: "C", name: "Chanvre Forward",
  bg: "#FBFBF6",
  bg2: BRAND_BASE.hempSoft,
  surface: BRAND_BASE.paper,
  ink: BRAND_BASE.ink,
  inkSoft: "rgba(15,26,20,.7)",
  inkMuted: "rgba(15,26,20,.55)",
  primary: BRAND_BASE.hemp,         // hemp · cœur identité
  primary2: BRAND_BASE.hemp2,
  primarySoft: BRAND_BASE.hempSoft,
  secondary: BRAND_BASE.green,      // green · tabac & R&D (secondaire ici)
  secondarySoft: BRAND_BASE.greenSoft,
  accent: BRAND_BASE.gold,
  hempSoft: BRAND_BASE.hempSoft,
  hempInk: BRAND_BASE.hemp2,
  line: BRAND_BASE.line,
  line2: BRAND_BASE.line2,
  // Typo — Fraunces serif pour titres
  display: FONT_STACKS.display,
  displayWeight: 400,               // light serif
  body: FONT_STACKS.body,
  mono: FONT_STACKS.mono,
  // Style hooks
  radius: 14,
  radiusLg: 18,
  buttonRadius: 999,                // tout arrondi
  pillRadius: 999,
  eyebrowMark: "✶",
  // Density
  heroSize: "clamp(64px, 9vw, 132px)",
  h2Size: 64,
  letterSpacing: "-.03em",
  italic: true,                     // italiques fréquentes en C
};

// ── Shared eyebrow component ──────────────────────────────────
function Eyebrow({ theme, color, children, weight }) {
  return null;
}

// ── Shared button ─────────────────────────────────────────────
function Btn({ theme, kind, onClick, children, full, type, disabled }) {
  const styles = {
    primary: { bg: theme.primary, fg: theme.surface },
    secondary: { bg: theme.secondary, fg: theme.surface },
    accent: { bg: theme.accent, fg: theme.ink },
    dark: { bg: theme.ink, fg: theme.surface },
    ghost: { bg: "transparent", fg: theme.ink, border: `1px solid ${theme.line2}` },
  };
  const s = styles[kind || "primary"];
  return (
    <button type={type || "button"} onClick={onClick} disabled={disabled}
      style={{ background: disabled ? "rgba(15,26,20,.2)" : s.bg, color: s.fg,
        border: s.border || "none",
        padding: "14px 22px", borderRadius: theme.buttonRadius,
        fontFamily: theme.body, fontSize: 14, fontWeight: 700,
        cursor: disabled ? "default" : "pointer",
        width: full ? "100%" : "auto", whiteSpace: "nowrap" }}>
      {children}
    </button>
  );
}

// ── Site Nav ──────────────────────────────────────────────────
function SiteNav({ theme, t, lang, setLang, route, setRoute }) {
  const [tobOpen, setTobOpen] = React.useState(false);
  const [hempOpen, setHempOpen] = React.useState(false);

  // Site B uses a flat home-style header — no dropdowns, no language switch.
  if (theme.id === "B") {
    return (
      <header style={{ position: "sticky", top: 0, zIndex: 30,
        background: "rgba(250,250,247,.92)",
        backdropFilter: "blur(12px)", borderBottom: `1px solid ${theme.line}` }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "16px 32px",
          display: "flex", alignItems: "center", gap: 24 }}>
          <BrandLogo height={40} onClick={() => setRoute({ name: "home" })}/>
          <nav style={{ display: "flex", gap: 24, marginLeft: 24,
            fontFamily: theme.body, fontSize: 13.5, fontWeight: 500 }}>
            {[
              ["varieties", lang==="fr"?"Nos variétés":"Varieties"],
              ["contact", "Contact"],
            ].map(([k, l]) => {
              const active = route.name === k
                || (k === "varieties" && route.name === "detail")
                || (k === "hemp" && route.name === "hempLine")
                || (k === "breeding" && route.name === "network");
              return (
                <a key={k} onClick={() => setRoute({ name: k })}
                  style={{ cursor: "pointer",
                    color: active ? theme.primary : theme.ink,
                    fontWeight: active ? 700 : 500 }}>{l}</a>
              );
            })}
          </nav>
          <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{ display: "flex", gap: 2, fontFamily: theme.mono, fontSize: 11,
              letterSpacing: ".08em", padding: 3,
              background: theme.bg2, borderRadius: theme.pillRadius,
              border: `1px solid ${theme.line}` }}>
              {["fr", "en"].map(l => (
                <button key={l} onClick={() => setLang(l)}
                  style={{ background: lang === l ? theme.ink : "transparent",
                    color: lang === l ? theme.surface : theme.inkSoft, border: "none",
                    padding: "5px 10px", borderRadius: theme.pillRadius,
                    cursor: "pointer", fontFamily: "inherit", fontSize: 11, fontWeight: 600,
                    textTransform: "uppercase" }}>{l}</button>
              ))}
            </div>
          </div>
        </div>
      </header>
    );
  }

  // Hemp / about / breeding / science temporarily disabled — only Variétés remains as primary tab.
  const navTabs = [["varieties", t("nav_tobacco")]];

  const linkStyle = (active) => ({
    cursor: "pointer", padding: "8px 14px", borderRadius: theme.pillRadius,
    fontFamily: theme.body, fontSize: 14,
    color: active ? theme.primary : theme.ink,
    background: active ? theme.primarySoft : "transparent",
    fontWeight: active ? 700 : 500,
    transition: "all .2s",
    display: "inline-flex", alignItems: "center", gap: 6,
  });

  // Real BSB logo image (shared across themes)
  const Logo = () => (
    <BrandLogo height={theme.id === "B" ? 40 : 44}
      onClick={() => setRoute({ name: "home" })}/>
  );

  return (
    <header style={{ position: "sticky", top: 0, zIndex: 30,
      background: theme.id === "B" ? "rgba(250,250,247,.92)" : "rgba(251,251,246,.92)",
      backdropFilter: "blur(12px)", borderBottom: `1px solid ${theme.line}` }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "16px 32px",
        display: "flex", alignItems: "center", gap: 20 }}>
        <Logo/>
        <nav style={{ display: "flex", gap: 4, marginLeft: 16, alignItems: "center" }}>
          {/* Tobacco dropdown */}
          {navTabs.map(([k, l, hempEmphasis]) => {
            const isHemp = k === "hemp";
            const isActiveHere = isHemp ? ["hemp", "hempLine"].includes(route.name)
              : ["varieties", "detail"].includes(route.name);
            const open = isHemp ? hempOpen : tobOpen;
            const setOpen = isHemp ? setHempOpen : setTobOpen;
            return (
              <div key={k} onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}
                style={{ position: "relative" }}>
                <a onClick={() => setRoute({ name: k })}
                  style={{ ...linkStyle(isActiveHere),
                    color: hempEmphasis && !isActiveHere ? theme.primary : (isActiveHere ? theme.primary : theme.ink),
                    fontWeight: hempEmphasis ? 700 : (isActiveHere ? 700 : 500) }}>
                  {l} <span style={{ fontSize: 9, opacity: .55 }}>▾</span>
                </a>
                {open && (
                  <div style={{ position: "absolute", top: "100%", left: 0,
                    background: theme.surface, border: `1px solid ${theme.line2}`,
                    borderRadius: theme.radius, minWidth: 240, marginTop: 6,
                    padding: 8, boxShadow: "0 16px 40px rgba(15,26,20,.08)" }}>
                    {(isHemp
                      ? [
                          ["hemp", lang==="fr"?"Programme chanvre":"Hemp programme"],
                          ["hempLine:fibres", lang==="fr"?"Lignée Fibres":"Fibre line"],
                          ["hempLine:graines", lang==="fr"?"Lignée Graines":"Grain line"],
                          ["hempLine:cannabinoides", lang==="fr"?"Lignée Cannabinoïdes":"Cannabinoid line"],
                        ]
                      : [
                          ["varieties", lang==="fr"?"Catalogue 16 variétés":"16-cultivar catalogue"],
                        ]
                    ).map(([key, label]) => {
                      const [name, lid] = key.includes(":") ? key.split(":") : [key, null];
                      return (
                        <a key={key} onClick={() => setRoute(lid ? { name, lineId: lid } : { name })}
                          style={{ display: "block", padding: "9px 12px", borderRadius: 8,
                            cursor: "pointer", color: theme.ink, fontSize: 14,
                            fontFamily: theme.body }}
                          onMouseEnter={e => e.currentTarget.style.background = theme.primarySoft}
                          onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
                          {label}
                        </a>
                      );
                    })}
                  </div>
                )}
              </div>
            );
          })}
          {[
            ["contact", t("nav_contact")],
          ].map(([k, l]) => (
            <a key={k} onClick={() => setRoute({ name: k })} style={linkStyle(route.name === k)}>{l}</a>
          ))}
        </nav>
        <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ display: "flex", gap: 2, fontFamily: theme.mono, fontSize: 11,
            letterSpacing: ".08em", padding: 3,
            background: theme.bg2, borderRadius: theme.pillRadius,
            border: `1px solid ${theme.line}` }}>
            {["fr", "en"].map(l => (
              <button key={l} onClick={() => setLang(l)}
                style={{ background: lang === l ? theme.ink : "transparent",
                  color: lang === l ? theme.surface : theme.inkSoft, border: "none",
                  padding: "5px 10px", borderRadius: theme.pillRadius,
                  cursor: "pointer", fontFamily: "inherit", fontSize: 11, fontWeight: 600,
                  textTransform: "uppercase" }}>{l}</button>
            ))}
          </div>
          <Btn theme={theme} kind={theme.id === "B" ? "dark" : "primary"}
            onClick={() => setRoute({ name: "contact" })}>
            {t("cta_quote")} →
          </Btn>
        </div>
      </div>
    </header>
  );
}

// ── Site Footer ───────────────────────────────────────────────
function SiteFooter({ theme, t, lang, setRoute }) {
  return (
    <footer style={{ background: theme.ink, color: theme.surface,
      fontFamily: theme.body, padding: "64px 32px 32px" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr",
          gap: 40 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", marginBottom: 16 }}>
              <BrandLogo height={52} onDark={true}/>
            </div>
            <p style={{ fontFamily: theme.body, fontSize: 14, lineHeight: 1.6,
              opacity: .75, margin: "0 0 20px", maxWidth: 320, textWrap: "pretty" }}>
              {lang === "fr"
                ? "Semencier indépendant, Bergerac, Périgord. Tabac Virginie depuis 2003."
                : "Independent seed breeder, Bergerac, Périgord. Virginia tobacco since 2003."}
            </p>
            <div style={{ fontFamily: theme.mono, fontSize: 11, letterSpacing: ".08em",
              opacity: .65, lineHeight: 1.7 }}>
              La Tour, bd des poudriers<br/>
              24100 Bergerac · France<br/>
              <span style={{ color: theme.accent }}>+33 5 53 57 12 34</span>
            </div>
          </div>
          {[
            { l: t("nav_tobacco"), items: [
              ["varieties", lang==="fr"?"Catalogue 2026":"2026 catalogue"],
            ]},
            { l: t("nav_contact"), items: [
              ["contact", lang==="fr"?"Demander un devis":"Request a quote"],
              ["legal", lang==="fr"?"Mentions légales":"Legal notice"],
            ]},
          ].map((col, i) => (
            <div key={i}>
              <div style={{ fontFamily: theme.mono, fontSize: 10, letterSpacing: ".18em",
                color: theme.accent, textTransform: "uppercase", marginBottom: 16,
                fontWeight: 700 }}>
                {col.l}
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {col.items.map(([k, l]) => {
                  const [name, lid] = k.includes(":") ? k.split(":") : [k, null];
                  return (
                    <a key={k} onClick={() => setRoute(lid ? { name, lineId: lid } : { name })}
                      style={{ cursor: "pointer", color: theme.surface, fontSize: 14,
                        opacity: .8, textWrap: "pretty",
                        fontFamily: theme.body }}
                      onMouseEnter={e => { e.currentTarget.style.opacity = 1;
                        e.currentTarget.style.color = theme.accent; }}
                      onMouseLeave={e => { e.currentTarget.style.opacity = .8;
                        e.currentTarget.style.color = theme.surface; }}>
                      {l}
                    </a>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 56, paddingTop: 24,
          borderTop: "1px solid rgba(248,245,238,.12)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontFamily: theme.mono, fontSize: 11, letterSpacing: ".1em",
          opacity: .65, flexWrap: "wrap", gap: 16 }}>
          <span>© 2026 Bergerac Seed &amp; Breeding · 24100 Bergerac · France</span>
          <span style={{ display: "flex", gap: 24 }}>
            <a onClick={() => setRoute({ name: "legal" })}
              style={{ cursor: "pointer", color: theme.accent }}>
              {lang==="fr"?"Mentions légales":"Legal"}
            </a>
            <span style={{ color: theme.accent }}>● bergeracseed.com</span>
          </span>
        </div>
        <div style={{ marginTop: 16, paddingTop: 16,
          borderTop: "1px solid rgba(248,245,238,.06)",
          display: "flex", justifyContent: "center", alignItems: "center", gap: 10,
          fontFamily: theme.mono, fontSize: 10, letterSpacing: ".14em",
          textTransform: "uppercase", opacity: .55, color: theme.surface }}>
          <span>{lang === "fr" ? "Maquettes par" : "Mockups by"}</span>
          <a href="https://rn20.digital" target="_blank" rel="noopener" aria-label="RN20"
            style={{ display: "inline-flex", color: theme.surface,
              transition: "opacity .2s" }}>
            <svg viewBox="0 0 736 365" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
              style={{ height: 14, width: "auto", display: "block" }} aria-hidden="true">
              <path d="M68.8061 0.0173562H0V181.094H29.8333V140.611H97.393V181.094H127.226V123.489H96.0515V120.651C118.771 109.474 134.202 91.8228 134.202 66.2918V67.0468C134.193 30.8679 104.862 0.798383 68.8061 0.0173562ZM105.641 66.5869V75.2303C105.641 96.4482 88.4872 110.836 67.3261 110.836H29.8246V28.169H67.3261C88.4872 28.169 105.641 45.369 105.641 66.5869Z"/>
              <path d="M206.591 0H152.507V181.094H182.34V13.451H185.197L232.14 181.094H286.242V0H256.409V167.643H253.561L206.591 0Z"/>
              <path d="M304.971 0L406.077 362.188H431.029L329.932 0H304.971Z"/>
              <path d="M548.207 310.771C554.343 306.761 559.96 301.971 564.824 296.226C582.463 275.408 589.015 244.401 578.084 218.974C567.62 194.641 542.928 178.282 516.625 178.282C479.756 178.282 449.758 208.361 449.758 245.329V271.06H478.31V244.869C478.31 221.586 499.082 203.067 523.021 206.981C530.3 208.17 537.12 211.589 542.547 216.596C563.993 236.4 553.478 268.916 533.528 285.5C518.711 297.814 497.663 301.433 469.18 303.776C464.774 304.141 456.734 304.575 456.734 304.575V362.18H583.952V334.462H478.31V331.624C501.86 329.22 527.894 324.039 548.198 310.762"/>
              <path d="M669.133 178.282C632.263 178.282 602.265 208.361 602.265 245.329V297.944C602.265 334.913 632.263 364.991 669.133 364.991C706.002 364.991 736 334.913 736 297.944V245.329C736 208.361 706.002 178.282 669.133 178.282ZM630.818 298.413V244.869C630.818 234.534 634.937 225.153 641.584 218.236L674.672 336.38C672.863 336.649 671.019 336.831 669.133 336.831C648.006 336.831 630.818 319.596 630.818 298.413ZM707.448 298.413C707.448 308.757 703.328 318.138 696.681 325.046L663.576 206.903C665.394 206.634 667.246 206.451 669.133 206.451C690.259 206.451 707.448 223.686 707.448 244.869V298.413Z"/>
            </svg>
          </a>
        </div>
      </div>
    </footer>
  );
}

// ── Page header — used by inner pages ──────────────────────────
function PageHeader({ theme, eyebrow, title, subtitle, action, hero }) {
  // When `hero` is set and no `action` provided, we render a 2-col with image on right.
  const showHero = hero && !action;
  return (
    <section style={{ padding: "80px 32px 48px",
      borderBottom: `1px solid ${theme.line}` }}>
      <div style={{ maxWidth: 1320, margin: "0 auto",
        display: "grid",
        gridTemplateColumns: (action || showHero) ? "1.4fr 1fr" : "1fr",
        gap: 40, alignItems: showHero ? "stretch" : "end" }}>
        <div style={{ alignSelf: "end" }}>
          <Eyebrow theme={theme}>{eyebrow}</Eyebrow>
          <h1 style={{ fontFamily: theme.display,
            fontSize: "clamp(48px, 6.5vw, 88px)", lineHeight: .95,
            fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
            margin: 0, color: theme.ink, textWrap: "balance" }}>
            {title}
          </h1>
          {subtitle && (
            <p style={{ fontFamily: theme.body, fontSize: 18, lineHeight: 1.5,
              color: theme.ink, opacity: .75, marginTop: 24, maxWidth: 640,
              textWrap: "pretty" }}>
              {subtitle}
            </p>
          )}
        </div>
        {showHero ? (() => {
          const heroUrl = typeof hero === "string" ? hero : hero.url;
          const heroCap = typeof hero === "string" ? null : hero.caption;
          return (
            <div style={{ position: "relative", borderRadius: theme.radiusLg,
              overflow: "hidden", minHeight: 360,
              border: `1px solid ${theme.line}`,
              backgroundImage: `url(${heroUrl})`, backgroundSize: "cover",
              backgroundPosition: "center" }}>
              <div style={{ position: "absolute", inset: 0,
                background: `linear-gradient(180deg, transparent 50%, ${theme.ink}80 100%)` }}/>
              {heroCap && (
                <div style={{ position: "absolute", bottom: 16, left: 18, right: 18,
                  fontFamily: theme.mono, fontSize: 10, letterSpacing: ".15em",
                  color: theme.surface, fontWeight: 700, textTransform: "uppercase",
                  opacity: .9 }}>
                  {heroCap}
                </div>
              )}
            </div>
          );
        })() : action}
      </div>
    </section>
  );
}

// ── Form Field primitives ──────────────────────────────────────
function Field({ theme, label, required, children, full }) {
  return (
    <div style={{ gridColumn: full ? "1 / -1" : undefined }}>
      <label style={{ fontFamily: theme.mono, fontSize: 10, letterSpacing: ".15em",
        color: theme.primary, textTransform: "uppercase", display: "block",
        marginBottom: 8, fontWeight: 700 }}>
        {label}{required && " *"}
      </label>
      {children}
    </div>
  );
}

function Input({ theme, ...props }) {
  return (
    <input {...props} style={{ background: theme.surface,
      border: `1px solid ${theme.line2}`, borderRadius: theme.buttonRadius === 999 ? 10 : theme.buttonRadius,
      padding: "12px 14px", fontFamily: theme.body, fontSize: 15, color: theme.ink,
      outline: "none", width: "100%" }}/>
  );
}

function Textarea({ theme, ...props }) {
  return (
    <textarea {...props} style={{ background: theme.surface,
      border: `1px solid ${theme.line2}`, borderRadius: theme.buttonRadius === 999 ? 10 : theme.buttonRadius,
      padding: "12px 14px", fontFamily: theme.body, fontSize: 15, color: theme.ink,
      outline: "none", width: "100%", resize: "vertical" }}/>
  );
}

// Pill-toggle group (used inside forms + filters)
function PillGroup({ theme, options, value, onChange }) {
  return (
    <div style={{ display: "inline-flex", flexWrap: "wrap", gap: 8 }}>
      {options.map(([k, l]) => {
        const active = value === k;
        return (
          <button key={k} type="button" onClick={() => onChange(k)}
            style={{ background: active ? theme.primary : "transparent",
              color: active ? theme.surface : theme.ink,
              border: `1px solid ${active ? theme.primary : theme.line2}`,
              padding: "9px 16px", borderRadius: theme.pillRadius,
              fontFamily: theme.body, fontSize: 13, fontWeight: 600, cursor: "pointer",
              whiteSpace: "nowrap" }}>
            {l}
          </button>
        );
      })}
    </div>
  );
}

Object.assign(window, {
  BRAND_BASE, FONT_STACKS, THEME_B, THEME_C,
  Eyebrow, Btn, SiteNav, SiteFooter, PageHeader,
  Field, Input, Textarea, PillGroup,
});