const SERVICES = [
  {
    num: "Servicio 01",
    name: <>Presencia <em>con IA</em></>,
    desc: "Un bot entrenado con la info de tu negocio, en WhatsApp e Instagram. Responde, califica y deriva a humano cuando corresponde.",
    setup: "400",
    monthly: "80",
    tag: null,
    features: [
      "Bot de WhatsApp + Instagram DM",
      "Entrenado con tu catálogo, horarios y FAQ",
      "Calificación automática de leads",
      "Derivación inteligente a humano",
      "Panel de conversaciones",
    ],
    featured: false,
  },
  {
    num: "Servicio 02",
    name: <>Operaciones <em>con IA</em></>,
    desc: "Todo lo anterior, más automatizaciones que conectan el bot con tus herramientas: CRM, planilla, calendario, cobros, tienda.",
    setup: "800",
    monthly: "150",
    tag: "Más pedido",
    features: [
      "Todo lo de Presencia",
      "Integraciones con CRM / Sheets / Notion",
      "Agendamiento con Calendly o Google Cal",
      "Cobros con Mercado Pago",
      "Sync con Tiendanube / e-commerce",
      "Reportes semanales al WhatsApp",
    ],
    featured: true,
  },
  {
    num: "Servicio 03",
    name: <>Agente <em>a medida</em></>,
    desc: "Proyecto de descubrimiento y diseño de un agente específico para un proceso clave de tu empresa. No es template, es ingeniería.",
    setup: "2.000",
    monthly: "consultar",
    tag: null,
    features: [
      "Workshop de descubrimiento",
      "Diseño del flujo y prompts",
      "Agente específico para tu proceso",
      "Integraciones custom con APIs",
      "Documentación + handoff",
      "Mantenimiento mensual opcional",
    ],
    featured: false,
  },
];

function Services({ onWhatsApp }) {
  return (
    <section id="servicios">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Servicios</span>
            <h2 className="section-title">Tres formas de empezar.<br /><em>Ninguna</em> con plantillas.</h2>
          </div>
          <p className="section-lead">
            Cada cliente pasa por un onboarding donde diseñamos su agente a medida. Los precios son "desde" porque dependen del alcance real.
          </p>
        </div>

        <div className="services-grid">
          {SERVICES.map((s, i) => (
            <div key={i} className={`svc-card ${s.featured ? "featured" : ""}`}>
              <div className="svc-head">
                <span className="svc-num">{s.num}</span>
                {s.tag && <span className="svc-tag">{s.tag}</span>}
              </div>
              <h3 className="svc-name">{s.name}</h3>
              <p className="svc-desc">{s.desc}</p>

              <ul className="svc-features">
                {s.features.map((f, j) => (
                  <li key={j}><IconCheck size={14} /> {f}</li>
                ))}
              </ul>

              <div className="svc-price">
                <div style={{display:"flex", flexDirection:"column", gap:2}}>
                  <span className="svc-price-label">Setup desde</span>
                  <span><span className="svc-price-val">USD {s.setup}</span></span>
                </div>
                <div style={{marginLeft:"auto", textAlign:"right", display:"flex", flexDirection:"column", gap:2}}>
                  <span className="svc-price-label">Mensual</span>
                  <span className="svc-price-unit">USD {s.monthly}</span>
                </div>
              </div>

              <button className={`btn ${s.featured ? "btn-accent" : "btn-secondary"}`} onClick={onWhatsApp}>
                Conocer más <IconArrowUpRight size={14} />
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Services });