const Stack = () => {
  const stack = [
    { nm: "React", cat: "frontend" },
    { nm: "Next.js", cat: "frontend" },
    { nm: "TypeScript", cat: "lang" },
    { nm: "Node.js", cat: "backend" },
    { nm: "Python", cat: "backend" },
    { nm: "Postgres", cat: "db" },
    { nm: "Supabase", cat: "baas" },
    { nm: "Stripe", cat: "billing" },
    { nm: "WhatsApp API", cat: "messaging" },
    { nm: "Shopify", cat: "e-com" },
    { nm: "Figma", cat: "design" },
    { nm: "Vercel", cat: "hosting" },
  ];
  return (
    <section className="section" id="stack">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Stack · 05</div>
            <h2 style={{marginTop:20}}>Ferramentas<br/><em className="grad-text" style={{fontWeight:400}}>afiadas.</em></h2>
          </div>
          <div className="body">A gente escolhe stack pelo que resolve melhor seu problema — não por moda. Abaixo, o que mais aparece nos nossos projetos.</div>
        </div>
        <div className="stack-grid">
          {stack.map((s,i)=>(
            <div className="stack-pill" key={i}>
              <span className="cat">◦ {s.cat}</span>
              <span className="nm">{s.nm}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Stack = Stack;