// STACK TECNOLÓGICO — Logos/iconos de tecnologías
const stackCategories = [
  {
    title: 'Frontend',
    color: '#22D3EE',
    items: [
      { n: 'React', icon: <circle cx="32" cy="32" r="4.5" fill="currentColor"/> },
      { n: 'Next.js', icon: <path d="M22 18 V46 M22 18 L46 46" stroke="currentColor" strokeWidth="2.5" fill="none"/> },
      { n: 'TypeScript', icon: <path d="M18 28 H38 M28 28 V44 M44 30 Q44 26 40 26 Q36 26 36 30 Q36 34 40 34 Q44 34 44 38 Q44 42 40 42 Q36 42 36 38" stroke="currentColor" strokeWidth="2.5" fill="none"/> },
      { n: 'Vue', icon: <path d="M16 20 L32 48 L48 20 M22 20 L32 38 L42 20" stroke="currentColor" strokeWidth="2.5" fill="none"/> },
      { n: 'Tailwind', icon: <path d="M14 32 Q22 22 32 30 Q42 38 50 32 M14 42 Q22 32 32 40" stroke="currentColor" strokeWidth="2.5" fill="none"/> },
    ],
  },
  {
    title: 'Backend',
    color: '#4F8CFF',
    items: [
      { n: 'Node.js', icon: <path d="M32 14 L46 22 V42 L32 50 L18 42 V22 Z" stroke="currentColor" strokeWidth="2.5" fill="none"/> },
      { n: 'NestJS', icon: <path d="M20 18 L32 14 L44 18 L44 38 L32 50 L20 38 Z M28 26 H36 V42 H28 Z" stroke="currentColor" strokeWidth="2.5" fill="none"/> },
      { n: 'Laravel', icon: <path d="M14 22 L24 16 L34 22 L34 42 L24 48 L14 42 Z M24 28 L34 22 M24 28 V48" stroke="currentColor" strokeWidth="2" fill="none"/> },
      { n: 'Python', icon: <path d="M22 16 H40 Q44 16 44 20 V32 H30 Q26 32 26 36 V44 Q26 48 22 48 H18 Q14 48 14 44 V32 H30 Q34 32 34 28 V20 Q34 16 38 16" stroke="currentColor" strokeWidth="2" fill="none"/> },
      { n: '.NET', icon: <path d="M14 18 V46 M14 18 L34 46 V18 M46 18 V46" stroke="currentColor" strokeWidth="2.5" fill="none"/> },
    ],
  },
  {
    title: 'Datos & Infra',
    color: '#A855F7',
    items: [
      { n: 'PostgreSQL', icon: <><ellipse cx="32" cy="22" rx="16" ry="6" stroke="currentColor" strokeWidth="2" fill="none"/><path d="M16 22 V42 Q16 48 32 48 Q48 48 48 42 V22" stroke="currentColor" strokeWidth="2" fill="none"/><path d="M16 32 Q16 38 32 38 Q48 38 48 32" stroke="currentColor" strokeWidth="2" fill="none"/></> },
      { n: 'MySQL', icon: <><ellipse cx="32" cy="20" rx="14" ry="5" stroke="currentColor" strokeWidth="2" fill="none"/><path d="M18 20 V44 Q18 48 32 48 Q46 48 46 44 V20" stroke="currentColor" strokeWidth="2" fill="none"/></> },
      { n: 'MongoDB', icon: <path d="M32 12 Q24 22 24 34 Q24 44 32 50 Q40 44 40 34 Q40 22 32 12 Z M32 14 V50" stroke="currentColor" strokeWidth="2" fill="none"/> },
      { n: 'Docker', icon: <><rect x="14" y="30" width="36" height="14" rx="2" stroke="currentColor" strokeWidth="2" fill="none"/><rect x="18" y="22" width="6" height="6" stroke="currentColor" strokeWidth="2" fill="none"/><rect x="26" y="22" width="6" height="6" stroke="currentColor" strokeWidth="2" fill="none"/><rect x="34" y="22" width="6" height="6" stroke="currentColor" strokeWidth="2" fill="none"/></> },
      { n: 'AWS', icon: <><path d="M14 32 L32 22 L50 32 L32 42 Z" stroke="currentColor" strokeWidth="2" fill="none"/><path d="M14 38 Q32 48 50 38" stroke="currentColor" strokeWidth="2" fill="none"/></> },
    ],
  },
  {
    title: 'Móvil',
    color: '#4F8CFF',
    items: [
      { n: 'React Native', icon: <><circle cx="32" cy="32" r="6" stroke="currentColor" strokeWidth="2" fill="none"/><ellipse cx="32" cy="32" rx="18" ry="7" stroke="currentColor" strokeWidth="1.5" fill="none"/><ellipse cx="32" cy="32" rx="18" ry="7" transform="rotate(60 32 32)" stroke="currentColor" strokeWidth="1.5" fill="none"/><ellipse cx="32" cy="32" rx="18" ry="7" transform="rotate(120 32 32)" stroke="currentColor" strokeWidth="1.5" fill="none"/></> },
      { n: 'Flutter', icon: <path d="M38 14 L20 32 L26 38 L44 20 Z M26 38 L38 50 L44 50 L32 38 Z" stroke="currentColor" strokeWidth="2" fill="none"/> },
      { n: 'Swift', icon: <path d="M16 16 Q40 24 48 48 Q36 40 16 40 Q26 32 22 22" stroke="currentColor" strokeWidth="2" fill="none" strokeLinejoin="round"/> },
      { n: 'Kotlin', icon: <path d="M14 14 H50 L32 32 L50 50 H14 Z" stroke="currentColor" strokeWidth="2" fill="none"/> },
    ],
  },
];

