// Pricing.jsx — 3 paquetes claros
const Pricing = () => {
  const plans = [
    {
      icon: 'message-circle',
      name: 'Chatbot IA',
      desc: 'Solo el bot. Para negocios que ya tienen web pero pierden conversaciones.',
      from: 'DESDE',
      amount: <>$180<em>/mes</em></>,
      per: 'Setup único: $400. Sin contrato anual.',
      feats: [
        'Bot IA en español, 24/7',
        'WhatsApp + Web + Instagram',
        'Hasta 1,500 conversaciones/mes',
        'Captura de leads al CRM',
        'Reportes mensuales',
      ],
      cta: 'Probar el bot',
      featured: false,
    },
    {
      icon: 'rocket',
      name: 'Web + Bot',
      desc: 'El combo que más vende. Web nueva con SEO + bot integrado desde día 1.',
      from: 'DESDE',
      amount: <>$800<em> setup</em></>,
      per: '+ $80/mes hosting & mantenimiento.',
      feats: [
        'Web responsive (5–7 secciones)',
        'SEO local Costa Rica',
        'Chatbot IA incluido',
        'Dominio + hosting',
        'Capacitación al equipo',
        'Soporte por WhatsApp',
      ],
      cta: 'Quiero este paquete',
      featured: true,
    },
    {
      icon: 'workflow',
      name: 'Stack completo',
      desc: 'Web + bot + automatización Make.com. Tu negocio en piloto automático.',
      from: 'A LA MEDIDA',
      amount: <>Custom</>,
      per: 'Auditoría gratis. Cotización en 48h.',
      feats: [
        'Todo lo del paquete Web + Bot',
        'Automatizaciones Make.com',
        'Integración con tu CRM',
        'Facturación electrónica',
        'Dashboard de métricas',
        'Soporte prioritario',
      ],
      cta: 'Agendar auditoría',
      featured: false,
    },
  ];

  return (
    <section className="s alt" id="precios">
      <div className="container">
        <div className="s-head">
          <div className="left">
            <div className="s-eyebrow">Precios</div>
            <h2 className="s-title">Transparente. <span className="acc">Sin letra chica.</span></h2>
            <p className="s-sub">Sabés cuánto cuesta antes de hablar con un vendedor. Si tu caso pide algo distinto, te cotizamos en 48h.</p>
          </div>
          <div className="right">
            Todos los precios en USD. Aceptamos pagos en colones (₡), tarjeta y SINPE.
          </div>
        </div>

        <div className="price-grid">
          {plans.map((p, i) => (
            <div key={i} className={"price " + (p.featured ? "featured" : "")}>
              {p.featured && <span className="badge-pop">Más elegido</span>}
              <div className="ic"><Icon name={p.icon} size={26}/></div>
              <h3>{p.name}</h3>
              <p className="desc">{p.desc}</p>
              <div className="from">{p.from}</div>
              <div className="amount">{p.amount}</div>
              <div className="per">{p.per}</div>
              <ul className="feats">
                {p.feats.map((f, j) => <li key={j}><Icon name="check" size={16}/>{f}</li>)}
              </ul>
              <a href="https://wa.me/50660495999" className="btn price-cta">{p.cta}<Icon name="arrow-right" size={14}/></a>
            </div>
          ))}
        </div>

        <div className="price-foot">
          <p><strong>¿No estás seguro de qué necesitás?</strong> Auditoría gratis de 30 minutos. Te decimos qué tiene sentido para tu negocio — sin compromiso, sin letra chica.</p>
          <a href="https://wa.me/50660495999" className="btn btn-primary">Agendar auditoría gratis<Icon name="arrow-right" size={14}/></a>
        </div>
      </div>
    </section>
  );
};
window.Pricing = Pricing;