/* global React */
const { useState, useEffect } = React;

// ============================================================
// NAV
// ============================================================
function Nav() {
  return (
    <div className="nav-wrap">
      <nav className="nav" data-screen-label="Nav">
        <a className="nav-logo" href="#top">
          <img className="nav-mark" src="varita_negro.png" alt="" />
          <span>Horquesta</span>
        </a>
        <ul className="nav-links">
          <li><a href="#diagnostico">Diagnóstico</a></li>
          <li><a href="#modulos">Servicios</a></li>
          <li><a href="#metodo">Método</a></li>
          <li><a href="#gobernanza">Casos</a></li>
        </ul>
        <div className="nav-cta">
          <a className="btn btn-primary btn-sm" href="#formulario" style={{ color: "rgb(0, 0, 0)", backgroundColor: "rgb(255, 109, 57)" }}>Contacto</a>
        </div>
      </nav>
    </div>);

}

// ============================================================
// HERO
// ============================================================
function Hero({ heroVariant, shapeStyle }) {
  return (
    <section className="hero" id="top" data-screen-label="Hero">
      <div className="container">
        <div className="hero-inner">
          <div>
            <span className="badge">
              <span className="dot" style={{ backgroundColor: "rgb(255, 174, 254)" }}></span>
              Procesos y operaciones con IA
            </span>
                        <h1 className="t-display ink italic-touch">
              <span style={{ display: "block" }}>Inteligencia</span>
              <span style={{ display: "block" }}>Artificial</span>
              <span style={{ display: "block" }}>Coordinada:</span>
              <em style={{ display: "block", fontWeight: "500", letterSpacing: "-0.4px" }}>soluciones ágiles</em>
              <span style={{ display: "block" }}>para tu organización.</span>
            </h1>
            <p className="lede">En Horquesta mapeamos, estandarizamos, optimizamos y automatizamos procesos digitales y físicos en organizaciones de cualquier tipo y tamaño. Potenciamos las plataformas que ya tenés, con automatizaciones que se integran de manera nativa a tus sistemas y herramientas de trabajo diarias.

            </p>
            <p className="support" style={{ fontWeight: 400, padding: "0px", maxWidth: "56ch", fontSize: "15px" }}>"El mayor obstáculo no suele ser el costo ni el acceso a la tecnología, sino la ausencia de conocimiento que traduzca las herramientas disponibles a los procesos concretos de cada empresa." - <em style={{ fontSize: "15px" }}>Informe nadIA, Encuesta Nacional de Adopción de IA en PyMEs Argentinas (2026).</em><br /><strong style={{ fontSize: "15px" }}>Si no sabés por dónde empezar, empezá por una conversación.</strong>
            </p>
            <div className="hero-ctas">
              <a className="btn btn-primary" href="#formulario">
                Agendá tu auditorIA gratuita
                <span aria-hidden="true">→</span>
              </a>
              <a className="btn btn-orange" href="#modulos" style={{ backgroundColor: "rgb(255, 174, 254)" }}>
                Ver casos reales
                <span aria-hidden="true">→</span>
              </a>
            </div>
          </div>

          <HeroVisual variant={heroVariant} shapeStyle={shapeStyle} />
        </div>
      </div>
    </section>);
}

