/* FAQ técnica B2B */

const FAQS = [
  {
    q: '¿Qué stack técnico usáis y cómo lo elegís?',
    a: (
      <>
        <p>No tenemos proveedor preferido. Elegimos el stack en función del caso — no al revés. En la mayoría de proyectos trabajamos con <b>Python + TypeScript</b>, orquestación con <b>LangGraph o Temporal</b>, modelos de <b>OpenAI, Anthropic y self-hosted (Llama 3, Qwen)</b>, data stack sobre <b>DuckDB, BigQuery o Snowflake</b>, e infra en <b>tu cloud o el nuestro (AWS/GCP)</b>.</p>
        <p>Priorizamos componentes mantenibles por tu equipo tras el proyecto. Sin vendor lock-in innecesario.</p>
        <div className="stack">
          {['Python', 'TypeScript', 'LangGraph', 'Temporal', 'OpenAI', 'Anthropic', 'Llama 3', 'DuckDB', 'BigQuery', 'PostgreSQL', 'Docker', 'K8s', 'Terraform'].map(t => <span key={t} className="pill">{t}</span>)}
        </div>
      </>
    )
  },
  {
    q: '¿Cómo gestionáis la seguridad y el tratamiento de datos?',
    a: (
      <>
        <p>Los datos sensibles <b>nunca salen de tu infraestructura</b> salvo acuerdo explícito. Preferimos despliegues en tu VPC/cuenta cloud con nuestro acceso temporal. Si usamos modelos vía API, aplicamos anonimización y redacción PII antes de cada request.</p>
        <p>Cumplimos <b>GDPR, ISO 27001 en procesos</b>, firmamos DPA estándar, y tenemos protocolo de incident response 24h. Todos los logs de agentes IA quedan auditables — respuestas trazables a prompts y fuentes.</p>
      </>
    )
  },
  {
    q: '¿Qué tipo de empresas son vuestros clientes típicos?',
    a: (
      <>
        <p>B2B de <b>pymes y medianas</b>, entre <b>5 y 500 empleados</b>, con operaciones manuales que empiezan a pesar: servicios profesionales, legal-tech, logística, finanzas, industrial, healthtech, SaaS. Trabajamos desde equipos pequeños hasta grupos consolidados.</p>
        <p>El perfil común: equipos directivos que entienden que el <b>backoffice es estrategia</b>, no gasto. Aceptamos <b>12 proyectos/trimestre</b> — no es marketing, es capacidad real.</p>
      </>
    )
  },
  {
    q: '¿Cuánto tiempo tarda un primer despliegue en producción?',
    a: (
      <>
        <p><b>Primer flujo en producción: 3 a 6 semanas</b> desde el kickoff. Los primeros dos sprints cubren diagnóstico y diseño. A partir del sprint 3 ya hay componentes funcionando.</p>
        <p>Nunca prometemos un "big bang". Si alguien te ofrece transformación digital completa en 3 meses, <b>está mintiendo o no la entregará</b>. Lo hacemos iterativo porque es la única forma que funciona.</p>
      </>
    )
  },
  {
    q: '¿Trabajáis con nuestros equipos internos o en vuestra isla?',
    a: (
      <>
        <p>Siempre en <b>equipo mixto</b>. Asignamos 1 staff engineer + 2 senior engineers por proyecto y emparejamos con personas de tu equipo desde el día 1. Usamos tu Slack/Teams, tu repo, tu CI.</p>
        <p>El objetivo explícito es que al terminar el proyecto, tu equipo <b>pueda mantener y evolucionar el sistema sin nosotros</b>. Si no hay transferencia de conocimiento, no hay éxito.</p>
      </>
    )
  },
  {
    q: '¿Qué pasa si los agentes IA fallan o dan respuestas incorrectas?',
    a: (
      <>
        <p>Todo agente en producción lleva tres capas: <b>(1) validación determinista</b> a la entrada y salida, <b>(2) confianza calibrada</b> que escala a humano bajo umbral, <b>(3) dead-letter queue</b> para casos anómalos revisados manualmente.</p>
        <p>El KPI no es "0 errores" — es <b>error recuperable en &lt;1%</b> y handoff silencioso al humano sin degradar la experiencia. Observabilidad completa: logs, traces, metrics desde el día 1.</p>
      </>
    )
  },
  {
    q: '¿Podemos firmar un NDA antes de la primera sesión?',
    a: (
      <>
        <p>Sí. Tenemos NDA estándar bilateral que enviamos al solicitarlo. También firmamos el vuestro si vuestro legal tiene uno corporativo.</p>
        <p>La primera sesión (30 min, sin compromiso) cubre diagnóstico preliminar. Si decidimos trabajar juntos, pasamos a propuesta formal con scope, timeline y fee fijos. <b>No facturamos por horas</b>.</p>
      </>
    )
  },
  {
    q: '¿Cuánto cuesta un proyecto típico?',
    a: (
      <>
        <p>Depende del scope, pero para dar rangos reales:</p>
        <p><b>Diagnóstico</b>: 2.500–4.500 € (2 semanas) · <b>Diseño</b>: 3.000–6.000 € (2–3 semanas) · <b>Despliegue</b>: 8.000–22.000 € por sprint (4–10 semanas) · <b>Operación</b>: desde 850€/mes en retainer.</p>
        <p>Fees fijos por fase, sin sorpresas. La <b>sesión estratégica de 30 min es gratuita</b> — si después te interesa, formalizamos la propuesta.</p>
      </>
    )
  }
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="section-inner">
        <span className="section-label reveal"><span className="num">§ 08</span>FAQ TÉCNICA</span>
        <div className="section-head">
          <h2 className="section-title reveal reveal-delay-1">
            Respuestas<br/>
            <em>sin marketing.</em>
          </h2>
          <p className="section-lede reveal reveal-delay-2">
            Si algo falta aquí, escríbenos. Preferimos responder directo antes que inflar la página con contenido de relleno.
          </p>
        </div>

        <div className="faq-grid reveal">
          {FAQS.map((f, i) => (
            <div key={i} className={'faq' + (open === i ? ' open' : '')}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="n">{String(i + 1).padStart(2, '0')}</span>
                <span className="t">{f.q}</span>
                <span className="plus"></span>
              </button>
              <div className="faq-a">
                <div className="body">{f.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ });