/* technology-page.jsx — /technology page composition.

   Structure:
     1   Nav
     2   TechHero (with animated BLAM Engine visual)
     3   LogoBar
     4   KeyFeatures (5 interactive scenes — multi-skill / shield / signature / RAG / omni)
     5   BLAMCore (merged BLAM + Skills Library — adaptive reasoning loop, built-ins,
                  knowledge RAG, and the +340-skills library with examples)
     6   Architecture (4 tabs — diagram / security / integrity / deployment)
     7   ComplianceByDesign (6 pillars grid)
     8   BuiltForBanking (reuses Partners from sections.jsx)
     9   CTAFinal + Footer + OrbChat
*/

(function () {
  const { useState, useEffect, useRef } = React;

  /* ============================================================
     HERO — eyebrow · headline · CTAs · animated BLAM engine
     ============================================================ */
  function TechHero({ t }) {
    return (
      <section className="tp-hero">
        <div className="hero-bg" aria-hidden>
          <div className="hero-dots"></div>
        </div>
        <div className="tp-hero-inner">
          <div className="tp-hero-copy reveal r-up">
            <div className="ap-eyebrow-tag">{t.technology.hero.eyebrow}</div>
            <h1 dangerouslySetInnerHTML={{ __html: t.technology.hero.headline }} />
            <p className="tp-hero-sub">{t.technology.hero.sub}</p>
            <div className="tp-hero-ctas">
              <a href="#demo" className="btn btn-primary">
                {t.technology.hero.cta_primary} <IconArrowRight size={16} stroke={2.5} />
              </a>
              <a href="#architecture" className="btn btn-ghost">
                <IconPlay size={12} /> {t.technology.hero.cta_secondary}
              </a>
            </div>
            <div className="hero-badges">
              <div className="hero-badges-row">
                <img className="hero-badge-logo" src="/img/69bb038edff91be56b3b560d_microsoft logo.svg" alt="Microsoft Partner" />
                <img className="hero-badge-logo" src="/img/69bb038e8a0406623c8a4fb5_meta logo.svg" alt="Meta Business Partner" />
                <img className="hero-badge-logo hero-badge-medal" src="/img/69c1577b05ed32e8991f15ce_SELLO_DORADO_150DPI 2.svg" alt="Fintech Americas Winner 2026" />
              </div>
            </div>
          </div>

          <div className="tp-hero-engine reveal r-up">
            <BlamEngineVisual />
          </div>

          <div className="ha-scrollhint" aria-hidden>
            <span>scroll</span>
            <span className="ha-scrollhint-line"></span>
          </div>
        </div>
      </section>
    );
  }

  /* ------------------------------------------------------------
     Animated BLAM Engine visual for the hero. SVG + CSS:
       · Central pulsing BLAM orb
       · Three concentric protection rings (Shield · Guardrails · Audit)
       · 6 orbiting layer labels that fade in sequentially
       · Channel streams entering from the left, action streams exiting to the right
       · Floating KPI chips
     ----------------------------------------------------------- */
  function BlamEngineVisual() {
    /* Layer labels orbit around the rings, evenly spread on a 360° circle */
    const LAYERS = [
      { t: 'PII Anonymization', a: -90 },
      { t: 'Intent Router',     a: -30 },
      { t: 'Reasoning Loop',    a:  30 },
      { t: 'Signature',         a:  90 },
      { t: 'Execution',         a: 150 },
      { t: 'Audit',             a: 210 },
    ];
    return (
      <div className="tp-engine">
        <div className="tp-engine-stage" aria-hidden>
          {/* Three concentric protection rings — color coded only */}
          <div className="tp-engine-ring tp-engine-ring-1"></div>
          <div className="tp-engine-ring tp-engine-ring-2"></div>
          <div className="tp-engine-ring tp-engine-ring-3"></div>

          {/* Token streams — bright glowing dots traveling in / out */}
          <span className="tp-engine-stream tp-engine-stream-in"  style={{ '--y': '22%', '--d': '0s'   }}></span>
          <span className="tp-engine-stream tp-engine-stream-in"  style={{ '--y': '50%', '--d': '.8s'  }}></span>
          <span className="tp-engine-stream tp-engine-stream-in"  style={{ '--y': '78%', '--d': '1.6s' }}></span>
          <span className="tp-engine-stream tp-engine-stream-out" style={{ '--y': '32%', '--d': '.4s'  }}></span>
          <span className="tp-engine-stream tp-engine-stream-out" style={{ '--y': '68%', '--d': '1.2s' }}></span>

          {/* Layer labels orbiting on a fixed radius — minimal text with
              a small lime dot accent, no pill background */}
          {LAYERS.map((l, i) => (
            <span
              key={i}
              className="tp-engine-layer"
              style={{
                '--a': `${l.a}deg`,
                animationDelay: `${0.4 + i * 0.25}s`,
              }}
            >
              <span className="tp-engine-layer-dot" aria-hidden></span>
              <span className="tp-engine-layer-text">{l.t}</span>
            </span>
          ))}

          {/* Central BLAM core */}
          <div className="tp-engine-core">
            <div className="tp-engine-core-pulse"></div>
            <div className="tp-engine-core-pulse tp-engine-core-pulse-2"></div>
            <div className="tp-engine-core-glyph">
              <span className="tp-engine-core-letter">B</span>
              <span className="tp-engine-core-letter">L</span>
              <span className="tp-engine-core-letter">A</span>
              <span className="tp-engine-core-letter">M</span>
            </div>
            <div className="tp-engine-core-sub">Banking Large Action Model</div>
          </div>

          {/* KPI chips floating around */}
          <span className="tp-engine-kpi tp-engine-kpi-1">
            <span className="tp-engine-kpi-v">≤ 20</span>
            <span className="tp-engine-kpi-l">iter / loop</span>
          </span>
          <span className="tp-engine-kpi tp-engine-kpi-2">
            <span className="tp-engine-kpi-v">&lt; 900ms</span>
            <span className="tp-engine-kpi-l">latencia p95</span>
          </span>
          <span className="tp-engine-kpi tp-engine-kpi-3">
            <span className="tp-engine-kpi-v">99.9%</span>
            <span className="tp-engine-kpi-l">uptime SLA</span>
          </span>
        </div>
      </div>
    );
  }

  /* ============================================================
     KEY FEATURES — 5 scenes, tabs on the left, visual on the right
     ============================================================ */
  function KeyFeatures({ t }) {
    const feats = t.technology.features.items;
    const [active, setActive] = useState(0);
    const f = feats[active];

    return (
      <section className="tp-feats sect on-cream">
        <div className="sect-inner">
          <div className="sect-head reveal">
            <div className="eyebrow">{t.technology.features.eyebrow}</div>
            <h2 dangerouslySetInnerHTML={{ __html: t.technology.features.title }} />
            <p className="sect-sub">{t.technology.features.sub}</p>
          </div>

          <div className="tp-feats-grid reveal">
            <div className="tp-feats-tabs">
              {feats.map((it, i) => (
                <button
                  key={i}
                  type="button"
                  className={`tp-feats-tab ${active === i ? 'active' : ''}`}
                  onClick={() => setActive(i)}
                  aria-pressed={active === i}
                >
                  <span className="tp-feats-tab-n">{String(i + 1).padStart(2, '0')}</span>
                  <span className="tp-feats-tab-body">
                    <span className="tp-feats-tab-t">{it.t}</span>
                    <span className="tp-feats-tab-d">{it.d}</span>
                  </span>
                  <span className="tp-feats-tab-mark" aria-hidden>{active === i ? '●' : '○'}</span>
                </button>
              ))}
            </div>

            <div className="tp-feats-scene" key={active}>
              <FeatureScene featKey={f.key} f={f} />
            </div>
          </div>
        </div>
      </section>
    );
  }

  function FeatureScene({ featKey, f }) {
    if (featKey === 'multi') return <SceneMultiSkill f={f} />;
    if (featKey === 'shield') return <SceneShield f={f} />;
    if (featKey === 'signature') return <SceneSignature f={f} />;
    if (featKey === 'rag') return <SceneRAG f={f} />;
    if (featKey === 'omni') return <SceneOmni f={f} />;
    return null;
  }

  function SceneMultiSkill({ f }) {
    return (
      <div className="tp-scene tp-scene-multi">
        <div className="tp-scene-user">
          <div className="tp-scene-user-lbl">{f.user_label}</div>
          <div className="tp-scene-user-msg">{f.user_msg}</div>
          <div className="tp-scene-user-meta">{f.user_meta}</div>
        </div>
        <div className="tp-scene-engine">
          <div className="tp-scene-engine-h">{f.engine_h}</div>
          <div className="tp-scene-skills">
            {f.skills.map((s, i) => (
              <div key={i} className="tp-scene-skill" style={{ animationDelay: `${i * .1}s` }}>
                <div className="tp-scene-skill-h">
                  <span className="tp-scene-skill-n">{s.n}</span>
                  <span className="tp-scene-skill-st">done</span>
                </div>
                <div className="tp-scene-skill-bar"><span></span></div>
                <div className="tp-scene-skill-m">{s.m}</div>
              </div>
            ))}
          </div>
          <div className="tp-scene-engine-foot">{f.engine_foot}</div>
        </div>
      </div>
    );
  }

  function SceneShield({ f }) {
    return (
      <div className="tp-scene tp-scene-shield">
        <div className="tp-scene-shield-msg">
          <div className="tp-scene-shield-lbl">{f.msg_label}</div>
          <div className="tp-scene-shield-text" dangerouslySetInnerHTML={{ __html: f.msg_html }} />
          <div className="tp-scene-shield-meta" dangerouslySetInnerHTML={{ __html: f.msg_meta }} />
        </div>
        <div className="tp-scene-shield-layers">
          {f.layers.map((l, i) => (
            <div key={i} className="tp-scene-shield-row" style={{ animationDelay: `${i * .12}s` }}>
              <span className="tp-scene-shield-ic">✓</span>
              <span>{l}</span>
            </div>
          ))}
        </div>
        <div className="tp-scene-shield-audit">
          <div className="tp-scene-shield-audit-h">{f.audit_h}</div>
          {f.audit_lines.map((line, i) => (
            <div key={i} className="tp-scene-shield-audit-l" style={{ animationDelay: `${.4 + i * .08}s` }}>
              <span className="t">{line.t}</span>
              <span className={`tag ${line.tag === 'INFO' ? 'info' : line.tag === 'OK' ? 'ok' : 'warn'}`}>{line.tag}</span>
              <span>{line.msg}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  function SceneSignature({ f }) {
    return (
      <div className="tp-scene tp-scene-sig">
        <div className="tp-scene-sig-card">
          <div className="tp-scene-sig-badge">🔐 {f.badge}</div>
          <div className="tp-scene-sig-rows">
            {f.rows.map((r, i) => (
              <div key={i} className="tp-scene-sig-row">
                <span>{r.k}</span>
                <strong>{r.v}</strong>
              </div>
            ))}
          </div>
        </div>
        <div className="tp-scene-sig-steps">
          <div className="tp-scene-sig-h">{f.steps_h}</div>
          {f.steps.map((s, i) => (
            <div key={i} className="tp-scene-sig-step" style={{ animationDelay: `${.1 + i * .12}s` }}>
              <span className="tp-scene-sig-dot">{i + 1}</span>
              <div>
                <div className="tp-scene-sig-t">{s.t}</div>
                <div className="tp-scene-sig-d">{s.d}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="tp-scene-sig-badges">
          {f.badges.map((b, i) => (
            <span key={i} className="tp-scene-sig-pill">{b}</span>
          ))}
        </div>
      </div>
    );
  }

  function SceneRAG({ f }) {
    return (
      <div className="tp-scene tp-scene-rag">
        <div className="tp-scene-rag-flow">
          {f.pipeline.map((p, i) => (
            <React.Fragment key={i}>
              <div className="tp-scene-rag-stage" style={{ animationDelay: `${i * .15}s` }}>
                <div className="tp-scene-rag-ic">{p.ic}</div>
                <div className="tp-scene-rag-t">{p.t}</div>
                <div className="tp-scene-rag-d">{p.d}</div>
              </div>
              {i < f.pipeline.length - 1 && <div className="tp-scene-rag-arrow">→</div>}
            </React.Fragment>
          ))}
        </div>
        <div className="tp-scene-rag-docs">
          <div className="tp-scene-rag-docs-h">{f.docs_h}</div>
          {f.docs.map((d, i) => (
            <div key={i} className={`tp-scene-rag-doc ${i === 0 ? 'active' : ''}`} style={{ animationDelay: `${.3 + i * .1}s` }}>
              <span className="tp-scene-rag-doc-ic">📄</span>
              <div className="tp-scene-rag-doc-b">
                <div className="tp-scene-rag-doc-n">{d.n}</div>
                <div className="tp-scene-rag-doc-q">{d.q}</div>
                <div className="tp-scene-rag-doc-s">{d.s}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="tp-scene-rag-kpis">
          {f.kpis.map((k, i) => (
            <div key={i} className="tp-scene-rag-kpi">
              <div className="tp-scene-rag-kpi-v">{k.v}</div>
              <div className="tp-scene-rag-kpi-l">{k.l}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  /* Inline SVG logos for the omni-channel scene — brand-accurate marks
     rendered at 22px inside a 36×36 white tile. */
  const CHANNEL_LOGOS = {
    whatsapp: (
      <svg viewBox="0 0 32 32" width="22" height="22" aria-hidden>
        <path fill="#25D366" d="M16 .5C7.44.5.5 7.44.5 16c0 2.82.74 5.46 2.03 7.75L.5 31.5l7.94-2.05A15.42 15.42 0 0 0 16 31.5C24.56 31.5 31.5 24.56 31.5 16S24.56.5 16 .5Z"/>
        <path fill="#fff" d="M23.42 19.43c-.31-.16-1.84-.91-2.13-1.01-.29-.11-.5-.16-.71.16-.21.31-.81 1.01-.99 1.22-.18.21-.36.23-.67.08-.31-.16-1.31-.48-2.49-1.54-.92-.82-1.54-1.83-1.72-2.14-.18-.31-.02-.48.13-.64.14-.14.31-.36.47-.55.16-.18.21-.31.31-.52.11-.21.05-.39-.03-.55-.08-.16-.71-1.71-.97-2.34-.26-.61-.52-.53-.71-.54-.18-.01-.39-.01-.6-.01-.21 0-.55.08-.84.39-.29.31-1.1 1.08-1.1 2.62 0 1.55 1.13 3.05 1.29 3.26.16.21 2.23 3.4 5.4 4.77.75.32 1.34.51 1.8.66.76.24 1.45.21 1.99.13.61-.09 1.84-.75 2.1-1.48.26-.73.26-1.36.18-1.48-.08-.13-.29-.21-.6-.36Z"/>
      </svg>
    ),
    webchat: (
      <svg viewBox="0 0 32 32" width="22" height="22" aria-hidden>
        <path fill="#004edd" d="M16 4C9.37 4 4 8.7 4 14.5c0 3.36 1.83 6.34 4.66 8.27L7 28l5.34-2.6c1.16.32 2.39.5 3.66.5 6.63 0 12-4.7 12-10.5S22.63 4 16 4Z"/>
        <circle cx="11" cy="14.5" r="1.6" fill="#fff"/>
        <circle cx="16" cy="14.5" r="1.6" fill="#fff"/>
        <circle cx="21" cy="14.5" r="1.6" fill="#fff"/>
      </svg>
    ),
    voice: (
      <svg viewBox="0 0 32 32" width="22" height="22" aria-hidden>
        <rect x="13" y="5" width="6" height="14" rx="3" fill="#01373d"/>
        <path d="M9 14a7 7 0 0 0 14 0" stroke="#01373d" strokeWidth="2" fill="none" strokeLinecap="round"/>
        <path d="M16 21v4M12 25h8" stroke="#01373d" strokeWidth="2" strokeLinecap="round"/>
      </svg>
    ),
    telegram: (
      <svg viewBox="0 0 32 32" width="22" height="22" aria-hidden>
        <circle cx="16" cy="16" r="16" fill="#26A5E4"/>
        <path fill="#fff" d="m7.5 15.55 16.1-6.2c.75-.27 1.4.18 1.16 1.31l-2.74 12.92c-.2.92-.76 1.14-1.53.71l-4.23-3.12-2.04 1.97c-.23.23-.42.42-.85.42l.3-4.31 7.86-7.1c.34-.3-.08-.47-.53-.18l-9.71 6.11-4.18-1.3c-.91-.29-.93-.91.39-1.34Z"/>
      </svg>
    ),
    messenger: (
      <svg viewBox="0 0 32 32" width="22" height="22" aria-hidden>
        <defs>
          <linearGradient id="msgr-g" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#00B2FF"/>
            <stop offset="1" stopColor="#006AFF"/>
          </linearGradient>
        </defs>
        <path fill="url(#msgr-g)" d="M16 3C8.6 3 3 8.46 3 15.5c0 3.78 1.58 7.06 4.18 9.34V29l3.84-2.11c1.55.43 3.22.61 4.98.61 7.4 0 13-5.46 13-12.5S23.4 3 16 3Z"/>
        <path fill="#fff" d="m8.5 18.2 4.18-6.62 3.86 3.16 3.78-3.16 3.18 6.62-3.86-3.13-3.78 3.13-4.18-3.16-3.18 3.16Z" transform="translate(.5 .2)"/>
      </svg>
    ),
    teams: (
      <svg viewBox="0 0 32 32" width="22" height="22" aria-hidden>
        <rect x="3" y="8" width="16" height="16" rx="2" fill="#5059C9"/>
        <text x="11" y="20.5" textAnchor="middle" fontFamily="Arial,sans-serif" fontWeight="700" fontSize="13" fill="#fff">T</text>
        <circle cx="24" cy="13" r="4" fill="#7B83EB"/>
        <path d="M20 18h8v6a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3v-6Z" fill="#7B83EB"/>
      </svg>
    ),
    ios: (
      <svg viewBox="0 0 32 32" width="22" height="22" aria-hidden>
        <path fill="#000" d="M22.4 16.9c0-3.5 2.85-5.18 2.98-5.26-1.62-2.37-4.14-2.7-5.04-2.74-2.14-.22-4.18 1.26-5.27 1.26-1.1 0-2.78-1.23-4.57-1.2-2.35.04-4.52 1.37-5.73 3.47-2.44 4.22-.62 10.46 1.76 13.88 1.16 1.68 2.55 3.56 4.38 3.49 1.76-.07 2.43-1.13 4.55-1.13 2.12 0 2.72 1.13 4.58 1.1 1.89-.03 3.09-1.7 4.25-3.39 1.34-1.94 1.9-3.82 1.93-3.92-.04-.02-3.7-1.42-3.74-5.62ZM18.8 6.6c.97-1.18 1.62-2.82 1.44-4.45-1.39.06-3.07.93-4.07 2.1-.9 1.04-1.69 2.71-1.48 4.3 1.55.12 3.13-.79 4.11-1.95Z"/>
      </svg>
    ),
    android: (
      <svg viewBox="0 0 32 32" width="22" height="22" aria-hidden>
        <path fill="#3DDC84" d="M21.95 12.4 23.7 9.4a.4.4 0 0 0-.69-.4l-1.78 3.06a10.85 10.85 0 0 0-10.46 0L8.99 9.01a.4.4 0 0 0-.69.4l1.75 3a9.6 9.6 0 0 0-4.55 7.6h21a9.6 9.6 0 0 0-4.55-7.6Zm-10.2 4.6a1 1 0 1 1 0-2.01 1 1 0 0 1 0 2.01Zm8.5 0a1 1 0 1 1 0-2.01 1 1 0 0 1 0 2.01Z"/>
      </svg>
    ),
  };

  function SceneOmni({ f }) {
    return (
      <div className="tp-scene tp-scene-omni">
        <div className="tp-scene-omni-badge">{f.badge}</div>
        <div className="tp-scene-omni-grid">
          {f.channels.map((c, i) => (
            <div
              key={i}
              className={`tp-scene-omni-card ${c.active ? 'active' : ''}`}
              style={{ animationDelay: `${i * .06}s` }}
            >
              <div className="tp-scene-omni-ico" style={{ '--c': c.color }}>
                {CHANNEL_LOGOS[c.logo] || null}
              </div>
              <div className="tp-scene-omni-n">{c.n}</div>
              <div className="tp-scene-omni-d">{c.d}</div>
            </div>
          ))}
        </div>
        <div className="tp-scene-omni-foot" dangerouslySetInnerHTML={{ __html: f.foot }} />
      </div>
    );
  }

  /* ============================================================
     BLAM CORE — adaptive reasoning loop + built-ins + RAG + +340 skills
     ============================================================ */
  /* Skills library data — names + descriptions + category code.
     Source of truth for the BLAM section's skill cards. */
  const TECH_SKILLS = [
    // Cuentas
    { c: 'acc',   n: 'Saldo y movimientos',     d: 'Resumen de cuentas y últimos movimientos' },
    { c: 'acc',   n: 'Transferencias',          d: 'Entre cuentas propias o a terceros' },
    { c: 'acc',   n: 'Apertura de cuenta',      d: 'Onboarding 100% conversacional' },
    { c: 'acc',   n: 'Certificado de saldo',    d: 'Genera y entrega PDF firmado' },
    { c: 'acc',   n: 'Cambio de dirección',     d: 'KYC + actualización de datos' },
    { c: 'acc',   n: 'Estado de cuenta',        d: 'Multi-período, export PDF o Excel' },
    { c: 'acc',   n: 'Actualizar contacto',     d: 'Email, teléfono, dirección postal' },
    { c: 'acc',   n: 'Cambio de password',      d: 'Reset seguro con MFA' },
    // Tarjetas
    { c: 'card',  n: 'Pagar tarjeta',           d: 'Mínimo, total o monto custom' },
    { c: 'card',  n: 'Aumentar límite',         d: 'Score + aprobación on-the-fly' },
    { c: 'card',  n: 'Bloquear / desbloquear',  d: 'Por robo, viaje o sospecha' },
    { c: 'card',  n: 'Reset PIN',               d: 'Sin call center, sin sucursal' },
    { c: 'card',  n: 'Travel notice',           d: 'Aviso de viaje multi-país' },
    { c: 'card',  n: 'Solicitar tarjeta',       d: 'Adicional, upgrade, virtual' },
    { c: 'card',  n: 'Reposición por robo',     d: 'Bloqueo + reimpresión + delivery' },
    { c: 'card',  n: 'Programa de recompensas', d: 'Puntos, millas y canjes' },
    // Pagos
    { c: 'pay',   n: 'Pagar servicios',         d: 'Luz, agua, gas, internet, impuestos' },
    { c: 'pay',   n: 'Recargar celular',        d: 'Multi-operador con confirmación' },
    { c: 'pay',   n: 'PIX / SPEI / CCE',        d: 'Multi-país, real-time' },
    { c: 'pay',   n: 'Programar pagos',         d: 'Recurrentes y futuros' },
    { c: 'pay',   n: 'Pago de impuestos',       d: 'AFIP, DIAN, SAT, SUNAT' },
    { c: 'pay',   n: 'FX / Cambio de divisa',   d: 'Spot, forward, con tasa en vivo' },
    { c: 'pay',   n: 'Comprobantes',            d: 'Envío automatizado por canal' },
    // Préstamos
    { c: 'loan',  n: 'Oferta personalizada',    d: 'Pre-aprobado con score en vivo' },
    { c: 'loan',  n: 'Simular cuota',           d: 'Plazo, tasa, sistema francés' },
    { c: 'loan',  n: 'Aceptar préstamo',        d: 'Acreditación inmediata' },
    { c: 'loan',  n: 'Refinanciar',             d: 'Nuevo plazo, nueva cuota' },
    { c: 'loan',  n: 'Pago de cuota',           d: 'Adelantado, regular o extensión' },
    { c: 'loan',  n: 'Estado del préstamo',     d: 'Cuotas restantes, próximo vencimiento' },
    // Cobranzas
    { c: 'coll',  n: 'Recordatorio de cuota',   d: 'Outbound con respuesta interactiva' },
    { c: 'coll',  n: 'Plan de pago',            d: 'Negociación auto + escalado humano' },
    { c: 'coll',  n: 'Promesa de pago',         d: 'Compromiso registrado en core' },
    { c: 'coll',  n: 'Recupero late-stage',     d: 'Segmentación + tono adaptativo' },
    { c: 'coll',  n: 'Link de pago',            d: 'Compartible, expira en 24h' },
    // Fraude
    { c: 'fraud', n: 'Verificar transacción',   d: 'Push + chat para validar consumo' },
    { c: 'fraud', n: 'Reporte de fraude',       d: 'Bloqueo + ticket en tiempo real' },
    { c: 'fraud', n: 'Reclamar contracargo',    d: 'Dispute con SLA' },
    { c: 'fraud', n: 'Phishing flag',           d: 'Detección de mensajes sospechosos' },
    { c: 'fraud', n: 'Bloquear dispositivo',    d: 'Push + sessions revoke' },
    { c: 'fraud', n: 'Activar MFA',             d: 'TOTP, SMS OTP o biométrica' },
    // Onboarding
    { c: 'onb',   n: 'KYC conversacional',      d: 'Doc + selfie + liveness' },
    { c: 'onb',   n: 'Verificación biométrica', d: 'Match + score + audit' },
    { c: 'onb',   n: 'Activación de tarjeta',   d: 'Primer uso guiado' },
    { c: 'onb',   n: 'Alta de servicio',        d: 'Home banking, app, push' },
    { c: 'onb',   n: 'Subir documento',         d: 'Foto, PDF, validación OCR' },
    { c: 'onb',   n: 'Estado de KYC',           d: 'Pendiente, aprobado, observado' },
    // Soporte
    { c: 'supp',  n: 'FAQ + base de conocimiento', d: 'Respuestas con citas a fuente' },
    { c: 'supp',  n: 'Estado de reclamo',       d: 'Lookup en tiempo real + ETA' },
    { c: 'supp',  n: 'Agendar sucursal',        d: 'Geo + horarios + recordatorio' },
    { c: 'supp',  n: 'Encuesta CSAT/NPS',       d: 'In-conversation, multi-idioma' },
    { c: 'supp',  n: 'Chat con humano',         d: 'Handoff con contexto completo' },
    { c: 'supp',  n: 'Análisis de gastos',      d: 'Categorías + insights mensual' },
  ];

  function BlamCore({ t }) {
    const data = t.technology.blam;
    const [skillCat, setSkillCat] = useState('acc');
    /* Categories map: code → { label, tone, total } */
    const CATS = [
      { k: 'acc',   l: 'Cuentas',   tone: 'lime',  total: 52 },
      { k: 'card',  l: 'Tarjetas',  tone: 'lilac', total: 48 },
      { k: 'pay',   l: 'Pagos',     tone: 'sand',  total: 64 },
      { k: 'loan',  l: 'Préstamos', tone: 'lime',  total: 38 },
      { k: 'coll',  l: 'Cobranzas', tone: 'lilac', total: 32 },
      { k: 'fraud', l: 'Fraude',    tone: 'sand',  total: 41 },
      { k: 'onb',   l: 'Onboarding', tone: 'lime',  total: 36 },
      { k: 'supp',  l: 'Soporte',   tone: 'lilac', total: 29 },
    ];
    const filtered = TECH_SKILLS.filter(s => s.c === skillCat);
    const activeCat = CATS.find(c => c.k === skillCat);
    const visibleCount = filtered.length;
    const totalInCat = activeCat?.total || filtered.length;
    const moreCount = Math.max(0, totalInCat - visibleCount);

    return (
      <section className="tp-blam sect on-dark-deep" id="blam">
        <div className="sect-inner">
          <div className="sect-head reveal">
            <div className="eyebrow on-dark">{data.eyebrow}</div>
            <h2 dangerouslySetInnerHTML={{ __html: data.title }} />
            <p className="sect-sub on-dark-sub">{data.sub}</p>
          </div>

          {/* BLAM components — 3-up grid: Reasoning Loop / Built-ins + RAG / Skills */}
          <div className="tp-blam-grid reveal">
            <div className="tp-blam-card tp-blam-loop">
              <div className="tp-blam-card-eyebrow">{data.loop.eyebrow}</div>
              <h3 className="tp-blam-card-t">{data.loop.title}</h3>
              <p className="tp-blam-card-d">{data.loop.desc}</p>
              <div className="tp-blam-loop-vis" aria-hidden>
                {data.loop.nodes.map((n, i) => (
                  <span key={i} className={`tp-blam-loop-node tp-blam-loop-node-${i}`}>{n}</span>
                ))}
                <div className="tp-blam-loop-core">≤20</div>
                <svg className="tp-blam-loop-orbit" viewBox="0 0 200 200" aria-hidden>
                  <circle cx="100" cy="100" r="86" />
                </svg>
              </div>
              <div className="tp-blam-card-meta">{data.loop.meta}</div>
            </div>

            <div className="tp-blam-card tp-blam-rag">
              <div className="tp-blam-card-eyebrow">{data.rag.eyebrow}</div>
              <h3 className="tp-blam-card-t">{data.rag.title}</h3>
              <p className="tp-blam-card-d">{data.rag.desc}</p>
              <ul className="tp-blam-rag-list">
                {data.rag.points.map((p, i) => (
                  <li key={i}>
                    <span className="tp-blam-rag-ic"><IconCheck size={12} stroke={3} /></span>
                    {p}
                  </li>
                ))}
              </ul>
              <div className="tp-blam-card-meta">{data.rag.meta}</div>
            </div>

            <div className="tp-blam-card tp-blam-skills-card">
              <div className="tp-blam-card-eyebrow">{data.skills.eyebrow}</div>
              <h3 className="tp-blam-card-t">
                <span className="tp-blam-skills-n">+340</span>{' '}
                {data.skills.title}
              </h3>
              <p className="tp-blam-card-d">{data.skills.desc}</p>
              <div className="tp-blam-skills-stats">
                {data.skills.stats.map((s, i) => (
                  <div key={i} className="tp-blam-skills-stat">
                    <div className="tp-blam-skills-stat-v">{s.v}</div>
                    <div className="tp-blam-skills-stat-l">{s.l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Skills library showcase — category filter + cards grid */}
          <div className="tp-skills reveal">
            <div className="tp-skills-head">
              <div className="tp-skills-head-l">
                <div className="tp-skills-h">{data.skills.library_h}</div>
                <div className="tp-skills-sub">{data.skills.library_sub}</div>
              </div>
              <div className="tp-skills-counter">
                <span className="tp-skills-counter-n">{visibleCount}</span>
                <span className="tp-skills-counter-l">de {totalInCat} skills</span>
              </div>
            </div>
            <div className="tp-skills-cats">
              {CATS.map((c) => (
                <button
                  key={c.k}
                  type="button"
                  className={`tp-skills-cat tone-${c.tone} ${skillCat === c.k ? 'active' : ''}`}
                  onClick={() => setSkillCat(c.k)}
                  aria-pressed={skillCat === c.k}
                >
                  <span className="tp-skills-cat-n">{c.l}</span>
                  <span className="tp-skills-cat-c">{c.total}</span>
                </button>
              ))}
            </div>
            <div className="tp-skills-grid" key={skillCat}>
              {filtered.map((s, i) => {
                const c = CATS.find((cc) => cc.k === s.c);
                return (
                  <div
                    key={`${skillCat}-${i}`}
                    className={`tp-skill-card tone-${c?.tone || 'lime'}`}
                    style={{ animationDelay: `${i * 22}ms` }}
                  >
                    <div className="tp-skill-card-tag">{c?.l}</div>
                    <div className="tp-skill-card-n">{s.n}</div>
                    <div className="tp-skill-card-d">{s.d}</div>
                  </div>
                );
              })}
              {moreCount > 0 && (
                <div className="tp-skill-card tp-skill-card-more">
                  <div className="tp-skill-card-more-n">+{moreCount}</div>
                  <div className="tp-skill-card-more-l">skills más en esta categoría</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* ============================================================
     ARCHITECTURE — 4 tabs (diagram / security / integrity / deployment)
     ============================================================ */
  function Architecture({ t }) {
    const data = t.technology.architecture;
    const [tab, setTab] = useState(0);
    const tabs = data.tabs;

    return (
      <section className="tp-arch sect on-cream" id="architecture">
        <div className="sect-inner">
          <div className="sect-head reveal">
            <div className="eyebrow">{data.eyebrow}</div>
            <h2 dangerouslySetInnerHTML={{ __html: data.title }} />
            <p className="sect-sub">{data.sub}</p>
          </div>

          <div className="tp-arch-tabs reveal">
            {tabs.map((tb, i) => (
              <button
                key={i}
                type="button"
                className={`tp-arch-tab ${tab === i ? 'active' : ''}`}
                onClick={() => setTab(i)}
                aria-pressed={tab === i}
              >
                <span className="tp-arch-tab-ic">{tb.ic}</span>
                <span className="tp-arch-tab-body">
                  <span className="tp-arch-tab-t">{tb.t}</span>
                  <span className="tp-arch-tab-d">{tb.d}</span>
                </span>
              </button>
            ))}
          </div>

          <div className="tp-arch-stage reveal" key={tab}>
            {tab === 0 && <ArchDiagram data={data.diagram} />}
            {tab === 1 && <ArchSecurity data={data.security} />}
            {tab === 2 && <ArchIntegrity data={data.integrity} />}
            {tab === 3 && <ArchDeployment data={data.deployment} />}
          </div>
        </div>
      </section>
    );
  }

  function ArchDiagram({ data }) {
    return (
      <div className="tp-arch-diagram">
        <div className="tp-arch-diagram-l">
          <h3 dangerouslySetInnerHTML={{ __html: data.subtitle }} />
          <p className="tp-arch-diagram-p">{data.body}</p>
          <p className="tp-arch-diagram-p">{data.body2}</p>
          <div className="tp-arch-kpis">
            {data.kpis.map((k, i) => (
              <div key={i} className="tp-arch-kpi">
                <div className="tp-arch-kpi-l">{k.l}</div>
                <div className="tp-arch-kpi-v">{k.v}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="tp-arch-diagram-r">
          <div className="tp-arch-perimeter">
            <div className="tp-arch-perim-tag">🛡 {data.perimeter}</div>
            <div className="tp-arch-flow">
              <div className="tp-arch-node tp-arch-node-user">{data.entry}</div>
              <div className="tp-arch-wire"></div>
              {data.layers.map((l, i) => (
                <React.Fragment key={i}>
                  <div className={`tp-arch-node ${l.cls || ''}`}>
                    <span className="tp-arch-node-n">{l.n || i + 1}</span>
                    <div className="tp-arch-node-body">
                      <div className="tp-arch-node-t">{l.t}</div>
                      {l.chips && (
                        <div className="tp-arch-node-chips">
                          {l.chips.map((c, j) => (
                            <span key={j} className={`tp-arch-node-chip ${l.cls === 'shield' ? 'shi' : ''}`}>{c}</span>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>
                  <div className={`tp-arch-wire ${l.dashedAfter ? 'dashed' : ''}`}></div>
                </React.Fragment>
              ))}
            </div>
            <div className="tp-arch-perim-foot">{data.obs}</div>
          </div>
        </div>
      </div>
    );
  }

  function ArchSecurity({ data }) {
    return (
      <div className="tp-arch-sec">
        <div className="tp-arch-sec-l">
          <h3 dangerouslySetInnerHTML={{ __html: data.subtitle }} />
          <p className="tp-arch-diagram-p">{data.body}</p>
          <div className="tp-arch-sec-items">
            {data.items.map((it, i) => (
              <div key={i} className="tp-arch-sec-item">
                <span className="tp-arch-sec-ic">✓</span>
                <div>
                  <div className="tp-arch-sec-t">{it.t}</div>
                  <div className="tp-arch-sec-d">{it.d}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="tp-arch-sec-certs-h">{data.certs_h}</div>
          <div className="tp-arch-sec-certs">
            {data.certs.map((c, i) => (
              <div key={i} className="tp-arch-sec-cert">
                <span className="tp-arch-sec-cert-flag">{c.flag}</span>
                <span className="tp-arch-sec-cert-n">{c.n}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="tp-arch-sec-r">
          <div className="tp-arch-shield-vis" aria-hidden>
            <div className="tp-arch-shield-ring tp-arch-shield-ring-1"></div>
            <div className="tp-arch-shield-ring tp-arch-shield-ring-2"></div>
            <div className="tp-arch-shield-ring tp-arch-shield-ring-3"></div>
            {/* Incoming "threats" — particles travel from the outer ring
                inward and burst when they hit the shield. */}
            {[
              { a:   0, d: '0s',    tone: 'lime'  },
              { a:  45, d: '.3s',   tone: 'lilac' },
              { a:  90, d: '.6s',   tone: 'lime'  },
              { a: 135, d: '.9s',   tone: 'sand'  },
              { a: 180, d: '1.2s',  tone: 'lime'  },
              { a: 225, d: '1.5s',  tone: 'lilac' },
              { a: 270, d: '1.8s',  tone: 'lime'  },
              { a: 315, d: '2.1s',  tone: 'sand'  },
            ].map((t, i) => (
              <span
                key={i}
                className={`tp-arch-shield-threat tone-${t.tone}`}
                style={{ '--angle': `${t.a}deg`, animationDelay: t.d }}
              />
            ))}
            <div className="tp-arch-shield-core">🛡</div>
          </div>
          <div className="tp-arch-sec-ticker">
            {data.ticker.map((t, i) => (
              <div key={i} className={`tp-arch-sec-tick ${t.tone || ''}`}>
                <div className="tp-arch-sec-tick-l">{t.l}</div>
                <div className="tp-arch-sec-tick-v">{t.v}</div>
                <div className="tp-arch-sec-tick-d">{t.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  function ArchIntegrity({ data }) {
    return (
      <div className="tp-arch-int">
        <div className="tp-arch-int-l">
          <h3 dangerouslySetInnerHTML={{ __html: data.subtitle }} />
          <p className="tp-arch-diagram-p">{data.body}</p>
          <p className="tp-arch-diagram-p">{data.body2}</p>
          <div className="tp-arch-int-contract">
            <div className="tp-arch-int-contract-h">{data.contract_h}</div>
            <pre className="tp-arch-int-contract-code">{data.contract_code}</pre>
          </div>
        </div>
        <div className="tp-arch-int-r">
          <div className="tp-arch-int-log">
            <div className="tp-arch-int-log-h">{data.log_h}</div>
            {data.log_lines.map((line, i) => (
              <div key={i} className="tp-arch-int-log-l" style={{ animationDelay: `${i * .08}s` }}>
                <span className="t">{line.t}</span>
                <span className={`tag ${line.tag === 'INFO' ? 'info' : line.tag === 'OK' ? 'ok' : 'warn'}`}>{line.tag}</span>
                <span>{line.msg}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  function ArchDeployment({ data }) {
    return (
      <div className="tp-arch-dep">
        <div className="tp-arch-dep-l">
          <h3 dangerouslySetInnerHTML={{ __html: data.subtitle }} />
          <p className="tp-arch-diagram-p">{data.body}</p>
          <p className="tp-arch-diagram-p">{data.body2}</p>
          <div className="tp-arch-dep-feats">
            {data.feats.map((f, i) => (
              <div key={i} className="tp-arch-dep-feat">
                <div className="tp-arch-dep-feat-t">{f.t}</div>
                <div className="tp-arch-dep-feat-d">{f.d}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="tp-arch-dep-r">
          <div className="tp-arch-cloud">
            <div className="tp-arch-cloud-h">
              <span>Microsoft Azure · {data.regions_label}</span>
              <div className="tp-arch-cloud-regions">
                {data.regions.map((r, i) => (
                  <span key={i} className={`tp-arch-cloud-region ${i === 0 ? 'active' : ''}`}>{r}</span>
                ))}
              </div>
            </div>
            {data.groups.map((g, i) => (
              <div key={i} className="tp-arch-svc-group">
                <div className="tp-arch-svc-lbl">{g.lbl}</div>
                <div className="tp-arch-svc-row">
                  {g.services.map((s, j) => (
                    <div key={j} className="tp-arch-svc">
                      <div className="tp-arch-svc-ic" style={{ background: s.color, color: s.fg }}>{s.ic}</div>
                      <div className="tp-arch-svc-b">
                        <div className="tp-arch-svc-n">{s.n}</div>
                        <div className="tp-arch-svc-d">{s.d}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  /* ============================================================
     COMPLIANCE BY DESIGN — 6 pillars grid
     ============================================================ */
  function ComplianceByDesign({ t }) {
    const data = t.technology.compliance;
    return (
      <section className="tp-comp sect on-dark-deep">
        <div className="sect-inner">
          <div className="sect-head reveal">
            <div className="eyebrow on-dark">{data.eyebrow}</div>
            <h2 dangerouslySetInnerHTML={{ __html: data.title }} />
            <p className="sect-sub on-dark-sub">{data.sub}</p>
          </div>
          <div className="tp-comp-grid reveal">
            {data.pillars.map((p, i) => (
              <div key={i} className="tp-comp-card">
                <div className="tp-comp-card-ic">{p.ic}</div>
                <div className="tp-comp-card-t">{p.t}</div>
                <div className="tp-comp-card-d">{p.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ============================================================
     PAGE COMPOSITION
     ============================================================ */
  function TechnologyPage() {
    const { lang, setLang, t } = useLang();
    useReveal();

    return (
      <>
        <Nav lang={lang} setLang={setLang} t={t} />
        <TechHero t={t} />
        <LogoBar />
        <KeyFeatures t={t} />
        <BlamCore t={t} />
        <Architecture t={t} />
        <ComplianceByDesign t={t} />
        <Partners t={t} />
        <CTAFinal t={t} />
        <Footer t={t} />
        <OrbChat />
      </>
    );
  }

  Object.assign(window, { TechnologyPage });
})();