const { useState, useEffect, useRef } = React;
const C = () => window.EDISIK_CONTENT;

function useReveal(threshold = 0.12) {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVis(true); obs.disconnect(); } }, { threshold });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, vis];
}

/* ─── Shared UI ──────────────────────────────────────────────── */
function Eyebrow({ children, dark }) {
  return <span style={{ fontFamily: "'Inter', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: dark ? "rgba(255,255,255,0.45)" : "#2B5797", display: "block", marginBottom: 18 }}>{children}</span>;
}

function Btn({ children, variant, onClick, type, disabled }) {
  const [h, setH] = useState(false);
  const v = variant || "primary";
  const base = { fontFamily: "'Inter', sans-serif", fontSize: 14, fontWeight: 600, letterSpacing: "0.03em", padding: "13px 28px", borderRadius: 3, cursor: disabled ? "not-allowed" : "pointer", border: "none", transition: "all 0.18s ease", display: "inline-block", whiteSpace: "nowrap", opacity: disabled ? 0.6 : 1 };
  const s = {
    primary: { background: h ? "#1e3f6e" : "#2B5797", color: "#fff" },
    white:   { background: h ? "#dce7f5" : "#fff",    color: "#2B5797" },
    ghost:   { background: "transparent", color: "#fff", border: `1.5px solid ${h ? "#fff" : "rgba(255,255,255,0.45)"}` },
    outline: { background: h ? "#2B5797" : "transparent", color: h ? "#fff" : "#2B5797", border: "1.5px solid #2B5797" }
  };
  return <button style={{ ...base, ...s[v] }} onClick={onClick} type={type || "button"} disabled={disabled} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}>{children}</button>;
}

function ServicePlaceholder({ label }) {
  const id = "p" + label.replace(/\W/g, "");
  return (
    <div style={{ background: "#E9ECF0", borderRadius: 6, overflow: "hidden", aspectRatio: "4/3", position: "relative", minWidth: 200, maxWidth: 280, flexShrink: 0 }}>
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" style={{ position: "absolute", inset: 0 }}>
        <defs>
          <pattern id={id} width="12" height="12" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <rect width="6" height="12" fill="#D8DCE3" />
            <rect x="6" width="6" height="12" fill="#E9ECF0" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill={`url(#${id})`} />
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 20, textAlign: "center" }}>
        <div style={{ width: 32, height: 32, borderRadius: 6, background: "rgba(43,87,151,0.12)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 10 }}>
          <div style={{ width: 14, height: 14, border: "2px solid #2B5797", borderRadius: 2 }} />
        </div>
        <span style={{ fontFamily: "'Courier New', monospace", fontSize: 10, color: "#6B7280", lineHeight: 1.6, whiteSpace: "pre-line" }}>{label}</span>
      </div>
    </div>
  );
}

/* ─── NAV ────────────────────────────────────────────────────── */
function EdisikNav({ lang, setLang, navigate, page }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const t = C()[lang].nav;
  const isHome = page === "home";
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, []);
  const solid = scrolled || !isHome;
  const tc = solid ? "#111827" : "#fff";
  const burgerColor = menuOpen ? "#fff" : (solid ? "#111827" : "#fff");

  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const go = (p) => { setMenuOpen(false); navigate(p); };

  return (
    <nav style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 100, background: menuOpen ? "#0A1628" : (solid ? "#fff" : "transparent"), borderBottom: solid && !menuOpen ? "1px solid #E5E7EB" : "1px solid transparent", transition: "background 0.3s ease, border-color 0.3s ease" }}>
      <div className="nav-wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px", height: 72, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <button onClick={() => go("home")} style={{ background: "none", border: "none", cursor: "pointer", padding: 0 }}>
          <img src="/public/edisik.png" alt="Edisik" style={{ height: 32, width: "auto", display: "block", filter: solid && !menuOpen ? "none" : "brightness(0) invert(1)" }} />
        </button>
        <div className="nav-links" style={{ display: "flex", gap: 28 }}>
          {[["capabilities","capabilities"],["partner","partner"],["insights","insights"],["contact","contact"]].map(([key, pg]) => {
            const active = page === pg;
            const accent = pg === "partner";
            return (
              <button key={key} onClick={() => navigate(pg)} style={{
                background: "none", border: "none", cursor: "pointer", fontFamily: "'Inter', sans-serif",
                fontSize: 14, fontWeight: active || accent ? 600 : 400,
                color: active ? (solid ? "#2B5797" : "#5B8FD9") : (accent && !active ? (solid ? "#2B5797" : "#93B8E8") : tc),
                borderBottom: active ? `2px solid ${solid ? "#2B5797" : "#5B8FD9"}` : "2px solid transparent",
                paddingBottom: 2, transition: "color 0.2s"
              }}>{t[key]}</button>
            );
          })}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <div className="lang-toggle" style={{ display: "flex", background: solid ? "#F0F1F5" : "rgba(255,255,255,0.15)", borderRadius: 20, padding: 3 }}>
            {["es","en"].map(l => (
              <button key={l} onClick={() => setLang(l)} style={{ background: lang === l ? (solid ? "#2B5797" : "#fff") : "transparent", color: lang === l ? (solid ? "#fff" : "#2B5797") : tc, border: "none", cursor: "pointer", borderRadius: 16, padding: "4px 12px", fontFamily: "'Inter', sans-serif", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em", transition: "all 0.2s" }}>{l}</button>
            ))}
          </div>
          <span className="nav-cta-desktop">
            <Btn variant={solid ? "primary" : "white"} onClick={() => navigate("contact")}>{t.cta}</Btn>
          </span>
          <button
            className="nav-burger"
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label="Menu"
            aria-expanded={menuOpen}
            style={{ display: "none", background: "none", border: "none", cursor: "pointer", width: 40, height: 40, alignItems: "center", justifyContent: "center", padding: 0 }}
          >
            <span style={{ position: "relative", width: 22, height: 16, display: "block" }}>
              <span style={{ position: "absolute", left: 0, top: menuOpen ? 7 : 0, width: "100%", height: 2, background: burgerColor, transform: menuOpen ? "rotate(45deg)" : "none", transformOrigin: "center", transition: "all 0.25s ease" }} />
              <span style={{ position: "absolute", left: 0, top: 7, width: "100%", height: 2, background: burgerColor, opacity: menuOpen ? 0 : 1, transition: "opacity 0.2s ease" }} />
              <span style={{ position: "absolute", left: 0, top: menuOpen ? 7 : 14, width: "100%", height: 2, background: burgerColor, transform: menuOpen ? "rotate(-45deg)" : "none", transformOrigin: "center", transition: "all 0.25s ease" }} />
            </span>
          </button>
        </div>
      </div>
      {menuOpen && (
        <div style={{ position: "fixed", top: 60, left: 0, right: 0, bottom: 0, background: "#0A1628", zIndex: 99, padding: "24px 20px 32px", display: "flex", flexDirection: "column", overflowY: "auto" }}>
          {[["capabilities","capabilities"],["partner","partner"],["insights","insights"],["contact","contact"]].map(([key, pg]) => {
            const active = page === pg;
            return (
              <button key={key} onClick={() => go(pg)} style={{
                background: "none", border: "none", borderBottom: "1px solid rgba(255,255,255,0.08)",
                cursor: "pointer", padding: "20px 4px", textAlign: "left",
                color: active ? "#5B8FD9" : "#fff", fontFamily: "var(--font-display)",
                fontSize: 22, fontWeight: 700, letterSpacing: "-0.01em"
              }}>{t[key]}</button>
            );
          })}
          <div style={{ display: "flex", gap: 10, marginTop: 28, marginBottom: 20 }}>
            {["es","en"].map(l => (
              <button key={l} onClick={() => setLang(l)} style={{
                background: lang === l ? "#fff" : "transparent",
                color: lang === l ? "#2B5797" : "#fff",
                border: "1px solid rgba(255,255,255,0.2)",
                borderRadius: 18, padding: "8px 18px",
                fontFamily: "'Inter', sans-serif", fontSize: 11, fontWeight: 700,
                textTransform: "uppercase", letterSpacing: "0.08em", cursor: "pointer"
              }}>{l}</button>
            ))}
          </div>
          <Btn variant="white" onClick={() => go("contact")}>{t.cta}</Btn>
        </div>
      )}
    </nav>
  );
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
function EdisikFooter({ lang, navigate }) {
  const t = C()[lang].footer;
  const compDests = ["partner","insights","contact"];
  return (
    <footer className="section-pad-sm" style={{ background: "#0A1628", color: "#fff", paddingTop: 80, paddingBottom: 48 }}>
      <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px" }}>
        <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 48, marginBottom: 64 }}>
          <div>
            <div style={{ marginBottom: 20 }}>
              <img src="/public/edisik.png" alt="Edisik" style={{ height: 36, width: "auto", display: "block", filter: "brightness(0) invert(1)" }} />
            </div>
            <p style={{ fontSize: 14, color: "rgba(255,255,255,0.45)", lineHeight: 1.75, maxWidth: 300 }}>{t.tagline}</p>
          </div>
          <div>
            <h4 style={{ fontFamily: "'Inter', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.35)", marginBottom: 20 }}>{t.capTitle}</h4>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {t.capLinks.map((l, i) => <button key={i} onClick={() => navigate("capabilities")} style={{ background: "none", border: "none", cursor: "pointer", color: "rgba(255,255,255,0.55)", fontSize: 14, textAlign: "left", fontFamily: "'Inter', sans-serif" }}>{l}</button>)}
            </div>
          </div>
          <div>
            <h4 style={{ fontFamily: "'Inter', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.35)", marginBottom: 20 }}>{t.companyTitle}</h4>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {t.compLinks.map((l, i) => <button key={i} onClick={() => navigate(compDests[i])} style={{ background: "none", border: "none", cursor: "pointer", color: "rgba(255,255,255,0.55)", fontSize: 14, textAlign: "left", fontFamily: "'Inter', sans-serif" }}>{l}</button>)}
            </div>
          </div>
        </div>
        <div className="footer-bottom" style={{ borderTop: "1px solid rgba(255,255,255,0.1)", paddingTop: 32, display: "flex", justifyContent: "space-between" }}>
          <span style={{ fontSize: 13, color: "rgba(255,255,255,0.28)" }}>© {new Date().getFullYear()} Edisik. {t.rights}</span>
          <span style={{ fontSize: 13, color: "rgba(255,255,255,0.28)" }}>edisik.com</span>
        </div>
      </div>
    </footer>
  );
}

