/* LIVE TICKER — auto-scrolling band of recent client wins */

function Ticker() {
  const isMobile = useWindowWidth() < 640;
  const items = [
    { brand: 'GOJI BLOOM',     vertical: 'Skincare',     metric: 'ROAS', value: '+318%',   region: 'EU' },
    { brand: 'NORTH FOLD',     vertical: 'Apparel',      metric: 'CVR',  value: '+184%',   region: 'US' },
    { brand: 'KIRA AUDIO',     vertical: 'Electronics',  metric: 'CAC',  value: '−42%',    region: 'JP' },
    { brand: 'WILDER & CO',    vertical: 'Pet',          metric: 'AOV',  value: '+58%',    region: 'AU' },
    { brand: 'MAEVE',          vertical: 'Beauty',       metric: 'ROAS', value: '4.9×',    region: 'UK' },
    { brand: 'SOLA HYDRATE',   vertical: 'Supplements',  metric: 'LTV',  value: '+2.4×',   region: 'CA' },
    { brand: 'OAKS HOMEWARE',  vertical: 'Home',         metric: 'CVR',  value: '+96%',    region: 'DE' },
    { brand: 'LUMEN COFFEE',   vertical: 'F&B',          metric: 'Sub.', value: '12k MRR', region: 'NL' },
    { brand: 'ECHO ATHLETIC',  vertical: 'Activewear',   metric: 'ROAS', value: '5.2×',    region: 'US' },
    { brand: 'BRACE BIKES',    vertical: 'Mobility',     metric: 'Rev.', value: '$2.1M',   region: 'EU' },
  ];

  // duplicate to fill marquee
  const stream = [...items, ...items];

  return (
    <section
      data-screen-label="02 Live ticker"
      style={{
        padding: '20px 0',
        background: 'var(--ink)',
        color: 'white',
        borderTop: '1px solid var(--dark-line)',
        borderBottom: '1px solid var(--dark-line)',
        overflow: 'hidden',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, position: 'relative' }}>
        {/* Left label */}
        <div style={{
          flexShrink: 0, padding: '0 16px',
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.7)',
          borderRight: '1px solid var(--dark-line)',
          height: 28, whiteSpace: 'nowrap',
        }}>
          <span className="pulse-dot"></span>
          {isMobile ? 'Live' : 'Live wins · last 30 days'}
        </div>

        <div style={{ overflow: 'hidden', flex: 1, maskImage: 'linear-gradient(to right, transparent, black 5%, black 95%, transparent)', WebkitMaskImage: 'linear-gradient(to right, transparent, black 5%, black 95%, transparent)' }}>
          <div className="marquee">
            {stream.map((it, i) => (
              <div key={i} style={{
                display: 'inline-flex', alignItems: 'center', gap: 12,
                color: 'rgba(255,255,255,0.85)', fontSize: 13,
                whiteSpace: 'nowrap',
              }}>
                <span style={{ fontWeight: 600, letterSpacing: '0.02em' }}>{it.brand}</span>
                <span style={{ color: 'rgba(255,255,255,.4)', fontFamily: 'var(--font-mono)', fontSize: 10, padding: '2px 6px', border: '1px solid rgba(255,255,255,.1)', borderRadius: 4 }}>{it.region}</span>
                <span style={{ color: 'rgba(255,255,255,.4)', fontSize: 12 }}>· {it.vertical}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(255,255,255,.55)' }}>{it.metric}</span>
                <span style={{ color: 'var(--green-bright)', fontFamily: 'var(--font-mono)', fontWeight: 600 }}>{it.value}</span>
                <span style={{ color: 'rgba(255,255,255,.18)', margin: '0 8px' }}>///</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Ticker = Ticker;