/* global React, COPY, SiteHeader, SiteFooter, POSTS */
const { useState, useEffect } = React;

/* ============================================================
   SERVICES PAGE — deep dive on three practices
   ============================================================ */
const SERVICE_DETAIL = {
  es: [
    {
      id: "credit",
      n: "/01",
      tag: "RIESGO",
      title: "Riesgo de Crédito & NIIF 9",
      lead: "Modelos de Pérdida Crediticia Esperada calibrados a tu portafolio real, no a un benchmark genérico.",
      body: "Desde la estimación de probabilidad de incumplimiento (PD) hasta severidad (LGD) y exposición (EAD). Documentación lista para auditoría desde el día uno, con cuadernos reproducibles que tu equipo puede mantener.",
      deliverables: [
        "Modelo PCE calibrado y backtested",
        "Documento técnico para revisores fiscales",
        "Cuadernos Python reproducibles",
        "Sesiones de transferencia con tu equipo",
      ],
      stack: ["Python", "Pandas", "scikit-learn", "Matplotlib", "Jupyter"],
      time: "8–14 semanas",
    },
    {
      id: "audit",
      n: "/02",
      tag: "AUDITORÍA",
      title: "Acompañamiento en Auditorías",
      lead: "Defensa técnica frente a Big Four, revisores fiscales y entes de control. Hablamos su idioma porque venimos de ahí.",
      body: "Acompañamos walkthroughs, respondemos a observaciones, preparamos al equipo para sustentaciones, y ayudamos a remediar hallazgos. Foco en NIIF 9, riesgo de crédito y procesos automatizados.",
      deliverables: [
        "Walkthroughs documentados",
        "Respuestas a observaciones de auditoría",
        "Memos técnicos por tema",
        "Sesiones de sustentación con el comité",
      ],
      stack: ["NIIF 9", "SFC", "Big Four protocols", "Memos técnicos"],
      time: "Por proyecto · típico 4–8 semanas",
    },
    {
      id: "auto",
      n: "/03",
      tag: "AUTOMATIZACIÓN",
      title: "Automatización & Software a Medida",
      lead: "Reemplazamos hojas de cálculo y procesos manuales por software propio integrado a tu stack actual.",
      body: "Construimos pipelines de datos, dashboards operativos, conectores con sistemas legacy y herramientas internas a la medida. Cada entrega industrializada con monitoreo, logs y documentación.",
      deliverables: [
        "Pipelines ETL versionados",
        "Dashboards con métricas operativas",
        "APIs internas para tu equipo",
        "Documentación + handoff",
      ],
      stack: ["Python", "FastAPI", "Postgres", "Airflow", "Streamlit"],
      time: "6–16 semanas según alcance",
    },
  ],
  en: [
    {
      id: "credit",
      n: "/01",
      tag: "RISK",
      title: "Credit Risk & IFRS 9",
      lead: "Expected Credit Loss models calibrated to your real portfolio, not a generic benchmark.",
      body: "From PD estimation through LGD and EAD. Audit-ready documentation from day one, with reproducible notebooks your team can maintain.",
      deliverables: ["Calibrated, backtested ECL model", "Technical memo for auditors", "Reproducible Python notebooks", "Knowledge-transfer sessions"],
      stack: ["Python", "Pandas", "scikit-learn", "Matplotlib", "Jupyter"],
      time: "8–14 weeks",
    },
    {
      id: "audit",
      n: "/02",
      tag: "AUDIT",
      title: "Audit Support",
      lead: "Technical defense before Big Four, statutory auditors, and regulators. We speak their language.",
      body: "We support walkthroughs, respond to observations, prepare your team for committee sessions, and help remediate findings. Focus on IFRS 9, credit risk, and automated processes.",
      deliverables: ["Documented walkthroughs", "Responses to audit observations", "Topic memos", "Committee defense sessions"],
      stack: ["IFRS 9", "Regulators", "Big Four protocols", "Technical memos"],
      time: "Per engagement · typical 4–8 weeks",
    },
    {
      id: "auto",
      n: "/03",
      tag: "AUTOMATION",
      title: "Automation & Custom Software",
      lead: "We replace spreadsheets and manual workflows with proprietary software integrated to your current stack.",
      body: "We build data pipelines, ops dashboards, connectors to legacy systems, and bespoke internal tools. Every shipped piece is industrialized with monitoring, logs and docs.",
      deliverables: ["Versioned ETL pipelines", "Ops dashboards with key metrics", "Internal APIs for your team", "Documentation + handoff"],
      stack: ["Python", "FastAPI", "Postgres", "Airflow", "Streamlit"],
      time: "6–16 weeks depending on scope",
    },
  ],
};