/* ─── HERO PARTICLE NETWORK ──────────────────────────────────── */
function HeroParticles() {
  const canvasRef = useRef(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    let raf;
    const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; };
    resize();
    window.addEventListener("resize", resize);
    const N = 42;
    const nodes = Array.from({ length: N }, () => ({
      x: Math.random() * canvas.width, y: Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 0.38, vy: (Math.random() - 0.5) * 0.38,
      r: Math.random() * 1.8 + 0.8, pulse: Math.random() * Math.PI * 2,
    }));
    const LINK_DIST = 140;
    const draw = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (const n of nodes) {
        n.x += n.vx; n.y += n.vy;
        if (n.x < 0 || n.x > canvas.width) n.vx *= -1;
        if (n.y < 0 || n.y > canvas.height) n.vy *= -1;
        n.pulse += 0.018;
      }
      for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
          const a = nodes[i], b = nodes[j];
          const dx = a.x - b.x, dy = a.y - b.y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < LINK_DIST) {
            ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y);
            ctx.strokeStyle = `rgba(91,143,217,${(1 - dist / LINK_DIST) * 0.28})`; ctx.lineWidth = 0.8; ctx.stroke();
          }
        }
      }
      for (const n of nodes) {
        const glow = 0.55 + 0.35 * Math.sin(n.pulse);
        ctx.beginPath(); ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(91,143,217,${glow})`; ctx.fill();
        if (n.r > 2) {
          ctx.beginPath(); ctx.arc(n.x, n.y, n.r * 3.5, 0, Math.PI * 2);
          ctx.fillStyle = `rgba(91,143,217,${glow * 0.07})`; ctx.fill();
        }
      }
      raf = requestAnimationFrame(draw);
    };
    draw();
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
  }, []);
  return (
    <canvas ref={canvasRef} style={{
      position: "absolute", inset: 0, width: "100%", height: "100%",
      pointerEvents: "none", opacity: 0.85,
      maskImage: "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,1) 60%)",
      WebkitMaskImage: "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,1) 60%)",
    }} />
  );
}

/* ─── HERO SHARED BG ─────────────────────────────────────────── */
function HeroBg() {
  return (
    <>
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none", backgroundImage: "linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)", backgroundSize: "64px 64px" }} />
      <div style={{ position: "absolute", top: "15%", right: "-5%", width: "55vw", height: "55vw", background: "radial-gradient(ellipse, rgba(91,143,217,0.14) 0%, transparent 65%)", pointerEvents: "none" }} />
      <div className="hero-bg-k" style={{ position: "absolute", right: "3%", top: "8%", bottom: "8%", width: "34vw", opacity: 0.045, pointerEvents: "none", padding: "24px" }}>
        <img src="/public/icon-hq.png" alt="" style={{ width: "100%", height: "100%", objectFit: "contain", filter: "brightness(10) saturate(0)" }} />
      </div>
    </>
  );
}

/* Layout – Nexora: compact headline + team photo below */
function HeroLayoutNexora({ h, v, navigate }) {
  return (
    <div style={{ width: "100%", position: "relative", zIndex: 1 }}>
      <div className="hero-mobile-pad" style={{ maxWidth: 1280, margin: "0 auto", paddingLeft: 32, paddingRight: 80, paddingTop: 40, paddingBottom: 56, width: "100%" }}>
        <div style={{ maxWidth: 720 }}>
          <div style={{ animation: "fadeUp 0.7s ease 0.05s both" }}><Eyebrow dark>{h.eyebrow}</Eyebrow></div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--heading-weight)", lineHeight: 1.02, fontSize: "clamp(38px, 5vw, 72px)", color: "#fff", letterSpacing: "var(--heading-tracking)", marginBottom: 20, animation: "fadeUp 0.7s ease 0.12s both" }}>
            {v.line1}<br />{v.line2} <em style={{ color: "#5B8FD9", fontStyle: "italic" }}>{v.line3}</em>
          </h1>
          <p style={{ fontSize: 16, color: "rgba(255,255,255,0.5)", lineHeight: 1.75, maxWidth: 460, marginBottom: 36, animation: "fadeUp 0.7s ease 0.2s both" }}>{h.sub}</p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", animation: "fadeUp 0.7s ease 0.28s both" }}>
            <Btn variant="primary" onClick={() => navigate("contact")}>{h.cta}</Btn>
            <Btn variant="ghost" onClick={() => navigate("capabilities")}>{h.ctaSub}</Btn>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ─── HERO SECTION ───────────────────────────────────────────── */
function HeroSection({ t, navigate }) {
  const h = t.hero;
  const v = h.variants.find(x => x.key === "competitive") || h.variants[0];
  return (
    <section style={{ background: "#0A1628", display: "flex", alignItems: "flex-start", position: "relative", overflow: "hidden", paddingTop: 72 }}>
      <HeroBg />
      <HeroLayoutNexora h={h} v={v} navigate={navigate} />
    </section>
  );
}

/* ─── TEAM PHOTO ─────────────────────────────────────────────── */
// function TeamPhoto() {
//   return (
//     <div style={{ width: "100%", lineHeight: 0, position: "relative" }}>
//       <img
//         src="uploads/software-programer-pointing-pencil-source-code-computer-screen-explaining-algorithm-coworker-standing-desk-programmers-discussing-online-cloud-computing-with-team.jpg"
//         alt="Edisik team at work"
//         style={{ width: "100%", height: "clamp(260px, 32vw, 520px)", objectFit: "cover", objectPosition: "center 30%", display: "block" }}
//       />
//     </div>
//   );
// }

function StatsSection({ t }) {
  const [ref, vis] = useReveal();
  return (
    <section ref={ref} className="section-pad-sm" style={{ background: "#2B5797", padding: "72px 0" }}>
      <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px" }}>
        <div className="stats-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
          {t.stats.map((s, i) => (
            <div key={i} style={{ textAlign: "center", opacity: vis ? 1 : 0, transform: vis ? "none" : "translateY(20px)", transition: `all 0.5s ease ${i * 0.1}s` }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(44px, 5vw, 64px)", fontWeight: "var(--heading-weight)", color: "#fff", lineHeight: 1, marginBottom: 10 }}>{s.value}</div>
              <div style={{ fontSize: 13, color: "rgba(255,255,255,0.6)", lineHeight: 1.55, whiteSpace: "pre-line", fontFamily: "'Inter', sans-serif" }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── HOME SERVICES TEASER ──────────────────────────────────── */
const AI_BLURBS = {
  es: {
    web:        "Generamos código, automatizamos testing y usamos IA para optimizar rendimiento y UX en tiempo real.",
    mobile:     "Integramos LLMs, visión computacional y personalización inteligente directamente en la app.",
    cloud:      "Monitoreo predictivo, auto-scaling inteligente y detección de anomalías antes de que afecten tu operación.",
    enterprise: "Automatizamos flujos con LLMs, copilots internos y extracción de datos no estructurados.",
    data:       "Pipelines con IA, modelos predictivos y análisis en tiempo real integrados en tu arquitectura.",
    security:   "Detección de amenazas en tiempo real y compliance automatizado con modelos de seguridad avanzados.",
  },
  en: {
    web:        "We generate code, automate testing and use AI to optimize performance and UX in real time.",
    mobile:     "We integrate LLMs, computer vision and intelligent personalization directly into the app.",
    cloud:      "Predictive monitoring, intelligent auto-scaling and anomaly detection before they affect your operations.",
    enterprise: "We automate workflows with LLMs, internal copilots and unstructured data extraction.",
    data:       "AI pipelines, predictive models and real-time analytics integrated into your architecture.",
    security:   "Real-time threat detection and automated compliance with advanced security models.",
  }
};

const SERVICE_IMAGES = {
  web:        "/public/services/web.png",
  mobile:     "/public/services/app.png",
  cloud:      "/public/services/cloud.png",
  enterprise: "/public/services/software.png",
  data:       "/public/services/ux.png",
};

const ARTICLE_IMAGES = [
  "/public/article/custom-web-application-cost.jpg",
  "/public/article/mvp-development-what-to-build.jpg",
  "/public/article/hiring-software-development-agency-mistakes.jpg",
];

const ARTICLE_URLS = [
  "/articles/custom-web-application-cost",
  "/articles/mvp-development-what-to-build",
  "/articles/hiring-software-development-agency-mistakes",
];

const SERVICE_ICONS = {
  web: (
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="7" width="30" height="22" rx="1.5"/>
      <line x1="3" y1="13" x2="33" y2="13"/>
      <circle cx="7.5" cy="10" r="1"/>
      <circle cx="11" cy="10" r="1"/>
    </svg>
  ),
  mobile: (
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="11" y="3" width="14" height="30" rx="2"/>
      <line x1="15" y1="28" x2="21" y2="28"/>
    </svg>
  ),
  cloud: (
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 26a7 7 0 01-.5-14 9 9 0 0118 2 5 5 0 010 12H9z"/>
      <line x1="18" y1="20" x2="18" y2="30"/>
      <polyline points="14,26 18,30 22,26"/>
    </svg>
  ),
  enterprise: (
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="10" width="10" height="8" rx="1"/>
      <rect x="22" y="10" width="10" height="8" rx="1"/>
      <rect x="13" y="22" width="10" height="8" rx="1"/>
      <line x1="9" y1="18" x2="9" y2="22"/><line x1="9" y1="22" x2="18" y2="22"/>
      <line x1="27" y1="18" x2="27" y2="22"/><line x1="27" y1="22" x2="18" y2="22"/>
    </svg>
  ),
  data: (
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <ellipse cx="18" cy="10" rx="12" ry="4"/>
      <path d="M6 10v8c0 2.2 5.4 4 12 4s12-1.8 12-4v-8"/>
      <path d="M6 18v8c0 2.2 5.4 4 12 4s12-1.8 12-4v-8"/>
    </svg>
  ),
  security: (
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 3l13 5v9c0 8-13 16-13 16S5 25 5 17V8z"/>
      <polyline points="12,18 16,22 24,14"/>
    </svg>
  ),
};

const IS_TOUCH = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: none)").matches;

function CapabilityCard({ item, aiBlurb, navigate, vis, idx }) {
  const [hov, setHov] = useState(false);
  const open = IS_TOUCH || hov;
  return (
    <div
      className="capability-card"
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      onClick={() => navigate("capabilities")}
      style={{
        border: "1px solid #E5E7EB",
        padding: "28px 28px 24px",
        cursor: "pointer",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        minHeight: 180,
        background: open ? "#0A1628" : "#fff",
        transition: "background 0.22s ease",
        opacity: vis ? 1 : 0,
        transform: vis ? "none" : "translateY(16px)",
        transitionDelay: `${idx * 0.06}s`,
        transitionProperty: "background, opacity, transform",
        transitionDuration: "0.22s, 0.5s, 0.5s",
      }}
    >
      <div style={{ minHeight: 64 }}>
        {!open ? (
          <span style={{ fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 400, color: "#374151", lineHeight: 1.5 }}>{item.title}</span>
        ) : (
          <>
            {IS_TOUCH && (
              <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 700, color: "#fff", lineHeight: 1.3, marginBottom: 8 }}>{item.title}</div>
            )}
            <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 13, color: "rgba(255,255,255,0.75)", lineHeight: 1.65, margin: 0 }}>{aiBlurb}</p>
          </>
        )}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: 24 }}>
        <span style={{ color: open ? "rgba(255,255,255,0.45)" : "#9CA3AF", transition: "color 0.22s" }}>
          {SERVICE_ICONS[item.id] || null}
        </span>
        <span style={{ fontSize: 18, color: open ? "rgba(255,255,255,0.6)" : "#9CA3AF", transition: "color 0.22s, transform 0.22s", transform: open ? "translateX(3px)" : "none" }}>→</span>
      </div>
    </div>
  );
}

function ServicesTeaser({ t, lang, navigate }) {
  const [ref, vis] = useReveal();
  const sv = t.services;
  const blurbs = AI_BLURBS[lang] || AI_BLURBS["es"];
  return (
    <section ref={ref} className="section-pad" style={{ background: "#fff", padding: "96px 0 112px" }}>
      <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 64px" }}>
        <div className="row-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, marginBottom: 64, alignItems: "end" }}>
          <div>
            <Eyebrow>{sv.eyebrow}</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--heading-weight)", fontSize: "clamp(32px, 3.5vw, 48px)", letterSpacing: "var(--heading-tracking)", lineHeight: 1.1, color: "#111827", marginTop: 16 }}>
              {lang === "es" ? <>La IA aplicada<br />a cada solución.</> : <>AI applied<br />to every solution.</>}
            </h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: 20 }}>
            <p style={{ fontSize: 15, color: "#6B7280", lineHeight: 1.8, maxWidth: 500 }}>{sv.intro}</p>
            <button onClick={() => navigate("capabilities")} style={{ background: "none", border: "none", cursor: "pointer", fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 600, color: "#2B5797", textAlign: "left", padding: 0 }}>{sv.viewAll} →</button>
          </div>
        </div>
        <div className="services-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "1px solid #E5E7EB" }}>
          {sv.items.map((item, i) => (
            <div key={item.id} style={{ borderRight: (i + 1) % 3 !== 0 ? "1px solid #E5E7EB" : "none", borderBottom: i < 3 ? "1px solid #E5E7EB" : "none" }}>
              <CapabilityCard item={item} aiBlurb={blurbs[item.id] || ""} navigate={navigate} vis={vis} idx={i} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── ACCORDION (Capabilities page) ─────────────────────────── */
function ServiceAccordion({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div style={{ border: "1px solid #E5E7EB" }}>
      {items.map((s, i) => {
        const isOpen = open === i;
        return (
          <div key={s.id} style={{ borderBottom: i < items.length - 1 ? "1px solid #E5E7EB" : "none" }}>
            <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
              width: "100%", background: isOpen ? "#F7F8FC" : "#fff", border: "none", cursor: "pointer",
              padding: "32px 40px", display: "flex", alignItems: "flex-start", gap: 28, textAlign: "left",
              borderLeft: `4px solid ${isOpen ? "#2B5797" : "transparent"}`, transition: "all 0.2s ease"
            }}>
              <span style={{ fontSize: 11, fontWeight: 700, color: "#CBD5E1", minWidth: 28, paddingTop: 4, fontFamily: "'Inter', sans-serif", flexShrink: 0 }}>{String(i + 1).padStart(2, "0")}</span>
              <div style={{ flex: 1, textAlign: "left" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 700, color: isOpen ? "#2B5797" : "#111827", marginBottom: 6, transition: "color 0.2s" }}>{s.title}</div>
                <div style={{ fontSize: 14, color: "#6B7280", lineHeight: 1.6 }}>{s.problem}</div>
              </div>
              <span style={{ fontSize: 22, color: isOpen ? "#2B5797" : "#CBD5E1", transform: isOpen ? "rotate(45deg)" : "none", transition: "transform 0.2s, color 0.2s", flexShrink: 0, paddingTop: 2, fontWeight: 300 }}>+</span>
            </button>
            {isOpen && (
              <div style={{ padding: "8px 40px 44px 100px", background: "#F7F8FC", borderLeft: "4px solid #2B5797", animation: "fadeUp 0.25s ease both" }}>
                <div style={{ display: "flex", gap: 40, alignItems: "flex-start" }}>
                  <div style={{ flex: 1 }}>
                    <p style={{ fontSize: 15, color: "#374151", lineHeight: 1.85, marginBottom: 28 }}>{s.solution}</p>
                    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                      {s.outcomes.map((o, oi) => (
                        <div key={oi} style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
                          <span style={{ color: "#2B5797", fontWeight: 700, flexShrink: 0, marginTop: 1 }}>→</span>
                          <span style={{ fontSize: 14, color: "#374151", lineHeight: 1.65 }}>{o}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                  {SERVICE_IMAGES[s.id] ? (
                    <div style={{ width: 240, height: 160, flexShrink: 0, borderRadius: 6, overflow: "hidden" }}>
                      <img src={SERVICE_IMAGES[s.id]} alt={s.title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                    </div>
                  ) : (
                    <ServicePlaceholder label={s.placeholder} />
                  )}
                </div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

/* ─── TECH PARTNER TEASER ────────────────────────────────────── */
const PARTNER_MODES = {
  es: [
    { num: "01", mode: "Consultoría técnica", desc: "Revisamos tu arquitectura, stack y procesos. Te decimos lo que ves, lo que no ves y lo que deberías cambiar — con propuestas concretas.", tag: "Ideal para: diagnósticos y auditorías",
      icon: (<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round"><circle cx="16" cy="16" r="12"/><path d="M16 10v6l4 3"/></svg>) },
    { num: "02", mode: "Desarrollo a medida", desc: "Construimos lo que necesitas. Una feature, una app, un sistema completo. Sin código genérico. Sin excusas. Entregamos.", tag: "Ideal para: proyectos con alcance definido",
      icon: (<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round"><polyline points="8,12 4,16 8,20"/><polyline points="24,12 28,16 24,20"/><line x1="13" y1="22" x2="19" y2="10"/></svg>) },
    { num: "03", mode: "Equipo externo integrado", desc: "Nos sumamos a tu operación. Standup, sprint, retrospectiva. Somos tu equipo de desarrollo sin la carga de tenerlos en nómina.", tag: "Ideal para: empresas sin equipo técnico propio",
      icon: (<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="4"/><circle cx="21" cy="11" r="4"/><path d="M3 26c0-4 3.6-7 8-7"/><path d="M29 26c0-4-3.6-7-8-7"/><path d="M16 20c3 0 5 2 5 5H11c0-3 2-5 5-5z"/></svg>) },
    { num: "04", mode: "Dirección técnica", desc: "Lideramos o gestionamos tu equipo de desarrollo. Definimos la estrategia tecnológica, priorizamos y marcamos el ritmo.", tag: "Ideal para: empresas con equipo que necesita dirección",
      icon: (<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round"><rect x="12" y="3" width="8" height="6" rx="1"/><rect x="3" y="23" width="8" height="6" rx="1"/><rect x="21" y="23" width="8" height="6" rx="1"/><line x1="16" y1="9" x2="16" y2="16"/><line x1="7" y1="16" x2="25" y2="16"/><line x1="7" y1="16" x2="7" y2="23"/><line x1="25" y1="16" x2="25" y2="23"/></svg>) },
  ],
  en: [
    { num: "01", mode: "Tech consulting", desc: "We review your architecture, stack and processes. We tell you what you see, what you don't, and what you should change — with concrete proposals.", tag: "Best for: diagnostics and audits",
      icon: (<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round"><circle cx="16" cy="16" r="12"/><path d="M16 10v6l4 3"/></svg>) },
    { num: "02", mode: "Custom development", desc: "We build what you need. A feature, an app, a full system. No generic code. No excuses. We deliver.", tag: "Best for: scoped projects",
      icon: (<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round"><polyline points="8,12 4,16 8,20"/><polyline points="24,12 28,16 24,20"/><line x1="13" y1="22" x2="19" y2="10"/></svg>) },
    { num: "03", mode: "Embedded external team", desc: "We join your operation. Standup, sprint, retrospective. We are your dev team without the overhead of payroll.", tag: "Best for: companies without in-house tech",
      icon: (<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="4"/><circle cx="21" cy="11" r="4"/><path d="M3 26c0-4 3.6-7 8-7"/><path d="M29 26c0-4-3.6-7-8-7"/><path d="M16 20c3 0 5 2 5 5H11c0-3 2-5 5-5z"/></svg>) },
    { num: "04", mode: "Tech leadership", desc: "We lead or manage your development team. We define the tech strategy, prioritize and set the pace.", tag: "Best for: teams that need direction",
      icon: (<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round"><rect x="12" y="3" width="8" height="6" rx="1"/><rect x="3" y="23" width="8" height="6" rx="1"/><rect x="21" y="23" width="8" height="6" rx="1"/><line x1="16" y1="9" x2="16" y2="16"/><line x1="7" y1="16" x2="25" y2="16"/><line x1="7" y1="16" x2="7" y2="23"/><line x1="25" y1="16" x2="25" y2="23"/></svg>) },
  ],
};

function IndustriesSection({ t, lang, navigate }) {
  const [ref, vis] = useReveal();
  const l = lang || "es";
  const modes = PARTNER_MODES[l] || PARTNER_MODES["es"];
  const tp = t.techPartner;
  const isEs = l === "es";

  return (
    <section ref={ref} className="section-pad-t" style={{ background: "#0A1628", padding: "112px 0 0", overflow: "hidden" }}>
      <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 64px" }}>
        <div className="row-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, marginBottom: 80, alignItems: "end" }}>
          <div>
            <Eyebrow dark>{tp.eyebrow}</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--heading-weight)", fontSize: "clamp(32px, 3.5vw, 52px)", color: "#fff", letterSpacing: "var(--heading-tracking)", lineHeight: 1.08, marginTop: 16, whiteSpace: "pre-line" }}>
              {isEs ? "No un proveedor.\nTu equipo técnico externo." : "Not a vendor.\nYour external tech team."}
            </h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: 20 }}>
            <p style={{ fontSize: 15, color: "rgba(255,255,255,0.5)", lineHeight: 1.8, maxWidth: 480 }}>
              {isEs ? "No queremos ser parte de tu empresa — queremos ser el equipo que hace que tu empresa funcione mejor. Sin nómina, sin oficina, sin overhead. Solo expertise, velocidad y tecnología que resuelve." : "We don't want to be part of your company — we want to be the team that makes your company work better. No payroll, no office, no overhead. Just expertise, speed and technology that solves."}
            </p>
            {navigate && <button onClick={() => navigate("partner")} style={{ background: "none", border: "none", cursor: "pointer", fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 600, color: "#5B8FD9", textAlign: "left", padding: 0 }}>
              {isEs ? "Ver cómo trabajamos →" : "See how we work →"}
            </button>}
          </div>
        </div>

        <div style={{ display: "flex", alignItems: "center", marginBottom: 0, paddingBottom: 24, borderBottom: "1px solid rgba(255,255,255,0.07)" }}>
          <span className="scope-label" style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.2)", fontFamily: "'Inter', sans-serif", marginRight: 20 }}>
            {isEs ? "Alcance del servicio" : "Service scope"}
          </span>
          <div style={{ flex: 1, height: 2, background: "linear-gradient(90deg, rgba(91,143,217,0.3) 0%, #5B8FD9 50%, rgba(91,143,217,0.3) 100%)" }} />
          <span className="scope-label" style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.2)", fontFamily: "'Inter', sans-serif", marginLeft: 20 }}>
            {isEs ? "Ligero → Profundo" : "Light → Deep"}
          </span>
        </div>

        <div className="partner-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
          {modes.map((m, i) => {
            const [hov, setHov] = useState(false);
            return (
              <div key={i}
                onMouseEnter={() => setHov(true)}
                onMouseLeave={() => setHov(false)}
                style={{
                  borderRight: i < 3 ? "1px solid rgba(255,255,255,0.07)" : "none",
                  padding: "40px 36px 48px",
                  background: hov ? "rgba(91,143,217,0.07)" : "transparent",
                  transition: "background 0.2s",
                  opacity: vis ? 1 : 0,
                  transform: vis ? "none" : "translateY(24px)",
                  transitionProperty: "background, opacity, transform",
                  transitionDuration: "0.2s, 0.5s, 0.5s",
                  transitionDelay: `0s, ${i * 0.08}s, ${i * 0.08}s`,
                  cursor: navigate ? "pointer" : "default",
                }}
                onClick={() => navigate && navigate("partner")}
              >
                <div style={{ marginBottom: 32 }}>
                  <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", color: "rgba(255,255,255,0.2)", fontFamily: "'Inter', sans-serif" }}>{m.num}</span>
                </div>
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: hov ? "#fff" : "rgba(255,255,255,0.85)", marginBottom: 16, letterSpacing: "-0.01em", lineHeight: 1.3, transition: "color 0.2s" }}>{m.mode}</h3>
                <p style={{ fontSize: 13, color: "rgba(255,255,255,0.42)", lineHeight: 1.7, marginBottom: 32 }}>{m.desc}</p>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
                  <span style={{ fontSize: 11, color: hov ? "rgba(91,143,217,0.8)" : "rgba(255,255,255,0.18)", fontFamily: "'Inter', sans-serif", lineHeight: 1.5, transition: "color 0.2s" }}>{m.tag}</span>
                  <span style={{ color: hov ? "#5B8FD9" : "rgba(255,255,255,0.18)", transition: "color 0.2s, transform 0.2s", transform: hov ? "translateX(4px)" : "none", display: "block" }}>{m.icon}</span>
                </div>
              </div>
            );
          })}
        </div>

        <div className="partner-footer" style={{ borderTop: "1px solid rgba(255,255,255,0.07)", marginTop: 0, padding: "32px 0", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <p style={{ fontSize: 14, color: "rgba(255,255,255,0.28)", fontStyle: "italic", fontFamily: "'Inter', sans-serif" }}>
            {isEs ? '"El talento técnico más caro no es el que contratas. Es el que necesitabas y no tenías."' : '"The most expensive tech talent isn\'t the one you hire. It\'s the one you needed and didn\'t have."'}
          </p>
          {navigate && <button onClick={() => navigate("partner")} style={{ background: "none", border: "1px solid rgba(255,255,255,0.15)", borderRadius: 2, cursor: "pointer", fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 600, color: "rgba(255,255,255,0.6)", padding: "10px 20px", whiteSpace: "nowrap", flexShrink: 0 }}>
            {isEs ? "Cómo trabajamos →" : "How we work →"}
          </button>}
        </div>
      </div>
    </section>
  );
}

/* ─── INSIGHTS PREVIEW ───────────────────────────────────────── */
function InsightsPreview({ t, navigate }) {
  const [ref, vis] = useReveal();
  const ins = t.insights;
  return (
    <section ref={ref} className="section-pad" style={{ background: "#F7F8FC", padding: "112px 0" }}>
      <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px" }}>
        <div className="insights-header" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 64 }}>
          <div>
            <Eyebrow>{ins.eyebrow}</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--heading-weight)", fontSize: "clamp(32px, 3.5vw, 48px)", letterSpacing: "var(--heading-tracking)", color: "#111827" }}>{ins.title}</h2>
          </div>
          <button onClick={() => navigate("insights")} style={{ background: "none", border: "none", cursor: "pointer", fontFamily: "'Inter', sans-serif", fontSize: 14, fontWeight: 600, color: "#2B5797", whiteSpace: "nowrap" }}>{ins.cta} →</button>
        </div>
        <div className="articles-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {ins.items.map((a, i) => <ArticleCard key={i} a={a} i={i} vis={vis} />)}
        </div>
      </div>
    </section>
  );
}

function ArticleCard({ a, i, vis }) {
  const [h, setH] = useState(false);
  const img = ARTICLE_IMAGES[i];
  return (
    <div
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      onClick={() => { window.location.href = ARTICLE_URLS[i]; }}
      style={{
        background: "#fff", borderRadius: 4, cursor: "pointer", overflow: "hidden",
        borderBottom: `3px solid ${h ? "#2B5797" : "transparent"}`,
        opacity: vis ? 1 : 0, transform: vis ? "none" : "translateY(20px)",
        transition: `opacity 0.5s ease ${i * 0.1}s, transform 0.5s ease ${i * 0.1}s, border-color 0.2s`
      }}
    >
      {img && (
        <div style={{ overflow: "hidden", aspectRatio: "16/9" }}>
          <img src={img} alt={a.title} style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform 0.4s ease", transform: h ? "scale(1.04)" : "scale(1)", display: "block" }} />
        </div>
      )}
      <div style={{ padding: "28px 32px 32px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", color: "#2B5797", textTransform: "uppercase", fontFamily: "'Inter', sans-serif" }}>{a.tag}</span>
          <span style={{ fontSize: 12, color: "#9CA3AF", fontFamily: "'Inter', sans-serif" }}>{a.date}</span>
        </div>
        <h3 style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 700, color: "#111827", lineHeight: 1.45 }}>{a.title}</h3>
      </div>
    </div>
  );
}

/* ─── CTA BANNER ─────────────────────────────────────────────── */
function CTABanner({ t, navigate }) {
  const cta = t.ctaBanner;
  const [ref, vis] = useReveal();
  return (
    <section ref={ref} className="section-pad" style={{ background: "#2B5797", padding: "96px 0" }}>
      <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px", textAlign: "center" }}>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--heading-weight)", color: "#fff", letterSpacing: "var(--heading-tracking)", fontSize: "clamp(32px, 4vw, 56px)", marginBottom: 24, lineHeight: 1.1, opacity: vis ? 1 : 0, transform: vis ? "none" : "translateY(16px)", transition: "all 0.6s ease" }}>{cta.title}</h2>
        <p style={{ fontSize: 17, color: "rgba(255,255,255,0.68)", maxWidth: 440, margin: "0 auto 48px", lineHeight: 1.7, opacity: vis ? 1 : 0, transition: "all 0.6s ease 0.1s", transform: vis ? "none" : "translateY(12px)" }}>{cta.sub}</p>
        <div style={{ opacity: vis ? 1 : 0, transition: "all 0.6s ease 0.2s" }}><Btn variant="white" onClick={() => navigate("contact")}>{cta.cta}</Btn></div>
      </div>
    </section>
  );
}

/* ─── PAGE HERO ──────────────────────────────────────────────── */
function PageHero({ eyebrow, title, sub, badge }) {
  return (
    <section className="page-hero-pad" style={{ background: "#0A1628", padding: "120px 0 96px", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", bottom: "-20%", right: "-10%", width: "40vw", height: "40vw", background: "radial-gradient(ellipse, rgba(91,143,217,0.1) 0%, transparent 65%)", pointerEvents: "none" }} />
      <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px", position: "relative", zIndex: 1 }}>
        {badge && <div style={{ display: "inline-block", background: "rgba(91,143,217,0.15)", border: "1px solid rgba(91,143,217,0.3)", borderRadius: 20, padding: "6px 16px", marginBottom: 24, fontSize: 12, fontWeight: 600, color: "#5B8FD9", fontFamily: "'Inter', sans-serif", letterSpacing: "0.05em" }}>{badge}</div>}
        <Eyebrow dark>{eyebrow}</Eyebrow>
        <h1 className="page-hero-title" style={{ fontFamily: "var(--font-display)", fontWeight: "var(--heading-weight)", fontSize: "clamp(44px, 6vw, 80px)", color: "#fff", letterSpacing: "var(--heading-tracking)", lineHeight: 1.02, whiteSpace: "pre-line", marginBottom: 24 }}>{title}</h1>
        <p style={{ fontSize: 18, color: "rgba(255,255,255,0.56)", maxWidth: 520, lineHeight: 1.75 }}>{sub}</p>
      </div>
    </section>
  );
}

/* ─── PAGES ──────────────────────────────────────────────────── */
function HomePage({ lang, navigate }) {
  const t = C()[lang];
  return (
    <div>
      <HeroSection t={t} navigate={navigate} />
      {/* <TeamPhoto /> */}
      <StatsSection t={t} />
      <ServicesTeaser t={t} lang={lang} navigate={navigate} />
      <IndustriesSection t={t} lang={lang} navigate={navigate} />
      <InsightsPreview t={t} navigate={navigate} />
      <CTABanner t={t} navigate={navigate} />
    </div>
  );
}

/* ─── CAPABILITIES PAGE ──────────────────────────────────────── */
function ServiceChapter({ s, i, lang, blurbs, isEs }) {
  const [sRef, sVis] = useReveal();
  const dark = i % 2 !== 0;
  const bg   = dark ? "#0A1628" : "#F7F8FC";
  const col  = dark ? "#fff" : "#111827";
  const sub  = dark ? "rgba(255,255,255,0.52)" : "#374151";
  const dim  = dark ? "rgba(255,255,255,0.35)" : "#6B7280";
  const accent = dark ? "#5B8FD9" : "#2B5797";

  return (
    <section id={`service-${s.id}`} ref={sRef} className="section-pad" style={{ background: bg, padding: "104px 0", borderTop: dark ? "none" : "1px solid #E5E7EB" }}>
      <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 64px" }}>
        <div className="chapter-header" style={{ display: "flex", alignItems: "flex-start", gap: 40, marginBottom: 56 }}>
          <span className="chapter-number" style={{ fontFamily: "var(--font-display)", fontSize: "clamp(80px, 9vw, 128px)", fontWeight: "var(--heading-weight)", color: dark ? "rgba(91,143,217,0.12)" : "rgba(43,87,151,0.07)", lineHeight: 0.8, flexShrink: 0, letterSpacing: "-0.05em", userSelect: "none", minWidth: "clamp(80px, 9vw, 128px)", textAlign: "right" }}>{String(i + 1).padStart(2, "0")}</span>
          <div style={{ flex: 1 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 10 }}>
              <span style={{ color: accent, opacity: 0.85 }}>{SERVICE_ICONS[s.id]}</span>
              <h2 className="chapter-title" style={{ fontFamily: "var(--font-display)", fontWeight: "var(--heading-weight)", fontSize: "clamp(26px, 3vw, 44px)", color: col, letterSpacing: "var(--heading-tracking)", lineHeight: 1.1 }}>{s.title}</h2>
            </div>
            <p style={{ fontSize: 16, color: dim, fontStyle: "italic", lineHeight: 1.75, maxWidth: 600 }}>{s.problem}</p>
          </div>
        </div>
        <div className="chapter-grid" style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: "6vw", alignItems: "start", paddingLeft: "calc(clamp(80px,9vw,128px) + 40px)", opacity: sVis ? 1 : 0, transform: sVis ? "none" : "translateY(28px)", transition: "opacity 0.65s ease 0.08s, transform 0.65s ease 0.08s" }}>
          <div>
            <p style={{ fontSize: 15, color: sub, lineHeight: 1.95, marginBottom: 36 }}>{s.solution}</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {s.outcomes.map((o, oi) => (
                <div key={oi} style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
                  <span style={{ color: accent, fontWeight: 700, flexShrink: 0, marginTop: 2, fontSize: 13 }}>→</span>
                  <span style={{ fontSize: 14, color: sub, lineHeight: 1.75 }}>{o}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ background: dark ? "rgba(91,143,217,0.07)" : "#fff", border: `1px solid ${dark ? "rgba(91,143,217,0.18)" : "#E5E7EB"}`, borderTop: `3px solid ${accent}`, padding: "28px 26px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
                <div style={{ width: 26, height: 26, borderRadius: 5, background: dark ? "rgba(91,143,217,0.2)" : "#EBF0FA", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 8, fontWeight: 800, color: accent, fontFamily: "'Inter', sans-serif", flexShrink: 0 }}>AI</div>
                <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: accent, fontFamily: "'Inter', sans-serif" }}>{isEs ? "Con Inteligencia Artificial" : "With AI"}</span>
              </div>
              <p style={{ fontSize: 13, color: dark ? "rgba(255,255,255,0.52)" : "#4B5563", lineHeight: 1.85, margin: 0 }}>{blurbs[s.id]}</p>
            </div>
            {SERVICE_IMAGES[s.id] ? (
              <div style={{ borderRadius: 6, overflow: "hidden", height: 200 }}>
                <img src={SERVICE_IMAGES[s.id]} alt={s.title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
            ) : (
              <ServicePlaceholder label={s.placeholder} />
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function CapabilitiesPage({ lang, navigate }) {
  const t    = C()[lang];
  const cp   = t.capabilitiesPage;
  const sv   = t.services;
  const blurbs = AI_BLURBS[lang] || AI_BLURBS["es"];
  const isEs = lang === "es";
  const [gridRef, gridVis] = useReveal();

  return (
    <div>
      <section className="cap-hero" style={{ background: "#0A1628", padding: "124px 0 80px", position: "relative", overflow: "hidden" }}>
        <HeroBg />
        <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 1 }}>
          <Eyebrow dark>{cp.eyebrow}</Eyebrow>
          <h1 className="cap-hero-title" style={{ fontFamily: "var(--font-display)", fontWeight: "var(--heading-weight)", fontSize: "clamp(52px, 7.5vw, 100px)", color: "#fff", letterSpacing: "var(--heading-tracking)", lineHeight: 0.97, marginBottom: 28, whiteSpace: "pre-line" }}>{cp.title}</h1>
          <p style={{ fontSize: 18, color: "rgba(255,255,255,0.5)", maxWidth: 500, lineHeight: 1.8, marginBottom: 52 }}>{cp.sub}</p>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {sv.items.map((s, i) => (
              <a key={s.id} href={`#service-${s.id}`} style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.11)", borderRadius: 20, padding: "7px 16px", fontSize: 12, fontWeight: 600, color: "rgba(255,255,255,0.6)", fontFamily: "'Inter', sans-serif", letterSpacing: "0.02em", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 7, transition: "background 0.18s, color 0.18s" }}
                onMouseEnter={e => { e.currentTarget.style.background = "rgba(91,143,217,0.18)"; e.currentTarget.style.color = "#fff"; }}
                onMouseLeave={e => { e.currentTarget.style.background = "rgba(255,255,255,0.06)"; e.currentTarget.style.color = "rgba(255,255,255,0.6)"; }}>
                <span style={{ fontSize: 9, fontWeight: 700, color: "rgba(91,143,217,0.65)", letterSpacing: "0.08em" }}>{String(i + 1).padStart(2, "0")}</span>
                {s.title}
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="section-pad" style={{ background: "#fff", padding: "88px 0 96px" }}>
        <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 64px" }}>
          <div className="row-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, marginBottom: 56, alignItems: "end" }}>
            <div>
              <Eyebrow>{sv.eyebrow}</Eyebrow>
              <h2 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--heading-weight)", fontSize: "clamp(32px, 3.5vw, 48px)", letterSpacing: "var(--heading-tracking)", lineHeight: 1.1, color: "#111827", marginTop: 16 }}>
                {isEs ? <>La IA aplicada<br />a cada solución.</> : <>AI applied<br />to every solution.</>}
              </h2>
            </div>
            <p style={{ fontSize: 15, color: "#6B7280", lineHeight: 1.85, maxWidth: 480, alignSelf: "end" }}>{sv.intro}</p>
          </div>
          <div ref={gridRef} className="services-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "1px solid #E5E7EB" }}>
            {sv.items.map((item, i) => (
              <div key={item.id} style={{ borderRight: (i + 1) % 3 !== 0 ? "1px solid #E5E7EB" : "none", borderBottom: i < 3 ? "1px solid #E5E7EB" : "none" }}>
                <CapabilityCard item={item} aiBlurb={blurbs[item.id] || ""} navigate={() => { window.location.hash = `service-${item.id}`; }} vis={gridVis} idx={i} />
              </div>
            ))}
          </div>
          <p style={{ marginTop: 24, fontSize: 12, color: "#9CA3AF", fontFamily: "'Inter', sans-serif", fontStyle: "italic" }}>
            {isEs ? "Pasa el cursor sobre cada tarjeta para ver el ángulo de IA →" : "Hover each card to see the AI angle →"}
          </p>
        </div>
      </section>

      {sv.items.map((s, i) => (
        <ServiceChapter key={s.id} s={s} i={i} lang={lang} blurbs={blurbs} isEs={isEs} />
      ))}

      <CTABanner t={t} navigate={navigate} />
    </div>
  );
}

