// LogoStrip — Organisations §2. Past-partner logos as a rolling ticker banner.
// Each mark sits in a uniform white tile (same height + shape) and is centred /
// contained, so the differing logo aspect ratios read as one consistent band.

function LogoStrip({ scheme = "scheme-2", title = "Trusted by organisations across Australia" }) {
  // `dark: true` marks white knock-out logos that would vanish on the white tile;
  // brightness(0) renders their shape as a solid dark mark (alpha preserved).
  const partners = [
    { file: "tennis-australia.svg",          name: "Tennis Australia" },
    { file: "amaze.svg",                     name: "Amaze" },
    { file: "department-education-victoria.png", name: "Department of Education" },
    { file: "macs.png",                      name: "Catholic Education" },
    { file: "gymnastics-victoria.png",       name: "Gymnastics Victoria", dark: true },
    { file: "cottons.png",                   name: "Cottons", dark: true },
    { file: "hp.svg",                        name: "HP" },
    { file: "aspen-main.png",                name: "Aspen Pharmaceuticals" },
  ];

  return (
    <Section scheme={scheme} style={{ paddingTop: 56, paddingBottom: 56 }}>
      <p style={{ textAlign: "center", fontWeight: 600, marginBottom: 40, color: "var(--kl-fg-2)" }}>{title}</p>
      <div className="kl-marquee">
        <div className="kl-marquee__track" style={{ animationDuration: "45s" }}>
          {[...partners, ...partners].map((p, i) => (
            <div
              key={i}
              aria-hidden={i >= partners.length ? "true" : undefined}
              style={{
                flexShrink: 0,
                marginRight: 24,
                height: 104,
                width: 200,
                padding: "24px 28px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                background: "var(--kl-white)",
                border: "1px solid var(--kl-border)",
                borderRadius: 16,
              }}
            >
              <img
                src={`../../assets/logos/${p.file}`}
                alt={p.name}
                loading="lazy"
                style={{ maxWidth: "100%", maxHeight: "100%", width: "auto", objectFit: "contain", display: "block", filter: p.dark ? "brightness(0)" : undefined }}
              />
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

window.LogoStrip = LogoStrip;