window.Marquee = function Marquee() {
  const isMobile = useIsMobile();
  const items = ['Built to ship', 'Built to hand off', 'Built to ship', 'Built to hand off', 'Built to ship', 'Built to hand off', 'Built to ship', 'Built to hand off', 'Built to ship', 'Built to hand off', 'Built to ship', 'Built to hand off'];
  const fontSize = isMobile ? 56 : 96;
  const padX = isMobile ? 24 : 48;

  return (
    <section style={{
      padding: isMobile ? '32px 0' : '48px 0',
      borderTop: '1px solid var(--border)',
      borderBottom: '1px solid var(--border)',
      overflow: 'hidden',
      whiteSpace: 'nowrap',
    }}>
      <style>{`
        @keyframes stitch-marquee {
          from { transform: translate3d(0, 0, 0); }
          to { transform: translate3d(-50%, 0, 0); }
        }
        .stitch-marquee-track {
          display: inline-flex;
          animation: stitch-marquee 30s linear infinite;
          will-change: transform;
        }
        .stitch-marquee-item {
          font-family: var(--font-sans);
          font-weight: 800;
          font-size: ${fontSize}px;
          line-height: 1;
          letter-spacing: -0.04em;
          padding: 0 ${padX}px;
          white-space: nowrap;
        }
        .stitch-marquee-accent { color: var(--accent); }
      `}</style>
      <div className="stitch-marquee-track">
        {[...items, ...items].map((t, i) => (
          <span key={i} className={'stitch-marquee-item' + (i % 2 === 1 ? ' stitch-marquee-accent' : '')}>
            {t}
          </span>
        ))}
      </div>
    </section>
  );
};