const Marquee = () => {
  const logos = [
    'AURA', 'NORDIK', 'ÓRION', 'PIXEL/CO', 'HÉLIX', 'VERTEX', 'NIMBUS',
    'KAYÁ', 'OFFGRID', 'CIVIC.', 'PARALLEL', 'MERIDIAN',
  ];
  return (
    <section style={{ padding:'60px 0 30px', borderTop:'1px solid var(--line-2)', borderBottom:'1px solid var(--line-2)' }}>
      <div className="container" style={{ marginBottom:28, display:'flex', justifyContent:'center' }}>
        <div className="eyebrow">
          {L('marquee').eyebrow}
        </div>
      </div>
      <div style={{ position:'relative', overflow:'hidden',
        maskImage:'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)' }}>
        <div className="marquee-track">
          {[...logos, ...logos].map((l, i) => (
            <span key={i} style={{
              fontFamily:"'Bricolage Grotesque', sans-serif",
              fontWeight:700, fontSize:26, letterSpacing:'-0.04em',
              color:'rgba(255,255,255,0.35)', whiteSpace:'nowrap',
            }}>{l}</span>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Marquee = Marquee;