/* CLIENTS — Marquee horizontal de clientes reales (con permiso). Sin testimonios inventados. */

const Clients = ({ t }) => {
  const logos = [
    'TELMEX', "CHILI'S", 'CHEESECAKE FACTORY', 'TOKS', 'GOBIERNO DE LA CIUDAD DE MÉXICO',
  ];

  return (
    <section id="clientes" style={{ background: 'var(--bg)', borderTop: '1px solid var(--hairline)', padding: '120px 0' }}>
      <div className="wrap" style={{ marginBottom: 64 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 64, alignItems: 'baseline' }}>
          <span className="eyebrow">— 07</span>
          <h2 className="display display-md" style={{ maxWidth: '20ch' }}>
            {t('Empresas que ya nos confían su acero.', 'Companies already trusting us with their steel.')}
          </h2>
        </div>
      </div>

      <div style={{ overflow: 'hidden', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)', padding: '32px 0' }}>
        <div className="marquee" style={{ display: 'flex', gap: 80, animation: 'scroll 50s linear infinite', whiteSpace: 'nowrap' }}>
          {[...logos, ...logos, ...logos, ...logos].map((l, i) => (
            <span key={i} className="display" style={{
              fontSize: 'clamp(24px, 3vw, 40px)',
              fontWeight: 500,
              color: 'var(--ink-3)',
              letterSpacing: '-0.02em',
              flexShrink: 0,
            }}>
              {l}
            </span>
          ))}
        </div>
      </div>

      <div className="wrap" style={{ marginTop: 32, textAlign: 'center' }}>
        <p className="mono" style={{ color: 'var(--ink-3)', fontSize: 11 }}>
          {t('ALGUNAS DE LAS MARCAS PARA LAS QUE HEMOS FABRICADO', 'SOME OF THE BRANDS WE HAVE BUILT FOR')}
        </p>
      </div>

      <style>{`
        @keyframes scroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(-25%); }
        }
      `}</style>
    </section>
  );
};

window.Clients = Clients;