// Marquee.jsx
const MARQUEE_WORDS = ['Natural Casing','Charcoal Only','No Ketchup After 10','Poppy Seed Bun','Chicago Drag','Sonoran Bacon Wrap','New York Water Dog','Coney Chili','Snap First, Talk Later'];
function Marquee(){
  const loop=[...MARQUEE_WORDS,...MARQUEE_WORDS];
  return (
    <div style={{position:'relative',overflow:'hidden',borderTop:'1px solid rgba(0,0,0,.15)',borderBottom:'1px solid rgba(0,0,0,.15)',background:'#0D0D0D',color:'#FFC107'}}>
      <div className="marquee-track flex items-center gap-10" style={{padding:'16px 0',fontFamily:'var(--font-display)',fontWeight:800,fontSize:'2rem',textTransform:'uppercase',letterSpacing:'.04em'}}>
        {loop.map((w,i)=>(
          <span key={i} className="flex items-center gap-10" style={{whiteSpace:'nowrap'}}>
            {w}<span style={{color:'var(--grub-ketchup)'}}>✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}
window.Marquee = Marquee;