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

/* ============================================================
   i18n  — bilingüe ES/EN
   ============================================================ */
const COPY = {
  es: {
    nav: { services: "Servicios", results: "Resultados", process: "Proceso", team: "Equipo", blog: "Blog", contact: "Contacto", products: "Productos" },
    cta: { primary: "Hablemos de tu proyecto", secondary: "Ver lo que construimos", contact: "Iniciar conversación" },
    hero: {
      eyebrow: "Consultoría · Producto · LatAm",
      kicker: "Construimos los sistemas",
      kickerEm: "que las empresas LatAm",
      kickerLast: "necesitan para los próximos 10 años.",
      sub: "Probamos rápido, validamos, iteramos. No proponemos hojas de ruta a tres años — entregamos impacto medible al negocio en semanas.",
      meta1: "Bogotá, Colombia",
      meta2: "Equipo distribuido",
      stat1: { v: "10+", l: "años construyendo tecnología" },
      stat2: { v: "NIIF 9", l: "expertise técnico verticalizado" },
      stat3: { v: "24/7", l: "productos en producción" },
    },
    why: {
      eyebrow: "Por qué",
      title: "La tecnología avanza más rápido de lo que las empresas pueden absorberla.",
      body: "Los líderes de finanzas, riesgo y operaciones en LatAm enfrentan la misma tensión: presión por modernizarse, presupuestos acotados, y proveedores que venden roadmaps de tres años cuando el problema es de este trimestre. Nosotros operamos al ritmo del negocio.",
      pillars: [
        { k: "Validamos en semanas", v: "MVPs funcionales antes que diapositivas. Si no funciona, descartamos rápido." },
        { k: "Profundidad técnica", v: "Modelos NIIF 9, automatizaciones, integraciones. Construimos, no solo recomendamos." },
        { k: "Cercanía operativa", v: "Equipo en LatAm, en tu zona horaria, hablando tu lenguaje." },
        { k: "Impacto medible", v: "Cada entrega va atada a una métrica del negocio que vas a poder mostrar." },
      ],
    },
    services: {
      eyebrow: "Servicios",
      title: "Tres prácticas que se complementan.",
      sub: "Riesgo, automatización y construcción de producto. Una sola filosofía: software ejecutable que mueve métricas.",
      items: [
        {
          n: "/01",
          t: "Riesgo de Crédito & NIIF 9",
          body: "Diseñamos e implementamos modelos de Pérdida Crediticia Esperada calibrados al portafolio real de tu compañía. Documentación lista para auditoría desde el día uno.",
          tags: ["NIIF 9", "PCE", "Modelado", "Documentación"],
        },
        {
          n: "/02",
          t: "Acompañamiento en Auditorías",
          body: "Sustentación técnica frente a Big Four, revisores fiscales y entes de control. Hablamos su idioma porque venimos de ahí.",
          tags: ["Big Four", "SFC", "Sustentación", "Defensa técnica"],
        },
        {
          n: "/03",
          t: "Automatización & Software a Medida",
          body: "Reemplazamos hojas de cálculo y procesos manuales por software propio integrado a tus sistemas. Liberamos al equipo de lo repetitivo.",
          tags: ["Python", "ETL", "APIs", "Dashboards"],
        },
      ],
    },
    method: {
      eyebrow: "Cómo trabajamos",
      title: "Cuatro semanas por iteración. Cada iteración mueve una métrica.",
      steps: [
        { n: "S1", t: "Diagnóstico", d: "Entendemos el dolor real, no el síntoma. Una semana en tu operación." },
        { n: "S2", t: "Prototipo", d: "Construimos lo mínimo viable que prueba la hipótesis. Lo usás." },
        { n: "S3", t: "Validación", d: "Medimos contra la métrica que importa. Iteramos o pivotamos." },
        { n: "S4", t: "Industrialización", d: "Si funciona, lo llevamos a producción con documentación." },
      ],
    },
    convive: {
      eyebrow: "Caso de estudio · Producto",
      title: "Convive IA",
      sub: "Asistente para administradores de consorcios que centraliza, categoriza y responde en WhatsApp.",
      body: "Detectamos el dolor viviéndolo como vecinos. En 8 semanas validamos el MVP con administradores reales en Buenos Aires. Hoy responde 24/7, registra cada caso, y le devuelve al administrador la posibilidad de cortar la jornada sin que el servicio se detenga.",
      bullets: [
        "Centraliza WhatsApp + mail + llamadas en un canal único",
        "Categoriza y registra cada interacción automáticamente",
        "Coordina proveedores y mide NPS post-servicio",
        "Integra con Google Sheets o el sistema actual del admin",
      ],
      stats: [
        { v: "24/7", l: "Operación continua" },
        { v: "8 sem", l: "Del problema al MVP" },
        { v: "100%", l: "Trazabilidad de casos" },
      ],
      cta: "Ver caso completo",
    },
    team: {
      eyebrow: "Equipo",
      title: "Builders, no slide-makers.",
      sub: "Un equipo chico con experiencia profunda en finanzas, riesgo y producto. Sin pirámides de juniors.",
      bio: {
        name: "Julián Guerrero",
        role: "Founder · Riesgo de Crédito",
        body: "Lidera la práctica de riesgo de crédito y NIIF 9. Modelos PCE, auditorías técnicas y automatización para el sector financiero en LatAm.",
      },
      open: "Estamos siempre abiertos a conversar con talento técnico de LatAm.",
    },
    blog: {
      eyebrow: "Bitácora",
      title: "Lo que escribimos cuando no estamos construyendo.",
      sub: "Pensamiento técnico, casos anonimizados y notas de campo desde el producto.",
      seeAll: "Ver todos los artículos",
    },
    contact: {
      eyebrow: "Conversemos",
      title: "Si lo que te trae acá",
      titleEm: "es resolver un problema concreto,",
      titleEnd: "estás en el lugar correcto.",
      sub: "Cuéntanos qué métrica querés mover. Volvemos en 48h con una hipótesis, no con una propuesta de 60 páginas.",
      email: "info@alseconsulting.co",
    },
    footer: {
      tagline: "Consultoría tecnológica para empresas LatAm que quieren modernizarse al ritmo del negocio.",
      explore: "Explorar",
      practice: "Práctica",
      legal: "Legal",
    },
  },
  en: {
    nav: { services: "Services", results: "Results", process: "Process", team: "Team", blog: "Blog", contact: "Contact", products: "Products" },
    cta: { primary: "Let's talk about your project", secondary: "See what we've built", contact: "Start a conversation" },
    hero: {
      eyebrow: "Consulting · Product · LatAm",
      kicker: "We build the systems",
      kickerEm: "LatAm companies need",
      kickerLast: "for the next 10 years.",
      sub: "We test fast, validate, and iterate. No three-year roadmaps — measurable business impact in weeks, not quarters.",
      meta1: "Bogotá, Colombia",
      meta2: "Distributed team",
      stat1: { v: "10+", l: "years building software" },
      stat2: { v: "IFRS 9", l: "deep technical vertical" },
      stat3: { v: "24/7", l: "products in production" },
    },
    why: {
      eyebrow: "Why",
      title: "Technology moves faster than companies can absorb it.",
      body: "Finance, risk and operations leaders across LatAm face the same tension: pressure to modernize, tight budgets, and vendors selling three-year roadmaps when the problem is this quarter. We work at the pace of the business.",
      pillars: [
        { k: "Validate in weeks", v: "Working MVPs before slide decks. If it doesn't work, we kill it fast." },
        { k: "Technical depth", v: "IFRS 9 models, automations, integrations. We build, we don't just advise." },
        { k: "Operational closeness", v: "Team in LatAm, in your timezone, speaking your language." },
        { k: "Measurable impact", v: "Every shipped piece is tied to a business metric you can show." },
      ],
    },
    services: {
      eyebrow: "Services",
      title: "Three complementary practices.",
      sub: "Risk, automation, and product building. One philosophy: executable software that moves metrics.",
      items: [
        { n: "/01", t: "Credit Risk & IFRS 9", body: "We design and implement Expected Credit Loss models calibrated to your real portfolio. Audit-ready documentation from day one.", tags: ["IFRS 9", "ECL", "Modeling", "Docs"] },
        { n: "/02", t: "Audit Support", body: "Technical defense before Big Four, statutory auditors and regulators. We speak their language because we come from there.", tags: ["Big Four", "Regulators", "Defense", "Walk-throughs"] },
        { n: "/03", t: "Automation & Custom Software", body: "We replace spreadsheets and manual processes with proprietary software integrated to your stack.", tags: ["Python", "ETL", "APIs", "Dashboards"] },
      ],
    },
    method: {
      eyebrow: "How we work",
      title: "Four weeks per iteration. Each iteration moves a metric.",
      steps: [
        { n: "W1", t: "Diagnose", d: "We learn the real pain, not the symptom. One week embedded with you." },
        { n: "W2", t: "Prototype", d: "We build the minimum viable thing that tests the hypothesis. You use it." },
        { n: "W3", t: "Validate", d: "We measure against the metric that matters. Iterate or pivot." },
        { n: "W4", t: "Industrialize", d: "If it works, we take it to production with documentation." },
      ],
    },
    convive: {
      eyebrow: "Case study · Product",
      title: "Convive IA",
      sub: "An assistant for property managers that centralizes, categorizes and responds on WhatsApp.",
      body: "We found the pain by living it as residents. In 8 weeks we validated the MVP with real property managers in Buenos Aires. It now answers 24/7, records every case, and gives the manager their evenings back.",
      bullets: [
        "Centralizes WhatsApp + mail + calls in one channel",
        "Auto-categorizes and records every interaction",
        "Coordinates vendors and measures post-service NPS",
        "Integrates with Google Sheets or current admin tools",
      ],
      stats: [{ v: "24/7", l: "Continuous service" }, { v: "8 wks", l: "Problem to MVP" }, { v: "100%", l: "Case traceability" }],
      cta: "View full case study",
    },
    team: {
      eyebrow: "Team",
      title: "Builders, not slide-makers.",
      sub: "A small team with deep experience in finance, risk, and product. No junior pyramids.",
      bio: {
        name: "Julián Guerrero",
        role: "Founder · Credit Risk",
        body: "Leads the credit risk and IFRS 9 practice. ECL models, technical audits, and automation for the financial sector across LatAm.",
      },
      open: "We're always open to talk to technical talent across LatAm.",
    },
    blog: {
      eyebrow: "Field notes",
      title: "What we write when we're not building.",
      sub: "Technical thinking, anonymized cases, and notes from the field.",
      seeAll: "See all posts",
    },
    contact: {
      eyebrow: "Let's talk",
      title: "If you came here",
      titleEm: "to solve a concrete problem,",
      titleEnd: "you're in the right place.",
      sub: "Tell us which metric you want to move. We come back in 48h with a hypothesis, not a 60-page proposal.",
      email: "info@alseconsulting.co",
    },
    footer: {
      tagline: "Tech consulting for LatAm companies that want to modernize at business speed.",
      explore: "Explore",
      practice: "Practice",
      legal: "Legal",
    },
  },
};

