function ServiceCard({ s, i }) {
  const icon = s.icon === 'bot' ? I.bot : s.icon === 'web' ? I.web : s.icon === 'flow' ? I.flow
    : s.icon === 'data' ? I.data : s.icon === 'doc' ? I.doc : I.sparkle;
  return (
    <Reveal as="article" delay={i * 60} className="card service-card with-glow">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div style={{
          width: 48, height: 48, borderRadius: 12,
          background: 'var(--grad-ai-soft)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--fg)',
        }}>{icon}</div>
        {s.tag && <Badge grad>{s.tag}</Badge>}
      </div>
      <h3>{s.title}</h3>
      <div className="mono" style={{ color: 'var(--fg-dim)', marginTop: -6 }}>{s.tagline}</div>
      <p className="desc" style={{ marginTop: 14 }}>{s.desc}</p>
      <ul>
        {s.features.map((f, k) => <li key={k}>{f}</li>)}
      </ul>
      <div className="footer-row">
        <a href="#contacto" className="btn" style={{ padding: '10px 16px', fontSize: '0.85rem' }}>
          Pedir info <span className="arrow">↗</span>
        </a>
      </div>
    </Reveal>
  );
}

function Services() {
  return (
    <section id="servicios">
      <div className="container">
        <Reveal><SectionLabel>01 / Servicios</SectionLabel></Reveal>
        <Reveal delay={80}>
          <h2 style={{ maxWidth: 760, marginBottom: 18 }}>
            Automatizaciones <span className="gradient-text">útiles</span>, no demos
            de feria tecnológica.
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ maxWidth: 620, color: 'var(--fg-dim)', fontSize: '1.05rem' }}>
            Precios desde, cerrados en propuesta. Si tu caso no encaja exacto en
            ningún paquete, lo valoramos en la llamada — la flexibilidad es parte
            del trato.
          </p>
        </Reveal>

        <div className="services-grid">
          {SERVICES.map((s, i) => <ServiceCard key={s.title} s={s} i={i} />)}
        </div>
      </div>
    </section>
  );
}
window.Services = Services;