/* Proof bar — named credibility (typographic strip, not fake logos) */

const CLIENTS = [
  { name: 'CORTICEIRA AMORIM', tag: 'Cork · 25 sites' },
  { name: 'CAETANO BUS', tag: 'Automotive' },
  { name: 'LACTOGAL', tag: 'Dairy & Food' },
  { name: 'COLEP PK', tag: 'Packaging' },
  { name: 'INAPAL METAL', tag: 'Discrete Mfg' },
  { name: 'SERRATEC', tag: 'Discrete Mfg' },
  { name: 'IMTO', tag: 'Packaging' },
];

function ProofBar() {
  return (
    <section style={{ background: '#FFFFFF', borderTop: '1px solid var(--kt-gray-200)', borderBottom: '1px solid var(--kt-gray-200)', padding: '40px 0' }}>
      <div className="kt-container">
        <div className="kt-proofhead">
          <div>
            <div className="kt-mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--kt-cyan-700)', marginBottom: 8 }}>
              ● TRUSTED BY INDUSTRIAL LEADERS
            </div>
            <div style={{ fontSize: 14, color: 'var(--kt-gray-700)', lineHeight: 1.5 }}>
              Operating across complex industrial sites in Portugal, Spain, and the broader EU.
            </div>
          </div>
          <div className="kt-proof-marquee">
            {CLIENTS.map((c) => (
              <div key={c.name} className="kt-proof-item">
                <div className="kt-proof-name">{c.name}</div>
                <div className="kt-proof-tag">{c.tag}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{
          marginTop: 32,
          padding: '20px 24px',
          background: 'var(--kt-gray-50)',
          borderLeft: '3px solid var(--kt-cyan-500)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap'
        }}>
          <div style={{ fontSize: 15, color: 'var(--kt-navy-900)', fontWeight: 500 }}>
            <span className="kt-data" style={{ fontSize: 22, fontWeight: 700, color: 'var(--kt-cyan-700)', marginRight: 10 }}>25+</span>
            sites running on a <strong>single-instance, multi-site TrakSYS template</strong> — Corticeira Amorim global rollout.
          </div>
          <a href="case-studies/amorim.html" className="kt-btn-link">Read the case study</a>
        </div>
      </div>
    </section>
  );
}

window.ProofBar = ProofBar;