// Plans section — 3 tiers, MEDIO featured

function Plans() {
  const tiers = [
    {
      name: "Básico",
      headline: "Tu presencia online, lista en 7 días.",
      target: "Para emprendedores, comercios pequeños y profesionales.",
      price: "300",
      note: "USD · pago único",
      feats: [
        "Sitio institucional (1 página o multi-sección)",
        "Diseño 100% responsive (mobile/tablet/desktop)",
        "Botón flotante de WhatsApp",
        "Formulario de contacto",
        "Conexión con redes sociales",
        "Hosting + dominio del primer año",
        "Carga rápida y SEO básico",
      ],
      cta: "Empezar mi sitio",
      msg: "Hola DINI! Me interesa el plan Básico (USD 300).",
    },
    {
      name: "Medio",
      headline: "Más herramientas, más resultados.",
      target: "Para negocios que ya facturan y necesitan crecer.",
      price: "700",
      note: "USD · pago único",
      featured: true,
      feats: [
        "Todo lo del plan Básico, mejorado",
        "Panel administrador para editar contenido",
        "Catálogo de productos o servicios",
        "Blog con secciones y categorías",
        "SEO avanzado + Google Analytics",
        "Galería con optimización automática",
        "Integración con Mercado Pago / Calendly",
        "1 mes de soporte y ajustes",
      ],
      cta: "Quiero el plan Medio",
      msg: "Hola DINI! Me interesa el plan Medio (USD 700).",
    },
    {
      name: "Avanzado",
      headline: "Sistema completo a medida de tu empresa.",
      target: "Para empresas, equipos y operaciones en serio.",
      price: "1.500",
      note: "USD · desde",
      feats: [
        "Sistemas de gestión personalizados",
        "Usuarios, roles y permisos",
        "Dashboards con estadísticas en vivo",
        "Automatizaciones e integraciones por API",
        "App móvil iOS + Android",
        "Funciones específicas para tu rubro",
        "Asistencia con IA (chatbot, análisis)",
        "3 meses de soporte premium",
      ],
      cta: "Hablemos de mi proyecto",
      msg: "Hola DINI! Me interesa el plan Avanzado.",
    },
  ];

  return (
    <section id="planes" data-screen-label="Planes">
      <div className="shell">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <span className="eyebrow"><span className="dot"></span><span>Planes claros</span></span>
          <h2 className="h-section">
            Elegí el plan que va con tu negocio.
          </h2>
          <p className="lede">
            Sin letra chica, sin "consultá precio". Tres puntos de partida pensados
            para que entiendas en 30 segundos cuánto cuesta y qué incluye.
          </p>
        </div>

        <div className="plans-grid">
          {tiers.map((t) => (
            <div className={"plan" + (t.featured ? " plan-featured" : "")} key={t.name}>
              {t.featured && <span className="plan-tag">Más elegido</span>}
              <div className="plan-name">Plan {t.name}</div>
              <div className="plan-headline">{t.headline}</div>
              <div className="plan-target">{t.target}</div>
              <div className="plan-price">
                <span className="cur">USD</span>
                <span className="amt">${t.price}</span>
                <span className="note">{t.note.replace("USD · ", "")}</span>
              </div>
              <ul className="plan-feats">
                {t.feats.map((f, i) => (
                  <li key={i}>
                    <IconCheck size={16} />
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <div className="plan-cta">
                <a
                  href={window.DINI.waUrl(t.msg)}
                  target="_blank"
                  rel="noopener noreferrer"
                  className={t.featured ? "btn btn-primary" : "btn btn-ghost"}
                >
                  {t.cta} <IconArrow size={14} />
                </a>
                <a href="#calculadora" style={{ fontSize: 13, color: "var(--ink-3)", textAlign: "center" }}>
                  o cotizá con la calculadora →
                </a>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 28, display: "flex", justifyContent: "center", gap: 28, flexWrap: "wrap", color: "var(--ink-3)", fontSize: 13 }}>
          <span style={{ display: "flex", alignItems: "center", gap: 8 }}><IconShield size={14} className="accent" /> Pagás cuando aprobás el diseño</span>
          <span style={{ display: "flex", alignItems: "center", gap: 8 }}><IconClock size={14} className="accent" /> Garantía de 30 días</span>
          <span style={{ display: "flex", alignItems: "center", gap: 8 }}><IconCheck size={14} className="accent" /> Sin permanencia ni cuotas obligatorias</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Plans });