// Trusted-by logos — fictional Spanish dental clinics. Original wordmarks built from letterforms + simple geometry.
function Logos() {
  const logos = [
    { name: 'Sonrisa Plena', mark: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
        <path d="M4 9c0 5 3.5 9 8 9s8-4 8-9"/>
        <circle cx="9" cy="9" r="1" fill="currentColor"/>
        <circle cx="15" cy="9" r="1" fill="currentColor"/>
      </svg>
    )},
    { name: 'Dental Aurora', mark: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
        <circle cx="12" cy="12" r="4"/>
        <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.5 5.5l2 2M16.5 16.5l2 2M5.5 18.5l2-2M16.5 7.5l2-2"/>
      </svg>
    )},
    { name: 'Clínica Pérez', mark: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round">
        <rect x="4" y="4" width="16" height="16" rx="3"/>
        <path d="M9 9h6M9 13h4M9 17h2"/>
      </svg>
    )},
    { name: 'Orthia Madrid', mark: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
        <path d="M4 16c2-4 6-4 8 0s6 4 8 0"/>
        <circle cx="6" cy="14" r="1.4" fill="currentColor"/>
        <circle cx="12" cy="16" r="1.4" fill="currentColor"/>
        <circle cx="18" cy="14" r="1.4" fill="currentColor"/>
      </svg>
    )},
    { name: 'Maxillar Bcn', mark: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 10l9-6 9 6v3l-9 6-9-6v-3Z"/>
        <path d="M12 13l9-6M12 13l-9-6M12 13v9"/>
      </svg>
    )},
    { name: 'Vital Smile', mark: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
        <path d="M12 3l2.5 5.5L20 9.5l-4.2 3.9L17 19l-5-3-5 3 1.2-5.6L4 9.5l5.5-1L12 3Z"/>
      </svg>
    )},
    { name: 'Iberodent', mark: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round">
        <path d="M12 3l9 5v8l-9 5-9-5V8l9-5Z"/>
        <path d="M12 12v9M3 8l9 4 9-4"/>
      </svg>
    )},
    { name: 'Ortodoncia 360', mark: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
        <circle cx="12" cy="12" r="8"/>
        <path d="M8 14c1.5-2 6.5-2 8 0"/>
        <circle cx="9" cy="10" r="0.8" fill="currentColor"/>
        <circle cx="15" cy="10" r="0.8" fill="currentColor"/>
      </svg>
    )},
    { name: 'Atlas Dental', mark: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
        <path d="M4 4l8 16L20 4M4 4h16M8 12h8"/>
      </svg>
    )},
    { name: 'Norte Clínic', mark: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <path d="M5 19V5l14 14V5"/>
      </svg>
    )},
    { name: 'Levante Smile', mark: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
        <path d="M4 12c4-8 12-8 16 0"/>
        <path d="M4 12c4 8 12 8 16 0"/>
      </svg>
    )},
    { name: 'Lúmen Dental', mark: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
        <path d="M9 14a3 3 0 1 1 6 0v3h-6v-3Z"/>
        <path d="M12 4v3M5 7l2 2M19 7l-2 2"/>
        <path d="M10 19h4"/>
      </svg>
    )},
  ];
  return (
    <section className="logos-wrap">
      <div className="container">
        <div className="logos-label">Más de 500 clínicas en España confían en DentiaCloud</div>
        <div className="logos">
          {logos.slice(0, 6).map(l => (
            <div className="logo" key={l.name}>{l.mark}<span>{l.name}</span></div>
          ))}
        </div>
        <div className="logos" style={{marginTop:32}}>
          {logos.slice(6).map(l => (
            <div className="logo" key={l.name}>{l.mark}<span>{l.name}</span></div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Logos = Logos;