/* ─── TECH PARTNER PAGE ──────────────────────────────────────── */
function TechPartnerPage({ lang, navigate }) {
  const t = C()[lang];
  const tp = t.techPartner;
  const [refServices, visServices] = useReveal();
  const [refSteps, visSteps] = useReveal();
  const [refProfiles, visProfiles] = useReveal();

  return (
    <div>
      <section className="page-hero-pad" style={{ background: "#0A1628", padding: "120px 0 96px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, pointerEvents: "none", backgroundImage: "linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)", backgroundSize: "64px 64px" }} />
        <div style={{ position: "absolute", top: "5%", right: "-10%", width: "50vw", height: "50vw", background: "radial-gradient(ellipse, rgba(91,143,217,0.16) 0%, transparent 60%)", pointerEvents: "none" }} />
        <HeroParticles />
        <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px", position: "relative", zIndex: 1 }}>
          <div style={{ display: "inline-block", background: "rgba(91,143,217,0.15)", border: "1px solid rgba(91,143,217,0.3)", borderRadius: 20, padding: "6px 16px", marginBottom: 24, fontSize: 12, fontWeight: 600, color: "#5B8FD9", fontFamily: "'Inter', sans-serif", letterSpacing: "0.05em" }}>{tp.badge}</div>
          <Eyebrow dark>{tp.eyebrow}</Eyebrow>
          <h1 className="page-hero-title" style={{ fontFamily: "var(--font-display)", fontWeight: "var(--heading-weight)", fontSize: "clamp(44px, 6vw, 84px)", color: "#fff", letterSpacing: "var(--heading-tracking)", lineHeight: 1.0, whiteSpace: "pre-line", marginBottom: 32, maxWidth: 760 }}>{tp.title}</h1>
          <p style={{ fontSize: 18, color: "rgba(255,255,255,0.6)", maxWidth: 580, lineHeight: 1.85, marginBottom: 48 }}>{tp.sub}</p>
          <Btn variant="ghost" onClick={() => navigate("contact")}>{tp.cta}</Btn>
        </div>
      </section>

      <section className="section-pad-sm" style={{ background: "#fff", padding: "80px 0" }}>
        <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px" }}>
          <div style={{ marginBottom: 40 }}>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--heading-weight)", fontSize: "clamp(26px, 2.5vw, 38px)", letterSpacing: "var(--heading-tracking)", color: "#111827", marginBottom: 8 }}>{tp.withOrWithout.title}</h2>
            <p style={{ fontSize: 16, color: "#6B7280" }}>{tp.withOrWithout.sub}</p>
          </div>
          <div className="partner-cards-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
            {tp.withOrWithout.cards.map((card, i) => (
              <div key={i} style={{ background: i === 0 ? "#F7F8FC" : "#0A1628", padding: "44px 40px", borderRadius: 4, borderTop: `3px solid ${i === 0 ? "#5B8FD9" : "#2B5797"}` }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: i === 0 ? "#5B8FD9" : "rgba(91,143,217,0.7)", fontFamily: "'Inter', sans-serif", marginBottom: 16 }}>{card.scenario}</div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, color: i === 0 ? "#111827" : "#fff", lineHeight: 1.3, marginBottom: 16 }}>{card.title}</h3>
                <p style={{ fontSize: 15, color: i === 0 ? "#6B7280" : "rgba(255,255,255,0.6)", lineHeight: 1.8 }}>{card.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-pad" style={{ background: "#F7F8FC", padding: "96px 0" }}>
        <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px" }}>
          <div className="row-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: "8vw", alignItems: "start", marginBottom: 64 }}>
            <div>
              <Eyebrow>{tp.eyebrow}</Eyebrow>
              <h2 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--heading-weight)", fontSize: "clamp(28px, 2.5vw, 40px)", letterSpacing: "var(--heading-tracking)", lineHeight: 1.1, color: "#111827" }}>{tp.whatTitle}</h2>
            </div>
            <p style={{ fontSize: 17, color: "#4B5563", lineHeight: 1.85, paddingTop: 8 }}>{tp.whatIntro}</p>
          </div>
          <div ref={refServices} className="partner-services-2" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "1px", background: "#E5E7EB", border: "1px solid #E5E7EB" }}>
            {tp.services.map((s, i) => {
              const [hov, setHov] = useState(false);
              return (
                <div key={s.id} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
                  style={{ background: hov ? "#fff" : "#F7F8FC", padding: "44px 40px", transition: "background 0.2s", opacity: visServices ? 1 : 0, transform: visServices ? "none" : "translateY(20px)", transitionProperty: "background, opacity, transform", transitionDuration: "0.2s, 0.5s, 0.5s", transitionDelay: `0s, ${i * 0.07}s, ${i * 0.07}s` }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 16 }}>
                    <div style={{ width: 38, height: 38, borderRadius: 8, background: hov ? "#2B5797" : "#EBF0FA", display: "flex", alignItems: "center", justifyContent: "center", fontSize: s.icon === "AI" ? 11 : 15, fontWeight: 800, color: hov ? "#fff" : "#2B5797", fontFamily: "'Inter', sans-serif", flexShrink: 0, transition: "all 0.2s" }}>{s.icon}</div>
                    <h3 style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 700, color: "#111827", lineHeight: 1.3 }}>{s.title}</h3>
                  </div>
                  <p style={{ fontSize: 14, color: "#6B7280", lineHeight: 1.8, marginBottom: 20 }}>{s.desc}</p>
                  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                    {s.points.map((p, pi) => (
                      <div key={pi} style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
                        <span style={{ color: "#5B8FD9", fontWeight: 700, flexShrink: 0, fontSize: 12, paddingTop: 2 }}>→</span>
                        <span style={{ fontSize: 13, color: "#4B5563", lineHeight: 1.65 }}>{p}</span>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section ref={refSteps} className="section-pad" style={{ background: "#0A1628", padding: "96px 0" }}>
        <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px" }}>
          <div style={{ marginBottom: 64, maxWidth: 500 }}>
            <Eyebrow dark>{tp.eyebrow}</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--heading-weight)", fontSize: "clamp(32px, 3.5vw, 48px)", color: "#fff", letterSpacing: "var(--heading-tracking)", lineHeight: 1.1, marginBottom: 16 }}>{tp.howTitle}</h2>
            <p style={{ fontSize: 15, color: "rgba(255,255,255,0.48)", lineHeight: 1.75 }}>{tp.howSub}</p>
          </div>
          <div className="partner-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 2 }}>
            {tp.steps.map((step, i) => (
              <div key={i} style={{ background: i % 2 === 0 ? "rgba(255,255,255,0.05)" : "rgba(255,255,255,0.02)", padding: "40px 32px", opacity: visSteps ? 1 : 0, transform: visSteps ? "none" : "translateY(20px)", transition: `all 0.5s ease ${i * 0.1}s` }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 44, fontWeight: "var(--heading-weight)", color: "rgba(91,143,217,0.25)", lineHeight: 1, marginBottom: 24 }}>{step.num}</div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 700, color: "#fff", marginBottom: 12 }}>{step.title}</h3>
                <p style={{ fontSize: 14, color: "rgba(255,255,255,0.48)", lineHeight: 1.75 }}>{step.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section ref={refProfiles} className="section-pad" style={{ background: "#fff", padding: "96px 0" }}>
        <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px" }}>
          <div style={{ marginBottom: 48 }}>
            <Eyebrow>{tp.eyebrow}</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--heading-weight)", fontSize: "clamp(28px, 3vw, 44px)", letterSpacing: "var(--heading-tracking)", color: "#111827" }}>{tp.forWho}</h2>
          </div>
          <div className="partner-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, marginBottom: 72 }}>
            {tp.profiles.map((p, i) => (
              <div key={i} style={{ padding: "32px 28px", borderRadius: 4, border: "1px solid #E5E7EB", borderTop: "3px solid #2B5797", opacity: visProfiles ? 1 : 0, transform: visProfiles ? "none" : "translateY(16px)", transition: `all 0.5s ease ${i * 0.1}s` }}>
                <h4 style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 700, color: "#111827", marginBottom: 12, lineHeight: 1.35 }}>{p.title}</h4>
                <p style={{ fontSize: 13, color: "#6B7280", lineHeight: 1.7 }}>{p.desc}</p>
              </div>
            ))}
          </div>
          <div style={{ textAlign: "center", borderTop: "1px solid #E5E7EB", paddingTop: 64 }}>
            <p style={{ fontSize: 16, color: "#6B7280", marginBottom: 28, lineHeight: 1.7 }}>{tp.ctaSub}</p>
            <Btn variant="primary" onClick={() => navigate("contact")}>{tp.cta}</Btn>
          </div>
        </div>
      </section>
    </div>
  );
}