/* ============================================================
   Header / footer (shared)
   ============================================================ */
function SiteHeader({ lang, setLang, active, theme, setTheme }) {
  const t = COPY[lang];
  const [menuOpen, setMenuOpen] = useState(false);

  const toggleTheme = () => {
    const next = theme === "light" ? "dark" : "light";
    setTheme(next);
  };

  return (
    <>
      <header className="site-header">
        <div className="shell hdr-inner">
          <a className="brand" href="index.html" aria-label="Alse Consulting">
            <span className="brand-mark" aria-hidden="true">
              <svg viewBox="0 0 32 32" fill="none">
                <path d="M16 4 L28 28 L23 28 L16 13 L9 28 L4 28 Z" fill="#31b7bc" />
              </svg>
            </span>
            <span className="brand-word">Alse<span className="lt">Consulting</span></span>
          </a>
          <nav className="nav">
            <a href="index.html#caps" className={active === "services" ? "active" : ""}>{t.nav.services}</a>
            <a href="index.html#signals" className={active === "results" ? "active" : ""}>{t.nav.results}</a>
            <a href="index.html#proc" className={active === "process" ? "active" : ""}>{t.nav.process}</a>
            <a href="index.html#equipo" className={active === "team" ? "active" : ""}>{t.nav.team}</a>
            <a href="blog.html" className={active === "blog" ? "active" : ""}>{t.nav.blog}</a>
            <a href="contact.html" className={active === "contact" ? "active" : ""}>{t.nav.contact}</a>
          </nav>
          <div className="hdr-tools">
            <span className="loc">Bogotá, Colombia</span>
            <button className="theme-tog" onClick={toggleTheme} aria-label="Cambiar tema">
              <svg className="ic-sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" strokeLinecap="round"/></svg>
              <svg className="ic-moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" strokeLinejoin="round"/></svg>
            </button>
            <button className="burger" onClick={() => setMenuOpen(true)} aria-label="Menú"><span></span></button>
          </div>
        </div>
      </header>
      {menuOpen && (
        <div className="mobile-overlay open" aria-hidden="false">
          <button className="close" onClick={() => setMenuOpen(false)} aria-label="Cerrar">✕</button>
          <a href="index.html#caps" onClick={() => setMenuOpen(false)}>{t.nav.services}</a>
          <a href="index.html#signals" onClick={() => setMenuOpen(false)}>{t.nav.results}</a>
          <a href="index.html#proc" onClick={() => setMenuOpen(false)}>{t.nav.process}</a>
          <a href="index.html#equipo" onClick={() => setMenuOpen(false)}>{t.nav.team}</a>
          <a href="blog.html" onClick={() => setMenuOpen(false)}>{t.nav.blog}</a>
          <a href="contact.html" onClick={() => setMenuOpen(false)}>{t.nav.contact}</a>
        </div>
      )}
    </>
  );
}

