// CAPACITACIONES — sección secundaria, más compacta
const trainingCourses = [
  { n: 'Microsoft Office 365', d: 'Excel avanzado, Power BI, Word, PowerPoint y herramientas colaborativas.', hours: '24h', icon: '📊', color: '#4F8CFF' },
  { n: 'Programación Web', d: 'HTML, CSS, JavaScript moderno y frameworks. De cero a primer proyecto.', hours: '60h', icon: '</>', color: '#A855F7' },
  { n: 'Diseño Gráfico Digital', d: 'Photoshop, Illustrator y principios de diseño aplicado a marca y producto.', hours: '40h', icon: '◐', color: '#22D3EE' },
  { n: 'Desarrollo Móvil', d: 'Apps con React Native: navegación, APIs, publicación en stores.', hours: '50h', icon: '◧', color: '#4F8CFF' },
];

function Training() {
  return (
    <section id="capacitaciones">
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 620 }}>
            <span className="eyebrow">También · Capacitaciones</span>
            <h2 style={{ fontSize: 'clamp(28px, 3.5vw, 44px)' }}>Formamos al equipo que <span className="gradient-text">opera</span> el sistema.</h2>
            <p style={{ fontSize: 16 }}>
              Cuando entregamos un sistema, capacitamos a tu equipo para sacarle el máximo provecho.
              También ofrecemos cursos abiertos para empresas e instituciones.
            </p>
          </div>
          <a href="#contacto" className="btn btn-ghost">Ver catálogo completo</a>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 16,
        }} className="training-grid">
          {trainingCourses.map(c => (
            <div key={c.n} className="surface" style={{ padding: 24, display:'flex', flexDirection:'column', gap: 14, minHeight: 240 }}>
              <div style={{
                width: 48, height: 48, borderRadius: 12,
                background: `linear-gradient(135deg, ${c.color}22, ${c.color}08)`,
                border: `1px solid ${c.color}44`,
                color: c.color,
                display:'grid', placeItems:'center',
                fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 600,
              }}>{c.icon}</div>
              <h3 style={{ fontSize: 17 }}>{c.n}</h3>
              <p style={{ fontSize: 13, color: 'var(--fg-2)' }}>{c.d}</p>
              <div style={{
                marginTop: 'auto', display:'flex', alignItems:'center', justifyContent:'space-between',
                paddingTop: 12, borderTop: '1px solid var(--line)',
                fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.08em', color: 'var(--fg-3)',
              }}>
                <span>{c.hours}</span>
                <span style={{ color: c.color }}>→</span>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px){ .training-grid{ grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 560px){ .training-grid{ grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}
window.Training = Training;