// ClientTicker.jsx — Horizontal marquee of client logos, black on white.
const ClientTicker = () => {
  const clients = [
    { name: "Twilio",            src: "assets/logos/twilio.svg" },
    { name: "Cloudflare",        src: "assets/logos/cloudflare.svg" },
    { name: "Circle",            src: "assets/logos/circle.svg" },
    { name: "Pluralsight",       src: "assets/logos/pluralsight.svg" },
    { name: "Carnegie Learning", src: "assets/logos/carnegie-learning.svg" },
  ];
  return (
    <section className="pc-ticker pc-ticker--logos">
      <div className="pc-ticker-head">
        <span className="pc-rivet-sm">Trusted by</span>
      </div>
      <div className="pc-ticker-track">
        <div className="pc-ticker-row">
          {[...clients, ...clients, ...clients].map((c, i) => (
            <span key={i} className="pc-ticker-logo" aria-label={c.name}>
              <img src={c.src} alt={c.name} />
            </span>
          ))}
        </div>
      </div>
    </section>
  );
};
window.ClientTicker = ClientTicker;