/* eslint-disable */
// Marquee — italic horizontal scroll strip.
// Source: src/routes/index.tsx (marquee section)

function Marquee() {
  const words = ['Labor market shift', 'Technological advance', 'Institutional distrust', 'Career breaks', 'Anyone can build', 'Multi-hyphenate identities', 'Creator & portfolio careers'];
  const items = [...words, ...words];
  return (
    <div style={{
      borderTop: '1px solid var(--hairline)',
      borderBottom: '1px solid var(--hairline)',
      overflow: 'hidden',
      background: 'oklch(0.93 0.018 80 / 0.4)',
    }}>
      <div className="marquee-track" style={{ padding: '12px 0' }}>
        {items.map((w, i) => (
          <span key={i} style={{
            display: 'inline-flex', alignItems: 'baseline',
            fontFamily: 'var(--font-display)',
            fontStyle: 'italic',
            fontSize: 'clamp(20px, 2vw, 24px)',
            padding: '0 32px',
            color: 'oklch(0.22 0.02 60 / 0.65)',
            whiteSpace: 'nowrap',
          }}>
            {w}&nbsp;<span style={{ color: 'var(--accent)', fontStyle: 'normal' }}>·</span>
          </span>
        ))}
      </div>
    </div>
  );
}

window.Marquee = Marquee;