function TechBadge({ item, color }) {
  return (
    <div className="tech-badge" style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '14px 18px',
      borderRadius: 12,
      background: 'linear-gradient(180deg, rgba(19,24,45,0.6), rgba(10,14,31,0.6))',
      border: '1px solid var(--line)',
      transition: 'all .3s ease',
      cursor: 'default',
    }}
    onMouseEnter={(e)=>{
      e.currentTarget.style.borderColor = `${color}66`;
      e.currentTarget.style.boxShadow = `0 0 30px ${color}33`;
      e.currentTarget.style.transform = 'translateY(-3px)';
    }}
    onMouseLeave={(e)=>{
      e.currentTarget.style.borderColor = 'var(--line)';
      e.currentTarget.style.boxShadow = 'none';
      e.currentTarget.style.transform = 'none';
    }}
    >
      <div style={{ width: 32, height: 32, color, display: 'grid', placeItems: 'center' }}>
        <svg viewBox="0 0 64 64" width="32" height="32">{item.icon}</svg>
      </div>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '.02em' }}>{item.n}</span>
    </div>
  );
}

function Stack() {
  return (
    <section id="stack">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Stack tecnológico</span>
          <h2>Las herramientas <span className="gradient-text">correctas</span> para cada problema.</h2>
          <p style={{ fontSize: 17, maxWidth: 620 }}>
            No somos religiosos con un solo stack. Elegimos tecnologías estables,
            con comunidad sólida y que permiten que tu sistema siga evolucionando dentro de 5 o 10 años.
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
          {stackCategories.map(cat => (
            <div key={cat.title}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20 }}>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 12,
                  letterSpacing: '.16em', textTransform: 'uppercase',
                  color: cat.color,
                }}>
                  {cat.title}
                </span>
                <div style={{ flex: 1, height: 1, background: `linear-gradient(90deg, ${cat.color}44, transparent)` }}/>
              </div>
              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
                gap: 12,
              }}>
                {cat.items.map(it => <TechBadge key={it.n} item={it} color={cat.color}/>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Stack = Stack;