function FeaturedArticle({ a, i, lang }) {
  const [h, setH] = useState(false);
  const readLabel = lang === "es" ? "Leer artículo" : "Read article";
  return (
    <div
      className="featured-grid"
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      onClick={() => { window.location.href = ARTICLE_URLS[i]; }}
      style={{
        background: "#fff", borderRadius: 4, cursor: "pointer", overflow: "hidden",
        display: "grid", gridTemplateColumns: "1fr 1fr",
        borderBottom: `3px solid ${h ? "#2B5797" : "transparent"}`,
        transition: "border-color 0.2s", marginBottom: 24,
      }}
    >
      <div style={{ overflow: "hidden", aspectRatio: "16/9" }}>
        <img src={ARTICLE_IMAGES[i]} alt={a.title} style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform 0.4s ease", transform: h ? "scale(1.04)" : "scale(1)", display: "block" }} />
      </div>
      <div className="featured-body" style={{ padding: "52px 56px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", color: "#2B5797", textTransform: "uppercase", fontFamily: "'Inter', sans-serif" }}>{a.tag}</span>
          <span style={{ fontSize: 12, color: "#9CA3AF", fontFamily: "'Inter', sans-serif" }}>{a.date}</span>
        </div>
        <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(22px, 2.2vw, 30px)", fontWeight: 700, color: "#111827", lineHeight: 1.35, marginBottom: 28 }}>{a.title}</h2>
        <span style={{ fontSize: 13, fontWeight: 600, color: h ? "#2B5797" : "#9CA3AF", fontFamily: "'Inter', sans-serif", transition: "color 0.2s" }}>{readLabel} →</span>
      </div>
    </div>
  );
}

