// CustomerLogos.jsx — "Works with the systems that already run the enterprise"
// Langdock-style muted partner strip. Glyph + wordmark; placeholders for real partner logos.

function CustomerLogos() {
  // Generic geometric glyphs (placeholders) + brand name + category label.
  // Replace `glyph` with real partner SVGs when licensed.
  const partners = [
    { name: "SAP S/4HANA",          cat: "ERP",       glyph: <rect x="6" y="6" width="20" height="20" stroke="currentColor" strokeWidth="1.5" fill="none"/> },
    { name: "Oracle EBS",           cat: "ERP",       glyph: <ellipse cx="16" cy="16" rx="11" ry="7" stroke="currentColor" strokeWidth="1.5" fill="none"/> },
    { name: "Microsoft D365",       cat: "ERP/CRM",   glyph: <g stroke="currentColor" strokeWidth="1.5" fill="none"><rect x="6" y="6" width="9" height="9"/><rect x="17" y="6" width="9" height="9"/><rect x="6" y="17" width="9" height="9"/><rect x="17" y="17" width="9" height="9"/></g> },
    { name: "DATEV",                cat: "Accounting",glyph: <g stroke="currentColor" strokeWidth="1.5" fill="none"><path d="M6 10h20M6 16h20M6 22h12"/></g> },
    { name: "Siemens Teamcenter",   cat: "PLM",       glyph: <polygon points="16,6 26,22 6,22" stroke="currentColor" strokeWidth="1.5" fill="none"/> },
    { name: "Dassault 3DEXPERIENCE",cat: "PLM",       glyph: <polygon points="16,5 27,16 16,27 5,16" stroke="currentColor" strokeWidth="1.5" fill="none"/> },
    { name: "PTC Windchill",        cat: "PLM",       glyph: <g stroke="currentColor" strokeWidth="1.5" fill="none"><circle cx="16" cy="16" r="10"/><circle cx="16" cy="16" r="4"/></g> },
    { name: "Aras Innovator",       cat: "PLM",       glyph: <g stroke="currentColor" strokeWidth="1.5" fill="none"><path d="M16 6L6 26h20L16 6z"/><path d="M11 20h10"/></g> },
    { name: "Veeva Vault",          cat: "QMS · LIMS",glyph: <g stroke="currentColor" strokeWidth="1.5" fill="none"><path d="M6 7l10 19L26 7"/></g> },
    { name: "Salesforce",           cat: "CRM",       glyph: <g stroke="currentColor" strokeWidth="1.5" fill="none"><ellipse cx="11" cy="18" rx="6" ry="5"/><ellipse cx="20" cy="14" rx="7" ry="6"/></g> },
    { name: "ServiceNow",           cat: "ITSM",      glyph: <g stroke="currentColor" strokeWidth="1.5" fill="none"><circle cx="16" cy="16" r="10"/><path d="M10 16h12M16 10v12"/></g> },
    { name: "Workday",              cat: "HR · FIN",  glyph: <g stroke="currentColor" strokeWidth="1.5" fill="none"><path d="M6 10l4 14 6-10 6 10 4-14"/></g> },
  ];

  return (
    <section className="customer-logos" aria-label="Systems Orchestrator works with">
      <div className="inner">
        <div className="cl-head">
          <div className="eyebrow">Works with</div>
          <p className="cl-lede">
            Orchestrator coordinates the systems your enterprise already runs.
            It does not replace them.
          </p>
        </div>
        <div className="cl-strip">
          {partners.map((p) => (
            <div key={p.name} className="cl-mark" title={p.name}>
              <svg className="cl-glyph" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
                {p.glyph}
              </svg>
              <div className="cl-text">
                <div className="cl-name">{p.name}</div>
                <div className="cl-cat">{p.cat}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="cl-foot">
          <span className="cl-foot-note">+ more via REST, GraphQL, and message bus</span>
          <a className="cl-foot-link" href="#">All integrations <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

window.CustomerLogos = CustomerLogos;