function ServicesPage({ lang }) {
  const items = SERVICE_DETAIL[lang];
  return (
    <main>
      <section className="page-hero section-pad-sm">
        <div className="shell">
          <span className="eyebrow"><span className="dot" />{lang === "es" ? "Servicios · Tres prácticas" : "Services · Three practices"}</span>
          <h1 className="h-display" style={{ marginTop: "var(--gap-6)", maxWidth: "16ch" }}>
            {lang === "es" ? <>Una sola filosofía: <em>software ejecutable</em> que mueve métricas.</> : <>One philosophy: <em>executable software</em> that moves metrics.</>}
          </h1>
          <p className="lead" style={{ marginTop: "var(--gap-6)" }}>
            {lang === "es"
              ? "Riesgo, automatización y producto. Cada práctica entrega artefactos que tu equipo puede usar y mantener — no un PDF de 80 páginas."
              : "Risk, automation, and product. Each practice ships artifacts your team can use and maintain — not an 80-page PDF."}
          </p>
        </div>
      </section>

      <section className="services-deep">
        {items.map((s, i) => (
          <article key={s.id} id={s.id} className={`deep-row ${i % 2 ? "deep-row--alt" : ""}`}>
            <div className="shell deep-grid">
              <div className="deep-side">
                <span className="chip chip--accent">{s.tag}</span>
              </div>
              <div className="deep-main">
                <h2 className="h-section">{s.title}</h2>
                <p className="lead" style={{ marginTop: "var(--gap-6)" }}>{s.lead}</p>
                <p className="body" style={{ marginTop: "var(--gap-4)", maxWidth: "60ch" }}>{s.body}</p>
                <div className="deep-meta">
                  <div>
                    <h4 className="mono muted">{lang === "es" ? "Entregables" : "Deliverables"}</h4>
                    <ul className="deep-list">
                      {s.deliverables.map((d, j) => <li key={j}><span className="mono">→</span> {d}</li>)}
                    </ul>
                  </div>
                  <div>
                    <h4 className="mono muted">Stack</h4>
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                      {s.stack.map((x) => <span key={x} className="chip">{x}</span>)}
                    </div>
                    <h4 className="mono muted" style={{ marginTop: "var(--gap-6)" }}>{lang === "es" ? "Tiempo típico" : "Typical timeline"}</h4>
                    <p style={{ fontFamily: "var(--font-display)", fontSize: "1.1rem" }}>{s.time}</p>
                  </div>
                </div>
              </div>
            </div>
          </article>
        ))}
      </section>

      <window.ContactSection lang={lang} />
    </main>
  );
}

/* ============================================================
   CONVIVE PRODUCT PAGE
   ============================================================ */
