function ScanBand() {
  const { React } = window;
  const { useState, useEffect } = React;

  // Seed with the static design partners (prerendered into the page), then
  // merge in companies whose repos we've scanned and who consented to be
  // featured — fetched live so new logos appear without a rebuild.
  const seed = window.DesignPartners || [];
  const [partners, setPartners] = useState(seed);

  useEffect(() => {
    let cancelled = false;
    fetch('/api/scanned-logos')
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => {
        if (cancelled || !data || !Array.isArray(data.logos) || data.logos.length === 0) return;
        const seen = new Set(seed.map((p) => (p.name || '').toLowerCase()));
        const merged = [...seed];
        data.logos.forEach((p) => {
          const key = (p.name || '').toLowerCase();
          // Tag API-sourced logos as extracted: they are arbitrary raster/SVG marks
          // (GitHub avatars, og:images) and must NOT get the cream-silhouette filter
          // the curated dark-on-transparent partner marks use — that turns an opaque
          // colored image into a solid white box.
          if (p.logo && !seen.has(key)) { seen.add(key); merged.push({ ...p, extracted: true }); }
        });
        setPartners(merged);
      })
      .catch(() => {});
    return () => { cancelled = true; };
  }, []);

  // Marquee loops by translating the track -50% (two identical halves). With
  // few partners a single copy can't fill the band, so repeat the list enough
  // times that each half overflows the container, then keep it even for a
  // seamless loop. Collapses to 2 copies once enough partners accumulate.
  const reps = 2 * Math.max(1, Math.ceil(6 / Math.max(1, partners.length)));

  return (
    <section className="scan-band">
      <div className="scan-band-inner">
        <p className="scan-band-text">
          paste a repo. get proof.
        </p>
        <div className="scan-band-actions">
          <a href="/#scan" className="cta cta--primary">
            scan your repo <span className="cta-arrow">→</span>
          </a>
          <a href="/pricing/" className="cta cta--ghost">
            see pricing
          </a>
        </div>

        {partners.length > 0 && (
          <div className="scan-band-trust">
            <p className="scan-band-trust-label">open source repositories scanned</p>
            <div className="scan-band-ticker">
              <div
                className="scan-band-ticker-track"
                aria-label="open source repositories scanned"
              >
                {Array.from({ length: reps }).map((_, rep) =>
                  partners.map((p) => {
                    const first = rep === 0;
                    const logo = (
                      <img
                        className={`scan-band-logo-img${p.extracted ? ' scan-band-logo-img--raw' : ''}`}
                        src={p.logo}
                        alt={first ? p.name : ''}
                        title={p.name}
                        height="56"
                        loading="lazy"
                      />
                    );
                    return (
                      <div
                        className={`scan-band-logo${p.extracted ? ' scan-band-logo--raw' : ''}`}
                        key={`${rep}-${p.name}`}
                        title={p.name}
                        aria-hidden={first ? undefined : 'true'}
                      >
                        {p.website ? (
                          <a
                            href={p.website}
                            target="_blank"
                            rel="noopener noreferrer"
                            tabIndex={first ? undefined : -1}
                            aria-label={first ? p.name : undefined}
                          >
                            {logo}
                          </a>
                        ) : (
                          logo
                        )}
                      </div>
                    );
                  })
                )}
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

window.ScanBand = ScanBand;