// ZION TickerStrip — marquee bar between sections for rhythm
function TickerStrip({ tone = 'fire' }) {
  const items = [
    "DROP 04 · LIVE NOW",
    "FREE SHIPPING · US & EU",
    "HANDMADE",
    "VOL. 03 NEARLY SOLD OUT",
    "STAY LIT",
    "CATCH THE FIRE",
  ];
  const repeated = Array.from({ length: 6 }).flatMap(() => items);
  const bg = tone === 'fire' ? '#F7591F' : '#0A0A0A';
  const fg = tone === 'fire' ? '#000' : '#fff';
  const accent = tone === 'fire' ? '#000' : '#F7591F';
  return (
    <div style={{
      background: bg, color: fg, overflow: 'hidden', whiteSpace: 'nowrap',
      padding: '14px 0', borderTop: '2px solid #000', borderBottom: '2px solid #000',
    }}>
      <style>{`
        @keyframes zion-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        .zion-marquee-inner { display: inline-flex; gap: 40px; animation: zion-marquee 60s linear infinite; padding-left: 40px; }
      `}</style>
      <div className="zion-marquee-inner">
        {repeated.map((t, i) => (
          <span key={i} style={{
            fontFamily: 'Poppins', fontWeight: 900, fontStyle: 'italic',
            fontSize: 14, letterSpacing: '0.16em', textTransform: 'uppercase',
            color: i % 6 === 4 ? accent : fg,
          }}>
            {t} <span style={{ opacity: 0.5, margin: '0 6px' }}>///</span>
          </span>
        ))}
      </div>
    </div>
  );
}

window.TickerStrip = TickerStrip;