function HeroVisual({ variant, shapeStyle }) {
  const shapeClass = shapeStyle === "geometric" ? "shapes-geo" : "";
  // variant: 'photo' or 'system'
  if (variant === "system") {
    return (
      <div className={`hero-visual ${shapeClass}`} aria-hidden="true">
        <div className="blob blob-a">
          <div className="photo-mask"></div>
        </div>
        <div className="blob blob-c"></div>
        <div className="blob blob-b"></div>

        <div className="hero-syscard" style={{ left: "auto", right: "-6%", bottom: "auto", top: "8%", width: "62%" }}>
          <h4>Arquitectura agéntica</h4>
          <div className="flowline">
            <span className="node">WhatsApp</span>
            <span className="arrow">→</span>
            <span className="node">Orquestador n8n</span>
            <span className="arrow">→</span>
            <span className="node">Tango ERP</span>
          </div>
          <div className="flowline">
            <span className="node">Factura PDF</span>
            <span className="arrow">→</span>
            <span className="node">Claude · OCR</span>
            <span className="arrow">→</span>
            <span className="node">Validación ARCA</span>
          </div>
          <div className="flowline">
            <span className="node">Aduana</span>
            <span className="arrow">→</span>
            <span className="node">Lectura carpetas</span>
            <span className="arrow">→</span>
            <span className="node">Imputación ERP</span>
          </div>
        </div>
      </div>);

  }

  return (
    <div className={`hero-visual ${shapeClass}`} aria-hidden="true">
      <div className="blob blob-a">
        <div className="photo-mask"></div>
      </div>
      <div className="blob blob-c"></div>
      <div className="blob blob-b"></div>
    </div>);

}