function SiteFooter({ lang }) {
  const t = COPY[lang].footer;
  const nav = COPY[lang].nav;
  return (
    <footer className="site-footer">
      <div className="shell">
        <div className="footer-grid">
          <div>
            <a className="brand" href="index.html" style={{ marginBottom: 18 }}>
              <img className="iso" src="assets/isotipo-teal.svg" alt="" />
              <span className="brand-word">Alse<span className="lt">Consulting</span></span>
            </a>
            <p style={{ color: "var(--fg-mute)", fontSize: 14, maxWidth: "32ch", marginTop: 12 }}>
              {t.tagline}
            </p>
          </div>
          <div>
            <h4>{t.explore}</h4>
            <a href="index.html">Home</a>
            <a href="services.html">{nav.services}</a>
            <a href="convive.html">{nav.products}</a>
            <a href="blog.html">{nav.blog}</a>
          </div>
          <div>
            <h4>{t.practice}</h4>
            <a href="services.html#credit">Credit Risk · NIIF 9</a>
            <a href="services.html#audit">Audit Support</a>
            <a href="services.html#auto">Automation</a>
            <a href="convive.html">Convive IA</a>
          </div>
          <div>
            <h4>{t.legal}</h4>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="mailto:info@alseconsulting.co">info@alseconsulting.co</a>
          </div>
        </div>
        <div className="footer-mark" aria-hidden="true">ALSE</div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} Alse Consulting · Bogotá, Colombia</span>
        </div>
      </div>
    </footer>
  );
}

/* expose to other babel scripts */
Object.assign(window, { COPY, SiteHeader, SiteFooter });
