/* global React, MarqueeRow, Reveal */
function Marquee() {
  const stack = [
    'Node.js', 'TypeScript', 'Python', 'FastAPI', 'Django', 'Go', 'gRPC',
    'PostgreSQL', 'Redis', 'Kafka', 'AWS', 'Lambda', 'ECS', 'GCP', 'Cloud Run',
    'GKE', 'Terraform', 'Docker', 'Kubernetes', 'GraphQL',
  ];
  const items = stack.map((s, i) => (
    <span key={i} style={{
      fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 500,
      color: '#3E4B5E', letterSpacing: '0', display: 'inline-flex', alignItems: 'center', gap: 20,
    }}>
      {s}
      <Dot />
    </span>
  ));
  return (
    <section data-nal="marquee" data-screen-label="02 Stack marquee" style={{
      padding: '40px 0 52px', background: '#fff',
      borderTop: '1px solid #EEF2F6',
      borderBottom: '1px solid #EEF2F6',
      overflow: 'hidden', position: 'relative',
    }}>
      <Reveal y={10}>
        <div style={{ textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#8695A8', marginBottom: 28 }}>
          — Stack we ship daily —
        </div>
      </Reveal>
      <div style={{ position: 'absolute', left: 0, top: 60, bottom: 0, width: 120, zIndex: 2, background: 'linear-gradient(90deg,#fff,transparent)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', right: 0, top: 60, bottom: 0, width: 120, zIndex: 2, background: 'linear-gradient(270deg,#fff,transparent)', pointerEvents: 'none' }} />
      <MarqueeRow duration={50}>{items}</MarqueeRow>
    </section>
  );
}

function Dot() {
  return <span style={{ width: 4, height: 4, background: '#D9E0E8', borderRadius: 999, display: 'inline-block' }} />;
}

window.Marquee = Marquee;