/* =====================================================================
   Marquee — scrolling list of business types, sits between hero & first
   section. Ported from src/Hero.jsx::HeroTicker but lifted out as its
   own component so it lives between sections instead of inside the hero.
   ===================================================================== */

function Marquee() {
  const items = [
    'LAWN CARE & LANDSCAPING', 'RESTAURANTS & CAFÉS', 'REAL ESTATE',
    'CONTRACTORS & TRADES', 'AUTO & HYDRAULICS', 'HVAC & PLUMBING',
    'SALONS & STUDIOS', 'RETAIL & BOUTIQUES', 'GOOGLE BUSINESS SETUP',
    'LOCAL SEO', 'SMART CHATBOTS', 'FOUND ON GOOGLE',
    'MOBILE FIRST', 'OKC METRO & BEYOND',
  ];
  const row = [...items, ...items];
  return (
    <div style={{
      position: 'relative',
      borderTop: '1px solid var(--border)',
      borderBottom: '1px solid var(--border)',
      padding: '14px 0',
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      fontFamily: 'var(--font-mono)',
      fontSize: 11,
      letterSpacing: '0.14em',
      color: 'var(--fg-2)',
      textTransform: 'uppercase',
      background: 'color-mix(in oklab, var(--bg) 80%, transparent)',
      backdropFilter: 'blur(10px)',
    }}>
      <div style={{ display: 'inline-flex', gap: 40, animation: 'mwTicker 50s linear infinite' }}>
        {row.map((s, i) => (
          <span key={i} style={{ color: i % 3 === 0 ? 'var(--accent)' : 'var(--fg-2)' }}>◆ {s}</span>
        ))}
      </div>
      <style>{`@keyframes mwTicker { from{transform:translateX(0)} to{transform:translateX(-50%)} }`}</style>
    </div>
  );
}

window.Marquee = Marquee;