/* Manifesto + Services */

function Manifesto() {
  return (
    <section className="manifesto" id="manifiesto">
      <div className="section-inner">
        <span className="section-label reveal"><span className="num">§ 01</span>MANIFIESTO</span>
        <h2 className="manifesto-title reveal reveal-delay-1">
          La mayoría de empresas no tienen un problema de estrategia.<br/>
          Tienen un problema de <em>ingeniería operativa.</em>
        </h2>
        <div className="manifesto-grid">
          <div className="manifesto-num reveal">I</div>
          <div className="manifesto-col reveal reveal-delay-1">
            <h4>La tesis</h4>
            <p>Cada hora que tu equipo dedica a <b>copiar, pegar, conciliar, reenviar o esperar</b> es capital que financia a tu competencia. No es una cuestión de productividad — es una fuga de margen sistémica.</p>
            <p>Llamamos <em>"ingeniería operativa"</em> a la disciplina de diseñar, instrumentar y automatizar los flujos de trabajo de una empresa con el mismo rigor con que se diseña software.</p>
          </div>
          <div className="manifesto-col reveal reveal-delay-2">
            <h4>Cómo operamos</h4>
            <p>No damos consejos. <b>Desplegamos sistemas.</b> Cada intervención termina con infraestructura en producción, observable y mantenible. Sin PowerPoints de 80 páginas.</p>
            <p>Trabajamos en <em>sprints cerrados</em> con resultados medibles: horas/mes recuperadas, coste por transacción, latencia operativa. Si no mueve el número, no se hace.</p>
          </div>
        </div>

        <div className="manifesto-grid" style={{ marginTop: 32, borderTop: 0, paddingTop: 0 }}>
          <div className="manifesto-num reveal">II</div>
          <div className="manifesto-col reveal reveal-delay-1">
            <h4>Contra el teatro</h4>
            <p>El mercado de consultoría B2B está saturado de <b>teatro operativo</b>: workshops, frameworks, roadmaps. Nuestro trabajo empieza donde el suyo termina.</p>
          </div>
          <div className="manifesto-col reveal reveal-delay-2">
            <h4>Acceso limitado</h4>
            <p>Aceptamos <b>10 clientes por trimestre</b>. Cada proyecto requiere ingeniería senior dedicada. No escalamos vendiendo humo — escalamos eligiendo bien.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServiceIcon({ kind }) {
  const icons = {
    audit: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-5-5M8 11h6M11 8v6"/></svg>,
    ai: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="4" y="4" width="16" height="16" rx="1"/><path d="M8 9h8M8 13h8M8 17h5"/><circle cx="18" cy="18" r="1.5" fill="currentColor"/></svg>,
    flow: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="4" width="6" height="6"/><rect x="15" y="14" width="6" height="6"/><path d="M9 7h6v7"/></svg>,
    data: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><ellipse cx="12" cy="5" rx="8" ry="2.5"/><path d="M4 5v6c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5V5M4 11v6c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5v-6"/></svg>
  };
  return <div className="service-icon">{icons[kind]}</div>;
}

function Service({ num, kind, title, titleEm, desc, specs }) {
  const ref = React.useRef(null);
  useMouseSpotlight(ref);
  return (
    <div className="service reveal" ref={ref}>
      <div className="service-head">
        <div className="service-num"><span className="ref">SRV /</span>{num}</div>
        <ServiceIcon kind={kind} />
      </div>
      <h3>{title} <em>{titleEm}</em></h3>
      <p>{desc}</p>
      <div className="service-specs">
        {specs.map((s, i) => (
          <div key={i} className="service-spec">
            <span className="k">{s.k}</span>
            <span className="v">{s.v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Services() {
  return (
    <section className="section" id="servicios">
      <div className="section-inner">
        <span className="section-label reveal"><span className="num">§ 02</span>SERVICIOS</span>
        <div className="section-head">
          <h2 className="section-title reveal reveal-delay-1">
            Cuatro disciplinas.<br/>
            Un mismo <em>sistema operativo.</em>
          </h2>
          <p className="section-lede reveal reveal-delay-2">
            Cada servicio es una unidad de despliegue autónoma: se contrata, se ejecuta y se entrega en un sprint cerrado con métricas claras. Los combinamos cuando la complejidad lo exige.
          </p>
        </div>

        <div className="services-grid">
          <Service
            num="01"
            kind="audit"
            title="Auditoría"
            titleEm="operativa"
            desc="Radiografía completa de flujos, herramientas y puntos de fuga. Te entregamos el mapa exacto de dónde se evapora el tiempo, con prioridades calculadas por impacto/coste."
            specs={[
              { k: 'Duración', v: '2 semanas' },
              { k: 'Deliverables', v: 'Mapa + backlog priorizado' },
              { k: 'Formato', v: 'Sprint cerrado' },
            ]}
          />
          <Service
            num="02"
            kind="ai"
            title="Agentes"
            titleEm="de IA"
            desc="Desplegamos agentes propietarios integrados en tu stack: clasificación documental, agentes de soporte L1, análisis de contratos, forecasting, generación de contenido técnico. Con observabilidad, guardrails y fallback."
            specs={[
              { k: 'Duración', v: '4–8 semanas' },
              { k: 'Stack', v: 'OpenAI · Anthropic · self-hosted' },
              { k: 'Entorno', v: 'Tu cloud o el nuestro' },
            ]}
          />
          <Service
            num="03"
            kind="flow"
            title="Automatización"
            titleEm="de flujos"
            desc="Workflows end-to-end entre tus sistemas: CRM → ERP, helpdesk → facturación, onboarding, nómina, conciliación bancaria. Event-driven, idempotentes, monitoreables."
            specs={[
              { k: 'Duración', v: '3–6 semanas' },
              { k: 'Integraciones', v: '400+ conectores' },
              { k: 'SLA', v: '99.9% uptime' },
            ]}
          />
          <Service
            num="04"
            kind="data"
            title="Arquitectura"
            titleEm="de datos"
            desc="Tu data stack unificado: de silos dispersos a un único plano de datos gobernado con métricas en tiempo real, dashboards ejecutivos y alertas. El cimiento para todo lo demás."
            specs={[
              { k: 'Duración', v: '4–10 semanas' },
              { k: 'Warehouse', v: 'BigQuery · Snowflake · DuckDB' },
              { k: 'Governance', v: 'Incluida' },
            ]}
          />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Manifesto, Services });