function Sistemas() {
  const tiers = [
    {
      nameB: "One", tag: "Para empezar", price: "$6,000", priceSub: "MXN / mes",
      blurb: "Para negocios locales que necesitan más clientes de su zona.",
      features: ["Estrategia de comunicación", "Campañas Meta Ads", "Optimización de perfiles", "Reportes mensuales"],
      outcome: "Más visibilidad inmediata y prospectos contactándote cada semana.",
      segments: "Negocios locales · Salones y spas · Consultorios · Restaurantes · Gimnasios",
      featured: false,
    },
    {
      nameB: "Pro", tag: "Más popular", price: "$10,000", priceSub: "MXN / mes",
      blurb: "Para negocios que quieren leads calificados y conversiones constantes.",
      features: ["Todo lo de Aigenci One", "Página web de conversión", "Campañas de Google Ads"],
      outcome: "Leads de calidad y más conversiones, sin esfuerzo manual constante.",
      segments: "Escuelas y colegios · Clínicas especializadas · Centros de estética · Coaches",
      featured: true,
    },
    {
      nameB: "Max", tag: "Máximo crecimiento", price: "$18,000", priceSub: "MXN / mes",
      blurb: "Para negocios listos para escalar con automatización total y control de datos.",
      features: ["Todo lo de Aigenci Pro", "Seguimiento multicanal inteligente", "SOPs y capacitación de equipo"],
      outcome: "Flujo de ventas continuo y decisiones con datos para crecer sin límites.",
      segments: "Universidades · Redes de clínicas · Empresas en expansión · Franquicias",
      featured: false,
    },
  ];
  return (
    <section id="sistemas" className="sistemas section">
      <Sticker kind="star" className="sis-stk sis-stk-1 anim" />
      <Sticker kind="sparkle" className="sis-stk sis-stk-2 anim" style={{ animationDelay: "0.7s" }} />
      <Sticker kind="plus" className="sis-stk sis-stk-3" />
      <div className="wrap">
        <Reveal as="div" className="sec-head">
          <h2>Sistemas de marketing <span className="pink">con IA</span><br/>que se adaptan <span className="cyan">a tu negocio</span></h2>
          <p>Elige el sistema que necesitas hoy. Escala cuando estés listo.</p>
        </Reveal>
        <Reveal as="div" className="sistemas-grid">
          {tiers.map((t, i) => (
            <div key={i} className={`sistema ${t.featured ? "featured" : ""}`}>
              {t.featured && <div className="ribbon">Más popular</div>}
              <div className="badge">{t.tag}</div>
              <h3>Aigenci <em>{t.nameB}</em></h3>
              <div className="price">Desde {t.price}<small>{t.priceSub}</small></div>
              <p className="blurb">{t.blurb}</p>
              <ul>{t.features.map((f, j) => <li key={j}>{f}</li>)}</ul>
              <div className="cta">
                <a className="sis-link" href={`Aigenci ${t.nameB}.html`}>
                  Conoce más de Aigenci <span className="sn">{t.nameB}</span> <Arrow/>
                </a>
              </div>
              <div className="sis-foot">
                <div className="sis-line">
                  <span className="sis-ic">
                    <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.5"/><path d="M5.5 8l1.8 1.8L11 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </span>
                  <span>{t.outcome}</span>
                </div>
                <div className="sis-line muted">
                  <span className="sis-ic">
                    <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M3 14V4l5-2 5 2v10M3 14h10M6 6h0M10 6h0M6 9h0M10 9h0" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
                  </span>
                  <span>{t.segments}</span>
                </div>
              </div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}
Object.assign(window, { Sistemas });