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

// ============================================================
// NAV
// ============================================================
function Nav() {
  const [menuOpen, setMenuOpen] = useState(false);
  const close = () => setMenuOpen(false);
  return (
    <div className="nav-wrap">
      <nav className={`nav ${menuOpen ? "nav-open" : ""}`} data-screen-label="Nav">
        <a className="nav-logo" href="/#top" onClick={close}>
          <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="/casos">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>
          <button
            className="nav-toggle"
            aria-label="Abrir menú"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((o) => !o)}>
            <span></span><span></span><span></span>
          </button>
        </div>

        <div className={`nav-mobile ${menuOpen ? "open" : ""}`}>
          <a href="/#diagnostico" onClick={close}>Diagnóstico</a>
          <a href="/#modulos" onClick={close}>Servicios</a>
          <a href="/#metodo" onClick={close}>Método</a>
          <a href="/casos" onClick={close}>Casos</a>
          <a href="/#formulario" onClick={close} className="nav-mobile-cta">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>
                        <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">Mapeamos, estandarizamos, optimizamos y automatizamos procesos digitales 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>
            <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="/casos" 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 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.



          </p>
        </div>

        <div className="diag-wrap">
          <button className="diag-arrow diag-prev" aria-label="Anterior" onClick={(e) => e.currentTarget.parentElement.querySelector(".diag-slider").scrollBy({ left: -360, behavior: "smooth" })}>‹</button>
          <div className="diag-slider">
          <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)" }}>
            <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>
          <button className="diag-arrow diag-next" aria-label="Siguiente" onClick={(e) => e.currentTarget.parentElement.querySelector(".diag-slider").scrollBy({ left: 360, behavior: "smooth" })}>›</button>
        </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"
          }}>
            <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>uditoría Inicial</h3>
            <p className="copy">Analizamos tus operaciones y hablamos con tu equipo para detectar las tareas manuales y repetitivas que consumen más horas.  





            </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" }}>¿Ya usás IA pero no ves resultados? Tomamos lo que ya funciona, lo estandarizamos con reglas claras 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, cargan datos, generan reportes y escalan a un humano solo cuando hace falta.




            </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: "Estandarizamos y 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, 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, qué pasos humanos se tienen que dar.",
    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"]
  }];


  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</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.


          </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>
          )}
        </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 });