// Marquee — trusted-by ticker, edge-to-edge
function Marquee() {
  const names = ['MERIDIAN', 'NorthPort', 'KAIKO', 'Arclight', 'HANSA', 'Trenton & Co.',
    'PACIFICA', 'Gridline', 'ORION', 'Blackbird Logistics', 'VERANDA', 'Sinclair Freight'];
  const track = [...names, ...names];
  return (
    <section style={{ background: '#fff', borderTop: '1px solid #eaecf0', borderBottom: '1px solid #eaecf0',
      padding: '40px 0', overflow: 'hidden', position: 'relative' }}>
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 200,
        background: 'linear-gradient(90deg, #fff, transparent)', zIndex: 2, pointerEvents: 'none' }}/>
      <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 200,
        background: 'linear-gradient(-90deg, #fff, transparent)', zIndex: 2, pointerEvents: 'none' }}/>
      <div style={{ fontSize: 11, color: '#667085', fontWeight: 600, letterSpacing: '0.08em',
        textTransform: 'uppercase', textAlign: 'center', marginBottom: 20 }}>
        Trusted by enterprise shippers in 140+ countries
      </div>
      <div style={{ display: 'flex', whiteSpace: 'nowrap', overflow: 'hidden' }}>
        <div className="marquee-track">
          {track.map((n, i) => (
            <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 12,
              fontSize: i%2?20:17, fontWeight: i%2?800:600, color: '#475467',
              letterSpacing: i%2?'-0.02em':'0.15em', textTransform: i%2?'none':'uppercase', opacity: 0.7 }}>
              {n}
              <span style={{ width: 4, height: 4, borderRadius: 9999, background: '#d0d5dd', display: 'inline-block' }}/>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Marquee = Marquee;