function ModuloGlyph({ kind }) {
  // Editorial line glyphs — not stock icons
  const stroke = { stroke: "currentColor", strokeWidth: 1.2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };
  if (kind === "crm") return (
    <svg width="24" height="24" viewBox="0 0 24 24" {...stroke}>
      <rect x="3" y="6" width="18" height="13" rx="1.5" />
      <path d="M3 10h18M8 14h4" />
      <circle cx="16" cy="14.5" r="1" fill="currentColor" />
    </svg>
  );
  if (kind === "ads") return (
    <svg width="24" height="24" viewBox="0 0 24 24" {...stroke}>
      <path d="M4 17V8l12-4v16z" />
      <path d="M4 14h-1.5a1.5 1.5 0 010-3H4" />
      <path d="M16 9v7" />
    </svg>
  );
  if (kind === "content") return (
    <svg width="24" height="24" viewBox="0 0 24 24" {...stroke}>
      <rect x="4" y="4" width="16" height="16" rx="1.5" />
      <path d="M8 9h8M8 13h6M8 17h4" />
    </svg>
  );
  if (kind === "seo") return (
    <svg width="24" height="24" viewBox="0 0 24 24" {...stroke}>
      <circle cx="11" cy="11" r="6" />
      <path d="M15.5 15.5L20 20" />
      <path d="M8 11h6M11 8v6" />
    </svg>
  );
  if (kind === "hr") return (
    <svg width="24" height="24" viewBox="0 0 24 24" {...stroke}>
      <circle cx="12" cy="9" r="3" />
      <path d="M5 20c1-4 4-6 7-6s6 2 7 6" />
    </svg>
  );
  return null;
}

function Modulos() {
  const modulos = [
    {
      n: "01", kind: "crm", slug: "tessa-crm",
      label: "Módulo · CRM",
      title: "Tessa CRM",
      pitch: "Tu CRM con agente IA que califica leads, agenda citas y nutre prospectos solo.",
      features: [
        "Captura automática desde ads y formularios",
        "Calificación por IA según tu buyer persona",
        "Seguimiento conversacional automatizado",
        "Pipeline visual y reportes en tiempo real",
      ],
      ideal: "Inmobiliarias · Franquicias · Ecommerce consultivo",
      price: "$249/mes",
      credits: "1,500 créditos / mes",
    },
    {
      n: "02", kind: "ads", slug: "tessa-ads",
      label: "Módulo · Performance",
      title: "Tessa Ads",
      pitch: "El agente que crea, simula y lanza campañas — tu pauta no quema dinero en pruebas.",
      features: [
        "Generación de creativos en segundos",
        "Pre-validación con Tessa Engine (threshold 70%)",
        "Optimización en Meta y Google",
        "A/B testing continuo",
        "Aprendizaje continuo de tu vertical",
      ],
      ideal: "Negocios con pauta activa que quieren bajar el CPA",
      price: "$299/mes",
      credits: "1,800 créditos · Acceso al Tessa Engine",
    },
    {
      n: "03", kind: "content", slug: "tessa-content",
      label: "Módulo · Contenido",
      title: "Tessa Content",
      pitch: "Tu agente de contenido con editor y generador de imagen integrado.",
      features: [
        "Guiones de video y carruseles con IA",
        "Editor de imágenes y generación visual",
        "Copys para ads, posts y emails",
        "Variaciones por marca y formato",
      ],
      ideal: "Ecommerce · Retail · Marcas con alta demanda visual",
      price: "$229/mes",
      credits: "1,400 créditos / mes",
    },
    {
      n: "04", kind: "seo", slug: "tessa-seo",
      label: "Módulo · Orgánico",
      title: "Tessa SEO",
      pitch: "Posicionamiento orgánico en piloto automático.",
      features: [
        "Auditoría técnica continua",
        "Generación de contenido optimizado",
        "Seguimiento de keywords y competencia",
        "Recomendaciones priorizadas por impacto",
      ],
      ideal: "Negocios donde el tráfico web es canal principal",
      price: "$249/mes",
      credits: "1,500 créditos / mes",
    },
    {
      n: "05", kind: "hr", slug: "tessa-hr",
      label: "Módulo · Talento",
      title: "Tessa HR",
      pitch: "El agente IA que filtra, entrevista y rankea candidatos por ti.",
      features: [
        "Publicación automática en bolsas de empleo",
        "Filtrado por IA según perfil ideal",
        "Pre-entrevistas conversacionales",
        "Shortlist de finalistas en 48h",
      ],
      ideal: "Franquicias · Retail multi-local · Alta rotación",
      price: "$179/mes",
      credits: "1,000 créditos / mes",
    },
  ];
  return (
    <section className="shell" id="modulos">
      <SectionLabel num="03 / Camino uno" label="Módulos individuales" right="5 agentes especializados" />

      <div className="modulos-intro">
        <h2 className="h-section" style={{ maxWidth: "16ch" }}>
          Cinco agentes. <br />
          Cada uno <span className="italic" style={{ color: "var(--accent)" }}>una especialidad</span>.
        </h2>
        <p className="lede">
          Empieza por la pieza que más te duele. Activa el siguiente cuando estés
          listo. Cada módulo funciona solo, pero juntos forman la suite completa.
        </p>
      </div>

      <div className="modulos-grid">
        {modulos.map((m) => (
          <article key={m.n} className="modulo">
            <div className="modulo-head">
              <span className="modulo-tag">
                <span className="num">{m.n}</span> {m.label}
              </span>
              <div className="modulo-glyph">
                <ModuloGlyph kind={m.kind} />
              </div>
            </div>
            <h3>{m.title}</h3>
            <p className="pitch">{m.pitch}</p>
            <ul className="features">
              {m.features.map((f) => <li key={f}>{f}</li>)}
            </ul>
            <div className="modulo-credits">
              <span className="modulo-credits-pill">{m.credits}</span>
              <span className="modulo-credits-meta">Setup incluido · <a href="#creditos">¿qué son los créditos?</a></span>
            </div>
            <div className="modulo-foot">
              <span>Ideal · {m.ideal}</span>
              <span className="price">desde {m.price}</span>
            </div>
            <a href={`/modulos/${m.slug}`} className="modulo-detail-link">
              Ver detalles de {m.title} <Arrow />
            </a>
          </article>
        ))}
        <article className="modulo" style={{ background: "var(--bg-elev)", justifyContent: "center", alignItems: "flex-start" }}>
          <span className="eyebrow" style={{ marginBottom: 16 }}>¿Necesitas los cinco?</span>
          <h3 className="h-card" style={{ marginBottom: 12 }}>
            Activa la <span className="italic" style={{ color: "var(--accent)" }}>Suite Tessa</span> con 5,500 créditos/mes
            y ahorra vs comprar módulos por separado.
          </h3>
          <a href="#suite" className="btn btn-primary" style={{ marginTop: 16 }}>
            Ver Suite completa <Arrow />
          </a>
        </article>
      </div>
    </section>
  );
}

window.Modulos = Modulos;