// LogoStrip.jsx — Founder journey marquee, no exit flex
const LogoStrip = () => {
  const milestones = [
    '2018: Supplement retail, Houston',
    'Sold SARMs — saw the regulatory heat coming',
    'Pivoted before the DASCA bans hit',
    'Moved into legitimate supplements',
    '2021: Launched own brand',
    'Built compliant telehealth infrastructure on the backend',
    '2024: GLP-1 wave hits — already set up',
    '$33M revenue in 2024',
    '$110M revenue in 2025',
    'Now: $10-15M/mo gross',
  ];
  const [paused, setPaused] = React.useState(false);
  return (
    <section style={{ paddingTop: 0, paddingBottom: 'clamp(48px, 8vw, 96px)' }}>
      <div className="container">
        <Reveal className="eyebrow" y={8} style={{ marginBottom: 28, color: 'var(--fg-3)', display: 'block' }}>
          Built by an operator who lived it
        </Reveal>
      </div>
      <div
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        style={{
          position: 'relative',
          borderTop: '1px solid var(--border)',
          borderBottom: '1px solid var(--border)',
          overflow: 'hidden',
          maskImage: 'linear-gradient(to right, transparent, black 8%, black 92%, transparent)',
          WebkitMaskImage: 'linear-gradient(to right, transparent, black 8%, black 92%, transparent)'
        }}>
        <div style={{
          display: 'flex',
          width: 'max-content',
          animation: 'marquee 40s linear infinite',
          animationPlayState: paused ? 'paused' : 'running'
        }}>
          {[0, 1].map(loop => (
            <div key={loop} style={{ display: 'flex' }}>
              {milestones.map(n => (
                <div key={loop + n} style={{
                  padding: 'clamp(20px, 3vw, 32px) clamp(28px, 4vw, 56px)',
                  fontSize: 'clamp(13px, 1.4vw, 16px)',
                  fontWeight: 600,
                  letterSpacing: '-0.01em',
                  color: 'var(--fg-2)',
                  whiteSpace: 'nowrap',
                  borderRight: '1px solid var(--border)'
                }}>{n}</div>
              ))}
            </div>
          ))}
        </div>
        <style>{`
          @keyframes marquee {
            from { transform: translate3d(0,0,0); }
            to   { transform: translate3d(-50%, 0, 0); }
          }
        `}</style>
      </div>
    </section>
  );
};
window.LogoStrip = LogoStrip;