// ============================================================
// DIAGNOSTIC
// ============================================================
function Diagnostic() {
  return (
    <section className="sand" id="diagnostico" data-screen-label="Diagnostico" style={{ fontWeight: "400" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">LA REALIDAD OPERATIVA EMPRESARIAL</div>
            <h2 className="t-h-lg italic-touch" style={{ maxWidth: "100%" }}>
              La brecha entre <em style={{ fontSize: "clamp(26px, 6vw, 45px)" }}>probar, usar improvisadamente </em>y automatizar a conciencia.
            </h2>
          </div>
          <p className="lede" style={{ margin: "17px 0px" }}>La evidencia en el mercado nacional demuestra que el uso aislado y disperso de herramientas de IA no se traduce en incrementos de productividad sostenibles si se carece de una integración macro con todos los datos y herramientas de la empresa. Ni hablar en aquellos casos dónde aún no se implementa ningún tipo de IA, el problema es aún más grande.



          </p>
        </div>

        <div className="diag-grid">
          <div className="stat-card blush" style={{ backgroundColor: "rgb(255, 174, 254)" }}>
            <div className="stat-number">72%</div>
            <div>
              <p className="stat-label">de las empresas que operan con IA, lo hacen sin integración ni pautas formales de uso en Argentina.</p>
              <div className="stat-source">FUENTE: Universidad Torcuato Di Tella· 2026</div>
            </div>
          </div>
          <div className="stat-card orange">
            <div className="stat-number">57%</div>
            <div>
              <p className="stat-label">de las organizaciones adoptantes no mide de forma formal los resultados financieros de sus herramientas de IA.</p>
              <div className="stat-source">FUENTE: BID · 2026</div>
            </div>
          </div>
          <div className="stat-card" style={{ background: "var(--color-sky-blue)", color: "var(--color-pure-canvas)", gridColumn: "1 / -1", margin: "0 auto", width: "calc(50% - 12px)" }}>
            <div className="stat-number" style={{ color: "var(--color-pure-canvas)" }}>58%</div>
            <div>
              <p className="stat-label" style={{ color: "var(--color-pure-canvas)" }}>de las PyMEs argentinas no usan IA. Esta es en realidad una brecha de digitalización, para quienes ya tienen una base tecnológica, adoptar IA es más sencillo. 
              </p>
              <div className="stat-source" style={{ color: "rgba(255,255,255,0.65)" }}>FUENTE: Fundación Observatorio PyME · 2025</div>
            </div>
          </div>
        </div>

        <div className="diag-narrative" style={{ display: "flex", justifyContent: "center", marginTop: "16px" }}>
          <p style={{
            fontFamily: "var(--font-reckless)",
            fontSize: "28px",
            fontStyle: "italic",
            color: "var(--color-midnight-ink)",
            letterSpacing: "-0.02em",
            margin: "0",
            textAlign: "center",
            whiteSpace: "normal"
          }}>
            En cualquiera de los casos que te encuentres, <em>podemos ayudarte.</em>
          </p>
        </div>
      </div>
    </section>);
}

// ============================================================
// SOLUTIONS (3 modules)
// ============================================================
function Solutions() {
  return (
    <section id="modulos" data-screen-label="Modulos">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">CATÁLOGO DE SERVICIOS · 3 MÓDULOS</div>
            <h2 className="t-h-lg italic-touch">
              Una solución para cada <em>escenario</em>.
            </h2>
          </div>
          <p className="lede">Tres puntos de partida distintos. Una misma forma de trabajar: con método, métricas y resultados visibles.


          </p>
        </div>

        <div className="modules-grid">
          <article className="module-card">
            <h3><span className="module-letter" style={{ fontSize: "1.2em", lineHeight: 1, verticalAlign: "baseline", display: "inline" }}>A</span>rranque ordenado</h3>
            <p className="copy">En toda organización —PyME, estudio profesional, industria, comercio, servicio, o un área dentro de una gran empresa— hay decenas de tareas chicas, repetitivas y manuales que consumen horas cada semana. Horas que pagás en sueldos. Horas que tu equipo no dedica a vender, atender clientes, crear o realizar otras tareas. Te ayudamos a dar el primer paso sin improvisar: identificamos qué automatizar primero, qué después, qué no vale la pena y cuánto se puede llegar a ahorrar.  





            </p>
            <div className="module-stat" style={{ backgroundColor: "rgb(248, 243, 235)" }}>
              <strong>-60 %</strong>
              <span>de ahorro de tiempo</span>
            </div>
            </article>

          <article className="module-card">
            <h3><span className="module-letter" style={{ fontSize: "1.2em", lineHeight: 1, verticalAlign: "baseline", display: "inline" }}>B</span>úsqueda de orden</h3>
            <p className="copy" style={{ fontFamily: "Inter" }}>Si ya tenés IA dando vueltas en tu empresa,  la pregunta es si te está dando resultados o solo ruido. Esta falta de ordenamiento, estanca el uso de la tecnología en tareas aisladas, sin impactar en las áreas que definen el margen económico de la empresa. Tomamos lo que ya funciona, lo estandarizamos, le damos reglas claras de uso, y lo conectamos a los procesos que mueven la aguja.





            </p>
            <div className="module-stat" style={{ backgroundColor: "rgb(248, 243, 235)" }}>
              <strong>+40%</strong>
              <span>productividad</span>
            </div>
            </article>

          <article className="module-card">
            <h3><span className="module-letter" style={{ fontSize: "1.2em", lineHeight: 1, verticalAlign: "baseline", display: "inline" }}>C</span>onstrucción de agentes</h3>
            <p className="copy">Cuando los procesos ya están ordenados, llega el siguiente nivel: agentes de IA que ejecutan flujos de trabajo completos. Atienden consultas, completan formularios, mueven datos entre sistemas, generan reportes, envían correos y escalan a un humano solo cuando hace falta.
Diseñamos y desplegamos agentes a medida, integrados con las herramientas que ya usás. Múltiples agentes de IA coordinados como una orquesta.




            </p>
            <div className="module-stat" style={{ backgroundColor: "rgb(248, 243, 235)" }}>
              <strong>-50%</strong>
              <span>costos operativos</span>
            </div>
            </article>
        </div>
      </div>
    </section>);

}

// ============================================================
// METHODOLOGY — 4 week pilot timeline
// ============================================================
function Methodology() {
  const steps = [
  {
    num: "",
    title: "Auditoría de operaciones y procesos.",
    copy: "Recorremos tus operaciones. Hablamos con tu equipo. Analizamos los flujos y detectamos las operaciones manuales que consumen más horas. Estandarizamos, optimizamos lo que sea necesario y salimos con un plan priorizado por ROI.",
    tags: ["Auditoría", "Discovery", "Línea base"]
  },
  {
    num: "",
    title: "Configuración del mínimo viable en entorno seguro",
    copy: "Desarrollamos las arquitecturas de los agentes y las automatizaciones con modelos de razonamiento lógico avanzado, entrenados con un historial seleccionado de datos de tu empresa.",
    tags: ["n8n / Make", "Claude", "Sandbox"]
  },
  {
    num: "",
    title: "Formalización del sistema y testeo ",
    copy: "Definimos el marco que va a regular el uso de IA puertas adentro: qué herramientas se usan, qué datos pueden salir hacia afuera y en qué pasos un humano tiene que dar el visto bueno antes de que el agente actúe.",
    tags: ["Gobernanza", "MCP/API", "Human-in-the-Loop"]
  },
  {
    num: "",
    title: "Activación, monitoreo y entrega de ROI",
    copy: "Conectamos los agentes en producción sobre sus canales reales, acompañamos al personal en la adopción y entregamos un informe contrastando métricas contra la línea base inicial.",
    tags: ["Producción", "Monitoreo", "Informe ROI"],
    active: true
  }];


  return (
    <section className="sand" id="metodo" data-screen-label="Metodo">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">MÉTODO DE IMPLEMENTACIÓN · 4 SEMANAS</div>
            <h2 className="t-h-lg italic-touch">
              Riesgo controlado, retorno <em>medido en horas reales</em>.
            </h2>
          </div>
          <p className="lede">Una metodología corta, auditada y reversible. Cada etapa tiene un entregable concreto y distinto, la decisión de continuar queda siempre de tu lado.


          </p>
        </div>

        <div className="timeline">
          {steps.map((s, i) =>
          <div className={`tl-step ${s.active ? "active" : ""}`} key={i}>
              <div className="row gap-16" style={{ alignItems: "center" }}>
                <span className="tl-bullet">{i + 1}</span>
                <span className="tl-num">{s.num}</span>
              </div>
              <h4>{s.title}</h4>
              <p>{s.copy}</p>
              <div className="tl-tags">
                {s.tags.map((t) =>
              <span className="tl-tag" key={t}>{t}</span>
              )}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// GOVERNANCE — dark panel
// ============================================================
function Governance() {
  return (
    <section style={{ padding: 0 }} id="gobernanza" data-screen-label="Gobernanza">
      <div className="governance">
        <div className="section-head" style={{ marginBottom: 24 }}>
          <div>
            <div className="eyebrow">Gobernanza empresarial</div>
            <h2 className="t-h-lg white italic-touch">
              El <em>control absoluto</em> sobre sus datos corporativos.
            </h2>
          </div>
          <p className="lede" style={{ color: "rgba(255,255,255,0.78)" }}>
            La adopción agéntica responsable exige reglas escritas, capa de aislamiento de prompts
            y validación humana obligatoria sobre cada decisión financiera o logística.
          </p>
        </div>

        <div className="gov-grid">
          <div className="gov-card">
            <span className="gc-tag">Garantía 01</span>
            <h3>Capa de aislamiento de prompts</h3>
            <p>
              Los datos comerciales e históricos de su empresa nunca se utilizan para el
              entrenamiento de grandes modelos de lenguaje públicos. Toda la información se
              procesa a través de interfaces dedicadas con acuerdos de confidencialidad y
              borrado automático de registros.
            </p>
          </div>
          <div className="gov-card">
            <span className="gc-tag" style={{ background: "var(--color-forest-fern)" }}>Garantía 02</span>
            <h3>Arquitectura de validación humana obligatoria</h3>
            <p>
              Los agentes no toman decisiones de disposición financiera o logística por su cuenta.
              El sistema prepara el asiento contable, pero el pago, la facturación oficial o el
              despacho de inventario requiere la aprobación manual y firma de un operador humano
              autorizado.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

// Expose to window for cross-file scope
Object.assign(window, { Nav, Hero, Diagnostic, Solutions, Methodology, Governance });