// Stack — tecnologías que usamos, con categorías
const STACK = [
  {
    cat: 'Frontend',
    items: [
      { n: 'Astro', note: 'sitios ultra-rápidos' },
      { n: 'Next.js', note: 'apps full-stack' },
      { n: 'React', note: 'ui declarativa' },
      { n: 'TypeScript', note: 'tipado estricto' },
      { n: 'Tailwind', note: 'utility-first' },
    ],
  },
  {
    cat: 'Backend & Data',
    items: [
      { n: 'Node.js', note: 'api & servicios' },
      { n: 'Postgres', note: 'base relacional' },
      { n: 'Supabase', note: 'auth + db + storage' },
      { n: 'Prisma', note: 'orm moderno' },
      { n: 'Redis', note: 'cache & colas' },
    ],
  },
  {
    cat: 'IA & Automatización',
    items: [
      { n: 'Claude', note: 'asistente + agentes' },
      { n: 'OpenAI', note: 'embeddings & llm' },
      { n: 'Cursor', note: 'editor asistido' },
      { n: 'n8n', note: 'workflows visuales' },
      { n: 'LangChain', note: 'orquestación' },
    ],
  },
  {
    cat: 'Infraestructura',
    items: [
      { n: 'Vercel', note: 'edge deploy' },
      { n: 'Cloudflare', note: 'cdn + workers' },
      { n: 'Stripe', note: 'pagos globales' },
      { n: 'Resend', note: 'email transaccional' },
      { n: 'Sentry', note: 'monitorización' },
    ],
  },
];

const Stack = () => (
  <section id="stack" className="stack">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow">stack · 04 / 05</div>
        <h2>Herramientas que<br/>usamos a <em>diario</em>.</h2>
        <p>Elegimos cada pieza del stack por razones concretas: velocidad de entrega, rendimiento, coste o escala. Nada de tecnología porque esté de moda.</p>
      </div>

      <div className="stack-grid">
        {STACK.map((group, gi) => (
          <div key={group.cat} className="stack-group">
            <div className="stack-group__head mono">
              <span className="stack-group__num">0{gi + 1}</span>
              <span className="stack-group__cat">{group.cat}</span>
            </div>
            <ul className="stack-list">
              {group.items.map(item => (
                <li key={item.n} className="stack-item">
                  <span className="stack-item__name">{item.n}</span>
                  <span className="stack-item__note mono">{item.note}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  </section>
);

window.Stack = Stack;