// TrustBand — design-partner logo showcase + aggregate proof metrics.
// The literal "proof, not probability" social-proof band: real partners we've
// assessed and real numbers from those engagements. Data lives in
// data/designPartners.js (window.DesignPartners + window.TrustMetrics).

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

  return (
    <section className="trust-band" data-screen-label="Trust — design partners + proof metrics">
      <div className="trust-inner">
        <p className="trust-eyebrow">{partners.length === 1 ? 'design partner' : 'design partners'}</p>
        <h2 className="trust-heading">
          security teams ship on <em>proof</em>, not probability.
        </h2>

        {partners.length > 0 && (
          <ul
            className={`trust-logos ${partners.length === 1 ? 'trust-logos--single' : ''}`}
            aria-label="design partners"
          >
            {partners.map(p => {
              const logo = (
                <img className="trust-logo-img" src={p.logo} alt={p.name} height="34" loading="lazy" />
              );
              return (
                <li className="trust-logo" key={p.name}>
                  {p.website ? (
                    <a href={p.website} target="_blank" rel="noopener noreferrer" aria-label={p.name}>
                      {logo}
                    </a>
                  ) : (
                    logo
                  )}
                  {p.blurb && <span className="trust-logo-note">{p.blurb}</span>}
                </li>
              );
            })}
          </ul>
        )}

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

window.TrustBand = TrustBand;