function ConvivePage({ lang }) {
  const isES = lang === "es";
  return (
    <main>
      <section className="page-hero section-pad-sm convive-page-hero">
        <div className="shell">
          <span className="eyebrow"><span className="dot" />{isES ? "Caso de estudio · Producto" : "Case study · Product"}</span>
          <h1 className="h-display" style={{ marginTop: "var(--gap-6)", maxWidth: "16ch" }}>
            Convive IA <em>{isES ? "no es un chatbot." : "is not a chatbot."}</em>
          </h1>
          <p className="lead" style={{ marginTop: "var(--gap-6)", maxWidth: "60ch" }}>
            {isES
              ? "Es un asistente que trabaja para el administrador 24/7, directamente desde WhatsApp. Centraliza, categoriza y registra todo lo que hoy pasa por canales dispersos."
              : "It's an assistant that works for the property manager 24/7, directly from WhatsApp. It centralizes, categorizes and records everything that today happens across scattered channels."}
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: "var(--gap-8)", flexWrap: "wrap" }}>
            <a href="contact.html" className="btn btn--primary">{isES ? "Pedir una demo" : "Request a demo"} <span className="arrow">→</span></a>
            <a href="#problem" className="btn btn--ghost">{isES ? "Ver el problema" : "See the problem"}</a>
          </div>
        </div>
      </section>

      <section id="problem" className="section-pad convive-problem">
        <div className="shell">
          <div className="section-head">
            <span className="eyebrow index">{isES ? "El problema" : "The problem"}</span>
            <h2 className="h-section">{isES ? "Administrar consorcios hoy es un cuello de botella humano." : "Property management today is a human bottleneck."}</h2>
          </div>
          <div className="problem-grid">
            <div className="problem-card">
              <span className="mono">{isES ? "DOLOR" : "PAIN"}</span>
              <h3 className="h-card">{isES ? "Saturación de canales" : "Channel overload"}</h3>
              <p className="body">{isES ? "Grupos de WhatsApp, mail, llamadas. Todo entra a la vez, todo a la misma persona." : "WhatsApp groups, mail, calls. Everything pours in at once, to the same person."}</p>
            </div>
            <div className="problem-card">
              <span className="mono">{isES ? "DOLOR" : "PAIN"}</span>
              <h3 className="h-card">{isES ? "Operación manual" : "Manual ops"}</h3>
              <p className="body">{isES ? "Tareas repetitivas, copy-paste entre planillas, sin trazabilidad." : "Repetitive tasks, copy-paste between sheets, no traceability."}</p>
            </div>
            <div className="problem-card">
              <span className="mono">{isES ? "DOLOR" : "PAIN"}</span>
              <h3 className="h-card">{isES ? "Expectativa imposible" : "Impossible expectation"}</h3>
              <p className="body">{isES ? "Vecinos que esperan respuesta inmediata. La buena voluntad no alcanza." : "Residents expect immediate replies. Good will isn't enough."}</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section-pad convive-how">
        <div className="shell">
          <div className="section-head">
            <span className="eyebrow index">{isES ? "Cómo funciona" : "How it works"}</span>
            <h2 className="h-section">{isES ? "Todo entra por WhatsApp. Nada se pierde." : "It all comes in through WhatsApp. Nothing falls through."}</h2>
          </div>
          <div className="how-grid">
            <div className="how-flow">
              <div className="flow-step">
                <span className="mono muted">01</span>
                <h4>{isES ? "El vecino escribe" : "Resident writes"}</h4>
                <p className="body">{isES ? "Reclamo, consulta, cualquier cosa." : "Issue, question, anything."}</p>
              </div>
              <div className="flow-arrow">↓</div>
              <div className="flow-step">
                <span className="mono muted">02</span>
                <h4>{isES ? "Convive responde al instante" : "Convive responds instantly"}</h4>
                <p className="body">{isES ? "Clasifica, registra, hace seguimiento." : "Classifies, records, follows up."}</p>
              </div>
              <div className="flow-arrow">↓</div>
              <div className="flow-step">
                <span className="mono muted">03</span>
                <h4>{isES ? "Activa el circuito" : "Triggers the loop"}</h4>
                <p className="body">{isES ? "Notifica proveedores, coordina visitas, mide NPS." : "Notifies vendors, schedules visits, measures NPS."}</p>
              </div>
            </div>
            <div className="how-vis">
              <window.PhoneMock lang={lang} />
            </div>
          </div>
        </div>
      </section>

      <section className="section-pad convive-impact">
        <div className="shell">
          <div className="section-head">
            <span className="eyebrow index">{isES ? "Lo que cambia" : "What changes"}</span>
            <h2 className="h-section">{isES ? "No es eficiencia. Es un cambio en cómo se trabaja." : "It's not efficiency. It's a change in how the work happens."}</h2>
          </div>
          <div className="impact-grid">
            <div>
              <h3 className="h-card">{isES ? "Antes" : "Before"}</h3>
              <ul className="impact-list impact-list--before">
                <li>{isES ? "Todo dependía del administrador" : "Everything depended on the manager"}</li>
                <li>{isES ? "Cuellos de botella permanentes" : "Permanent bottlenecks"}</li>
                <li>{isES ? "Servicio se detenía si el admin no estaba" : "Service stopped when the manager was off"}</li>
                <li>{isES ? "Sin trazabilidad ni datos" : "No traceability, no data"}</li>
              </ul>
            </div>
            <div>
              <h3 className="h-card">{isES ? "Ahora" : "Now"}</h3>
              <ul className="impact-list impact-list--after">
                <li>{isES ? "El sistema trabaja para el administrador" : "The system works for the manager"}</li>
                <li>{isES ? "Operación 24/7 sin perder calidad" : "24/7 operation without losing quality"}</li>
                <li>{isES ? "Trazabilidad completa de cada caso" : "Full traceability of every case"}</li>
                <li>{isES ? "Datos para tomar decisiones" : "Data to make decisions"}</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <window.ContactSection lang={lang} />
    </main>
  );
}

