// ClientLogos.jsx — shared customer logo data + marquee.
const CLIENT_LOGOS = [
  {
    src: "assets/external-logos/client-logos/EdSolutions-Logo.webp",
    alt: "Ed Solutions",
    variant: "default",
  },
  {
    src: "assets/external-logos/client-logos/Rex-Moore.webp",
    alt: "Rex Moore",
    variant: "wide",
  },
  {
    src: "assets/external-logos/client-logos/Verisave-Logo.webp",
    alt: "Verisave",
    variant: "default",
  },
  {
    src: "assets/external-logos/client-logos/farient logo.webp",
    alt: "Farient Advisors",
    variant: "wide",
  },
  {
    src: "assets/external-logos/client-logos/symmetry-anesthesia-logo-removebg-preview.png",
    alt: "Symmetry Anesthesia",
    variant: "wide",
  },
];

function ClientLogo({ logo }) {
  if (logo.type === "wordmark") {
    return (
      <li className="zg-client-logo-item">
        <span className="zg-client-wordmark" aria-label={logo.alt}>
          <span className="zg-client-wordmark-top">{logo.top}</span>
          <span className="zg-client-wordmark-bottom">{logo.bottom}</span>
        </span>
      </li>
    );
  }

  return (
    <li className="zg-client-logo-item">
      <img
        className={`zg-client-logo zg-client-logo--${logo.variant}`}
        src={logo.src}
        alt={logo.alt}
        loading="lazy"
        decoding="async"
      />
    </li>
  );
}

function ClientLogoMarquee({ label, labelId, layout = "stack" }) {
  const marqueeLogos = [...CLIENT_LOGOS, ...CLIENT_LOGOS];

  return (
    <div className={`zg-client-marquee zg-client-marquee--${layout}`}>
      <div className="zg-cred-head">
        <span className="zg-cred-label" id={labelId}>
          {label}
        </span>
      </div>

      <div className="zg-cred-marquee-wrap">
        <div className="zg-cred-marquee" aria-hidden="true">
          <ul className="zg-cred-marquee-track">
            {marqueeLogos.map((logo, index) => (
              <ClientLogo key={`${logo.alt}-${index}`} logo={logo} />
            ))}
          </ul>
        </div>
      </div>

      <ul className="zg-cred-sr">
        {CLIENT_LOGOS.map((logo) => (
          <li key={logo.alt}>{logo.alt}</li>
        ))}
      </ul>
    </div>
  );
}

window.CLIENT_LOGOS = CLIENT_LOGOS;
window.ClientLogo = ClientLogo;
window.ClientLogoMarquee = ClientLogoMarquee;