/* Logo marquee — selected clients */

const LOGOS = [
  { name: 'Origins', glyph: '◎' },
  { name: 'Pulsejob', glyph: '◐' },
  { name: 'AISyncso', glyph: '◇' },
  { name: 'Northwind', glyph: '✦' },
  { name: 'Lattice Labs', glyph: '⌬' },
  { name: 'Atlas', glyph: '△' },
  { name: 'Vertex', glyph: '⬡' },
  { name: 'Helio', glyph: '☼' },
  { name: 'Field', glyph: '✧' },
];

const Marquee = () => {
  const ref = React.useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] });
  const intensity = (window.__tweaks?.motion ?? 60) / 100;
  const x = useTransform(scrollYProgress, [0, 1], [200 * intensity, -400 * intensity]);
  const [paused, setPaused] = React.useState(false);
  const items = [...LOGOS, ...LOGOS];
  return (
    <section ref={ref} className="border-y hairline py-10 overflow-hidden">
      <div className="mx-auto max-w-[1280px] px-6 md:px-10 mb-6 flex items-center justify-between">
        <Eyebrow>Selected collaborations</Eyebrow>
        <span className="font-mono text-[10px]" style={{ color: 'var(--fg-dim)' }}>2019 — present</span>
      </div>
      <div
        className={`relative ${paused ? 'marquee-paused' : ''}`}
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
      >
        <div className="absolute left-0 top-0 bottom-0 w-32 z-10 pointer-events-none" style={{ background: 'linear-gradient(to right, var(--bg), transparent)' }}></div>
        <div className="absolute right-0 top-0 bottom-0 w-32 z-10 pointer-events-none" style={{ background: 'linear-gradient(to left, var(--bg), transparent)' }}></div>

        <motion.div style={{ x }} className="marquee-track flex gap-16 w-max">
          {items.map((logo, i) => (
            <motion.div
              key={i}
              whileHover={{ scale: 1.08, color: 'var(--fg)' }}
              transition={{ duration: 0.3 }}
              className="flex items-center gap-3 shrink-0"
              style={{ color: 'var(--fg-muted)' }}
            >
              <motion.span
                animate={{ rotate: [0, 360] }}
                transition={{ duration: 16 + (i % 4) * 4, repeat: Infinity, ease: 'linear' }}
                className="text-2xl inline-block"
                style={{ color: 'var(--accent)' }}
              >{logo.glyph}</motion.span>
              <span className="text-2xl font-display font-medium tracking-tight">{logo.name}</span>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
};

window.Marquee = Marquee;