// 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 = {
  Sephora:     "sephora",
  PlayStation: "playstation",
  Sony:        "sony",
  BBC:         "bbc",
  Meta:        "meta",
  Canva:       "canva",
  Deliveroo:   "deliveroo",
};

// Per-logo height tuning for a balanced strip
const LOGO_HEIGHT = {
  Sephora: 22, PlayStation: 26, Sony: 24, BBC: 26, Meta: 24, Canva: 28, Deliveroo: 26,
};

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

function ClientLogo({ name, height, tone }) {
  return (
    <img
      src={clientSrc(name, tone)}
      alt={name}
      style={{ height, width: "auto", display: "block" }}
    />
  );
}

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

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