/* global React, window */

const PARTNER_LOGOS = [
  "BAYT 22", "SAFAD", "The Line", "Inverse Group", "PG",
  "Al Husseini Engineering", "Elite Excellence", "PIDCO Group", "Joe & Sera Interiors",
  "Olivar Design", "CAtech", "ARCWANI Architects", "AIVE",
  "RM Architectural Contracting", "MOFAGE",
].map((name, i) => ({ name, src: `assets/partners/partner-${String(i + 1).padStart(2, "0")}.png` }));

function Partners() {
  const { L } = useLang();
  const label = L.partners?.label || "Some of our partners";

  return (
    <section className="partners" id="partners">
      <div className="partners-label">{label}</div>
      <div className="partners-marquee">
        <div className="partners-track">
          {PARTNER_LOGOS.map(l => (
            <img key={l.src} src={l.src} alt={l.name} title={l.name} />
          ))}
          {PARTNER_LOGOS.map(l => (
            <img key={l.src + "-dup"} src={l.src} alt="" title={l.name} aria-hidden="true" />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Partners });