function InsightsPage({ lang, navigate }) {
  const t = C()[lang];
  const ip = t.insightsPage;
  const articles = t.insights.items;
  return (
    <div>
      <PageHero eyebrow={ip.eyebrow} title={ip.title} sub={ip.sub} />
      <section className="section-pad" style={{ background: "#F7F8FC", padding: "96px 0" }}>
        <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px" }}>
          <FeaturedArticle a={articles[0]} i={0} lang={lang} />
          <div className="articles-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
            {articles.slice(1).map((a, i) => <ArticleCard key={i} a={a} i={i + 1} vis={true} />)}
          </div>
        </div>
      </section>
      <CTABanner t={t} navigate={navigate} />
    </div>
  );
}

/* ─── CONTACT PAGE ───────────────────────────────────────────── */
const CONTACT_ICONS = {
  calendar: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="16" rx="2"/>
      <line x1="3" y1="10" x2="21" y2="10"/>
      <line x1="8" y1="3" x2="8" y2="7"/>
      <line x1="16" y1="3" x2="16" y2="7"/>
    </svg>
  ),
  mail: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2"/>
      <polyline points="3,7 12,13 21,7"/>
    </svg>
  )
};

function ContactInfoBlock({ icon, title, value, href }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-start", gap: 18 }}>
      <div style={{ width: 48, height: 48, borderRadius: 8, border: "1px solid #E5E7EB", display: "flex", alignItems: "center", justifyContent: "center", color: "#2B5797", flexShrink: 0 }}>
        {icon}
      </div>
      <div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 700, color: "#111827", marginBottom: 4 }}>{title}</div>
        {href
          ? <a href={href} style={{ fontSize: 15, color: "#2B5797", fontWeight: 500 }}>{value}</a>
          : <div style={{ fontSize: 15, color: "#6B7280" }}>{value}</div>}
      </div>
    </div>
  );
}

