// Stack — marquee + category legend

const STACK_ITEMS = [
  { name:'Claude', cat:'ai' },
  { name:'n8n', cat:'ai' },
  { name:'Gemini 2.0', cat:'ai' },
  { name:'Pinecone', cat:'ai' },
  { name:'Runway', cat:'video' },
  { name:'Kling', cat:'video' },
  { name:'Veo', cat:'video' },
  { name:'HeyGen', cat:'video' },
  { name:'ElevenLabs', cat:'video' },
  { name:'Midjourney', cat:'video' },
  { name:'Sora', cat:'video' },
  { name:'WordPress', cat:'web' },
  { name:'Firebase', cat:'web' },
  { name:'Cloudflare', cat:'web' },
  { name:'Supabase', cat:'web' },
  { name:'Python', cat:'web' },
  { name:'Firecrawl', cat:'research' },
  { name:'Zapier', cat:'research' },
  { name:'GitHub', cat:'research' },
  { name:'REST APIs', cat:'research' },
];

const CAT_COLORS = {
  ai:'#00B4FF', video:'#9B6CFF', web:'#F59E0B', research:'#00E5A0',
};
const CAT_LABELS = [
  { id:'ai', label:'AI & Automation' },
  { id:'video', label:'Video & Media' },
  { id:'web', label:'Web & Infra' },
  { id:'research', label:'Research & Scraping' },
];

function StackSection() {
  const [filter, setFilter] = useState(null);
  const loop = [...STACK_ITEMS, ...STACK_ITEMS];

  return (
    <section className="section-full" style={{ background:'var(--bg)', overflow:'hidden' }}>
      <div className="section" style={{ padding:'0 var(--section-px)' }}>
        <SectionHeader
          eyebrow="The Stack"
          title="Tools I operate daily."
        />

        {/* Marquee */}
        <div style={{
          position:'relative', overflow:'hidden', paddingTop:8, paddingBottom:28,
          maskImage:'linear-gradient(to right, transparent, black 8%, black 92%, transparent)',
          WebkitMaskImage:'linear-gradient(to right, transparent, black 8%, black 92%, transparent)',
        }}>
          <div style={{
            display:'flex', gap:12, width:'max-content',
            animation:'marquee 50s linear infinite',
          }}>
            {loop.map((item, i) => {
              const color = CAT_COLORS[item.cat];
              const dim = filter && filter !== item.cat;
              return (
                <div
                  key={i}
                  onMouseEnter={()=>setFilter(item.cat)}
                  onMouseLeave={()=>setFilter(null)}
                  className="glass-card"
                  style={{
                    padding:'11px 16px',
                    display:'inline-flex', alignItems:'center', gap:10,
                    opacity: dim ? 0.3 : 1, transition:'opacity .25s',
                    flexShrink:0, cursor:'default',
                  }}
                >
                  <span style={{
                    width:7, height:7, borderRadius:'50%', background:color,
                    boxShadow:`0 0 calc(6px * var(--glow)) ${color}`, flexShrink:0,
                  }}/>
                  <span style={{ fontFamily:'var(--font-mono)', fontSize:13, fontWeight:500, color:'var(--text)' }}>
                    {item.name}
                  </span>
                </div>
              );
            })}
          </div>
        </div>

        {/* Legend */}
        <div style={{
          display:'flex', flexWrap:'wrap', gap:18, justifyContent:'center', marginTop:10,
        }}>
          {CAT_LABELS.map(cat => (
            <button
              key={cat.id}
              onMouseEnter={()=>setFilter(cat.id)}
              onMouseLeave={()=>setFilter(null)}
              style={{
                display:'inline-flex', alignItems:'center', gap:8,
                background:'transparent', border:'none', cursor:'pointer',
                padding:'6px 10px', borderRadius:99,
                transition:'background .2s',
              }}
            >
              <span style={{ width:8, height:8, borderRadius:'50%', background:CAT_COLORS[cat.id] }}/>
              <span style={{ fontSize:12, color:'var(--muted-strong)' }}>{cat.label}</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

window.StackSection = StackSection;