function Marquee() {
  const items = [
    'ESSAYS', 'REFLECTIONS', 'CODE', 'LITERATURE',
    'TRAVEL', 'DESIGN', 'PHILOSOPHY', 'ENGINEERING',
    'NOCTURNE', 'FIELD NOTES', 'TOKYO', 'KYOTO',
  ];
  const text = items.map(t => `${t}  ✦  `).join('');

  return (
    <div className="marquee-wrap" style={{
      borderTop: '1px solid #2A2238',
      borderBottom: '1px solid #2A2238',
      padding: '12px 0',
      overflow: 'hidden',
      background: 'rgba(14,11,22,0.6)',
      position: 'relative',
      zIndex: 1,
    }}>
      <div className="marquee-track">
        <span style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 10,
          letterSpacing: 3,
          color: '#4A4460',
          userSelect: 'none',
        }}>{text}{text}</span>
      </div>
    </div>
  );
}

window.Marquee = Marquee;