// Real client logo wordmarks from the Askable design system (assets/clients/*).
// Each logo ships in -black and -white variants. We pick the variant that matches the strip tone.

const CLIENTS = {
  Canva:     "canva",
  Deliveroo: "deliveroo",
  BBC:       "bbc",
  Canon:     "canon",
  Monzo:     "monzo",
  Tesco:     "tesco",
  Toyota:    "toyota",
  Meta:      "meta",
};

// Per-logo height tuning for a balanced strip
const LOGO_HEIGHT = {
  Canva: 30, Deliveroo: 28, BBC: 28, Canon: 22, Monzo: 24, Tesco: 30, Toyota: 30, Meta: 26,
};

function clientSrc(key, tone) {
  const variant = tone === "dark" ? "black" : "white";
  return `assets/clients/${CLIENTS[key]}-${variant}.svg`;
}

function ClientLogo({ name, height, tone }) {
  // Use plain <img> so the SVG renders with its embedded colors.
  return (
    <img
      src={clientSrc(name, tone)}
      alt={name}
      style={{ height, width: "auto", display: "block" }}
    />
  );
}

function ClientLogoStrip({ tone = "dark" }) {
  const names = ["Canva", "Deliveroo", "BBC", "Canon", "Monzo", "Tesco", "Toyota", "Meta"];
  return (
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      flexWrap: "wrap", gap: 48, rowGap: 32, opacity: 0.85,
    }}>
      {names.map((n) => (
        <ClientLogo key={n} name={n} height={LOGO_HEIGHT[n]} tone={tone} />
      ))}
    </div>
  );
}

window.ClientLogoStrip = ClientLogoStrip;
window.ClientLogo = ClientLogo;
window.clientSrc = clientSrc;