/* ============================================================
   BLOG INDEX
   ============================================================ */
function BlogPage({ lang }) {
  const isES = lang === "es";
  const cats = isES
    ? ["Todos", "NIIF 9", "Producto", "Automatización", "Tendencias"]
    : ["All", "IFRS 9", "Product", "Automation", "Trends"];
  const [active, setActive] = useState(cats[0]);

  return (
    <main>
      <section className="page-hero section-pad-sm">
        <div className="shell">
          <span className="eyebrow"><span className="dot" />{isES ? "Bitácora · Notas de campo" : "Field notes · Journal"}</span>
          <h1 className="h-display" style={{ marginTop: "var(--gap-6)", maxWidth: "18ch" }}>
            {isES ? <>Lo que escribimos cuando <em>no estamos construyendo.</em></> : <>What we write when <em>we're not building.</em></>}
          </h1>
          <p className="lead" style={{ marginTop: "var(--gap-6)" }}>
            {isES ? "Pensamiento técnico, casos anonimizados y bitácora de producto. Sin SEO bait, sin listicles." : "Technical thinking, anonymized cases, and product journals. No SEO bait, no listicles."}
          </p>
        </div>
      </section>

      <section className="section-pad blog-index">
        <div className="shell">
          <div className="blog-cats">
            {cats.map((c) => (
              <button key={c} className={`cat ${c === active ? "active" : ""}`} onClick={() => setActive(c)}>{c}</button>
            ))}
          </div>

          {/* Featured */}
          <a href={POSTS[0].slug} className="blog-feature">
            <div className="blog-feature-img" aria-hidden="true">
              <span className="mono muted">FEATURED · COVER 16:9</span>
            </div>
            <div className="blog-feature-copy">
              <span className="chip chip--accent">{POSTS[0].cat}</span>
              <h2 className="h-section" style={{ marginTop: "var(--gap-4)" }}>{POSTS[0].title[lang]}</h2>
              <p className="lead" style={{ marginTop: "var(--gap-4)" }}>{POSTS[0].excerpt[lang]}</p>
              <span className="mono muted" style={{ display: "block", marginTop: "var(--gap-4)" }}>{POSTS[0].date} · {POSTS[0].read} · J. Guerrero</span>
            </div>
          </a>

          <div className="blog-list">
            {POSTS.slice(1).concat(POSTS).map((p, i) => (
              <a key={i} href={p.slug} className="blog-row">
                <span className="mono muted blog-row-n">{String(i + 2).padStart(2, "0")}</span>
                <div className="blog-row-meta">
                  <span className="chip">{p.cat}</span>
                  <span className="mono muted">{p.date}</span>
                </div>
                <h3 className="h-card blog-row-title">{p.title[lang]}</h3>
                <span className="mono muted blog-row-read">{p.read}</span>
                <span className="blog-row-arrow">→</span>
              </a>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ============================================================
   BLOG POST (single)
   ============================================================ */
function BlogPostPage({ lang }) {
  const isES = lang === "es";
  return (
    <main className="post">
      <section className="section-pad-sm post-hero">
        <div className="shell shell--narrow">
          <div className="post-meta">
            <span className="chip chip--accent">NIIF 9</span>
            <span className="mono muted">2026-04-22 · 9 min · J. Guerrero</span>
          </div>
          <h1 className="h-display" style={{ fontSize: "clamp(2rem, 4.5vw, 4rem)", marginTop: "var(--gap-6)", maxWidth: "22ch" }}>
            {isES ? "Calibrar PCE sin caer en sobreajuste: cinco señales tempranas" : "Calibrating ECL without overfitting: five early signals"}
          </h1>
          <p className="lead" style={{ marginTop: "var(--gap-6)" }}>
            {isES
              ? "Notas de campo después de tres recalibraciones consecutivas. Lo que aprendimos de los modelos que se veían bien en backtest pero fallaron en out-of-sample."
              : "Field notes after three back-to-back recalibrations. What we learned from models that looked great in backtest but failed out-of-sample."}
          </p>
        </div>
      </section>

      <section className="post-cover">
        <div className="shell shell--narrow">
          <div className="post-cover-img">
            <span className="mono muted">COVER · 16:9 · MODEL DRIFT VISUALIZATION</span>
          </div>
        </div>
      </section>

      <article className="section-pad post-body">
        <div className="shell shell--narrow">
          <p>{isES
            ? "Hace seis meses heredamos un modelo PCE de un cliente del sector real. En el papel funcionaba: AUC de 0.87 en backtest, residuos centrados, todas las métricas que un revisor fiscal querría ver. Tres meses después, las pérdidas reales se desviaban un 31% del expected loss provisionado."
            : "Six months ago we inherited an ECL model from a real-sector client. On paper it worked: 0.87 AUC in backtest, centered residuals, every metric a statutory auditor would want to see. Three months later, actuals drifted 31% from the provisioned expected loss."}
          </p>
          <p>{isES
            ? "El modelo no estaba mal especificado. Estaba sobreajustado a un régimen económico que ya no era el régimen actual. Esa distinción es importante porque cambia completamente el remediation plan."
            : "The model wasn't mis-specified. It was overfit to an economic regime that was no longer the current regime. That distinction matters because it changes the remediation plan entirely."}
          </p>

          <h2>{isES ? "Cinco señales tempranas que aprendimos a buscar" : "Five early signals we learned to look for"}</h2>

          <h3>{isES ? "1. La curva de calibración pasa por (0,0) y (1,1) demasiado limpio" : "1. The calibration curve passes through (0,0) and (1,1) too cleanly"}</h3>
          <p>{isES
            ? "Cuando un modelo predice con precisión perfecta los extremos de la distribución pero falla en el medio, es señal de que el split de entrenamiento tenía un balance demasiado conveniente. La distribución real del portafolio no se ve así."
            : "When a model predicts the distribution tails with perfect precision but fails in the middle, the training split had a too-convenient balance. Real portfolio distributions don't look like that."}
          </p>

          <h3>{isES ? "2. El feature importance está concentrado en 1–2 variables" : "2. Feature importance is concentrated in 1–2 variables"}</h3>
          <p>{isES
            ? "Especialmente si esas variables son macros (PIB, desempleo). Cuando el régimen macro cambia, el modelo entero se mueve. Buscamos modelos donde las top-5 features tengan importancia comparable."
            : "Especially if those variables are macros (GDP, unemployment). When the macro regime shifts, the whole model moves. We look for models where the top-5 features have comparable importance."}
          </p>

          <blockquote>
            {isES
              ? "Un modelo que se ve perfecto en backtest pero está concentrado en dos features macro no es un buen modelo. Es un modelo que no ha visto suficientes regímenes."
              : "A model that looks perfect in backtest but concentrates on two macro features isn't a good model. It's a model that hasn't seen enough regimes."}
          </blockquote>

          <h3>{isES ? "3. La estabilidad temporal es plana" : "3. Temporal stability is flat"}</h3>
          <p>{isES
            ? "Si entrenas el mismo modelo en ventanas rolling de 12 meses y los coeficientes apenas se mueven, no es una buena señal. Es una señal de que el modelo está copiando ruido constante, no señal."
            : "If you train the same model on rolling 12-month windows and the coefficients barely move, that's not good news. It means the model is copying constant noise, not signal."}
          </p>

          <h3>{isES ? "4. El intercept tiene magnitud no trivial" : "4. The intercept carries non-trivial magnitude"}</h3>
          <p>{isES
            ? "Un intercept que aporta más del 15% al log-odds promedio es una bandera roja. Significa que las features no están explicando el comportamiento; el intercept está absorbiendo varianza no modelada."
            : "An intercept contributing more than 15% to mean log-odds is a red flag. It means features aren't explaining behavior; the intercept is absorbing unmodeled variance."}
          </p>

          <h3>{isES ? "5. El error en out-of-time es asimétrico" : "5. Out-of-time error is asymmetric"}</h3>
          <p>{isES
            ? "Cuando el modelo subestima sistemáticamente en períodos recientes pero acierta en períodos antiguos, no es ruido. Es drift. Y el drift no se arregla recalibrando — se arregla repensando la especificación."
            : "When the model systematically underestimates in recent periods but nails older ones, it's not noise. It's drift. And drift isn't fixed by recalibrating — it's fixed by rethinking the specification."}
          </p>

          <h2>{isES ? "Qué hacemos cuando vemos estas señales" : "What we do when we see these signals"}</h2>
          <p>{isES
            ? "Lo primero es ser honestos con el cliente: el modelo necesita más que un ajuste de parámetros. Lo segundo es proponer un experimento contenido — usualmente cuatro semanas — donde probamos una especificación alternativa contra la base. Si la alternativa gana en out-of-time, industrializamos. Si no, descartamos rápido."
            : "First, be honest with the client: the model needs more than a parameter tweak. Second, propose a contained experiment — usually four weeks — where we test an alternative specification against the baseline. If the alternative wins out-of-time, we industrialize. If not, we kill it fast."}
          </p>
          <p>{isES
            ? "Esa es la parte que más le cuesta a los equipos que vienen de una práctica tradicional de auditoría: el permiso explícito de descartar. Pero sin ese permiso, no hay forma de iterar rápido."
            : "That's the hardest part for teams coming from a traditional audit practice: explicit permission to discard. Without that permission, you can't iterate fast."}
          </p>
        </div>

        <div className="shell shell--narrow post-foot">
          <hr className="post-rule" />
          <div className="post-author">
            <div className="author-avatar">JG</div>
            <div>
              <h4 className="h-card">Julián Guerrero</h4>
              <p className="muted">{isES ? "Founder · Riesgo de Crédito" : "Founder · Credit Risk"}</p>
            </div>
          </div>
          <div className="post-related">
            <h4 className="mono muted">{isES ? "Relacionados" : "Related"}</h4>
            <div className="post-related-grid">
              {POSTS.slice(1).map((p, i) => (
                <a key={i} href={p.slug} className="related-card">
                  <span className="chip">{p.cat}</span>
                  <h5 className="h-card" style={{ marginTop: 12 }}>{p.title[lang]}</h5>
                  <span className="mono muted">{p.date} · {p.read}</span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </article>

      <window.ContactSection lang={lang} />
    </main>
  );
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
function ContactPage({ lang }) {
  const isES = lang === "es";
  const t = COPY[lang].contact;
  return (
    <main className="contact-page">
      <section className="section-pad contact-hero">
        <div className="shell">
          <span className="eyebrow"><span className="dot" />{t.eyebrow}</span>
          <h1 className="h-display" style={{ marginTop: "var(--gap-6)", maxWidth: "20ch" }}>
            {t.title} <em>{t.titleEm}</em> {t.titleEnd}
          </h1>

          <div className="contact-grid">
            <form className="contact-form" onSubmit={(e) => { e.preventDefault(); alert(isES ? "Recibido. Volvemos en 48h." : "Got it. We'll reply in 48h."); }}>
              <div className="form-row">
                <label>
                  <span className="mono muted">{isES ? "Nombre" : "Name"}</span>
                  <input type="text" placeholder={isES ? "Tu nombre" : "Your name"} required />
                </label>
                <label>
                  <span className="mono muted">{isES ? "Empresa" : "Company"}</span>
                  <input type="text" placeholder={isES ? "Empresa" : "Company"} />
                </label>
              </div>
              <label>
                <span className="mono muted">Email</span>
                <input type="email" placeholder="hola@empresa.com" required />
              </label>
              <label>
                <span className="mono muted">{isES ? "¿Qué métrica querés mover?" : "Which metric do you want to move?"}</span>
                <textarea rows="5" placeholder={isES ? "Cuéntanos el problema concreto. Lo más específico, mejor." : "Tell us the concrete problem. The more specific, the better."} required />
              </label>
              <div className="form-row form-row--check">
                <label className="check">
                  <input type="checkbox" defaultChecked /> <span>{isES ? "Riesgo de Crédito · NIIF 9" : "Credit Risk · IFRS 9"}</span>
                </label>
                <label className="check">
                  <input type="checkbox" /> <span>{isES ? "Auditorías" : "Audit support"}</span>
                </label>
                <label className="check">
                  <input type="checkbox" /> <span>{isES ? "Automatización" : "Automation"}</span>
                </label>
                <label className="check">
                  <input type="checkbox" /> <span>Convive IA</span>
                </label>
              </div>
              <button type="submit" className="btn btn--primary">{isES ? "Enviar mensaje" : "Send message"} <span className="arrow">→</span></button>
            </form>

            <aside className="contact-aside">
              <div className="aside-block">
                <h4 className="mono muted">{isES ? "Email directo" : "Direct email"}</h4>
                <a href={`mailto:${t.email}`} className="aside-email">{t.email}</a>
              </div>
              <div className="aside-block">
                <h4 className="mono muted">{isES ? "Ubicaciones" : "Locations"}</h4>
                <p>Bogotá, Colombia</p>
                <p>Buenos Aires, Argentina</p>
              </div>
              <div className="aside-block">
                <h4 className="mono muted">{isES ? "Tiempo de respuesta" : "Response time"}</h4>
                <p style={{ fontFamily: "var(--font-display)", fontSize: "1.5rem", letterSpacing: "-0.02em" }}>48h</p>
                <p className="muted" style={{ fontSize: 13 }}>
                  {isES ? "Volvemos con una hipótesis, no con una propuesta." : "We come back with a hypothesis, not a proposal."}
                </p>
              </div>
              <div className="aside-block">
                <h4 className="mono muted">{isES ? "Pequeña letra" : "Fine print"}</h4>
                <p className="muted" style={{ fontSize: 13 }}>
                  {isES
                    ? "No hacemos NDAs preventivos para una primera conversación. Si tu problema es muy sensible, pedinos uno explícito y firmamos."
                    : "We don't do preemptive NDAs for a first chat. If your problem is sensitive, ask explicitly and we'll sign."}
                </p>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, {
  ServicesPage, ConvivePage, BlogPage, BlogPostPage, ContactPage,
  PhoneMock: window.PhoneMock,
});
