// Shift for Good — logo variants
// Family: descends from GoodShift mark (4 circles + 2 pills + center toggle)
// All three variants share the same DNA; toggle position / orientation shifts.

function SfgLogo({ variant = "shifted", color = "auto", size = 44, withWordmark = true, stack = false }) {
  // colors: auto = brand (purple+orange), white, black
  const C = color === "white"
    ? { p: "#fff", o: "#fff", k: "#fff", text: "#fff" }
    : color === "black"
    ? { p: "#000", o: "#000", k: "#000", text: "#000" }
    : { p: "#685DFD", o: "#FE664E", k: "#000", text: "#000" };

  const Mark = () => {
    if (variant === "arrow") {
      // Variant B: toggle replaced by right arrow (the "shift" verbalised)
      return (
        <svg viewBox="0 0 100 120" width={size} height={size * 1.2} aria-label="Shift for Good mark">
          <circle cx="20" cy="20" r="20" fill={C.p}/>
          <circle cx="80" cy="20" r="20" fill={C.o}/>
          <circle cx="20" cy="100" r="20" fill={C.p}/>
          <circle cx="80" cy="100" r="20" fill={C.o}/>
          <rect x="0" y="50" width="50" height="20" rx="10" fill={C.p}/>
          <rect x="50" y="50" width="50" height="20" rx="10" fill={C.o}/>
          <path d="M 38 50 L 62 60 L 38 70 Z" fill={C.k}/>
        </svg>
      );
    }
    if (variant === "good") {
      // Variant C: toggle fully shifted right ("for good" — past tense, completed)
      return (
        <svg viewBox="0 0 100 120" width={size} height={size * 1.2} aria-label="Shift for Good mark">
          <circle cx="20" cy="20" r="20" fill={C.p}/>
          <circle cx="80" cy="20" r="20" fill={C.o}/>
          <circle cx="20" cy="100" r="20" fill={C.p}/>
          <circle cx="80" cy="100" r="20" fill={C.o}/>
          <rect x="0" y="50" width="50" height="20" rx="10" fill={C.p}/>
          <rect x="50" y="50" width="50" height="20" rx="10" fill={C.o}/>
          <rect x="65" y="50" width="35" height="20" rx="10" fill={C.k}/>
        </svg>
      );
    }
    // Default: "shifted" — the center toggle has moved slightly right of center,
    // visually mid-shift. Most direct read of "shift for good".
    return (
      <svg viewBox="0 0 100 120" width={size} height={size * 1.2} aria-label="Shift for Good mark">
        <circle cx="20" cy="20" r="20" fill={C.p}/>
        <circle cx="80" cy="20" r="20" fill={C.o}/>
        <circle cx="20" cy="100" r="20" fill={C.p}/>
        <circle cx="80" cy="100" r="20" fill={C.o}/>
        <rect x="0" y="50" width="50" height="20" rx="10" fill={C.p}/>
        <rect x="50" y="50" width="50" height="20" rx="10" fill={C.o}/>
        <rect x="42" y="50" width="34" height="20" rx="10" fill={C.k}/>
      </svg>
    );
  };

  const wordmarkFont = {
    fontFamily: "Bricolage Grotesque, system-ui, sans-serif",
    fontWeight: 800,
    letterSpacing: "-0.03em",
    color: C.text,
    lineHeight: 0.85,
  };

  if (!withWordmark) return <Mark/>;

  if (stack) {
    return (
      <div style={{display: "inline-flex", alignItems: "center", gap: 14}}>
        <Mark/>
        <div style={{...wordmarkFont, fontSize: size * 0.78}}>
          <div>shift</div>
          <div style={{color: C.o === "#fff" ? "#fff" : "#FE664E"}}>for good</div>
        </div>
      </div>
    );
  }

  return (
    <div style={{display: "inline-flex", alignItems: "center", gap: 12}}>
      <Mark/>
      <div style={{...wordmarkFont, fontSize: size * 0.7, whiteSpace: "nowrap"}}>
        shift <span style={{color: C.o === "#fff" ? "#fff" : "#FE664E"}}>for good</span>
      </div>
    </div>
  );
}

// Showcase: logo gallery (used in section reveal / for the logo brief)
function SfgLogoGallery() {
  const items = [
    { variant: "shifted", label: "Variant A — Shifted", desc: "Toggle gleden naar rechts. De beweging is bezig — direct gelezen als 'in transitie naar het goede'." },
    { variant: "arrow",   label: "Variant B — Arrow",   desc: "Toggle vervangen door pijl. Activerend, richtinggevend." },
    { variant: "good",    label: "Variant C — Good",    desc: "Toggle helemaal rechts. Het is gebeurd — shift completed." },
  ];
  return (
    <div style={{display: "grid", gap: 24, gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))"}}>
      {items.map((it, i) => (
        <div key={it.variant} style={{
          padding: 28, borderRadius: 24,
          background: "var(--gs-white)", border: "1px solid var(--gs-divider-2)",
          display: "flex", flexDirection: "column", alignItems: "flex-start"
        }}>
          <div style={{height: 100, display: "flex", alignItems: "center"}}>
            <SfgLogo variant={it.variant} size={70} withWordmark={false}/>
          </div>
          <div style={{marginTop: 16, marginBottom: 4, fontFamily: "var(--gs-font-display)", fontWeight: 700, fontSize: 18}}>{it.label}</div>
          <div style={{fontFamily: "var(--gs-font-body)", fontSize: 14, color: "var(--gs-fg-secondary)", lineHeight: 1.4}}>{it.desc}</div>
          <div style={{marginTop: 18, paddingTop: 18, borderTop: "1px solid var(--gs-divider-2)", width: "100%"}}>
            <SfgLogo variant={it.variant} size={36}/>
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { SfgLogo, SfgLogoGallery });