// Clients strip — real client logos (user has permission).
// Each sits in an <image-slot> so a logo can still be replaced by drag-and-drop.
function Clients() {
  const R = window.__resources || {};
  const clients = [
    ['Lendlease', R.logoLendlease || 'uploads/lendlease-logo.png'],
    ['Colliers International', R.logoColliers || 'uploads/colliers-logo.png'],
    ['TAFE NSW', R.logoTafe || 'uploads/tafe-nsw-logo.png'],
    ['Swinburne University', R.logoSwinburne || 'uploads/swinburne-logo.png'],
  ];
  return (
    <div className="clients">
      <div className="clients-label">Trusted by leading Australian organisations</div>
      <div className="clients-logos">
        {clients.map(([n, src]) => (
          <div className="client-slot" key={n}>
            <image-slot id={`client-${n.toLowerCase().replace(/[^a-z]+/g, '-')}`}
                        shape="rect" fit="contain" src={src}
                        style={{ width: '170px', height: '56px' }}
                        placeholder={`${n} logo`}></image-slot>
            <span className="client-name">{n}</span>
          </div>
        ))}
      </div>
    </div>
  );
}
window.Clients = Clients;