/* Marquee strip showing tools the course covers */
function Marquee() {
  const isMobile = useIsMobile();
  const gap = isMobile ? 24 : 48;
  const items = ['Claude Code', 'Claude Design', 'Claude Cowork', 'Skills', 'Plugins', 'Subagents', 'MCP', 'Supabase', 'Vercel', 'GitHub', 'Higgsfield', 'Remotion'];
  return (
    <section dir="ltr" style={{background:'#0A0907',padding: isMobile ? '22px 0' : '40px 0',borderTop:'1px solid rgba(238,179,50,0.15)',borderBottom:'1px solid rgba(238,179,50,0.15)',overflow:'hidden',position:'relative'}}>
      <div style={{position:'absolute',inset:0,background:'linear-gradient(90deg, #0A0907, transparent 8%, transparent 92%, #0A0907)',pointerEvents:'none',zIndex:2}} />
      <div style={{display:'flex',width:'max-content',animation: `marquee ${isMobile ? 22 : 28}s linear infinite`,whiteSpace:'nowrap',willChange:'transform'}}>
        {[0,1].map(copy => (
          <div key={copy} aria-hidden={copy===1} style={{display:'flex',alignItems:'center',gap,paddingRight:gap,flexShrink:0}}>
            {items.map((t,i)=>(
              <div key={i} style={{display:'flex',alignItems:'center',gap,fontFamily:'Open Sans',fontSize: isMobile ? 20 : 32,fontWeight:700,color:i%2 ? '#F5F2ED' : '#EEB332',letterSpacing:'-0.02em'}}>
                {t}
                <span style={{width: isMobile ? 6 : 8, height: isMobile ? 6 : 8, background:'#DD9933',borderRadius:'50%',boxShadow:'0 0 12px #EEB332'}} />
              </div>
            ))}
          </div>
        ))}
      </div>
      <style>{`@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }`}</style>
    </section>
  );
}
window.Marquee = Marquee;