function ContactPage({ lang }) {
  const t = C()[lang].contact;
  const [form, setForm] = useState({ name: "", email: "", company: "", phone: "", timeline: "", message: "" });
  const [sent, setSent] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [focused, setFocused] = useState(null);

  const labelStyle = { fontSize: 13, fontWeight: 600, color: "#374151", marginBottom: 8, display: "block", fontFamily: "'Inter', sans-serif" };
  const reqMark = <span style={{ color: "#2B5797", marginLeft: 4 }}>*</span>;

  const iStyle = (f) => ({
    width: "100%",
    background: "#fff",
    border: `1px solid ${focused === f ? "#2B5797" : "#E5E7EB"}`,
    borderRadius: 6,
    padding: "12px 14px",
    color: "#111827",
    fontSize: 15,
    fontFamily: "'Inter', sans-serif",
    outline: "none",
    transition: "border-color 0.2s, box-shadow 0.2s",
    boxShadow: focused === f ? "0 0 0 3px rgba(43,87,151,0.12)" : "none",
    boxSizing: "border-box"
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    try {
      const res = await fetch("/api/contact.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, website: "" })
      });
      const data = await res.json();
      if (data.success) {
        setSent(true);
      } else {
        setError(data.error || (lang === "es" ? "Error al enviar. Por favor, inténtalo de nuevo." : "Failed to send. Please try again."));
      }
    } catch (err) {
      setError(lang === "es" ? "Error de red. Por favor, inténtalo de nuevo." : "Network error. Please try again.");
    } finally {
      setLoading(false);
    }
  };

  const renderField = (key, type, required) => (
    <div>
      <label style={labelStyle}>{t.form[key]}{required && reqMark}</label>
      <input
        type={type} value={form[key]} required={required}
        placeholder={t.form[key + "Ph"] || ""}
        onChange={e => setForm({ ...form, [key]: e.target.value })}
        onFocus={() => setFocused(key)} onBlur={() => setFocused(null)}
        style={iStyle(key)}
      />
    </div>
  );

  return (
    <div>
      <section className="contact-section" style={{ background: "#fff", minHeight: "100vh", padding: "120px 0 96px", position: "relative" }}>
        <div className="wrap" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px" }}>
          <div className="contact-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "6vw", alignItems: "start" }}>

            {/* Left column — info */}
            <div>
              <h1 className="contact-title" style={{ fontFamily: "var(--font-display)", fontWeight: "var(--heading-weight)", fontSize: "clamp(28px, 3.4vw, 40px)", color: "#111827", letterSpacing: "var(--heading-tracking)", lineHeight: 1.15, marginBottom: 18 }}>{t.title}</h1>
              <p style={{ fontSize: 16, color: "#4B5563", lineHeight: 1.7, marginBottom: 48, maxWidth: 480 }}>{t.sub}</p>

              <div style={{ display: "flex", flexDirection: "column", gap: 20, marginBottom: 56 }}>
                <ContactInfoBlock icon={CONTACT_ICONS.calendar} title={t.info.responseTitle} value={t.info.responseValue} />
                <ContactInfoBlock icon={CONTACT_ICONS.mail}     title={t.info.emailTitle}    value={t.info.emailValue} href={`mailto:${t.info.emailValue}`} />
              </div>

              <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "#111827", marginBottom: 20 }}>{t.expectTitle}</h2>
              <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
                {t.steps.map((step, i) => (
                  <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
                    <span style={{ width: 24, height: 24, borderRadius: "50%", background: "#2B5797", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 700, fontFamily: "'Inter', sans-serif", flexShrink: 0, marginTop: 1 }}>{i + 1}</span>
                    <span style={{ fontSize: 15, color: "#374151", lineHeight: 1.6 }}>{step}</span>
                  </li>
                ))}
              </ol>
            </div>

            {/* Right column — form card */}
            <div className="contact-card" style={{ background: "#F7F8FC", borderRadius: 10, padding: "40px 36px", border: "1px solid #EEF0F5" }}>
              {sent ? (
                <div style={{ textAlign: "center", padding: "48px 0" }}>
                  <div style={{ width: 56, height: 56, borderRadius: "50%", background: "#2B5797", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 20px", fontSize: 24, color: "#fff" }}>✓</div>
                  <p style={{ color: "#111827", fontSize: 18, fontFamily: "var(--font-display)", fontWeight: 700, lineHeight: 1.5 }}>{t.form.success}</p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                  {/* Honeypot — hidden from users, catches bots */}
                  <input type="text" name="website" style={{ display: "none" }} tabIndex="-1" autoComplete="off" />
                  {renderField("name", "text", true)}
                  {renderField("email", "email", true)}
                  {renderField("company", "text", false)}
                  {renderField("phone", "tel", false)}
                  <div>
                    <label style={labelStyle}>{t.form.timeline}</label>
                    <select
                      value={form.timeline}
                      onChange={e => setForm({ ...form, timeline: e.target.value })}
                      onFocus={() => setFocused("timeline")} onBlur={() => setFocused(null)}
                      style={{ ...iStyle("timeline"), appearance: "none", WebkitAppearance: "none", backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236B7280' stroke-width='1.6'><polyline points='1,1 6,6 11,1'/></svg>\")", backgroundRepeat: "no-repeat", backgroundPosition: "right 14px center", paddingRight: 38 }}
                    >
                      <option value="">{t.form.timelinePh}</option>
                      {t.form.timelineOpts.map((opt, i) => (
                        <option key={i} value={opt}>{opt}</option>
                      ))}
                    </select>
                  </div>
                  <div>
                    <label style={labelStyle}>{t.form.message}{reqMark}</label>
                    <textarea
                      value={form.message} required
                      placeholder={t.form.messagePh}
                      onChange={e => setForm({ ...form, message: e.target.value })}
                      onFocus={() => setFocused("message")} onBlur={() => setFocused(null)}
                      rows={5}
                      style={{ ...iStyle("message"), resize: "vertical", minHeight: 120 }}
                    />
                  </div>
                  {error && <p style={{ color: "#dc2626", fontSize: 13, fontFamily: "'Inter', sans-serif", margin: 0 }}>{error}</p>}
                  <button type="submit" disabled={loading} style={{
                    width: "100%", marginTop: 4,
                    background: loading ? "#5B8FD9" : "#2B5797", color: "#fff",
                    border: "none", borderRadius: 6, padding: "16px 24px",
                    fontSize: 15, fontWeight: 700, fontFamily: "'Inter', sans-serif",
                    letterSpacing: "0.02em", cursor: loading ? "not-allowed" : "pointer",
                    transition: "background 0.18s"
                  }}
                    onMouseEnter={e => { if (!loading) e.currentTarget.style.background = "#1e3f6e"; }}
                    onMouseLeave={e => { if (!loading) e.currentTarget.style.background = "#2B5797"; }}
                  >
                    {loading ? (lang === "es" ? "Enviando…" : "Sending…") : t.form.submit}
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ─── APP ROOT ───────────────────────────────────────────────── */
const PATH_TO_PAGE = { "/": "home", "/capabilities": "capabilities", "/partner": "partner", "/insights": "insights", "/contact": "contact" };
const PAGE_TO_PATH = { home: "/", capabilities: "/capabilities", partner: "/partner", insights: "/insights", contact: "/contact" };

function EdisikApp() {
  const [lang, setLang] = useState("es");
  const [page, setPage] = useState(PATH_TO_PAGE[window.location.pathname] || "home");
  const [key, setKey] = useState(0);

  useEffect(() => {
    const onPop = () => {
      const p = PATH_TO_PAGE[window.location.pathname] || "home";
      setPage(p);
      setKey(k => k + 1);
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  const navigate = (p) => {
    setPage(p);
    setKey(k => k + 1);
    window.scrollTo({ top: 0, behavior: "instant" });
    history.pushState(null, "", PAGE_TO_PATH[p] || "/");
  };

  return (
    <div>
      <EdisikNav lang={lang} setLang={setLang} navigate={navigate} page={page} />
      <main key={key} style={{ animation: "pageIn 0.3s ease both" }}>
        {page === "home"         && <HomePage         lang={lang} navigate={navigate} />}
        {page === "capabilities" && <CapabilitiesPage lang={lang} navigate={navigate} />}
        {page === "partner"      && <TechPartnerPage  lang={lang} navigate={navigate} />}
        {page === "insights"     && <InsightsPage     lang={lang} navigate={navigate} />}
        {page === "contact"      && <ContactPage      lang={lang} />}
      </main>
      <EdisikFooter lang={lang} navigate={navigate} />
    </div>
  );
}

window.EdisikNav = EdisikNav;
window.EdisikFooter = EdisikFooter;

const _rootEl = document.getElementById("root");
if (_rootEl) {
  ReactDOM.createRoot(_rootEl).render(<EdisikApp />);
}

if (typeof window !== "undefined" && typeof window.__edisikChromeReady === "function") {
  window.__edisikChromeReady();
}
