function Marquee() {
  return (
    <div style={{
      background: '#111110',
      borderTop: '1px solid #1E1E1C',
      borderBottom: '1px solid #1E1E1C',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '28px 0',
    }}>
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 10,
        animation: 'scrollBob 2s ease-in-out infinite',
        cursor: 'default',
      }}
        onClick={() => {
          const el = document.getElementById('portfolio');
          if (el) window.scrollTo({ top: el.offsetTop, behavior: 'smooth' });
        }}
      >
        {/* Label */}
        <span style={{
          fontFamily: 'Helvetica, Arial, sans-serif',
          fontWeight: 400,
          fontSize: 10,
          letterSpacing: '.18em',
          textTransform: 'uppercase',
          color: '#3A3A38',
        }}>Scroll</span>

        {/* Arrow */}
        <svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
          {/* Vertical line */}
          <line x1="12" y1="0" x2="12" y2="24" stroke="#3A3A38" strokeWidth="1.2"/>
          {/* Chevron */}
          <polyline points="5,18 12,26 19,18" stroke="#3A3A38" strokeWidth="1.2" fill="none" strokeLinejoin="round" strokeLinecap="round"/>
        </svg>
      </div>

      <style>{`
        @keyframes scrollBob {
          0%, 100% { transform: translateY(0); opacity: 0.7; }
          50%       { transform: translateY(7px); opacity: 1; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Marquee });