function FAQ() {
  const items = [
    {
      q: "¿Necesito saber de IA o programación para usar Tessa?",
      a: "Cero. Tessa hace el trabajo, tú das instrucciones en español — como WhatsApp con un consultor que no duerme. Si sabes pedirle algo a un colaborador, sabes operar Tessa. El onboarding de 72h incluye un Account Manager humano que te acompaña hasta que estés cómodo.",
    },
    {
      q: "¿Funciona en mi industria? Tengo una tienda de abarrotes / restaurante / e-commerce / servicios.",
      a: "Sí. Operamos con e-commerce, retail, tiendas físicas, restaurantes, salud, servicios profesionales, inmobiliaria, B2B SaaS y educación. Tessa adapta los buyer personas, plataformas (Meta vs Google vs TikTok) y benchmarks a tu sector. La regla simple: si tienes clientes y haces (o quieres hacer) pauta, te sirve.",
    },
    {
      q: "¿Cuánto cuesta y hay garantía?",
      a: "Tres caminos: módulos individuales desde $179/mes (1,000+ créditos incluidos), Suite Tessa $699/mes (5,500 créditos · setup $499 una vez), Agencia desde $2,500/mes (créditos sin límite, gestionados por nuestro equipo). Mensual, sin permanencia, cancelas cuando quieras. La garantía de ROI aplica solo al plan Agencia: si en 90 días no ves retorno medible, ajustamos sin costo o cierras. En módulos y Suite garantizamos que la plataforma funciona como se promete — el ROI depende de cómo la operes.",
    },
    {
      q: "¿Qué pasa si se me acaban los créditos a mitad de mes?",
      a: "Recibes alerta al 70% y al 90% de consumo. Cuando llegan a 0, la plataforma se pausa hasta que recargues con un Pack Boost ($30 / 200), Pro ($70 / 500), Scale ($250 / 2,000) o Enterprise ($500 / 4,500). Para evitar interrupciones en campañas activas, puedes activar recarga automática (recomendado).",
    },
    {
      q: "¿Los créditos no usados se acumulan?",
      a: "No. Los créditos del plan se renuevan cada mes y los no usados se pierden — es estándar en plataformas SaaS y nos protege de saturaciones. Las recargas extras (Packs Boost / Pro / Scale / Enterprise) sí se acumulan hasta consumirse.",
    },
    {
      q: "¿Puedo cambiar de plan si me quedo corto?",
      a: "Sí, en cualquier momento. Los upgrades son inmediatos — los créditos del nuevo plan reemplazan los del anterior y la diferencia se prorratea. Los downgrades aplican el siguiente ciclo para no penalizar consumo ya hecho.",
    },
    {
      q: "¿La Agencia tiene límite de créditos?",
      a: "No. En el plan Agencia los créditos los gestiona nuestro equipo y nunca son tu preocupación. Tú recibes resultados, nosotros optimizamos consumo en silencio.",
    },
    {
      q: "¿El presupuesto de pauta está incluido?",
      a: "No. Cobramos por nuestro trabajo y plataforma. El presupuesto de Meta, Google o TikTok es directo de tu tarjeta a la plataforma — total transparencia, sin markups ocultos.",
    },
    {
      q: "¿Qué pasa después de las 72 horas?",
      a: "Día 4 entras a operación normal: campañas activas, dashboard funcionando, Account Manager asignado (en plan Agencia). Tessa sigue optimizando 24/7. Cada lunes recibes un plan semanal accionable.",
    },
    {
      q: "¿Necesito tener equipo de marketing interno?",
      a: "Depende del camino. Módulos individuales y Suite Tessa están diseñados para que opere tu equipo (o tú mismo). El plan Agencia es para quien NO tiene equipo y quiere delegar.",
    },
    {
      q: "¿Puedo migrar mi CRM actual?",
      a: "Sí. Migramos contactos, deals y pipeline desde HubSpot, Pipedrive, Salesforce o Sheets. La migración va incluida en el onboarding de 72 horas.",
    },
    {
      q: "¿Hay permanencia mínima?",
      a: "No. Mensual, cancelas cuando quieras. Confiamos en que los resultados te convencen mes a mes — no en contratos largos.",
    },
    {
      q: "¿Funciona si no soy de Panamá?",
      a: "Sí. Operamos en LATAM y EE.UU. Tessa se adapta al mercado local: idioma, plataformas dominantes (Meta vs TikTok vs LinkedIn), buyer personas regionales y benchmarks de tu industria.",
    },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="shell" id="faq">
      <SectionLabel num="14 / Preguntas" label="Preguntas frecuentes" right="Reales, no inventadas" />

      <div className="faq-grid">
        <h2 className="h-section" style={{ maxWidth: "12ch" }}>
          Lo que <span className="italic" style={{ color: "var(--accent)" }}>nos preguntan</span> en cada reunión.
        </h2>

        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-toggle"><Plus /></span>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;