// stack.jsx — Section 4: Stack marquee, two opposing rows

const ROW_A = [
  { name: 'Airtable',         glyph: 'AT' },
  { name: 'Cloudflare Workers', glyph: 'CF' },
  { name: 'HubSpot',          glyph: 'HS' },
  { name: 'Webflow',          glyph: 'WF' },
  { name: 'Fillout',          glyph: 'FO' },
  { name: 'TypeScript',       glyph: 'TS' },
  { name: 'Node.js',          glyph: 'NJ' },
  { name: 'Three.js',         glyph: '3D' },
];
const ROW_B = [
  { name: 'GSAP',             glyph: 'GS' },
  { name: 'Leaflet',          glyph: 'LF' },
  { name: 'Tailwind',         glyph: 'TW' },
  { name: 'Next.js',          glyph: 'NX' },
  { name: 'React',            glyph: 'RC' },
  { name: 'Git',              glyph: 'GT' },
  { name: 'JavaScript',       glyph: 'JS' },
  { name: 'Resend',           glyph: 'RS' },
];

function Pill({ item }) {
  return (
    <div className="st-pill" data-magnet>
      <span className="st-glyph mono">{item.glyph}</span>
      <span className="st-name">{item.name}</span>
    </div>
  );
}

function MarqueeRow({ items, dir = 'l' }) {
  // Duplicate so the loop is seamless
  const dup = [...items, ...items];
  return (
    <div className={`st-row st-${dir}`}>
      <div className="st-track">
        {dup.map((it, i) => <Pill key={i} item={it} />)}
      </div>
    </div>
  );
}

function Stack() {
  return (
    <section id="stack" className="stack" data-screen-label="04 Stack" data-reveal="up">
      <div className="st-head">
        <span className="mono small dim">N° 04 / 05 — Stack</span>
        <h2 className="st-eyebrow">
          Une stack <em className="serif">choisie, pas accumulée.</em>
        </h2>
        <p className="st-intro">
          Chaque technologie est sélectionnée pour sa pertinence métier et sa pérennité. Un socle stable, éprouvé en production, transmissible à toute équipe technique.
        </p>
      </div>

      <div className="st-marquee" aria-hidden="true">
        <div className="st-fade st-fade-l"></div>
        <div className="st-fade st-fade-r"></div>
        <MarqueeRow items={ROW_A} dir="l" />
        <MarqueeRow items={ROW_B} dir="r" />
      </div>
    </section>
  );
}

window.Stack = Stack;