function EarlyAdopters() {
  const { React } = window;
  const partners = window.DesignPartners || [];
  const metrics = window.TrustMetrics || [];

  return (
    <section className="early-adopters" data-screen-label="Customers — early adopters">
      <div className="early-adopters-inner">
        <p className="early-adopters-eyebrow">
          {partners.length === 1 ? 'early adopter' : 'early adopters'}
        </p>
        <h2 className="early-adopters-heading">
          security teams ship on <em>proof</em>, not probability.
        </h2>

        {partners.length > 0 && (
          <div className="early-adopters-ticker">
            <div className="early-adopters-ticker-track" aria-label="early adopters">
              {[0, 1].map((dup) =>
                partners.map((p) => {
                  const logo = (
                    <img
                      className="early-adopters-logo-img"
                      src={p.logo}
                      alt={dup === 0 ? p.name : ''}
                      height="34"
                      loading="lazy"
                    />
                  );
                  return (
                    <div className="early-adopters-logo" key={`${dup}-${p.name}`} aria-hidden={dup === 1 ? 'true' : undefined}>
                      {p.website ? (
                        <a
                          href={p.website}
                          target="_blank"
                          rel="noopener noreferrer"
                          tabIndex={dup === 1 ? -1 : undefined}
                          aria-label={dup === 0 ? p.name : undefined}
                        >
                          {logo}
                        </a>
                      ) : (
                        logo
                      )}
                    </div>
                  );
                })
              )}
            </div>
          </div>
        )}

        {metrics.length > 0 && (
          <dl className="early-adopters-metrics">
            {metrics.map((m) => (
              <div className="early-adopters-metric" key={m.label}>
                <dt className="early-adopters-metric-value">{m.value}</dt>
                <dd className="early-adopters-metric-label">{m.label}</dd>
              </div>
            ))}
          </dl>
        )}
      </div>
    </section>
  );
}

window.EarlyAdopters = EarlyAdopters;