/* global React, useLang */
const { useState: useState2, useMemo } = React;

// ============ Capability deep-dives (feat-row pattern) ============
function CapabilityRows() {
  const { t, lang } = useLang();
  const rows = useMemo(() => [
  {
    kicker: t("p2.cap0.kicker"),
    title: t("p2.cap0.title"),
    lead: t("p2.cap0.lead"),
    bullets: [t("p2.cap0.b0"), t("p2.cap0.b1"), t("p2.cap0.b2"), t("p2.cap0.b3"), t("p2.cap0.b4")],
    placeholder: t("p2.cap0.ph"),
    visualKind: "kyc"
  },
  {
    kicker: t("p2.cap1.kicker"),
    title: t("p2.cap1.title"),
    lead: t("p2.cap1.lead"),
    bullets: [t("p2.cap1.b0"), t("p2.cap1.b1"), t("p2.cap1.b2"), t("p2.cap1.b3"), t("p2.cap1.b4")],
    placeholder: t("p2.cap1.ph"),
    visualKind: "risk",
    reverse: true
  },
  {
    kicker: t("p2.cap2.kicker"),
    title: t("p2.cap2.title"),
    lead: t("p2.cap2.lead"),
    bullets: [t("p2.cap2.b0"), t("p2.cap2.b1"), t("p2.cap2.b2"), t("p2.cap2.b3")],
    placeholder: t("p2.cap2.ph"),
    visualKind: "anomaly"
  },
  {
    kicker: t("p2.cap3.kicker"),
    title: t("p2.cap3.title"),
    lead: t("p2.cap3.lead"),
    bullets: [t("p2.cap3.b0"), t("p2.cap3.b1"), t("p2.cap3.b2"), t("p2.cap3.b3")],
    placeholder: t("p2.cap3.ph"),
    visualKind: "cases",
    reverse: true
  },
  {
    kicker: t("p2.cap4.kicker"),
    title: t("p2.cap4.title"),
    lead: t("p2.cap4.lead"),
    bullets: [t("p2.cap4.b0"), t("p2.cap4.b1"), t("p2.cap4.b2"), t("p2.cap4.b3")],
    placeholder: t("p2.cap4.ph"),
    visualKind: "compliance"
  },
  {
    kicker: t("p2.cap5.kicker"),
    title: t("p2.cap5.title"),
    lead: t("p2.cap5.lead"),
    bullets: [t("p2.cap5.b0"), t("p2.cap5.b1"), t("p2.cap5.b2"), t("p2.cap5.b3")],
    placeholder: t("p2.cap5.ph"),
    visualKind: "ml",
    reverse: true
  }], [lang, t]);

  return (
    <section className="on-paper" id="capacidades">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot" />{t("p2.cap.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16, color: "rgb(34, 51, 80)" }}>
              {t("p2.cap.h2a")}<br /><span style={{ color: "rgb(34, 51, 80)" }}></span>
            </h2>
          </div>
          <p className="lead">{t("p2.cap.lead")}</p>
        </div>

        {rows.map((r, i) => <FeatRow key={i} {...r} />)}
      </div>
    </section>);

}

function FeatRow({ kicker, title, lead, bullets, image, placeholder, reverse, visualKind }) {
  return (
    <div className="feat-row-v2">
      <div className="feat-head">
        <span className="kicker">{kicker}</span>
        <h3 style={{ marginTop: 14 }}>{title}</h3>
      </div>
      <div className="feat-body" style={{ flexDirection: reverse ? "row-reverse" : "row" }}>
        <div className="feat-text">
          <p>{lead}</p>
          <ul className="feat-bullets">
            {bullets.map((b, i) => <li key={i}><span className="tick">→</span><span>{b}</span></li>)}
          </ul>
        </div>
        <div className="feat-media">
          {visualKind === "kyc" ? <KYCVisual /> :
          visualKind === "risk" ? <RiskEngineVisual /> :
          visualKind === "anomaly" ? <AnomalyVisual /> :
          visualKind === "cases" ? <CasesVisual /> :
          visualKind === "compliance" ? <ComplianceVisual /> :
          visualKind === "ml" ? <MLVisual /> :
          visualKind === "device" ? <DeviceVisual /> :
          visualKind === "profile" ? <DigitalProfileVisual /> :
          visualKind === "geo" ? <GeoVisual /> :
          visualKind === "user360" ? <User360Visual /> :
          visualKind === "matrix" ? <RiskMatrixVisual /> :
          visualKind === "tx" ? <TxMonitoringVisual /> :
          visualKind === "ato" ? <ATOVisual /> :
          visualKind === "login" ? <LoginVisual /> :
          visualKind === "register" ? <RegisterVisual /> :
          visualKind === "product" ? <ProductRequestVisual /> :
          visualKind === "pay" ? <PaymentVisual /> :
          visualKind === "transfer" ? <TransferVisual /> :
          visualKind === "withdraw" ? <WithdrawalVisual /> :
          visualKind === "promo" ? <PromoVisual /> :
          image ?
          <div style={{ borderRadius: 10, overflow: "hidden", border: "1px solid var(--line)", background: "#fff" }}>
                <img src={image} alt="" style={{ display: "block", width: "100%" }} />
              </div> :
          <div className="placeholder" style={{ aspectRatio: "4/3", height: "100%", minHeight: 280 }}>{placeholder}</div>}
        </div>
      </div>
    </div>);

}

// ============ KYC Visual — fictional Forsvar UI composition ============
function KYCVisual() {
  const { t } = useLang();
  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.kyc.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.kyc.status")}</span>
      </div>

      <div className="kyc-grid">
        {/* Document panel */}
        <div className="kyc-card kyc-doc">
          <div className="kyc-card-label">{t("viz.kyc.c1")}</div>
          <div className="kyc-doc-body">
            <div className="kyc-id-card">
              <div className="kyc-id-photo" />
              <div className="kyc-id-lines">
                <div className="ln w70" />
                <div className="ln w90" />
                <div className="ln w50" />
                <div className="ln w80" />
              </div>
              <div className="kyc-id-mrz" />
            </div>
            <div className="kyc-ocr">
              <span>OCR</span>
              <div className="kyc-bar"><div className="kyc-bar-fill" style={{ width: "92%" }} /></div>
              <span className="kyc-pct">92%</span>
            </div>
          </div>
        </div>

        {/* Selfie / liveness */}
        <div className="kyc-card kyc-selfie">
          <div className="kyc-card-label">{t("viz.kyc.c2")}</div>
          <div className="kyc-selfie-body">
            <svg className="kyc-face" viewBox="0 0 120 120" aria-hidden="true">
              <circle cx="60" cy="60" r="48" fill="none" stroke="var(--line-strong)" strokeDasharray="3 4" />
              <circle cx="60" cy="56" r="22" fill="var(--paper)" />
              <rect x="46" y="78" width="28" height="20" rx="10" fill="var(--paper)" />
              <circle cx="60" cy="60" r="54" fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeDasharray="80 250" transform="rotate(-90 60 60)" />
            </svg>
            <div className="kyc-checks">
              <div className="kyc-check ok"><span>✓</span> {t("viz.kyc.chk1")}</div>
              <div className="kyc-check ok"><span>✓</span> {t("viz.kyc.chk2")}</div>
              <div className="kyc-check ok"><span>✓</span> {t("viz.kyc.chk3")}</div>
            </div>
          </div>
        </div>

        {/* Decision panel */}
        <div className="kyc-card kyc-decision">
          <div className="kyc-card-label">{t("viz.kyc.c3")}</div>
          <div className="kyc-decision-body">
            <div className="kyc-score">
              <div className="kyc-score-ring">
                <svg viewBox="0 0 60 60" width="60" height="60">
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--line)" strokeWidth="4" />
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--accent)" strokeWidth="4" strokeDasharray="163.4" strokeDashoffset="22" transform="rotate(-90 30 30)" strokeLinecap="round" />
                </svg>
                <span className="kyc-score-num">86</span>
              </div>
              <div>
                <div className="kyc-score-label">{t("viz.kyc.scorelbl")}</div>
                <div className="kyc-pill ok">{t("viz.kyc.pillok")}</div>
              </div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.kyc.meta1l")}</span><span>{t("viz.kyc.meta1v")}</span></div>
              <div><span>{t("viz.kyc.meta2l")}</span><span>{t("viz.kyc.meta2v")}</span></div>
              <div><span>{t("viz.kyc.meta3l")}</span><span>{t("viz.kyc.meta3v")}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.kyc.f1")}</span>
        <span>{t("viz.kyc.f2")}</span>
        <span>{t("viz.kyc.f3")}</span>
      </div>
    </div>);

}

// ============ Risk Engine Visual — fictional Forsvar UI composition ============
function RiskEngineVisual() {
  const { t } = useLang();
  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.risk.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.risk.status")}</span>
      </div>

      <div className="kyc-grid risk-grid">
        {/* 01 — Evento entrante */}
        <div className="kyc-card risk-event-card">
          <div className="kyc-card-label">{t("viz.risk.c1")}</div>
          <div className="risk-event">
            <div className="risk-amount">$1,250<span className="risk-amount-cents">.00</span> <em>USD</em></div>
            <div className="risk-event-rows">
              <div><span>{t("viz.risk.row1l")}</span><span>{t("viz.risk.row1v")}</span></div>
              <div><span>{t("viz.risk.row2l")}</span><span>{t("viz.risk.row2v")}</span></div>
              <div><span>{t("viz.risk.row3l")}</span><span className="mono">••••a4f2</span></div>
              <div><span>{t("viz.risk.row4l")}</span><span className="mono">j••@e.io</span></div>
              <div><span>{t("viz.risk.row5l")}</span><span>{t("viz.risk.row5v")}</span></div>
            </div>
          </div>
        </div>

        {/* 02 — Reglas evaluadas */}
        <div className="kyc-card risk-rules-card">
          <div className="kyc-card-label">{t("viz.risk.c2")}</div>
          <div className="risk-rules">
            <div className="risk-rule">
              <div className="risk-rule-head">
                <span className="risk-rule-tag tag-velocity">Velocity</span>
                <span className="risk-rule-status ok" aria-label="ok">✓</span>
              </div>
              <div className="risk-rule-name">{t("viz.risk.rn1")}</div>
              <div className="risk-rule-cond">{t("viz.risk.rc1")}</div>
            </div>
            <div className="risk-rule triggered">
              <div className="risk-rule-head">
                <span className="risk-rule-tag tag-morphing">Morphing</span>
                <span className="risk-rule-status flag" aria-label="flagged">!</span>
              </div>
              <div className="risk-rule-name">{t("viz.risk.rn2")}</div>
              <div className="risk-rule-cond">{t("viz.risk.rc2")}</div>
            </div>
            <div className="risk-rule">
              <div className="risk-rule-head">
                <span className="risk-rule-tag tag-advanced">Advanced</span>
                <span className="risk-rule-status ok" aria-label="ok">✓</span>
              </div>
              <div className="risk-rule-name">{t("viz.risk.rn3")}</div>
              <div className="risk-rule-cond">{t("viz.risk.rc3")}</div>
            </div>
          </div>
        </div>

        {/* 03 — Decisión */}
        <div className="kyc-card kyc-decision">
          <div className="kyc-card-label">{t("viz.risk.c3")}</div>
          <div className="kyc-decision-body">
            <div className="kyc-score">
              <div className="kyc-score-ring">
                <svg viewBox="0 0 60 60" width="60" height="60">
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--line)" strokeWidth="4" />
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--accent)" strokeWidth="4" strokeDasharray="163.4" strokeDashoffset="49" transform="rotate(-90 30 30)" strokeLinecap="round" />
                </svg>
                <span className="kyc-score-num">72</span>
              </div>
              <div>
                <div className="kyc-score-label">{t("viz.risk.scorelbl")}</div>
                <div className="kyc-pill alert">{t("viz.risk.pill")}</div>
              </div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.risk.m1l")}</span><span>{t("viz.risk.m1v")}</span></div>
              <div><span>{t("viz.risk.m2l")}</span><span>{t("viz.risk.m2v")}</span></div>
              <div><span>{t("viz.risk.m3l")}</span><span>{t("viz.risk.m3v")}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.risk.f1")}</span>
        <span>{t("viz.risk.f2")}</span>
        <span>{t("viz.risk.f3")}</span>
      </div>
    </div>);

}

// ============ Anomaly Visual — fictional Forsvar UI composition ============
function AnomalyVisual() {
  const series = [3, 2, 4, 2, 3, 3, 5, 4, 3, 2, 18, 14, 11, 4];
  const max = Math.max(...series);
  const barW = 14;
  const gap = 3;
  const total = series.length * (barW + gap) - gap;
  const baseline = 4; // visual avg line
  const baselineY = 80 - (baseline / max) * 70;
  const { t } = useLang();

  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.anom.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.anom.status")}</span>
      </div>

      <div className="kyc-grid anom-grid">
        {/* 01 — Métricas */}
        <div className="kyc-card anom-stats-card">
          <div className="kyc-card-label">{t("viz.anom.c1")}</div>
          <div className="anom-stats">
            <div className="anom-stat">
              <div className="anom-stat-num">12</div>
              <div className="anom-stat-lbl">{t("viz.anom.s1")}</div>
            </div>
            <div className="anom-stat">
              <div className="anom-stat-num">5</div>
              <div className="anom-stat-lbl">{t("viz.anom.s2")}</div>
            </div>
            <div className="anom-stat">
              <div className="anom-stat-num">3</div>
              <div className="anom-stat-lbl">{t("viz.anom.s3")}</div>
            </div>
          </div>
        </div>

        {/* 02 — Serie temporal */}
        <div className="kyc-card anom-chart-card">
          <div className="kyc-card-label">{t("viz.anom.c2")}</div>
          <div className="anom-chart-body">
            <svg viewBox={`0 0 ${total} 80`} preserveAspectRatio="none" className="anom-chart" aria-hidden="true">
              <line x1="0" y1={baselineY} x2={total} y2={baselineY} stroke="var(--line-strong)" strokeDasharray="2 4" strokeWidth="0.6" />
              {series.map((v, i) => {
                const x = i * (barW + gap);
                const h = (v / max) * 70;
                const y = 80 - h;
                const isSpike = v > 8;
                return (
                  <rect
                    key={i}
                    x={x} y={y}
                    width={barW} height={h}
                    rx="1"
                    fill={isSpike ? "var(--accent)" : "rgba(34, 51, 80, 0.18)"} />);

              })}
            </svg>
            <div className="anom-chart-axis">
              <span>{t("viz.anom.ax1")}</span>
              <span>{t("viz.anom.baseline")} · {baseline}/d</span>
              <span>{t("viz.anom.ax3")}</span>
            </div>
          </div>
        </div>

        {/* 03 — Pico detectado */}
        <div className="kyc-card anom-detect-card">
          <div className="kyc-card-label">{t("viz.anom.c3")}</div>
          <div className="anom-detect-body">
            <div className="anom-detect-head">
              <div>
                <span className="anom-pattern-tag">Velocity spike</span>
                <div className="anom-pattern-name">{t("viz.anom.pn")}</div>
              </div>
              <span className="kyc-pill alert">{t("viz.anom.pill")}</span>
            </div>
            <div className="anom-multiplier">
              <span className="anom-multiplier-num">11.1<em>×</em></span>
              <div className="anom-multiplier-lbl">{t("viz.anom.mulbl")}</div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.anom.m1l")}</span><span>{t("viz.anom.m1v")}</span></div>
              <div><span>{t("viz.anom.m2l")}</span><span>+1014%</span></div>
              <div><span>{t("viz.anom.m3l")}</span><span>{t("viz.anom.m3v")}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.anom.f1")}</span>
        <span>{t("viz.anom.f2")}</span>
        <span>{t("viz.anom.f3")}</span>
      </div>
    </div>);

}

// ============ Cases Visual — fictional Forsvar UI composition ============
function CasesVisual() {
  const { t } = useLang();
  const queue = [
    { id: "C-21", sev: "high",   name: "Carlos Pereira", sla: "2h" },
    { id: "A-19", sev: "medium", name: "Isabella Vega",  sla: "12h", active: true },
    { id: "C-18", sev: "low",    name: "Mariana López",  sla: "24h" },
    { id: "C-17", sev: "high",   name: "Agustín Pérez",  sla: "4h" }];

  const sevLabel = useMemo(() => ({
    high: t("viz.case.sevh"),
    medium: t("viz.case.sevm"),
    low: t("viz.case.sevl")
  }), [t]);

  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.case.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.case.status")}</span>
      </div>

      <div className="kyc-grid cases-grid">
        {/* 01 — Cola de casos */}
        <div className="kyc-card cases-list-card">
          <div className="kyc-card-label">{t("viz.case.c1")}</div>
          <div className="cases-list">
            {queue.map((c) =>
            <div key={c.id} className={`case-row ${c.active ? "active" : ""}`}>
                <span className="case-id">{c.id}</span>
                <span className={`case-sev sev-${c.sev}`}>
                  <span className="case-sev-dot" /> {sevLabel[c.sev]}
                </span>
                <span className="case-name">{c.name}</span>
                <span className="case-sla">{c.sla}</span>
              </div>
            )}
          </div>
        </div>

        {/* 02 — Caso seleccionado */}
        <div className="kyc-card case-detail-card">
          <div className="kyc-card-label">{t("viz.case.c2")}</div>
          <div className="case-detail">
            <div className="case-detail-head">
              <div>
                <div className="case-detail-name">Isabella Vega</div>
                <div className="case-detail-meta">{t("viz.case.detailrules")}</div>
              </div>
              <span className="kyc-pill alert">{t("viz.case.pillm")}</span>
            </div>

            <div className="case-team">
              <div className="case-team-row">
                <span>{t("viz.case.teaml")}</span>
                <span>Compliance · L2</span>
              </div>
              <div className="case-team-row">
                <span>{t("viz.case.asigl")}</span>
                <span className="case-asignee"><span className="case-avatar">LM</span> Lucía M.</span>
              </div>
            </div>

            <div className="case-timeline">
              <div className="case-step done"><span className="case-step-mark">✓</span><span className="case-step-name">{t("viz.case.step1")}</span></div>
              <div className="case-step done"><span className="case-step-mark">✓</span><span className="case-step-name">{t("viz.case.step2")}</span></div>
              <div className="case-step active"><span className="case-step-mark"></span><span className="case-step-name">{t("viz.case.step3")}</span></div>
              <div className="case-step pending"><span className="case-step-mark"></span><span className="case-step-name">{t("viz.case.step4")}</span></div>
            </div>

            <div className="case-sla-block">
              <div className="case-sla-meta">
                <span>{t("viz.case.sla1")}</span>
                <span>{t("viz.case.sla2")}</span>
              </div>
              <div className="case-sla-bar"><div className="case-sla-fill" style={{ width: "68%" }} /></div>
            </div>
          </div>
        </div>

        {/* 03 — Asistente IA */}
        <div className="kyc-card case-ai-card">
          <div className="kyc-card-label">{t("viz.case.c3")}</div>
          <div className="case-ai">
            <span className="case-ai-tag">{t("viz.case.ait")}</span>
            <p className="case-ai-text">
              {t("viz.case.aip")}
            </p>
            <div className="case-ai-actions">
              <span className="case-ai-meta">{t("viz.case.aim")}</span>
              <span className="kyc-pill ok">{t("viz.case.aibtn")}</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.case.f1")}</span>
        <span>{t("viz.case.f2")}</span>
        <span>{t("viz.case.f3")}</span>
      </div>
    </div>);

}

// ============ Compliance Visual — fictional Forsvar UI composition ============
// Narrative is intentionally consistent across the 3 cards: a single case
// (C-21 · Laura Méndez · PEP match en UIF AR) ties audit log, narrativa and
// reporte regulatorio into one coherent story.
function ComplianceVisual() {
  const { t } = useLang();
  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.comp.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.comp.status")}</span>
      </div>

      <div className="kyc-grid compliance-grid">
        {/* 01 — Audit log */}
        <div className="kyc-card audit-log-card">
          <div className="kyc-card-label">{t("viz.comp.c1")}</div>
          <div className="audit-log">
            <div className="audit-row">
              <span className="audit-icon icon-create">+</span>
              <div className="audit-body">
                <div className="audit-event">{t("viz.comp.a1")}</div>
                <div className="audit-meta"><span className="audit-actor">{t("viz.comp.actor.engine")}</span> · {t("viz.comp.m1h")}</div>
              </div>
            </div>
            <div className="audit-row">
              <span className="audit-icon icon-edit">✎</span>
              <div className="audit-body">
                <div className="audit-event">{t("viz.comp.a2")}</div>
                <div className="audit-meta"><span className="audit-actor">Lucía M.</span> · {t("viz.comp.m18")}</div>
              </div>
            </div>
            <div className="audit-row">
              <span className="audit-icon icon-flag">⚑</span>
              <div className="audit-body">
                <div className="audit-event">{t("viz.comp.a3")}</div>
                <div className="audit-meta"><span className="audit-actor">Lucía M.</span> · {t("viz.comp.m14")}</div>
              </div>
            </div>
            <div className="audit-row">
              <span className="audit-icon icon-export">↑</span>
              <div className="audit-body">
                <div className="audit-event">{t("viz.comp.a4")}</div>
                <div className="audit-meta"><span className="audit-actor">{t("viz.comp.actor.system")}</span> · {t("viz.comp.m3m")}</div>
              </div>
            </div>
          </div>
        </div>

        {/* 02 — Narrativa IA */}
        <div className="kyc-card narrative-card">
          <div className="kyc-card-label">{t("viz.comp.c2")}</div>
          <div className="narrative">
            <div className="narrative-section">
              <div className="narrative-h">{t("viz.comp.nt")}</div>
              <p>{t("viz.comp.np1")}</p>
            </div>
            <div className="narrative-section">
              <div className="narrative-h">{t("viz.comp.ne")}</div>
              <p>{t("viz.comp.np2")}</p>
            </div>
            <div className="narrative-section">
              <div className="narrative-h">{t("viz.comp.nc")}</div>
              <p>{t("viz.comp.np3")}</p>
            </div>
            <div className="narrative-section">
              <div className="narrative-h">{t("viz.comp.nn")}</div>
              <p>{t("viz.comp.np4")}</p>
            </div>
          </div>
          <div className="narrative-foot">
            <span className="audit-meta">{t("viz.comp.nf1")}</span>
            <span className="kyc-pill ok">{t("viz.comp.nf2")}</span>
          </div>
        </div>

        {/* 03 — Reporte regulatorio */}
        <div className="kyc-card report-card">
          <div className="kyc-card-label">{t("viz.comp.c3")}</div>
          <div className="report">
            <div className="report-head">
              <div>
                <div className="report-name">{t("viz.comp.rh1")}</div>
                <div className="report-sub">{t("viz.comp.rh2")}</div>
              </div>
              <span className="kyc-pill ok">{t("viz.comp.rpill")}</span>
            </div>
            <div className="report-stats">
              <div className="report-stat">
                <span className="report-stat-num">14</span>
                <span className="report-stat-lbl">{t("viz.comp.st1")}</span>
              </div>
              <div className="report-stat">
                <span className="report-stat-num">42</span>
                <span className="report-stat-lbl">{t("viz.comp.st2")}</span>
              </div>
              <div className="report-stat">
                <span className="report-stat-num">3</span>
                <span className="report-stat-lbl">ROS</span>
              </div>
            </div>
            <div className="report-formats">
              <span className="report-format">PDF</span>
              <span className="report-format">CSV</span>
              <span className="report-format">JSON</span>
              <span className="report-format">XML</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.comp.f1")}</span>
        <span>{t("viz.comp.f2")}</span>
        <span>{t("viz.comp.f3")}</span>
      </div>
    </div>);

}

// ============ ML Visual — fictional Forsvar UI composition ============
function MLVisual() {
  // Score distribution (genuine + chargebacks per bucket 0.0 .. 1.0)
  const dist = [
  [88, 2.0],
  [24, 1.6],
  [5, 1.0],
  [4, 0.8],
  [10, 1.5],
  [5, 1.1],
  [6, 1.5],
  [4, 1.2],
  [3, 1.2],
  [1, 1.0],
  [0.5, 0.8]];

  const distMax = Math.max(...dist.map(([g, f]) => g + f));
  const barW = 12;
  const gap = 3;
  const totalW = dist.length * (barW + gap) - gap;

  // Feature importance (top-5)
  const features = [
  ["card_velocity_24h", 0.32],
  ["email_age_days", 0.21],
  ["device_trust", 0.18],
  ["amount_zscore", 0.14],
  ["geo_distance", 0.09]];

  const featMax = features[0][1];
  const { t } = useLang();

  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.ml.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.ml.status")}</span>
      </div>

      <div className="kyc-grid ml-grid">
        {/* 01 — Modelos */}
        <div className="kyc-card ml-models-card">
          <div className="kyc-card-label">{t("viz.ml.c1")}</div>
          <div className="ml-models">
            <div className="ml-model">
              <span className="ml-model-icon icon-classify">▭</span>
              <div className="ml-model-body">
                <div className="ml-model-name">card_risk</div>
                <div className="ml-model-meta">classification · v3.2</div>
              </div>
              <span className="ml-model-status on" aria-label="active" />
            </div>
            <div className="ml-model">
              <span className="ml-model-icon icon-classify">▭</span>
              <div className="ml-model-body">
                <div className="ml-model-name">email_risk</div>
                <div className="ml-model-meta">classification · v2.1</div>
              </div>
              <span className="ml-model-status on" />
            </div>
            <div className="ml-model">
              <span className="ml-model-icon icon-regress">∿</span>
              <div className="ml-model-body">
                <div className="ml-model-name">velocity_score</div>
                <div className="ml-model-meta">regression · v1.4</div>
              </div>
              <span className="ml-model-status on" />
            </div>
            <div className="ml-model">
              <span className="ml-model-icon icon-graph">⌬</span>
              <div className="ml-model-body">
                <div className="ml-model-name">mule_graph</div>
                <div className="ml-model-meta">graph · v0.9</div>
              </div>
              <span className="ml-model-status draft" />
            </div>
          </div>
        </div>

        {/* 02 — Score distribution */}
        <div className="kyc-card ml-dist-card">
          <div className="kyc-card-label">{t("viz.ml.c2")}</div>
          <div className="ml-dist-body">
            <svg viewBox={`0 0 ${totalW} 80`} preserveAspectRatio="none" className="ml-chart" aria-hidden="true">
              {dist.map(([g, f], i) => {
                const x = i * (barW + gap);
                const totalH = (g + f) / distMax * 70;
                const fH = f / distMax * 70;
                const gH = totalH - fH;
                const yG = 80 - gH;
                const yF = 80 - totalH;
                return (
                  <g key={i}>
                    <rect x={x} y={yG} width={barW} height={gH} rx="1" fill="rgba(34, 51, 80, 0.55)" />
                    <rect x={x} y={yF} width={barW} height={fH} rx="1" fill="var(--accent)" />
                  </g>);

              })}
            </svg>
            <div className="ml-dist-axis">
              <span>0.0</span>
              <span>{t("viz.ml.axis")}</span>
              <span>1.0</span>
            </div>
            <div className="ml-dist-legend">
              <span><span className="ml-leg-dot legit" /> {t("viz.ml.leg1")}</span>
              <span><span className="ml-leg-dot fraud" /> {t("viz.ml.leg2")}</span>
            </div>
          </div>
        </div>

        {/* 03 — Feature importance + drift */}
        <div className="kyc-card ml-explain-card">
          <div className="kyc-card-label">{t("viz.ml.c3")}</div>
          <div className="ml-explain">
            {features.map(([name, imp]) =>
            <div key={name} className="ml-feat">
                <div className="ml-feat-head">
                  <span className="ml-feat-name">{name}</span>
                  <span className="ml-feat-val">{imp.toFixed(2)}</span>
                </div>
                <div className="ml-feat-bar">
                  <div className="ml-feat-bar-fill" style={{ width: `${imp / featMax * 100}%` }} />
                </div>
              </div>
            )}
            <div className="ml-drift">
              <span>{t("viz.ml.drift")}</span>
              <span className="ml-drift-val">0.04 <em>{t("viz.ml.stable")}</em></span>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.ml.f1")}</span>
        <span>{t("viz.ml.f2")}</span>
        <span>{t("viz.ml.f3")}</span>
      </div>
    </div>);

}

// ============ Device Intelligence Visual ============
function DeviceVisual() {
  const { t } = useLang();
  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.dev.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.dev.status")}</span>
      </div>

      <div className="kyc-grid device-grid">
        {/* 01 — Fingerprint */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.dev.c1")}</div>
          <div className="device-fp">
            <div className="device-hash">d520c7a8<em>···</em>4218</div>
            <div className="device-trust">
              <span className="kyc-pill ok">TRUSTED</span>
              <span className="device-events">{t("viz.dev.ev")}</span>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.dev.m1l")}</span><span>30/04 12:23</span></div>
              <div><span>{t("viz.dev.m2l")}</span><span>30/04 12:23</span></div>
              <div><span>{t("viz.dev.m3l")}</span><span>{t("viz.dev.m3v")}</span></div>
            </div>
          </div>
        </div>

        {/* 02 — Sesión actual */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.dev.c2")}</div>
          <div className="kyc-meta-rows" style={{ flex: 1 }}>
            <div><span>{t("viz.dev.plat")}</span><span>web</span></div>
            <div><span>OS</span><span>Windows</span></div>
            <div><span>Browser</span><span>Chromium</span></div>
            <div><span>Engine</span><span>Blink · v124</span></div>
            <div><span>{t("viz.dev.ip")}</span><span style={{ fontFamily: "var(--font-mono)" }}>181.46.•••.••</span></div>
            <div><span>{t("viz.dev.geo")}</span><span>UY · Montevideo</span></div>
          </div>
        </div>

        {/* 03 — Señales */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.dev.c3")}</div>
          <div className="device-signals">
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.dev.s1")}</div>
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.dev.s2")}</div>
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.dev.s3")}</div>
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.dev.s4")}</div>
            <div className="device-signal flag"><span className="device-signal-mark">!</span> {t("viz.dev.s5")}</div>
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.dev.s6")}</div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.dev.f1")}</span>
        <span>{t("viz.dev.f2")}</span>
        <span>{t("viz.dev.f3")}</span>
      </div>
    </div>);

}

// ============ Digital Profile Visual ============
function DigitalProfileVisual() {
  const { t } = useLang();
  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.dpr.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.dpr.status")}</span>
      </div>

      <div className="kyc-grid profile-grid">
        {/* 01 — Email reputation */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.dpr.c1")}</div>
          <div className="profile-email">
            <div className="profile-email-addr">l.mendez@<em>•••</em>.io</div>
            <div className="kyc-score" style={{ marginTop: 4 }}>
              <div className="kyc-score-ring">
                <svg viewBox="0 0 60 60" width="60" height="60">
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--line)" strokeWidth="4" />
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--accent)" strokeWidth="4" strokeDasharray="163.4" strokeDashoffset="32" transform="rotate(-90 30 30)" strokeLinecap="round" />
                </svg>
                <span className="kyc-score-num">81</span>
              </div>
              <div>
                <div className="kyc-score-label">{t("viz.dpr.score")}</div>
                <div className="kyc-pill ok">CLEAN</div>
              </div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.dpr.m1l")}</span><span>{t("viz.dpr.m1v")}</span></div>
              <div><span>{t("viz.dpr.m2l")}</span><span>corporate</span></div>
              <div><span>{t("viz.dpr.m3l")}</span><span>{t("viz.dpr.m3v")}</span></div>
            </div>
          </div>
        </div>

        {/* 02 — Internet profile */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.dpr.c2")}</div>
          <div className="profile-sources">
            <div className="profile-source">
              <span className="profile-source-icon icon-li">in</span>
              <div className="profile-source-body">
                <div className="profile-source-name">LinkedIn</div>
                <div className="profile-source-meta">{t("viz.dpr.sm1")}</div>
              </div>
              <span className="kyc-pill ok">MATCH</span>
            </div>
            <div className="profile-source">
              <span className="profile-source-icon icon-x">𝕏</span>
              <div className="profile-source-body">
                <div className="profile-source-name">{t("viz.dpr.sn1")}</div>
                <div className="profile-source-meta">@lmendez · 2y</div>
              </div>
              <span className="kyc-pill ok">MATCH</span>
            </div>
            <div className="profile-source">
              <span className="profile-source-icon icon-gh">{`{ }`}</span>
              <div className="profile-source-body">
                <div className="profile-source-name">GitHub</div>
                <div className="profile-source-meta">{t("viz.dpr.ghnf")}</div>
              </div>
              <span className="profile-source-na">—</span>
            </div>
            <div className="profile-source">
              <span className="profile-source-icon icon-web">⌬</span>
              <div className="profile-source-body">
                <div className="profile-source-name">{t("viz.dpr.webn")}</div>
                <div className="profile-source-meta">{t("viz.dpr.webm")}</div>
              </div>
              <span className="kyc-pill ok">3</span>
            </div>
          </div>
        </div>

        {/* 03 — Adverse media */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.dpr.c3")}</div>
          <div className="profile-adverse">
            <div className="profile-adverse-stat">
              <div className="profile-adverse-num">0</div>
              <div className="profile-adverse-lbl">{t("viz.dpr.adv")}</div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.dpr.m4l")}</span><span>1.4k</span></div>
              <div><span>{t("viz.dpr.m5l")}</span><span>{t("viz.dpr.m5v")}</span></div>
              <div><span>{t("viz.dpr.m6l")}</span><span>{t("viz.dpr.m6v")}</span></div>
              <div><span>{t("viz.dpr.m7l")}</span><span>{t("viz.dpr.m7v")}</span></div>
            </div>
            <div className="profile-adverse-foot">
              <span className="kyc-pill ok">ALL CLEAR</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.dpr.f1")}</span>
        <span>{t("viz.dpr.f2")}</span>
        <span>{t("viz.dpr.f3")}</span>
      </div>
    </div>);

}

// ============ Geo Intelligence Visual ============
function GeoVisual() {
  // Hexagon polygon points (flat-top)
  const hex = (cx, cy, r) => {
    const pts = [];
    for (let i = 0; i < 6; i++) {
      const a = Math.PI / 3 * i + Math.PI / 6;
      pts.push(`${cx + r * Math.cos(a)},${cy + r * Math.sin(a)}`);
    }
    return pts.join(" ");
  };
  const hexes = [
  { x: 60, y: 50, risk: "low" },
  { x: 90, y: 65, risk: "low" },
  { x: 120, y: 50, risk: "med" },
  { x: 75, y: 85, risk: "low" },
  { x: 105, y: 85, risk: "med" },
  { x: 135, y: 85, risk: "high" },
  { x: 90, y: 105, risk: "low" },
  { x: 150, y: 105, risk: "med" }];

  const fill = { low: "rgba(40, 130, 80, 0.18)", med: "rgba(204, 158, 55, 0.30)", high: "rgba(180, 60, 70, 0.30)" };
  const stroke = { low: "rgba(40, 130, 80, 0.55)", med: "rgba(204, 158, 55, 0.85)", high: "rgba(180, 60, 70, 0.65)" };
  const { t } = useLang();

  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.geo.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.geo.status")}</span>
      </div>

      <div className="kyc-grid geo-grid">
        {/* 01 — Mapa */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.geo.c1")}</div>
          <div className="geo-map">
            <svg viewBox="0 0 200 140" className="geo-svg" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
              {hexes.map((h, i) =>
              <polygon key={i} points={hex(h.x, h.y, 17)} fill={fill[h.risk]} stroke={stroke[h.risk]} strokeWidth="0.8" />
              )}
              {/* Center pin */}
              <circle cx="90" cy="85" r="9" fill="none" stroke="var(--ink)" strokeWidth="0.6" strokeDasharray="2 2" />
              <circle cx="90" cy="85" r="3.5" fill="var(--ink)" />
            </svg>
            <div className="geo-legend">
              <span><span className="geo-leg-dot lo" /> {t("viz.geo.leg1")}</span>
              <span><span className="geo-leg-dot md" /> {t("viz.geo.leg2")}</span>
              <span><span className="geo-leg-dot hi" /> {t("viz.geo.leg3")}</span>
            </div>
          </div>
        </div>

        {/* 02 — Evento actual */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.geo.c2")}</div>
          <div className="kyc-meta-rows" style={{ flex: 1 }}>
            <div><span>Lat</span><span style={{ fontFamily: "var(--font-mono)" }}>-34.901</span></div>
            <div><span>Lng</span><span style={{ fontFamily: "var(--font-mono)" }}>-56.164</span></div>
            <div><span>{t("viz.geo.m3l")}</span><span>{t("viz.geo.m3v")}</span></div>
            <div><span>{t("viz.geo.m4l")}</span><span>{t("viz.geo.m4v")}</span></div>
            <div><span>ISP</span><span>Antel</span></div>
            <div><span>{t("viz.geo.vpn")}</span><span>no</span></div>
            <div><span>{t("viz.geo.trav")}</span><span>no</span></div>
          </div>
        </div>

        {/* 03 — Risk by zone */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.geo.c3")}</div>
          <div className="geo-zones">
            <div className="geo-zone"><span className="geo-zone-dot lo" /> {t("viz.geo.z1")}</div>
            <div className="geo-zone"><span className="geo-zone-dot lo" /> {t("viz.geo.z2")}</div>
            <div className="geo-zone"><span className="geo-zone-dot md" /> {t("viz.geo.z3")}</div>
            <div className="geo-zone"><span className="geo-zone-dot md" /> {t("viz.geo.z4")}</div>
            <div className="geo-zone"><span className="geo-zone-dot hi" /> {t("viz.geo.z5")}</div>
            <div className="geo-zone"><span className="geo-zone-dot hi" /> {t("viz.geo.z6")}</div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.geo.f1")}</span>
        <span>{t("viz.geo.f2")}</span>
        <span>{t("viz.geo.f3")}</span>
      </div>
    </div>);

}

// ============ User 360 Visual ============
function User360Visual() {
  const { t } = useLang();
  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.u3.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.u3.status")}</span>
      </div>

      <div className="kyc-grid user360-grid">
        {/* 01 — Perfil */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.u3.c1")}</div>
          <div className="u360-profile">
            <div className="u360-head">
              <span className="u360-avatar">LM</span>
              <div className="u360-name-block">
                <div className="u360-name">Laura Méndez</div>
                <div className="u360-meta">P-21 · UY · PEP</div>
              </div>
            </div>
            <div className="kyc-score">
              <div className="kyc-score-ring">
                <svg viewBox="0 0 60 60" width="60" height="60">
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--line)" strokeWidth="4" />
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--accent)" strokeWidth="4" strokeDasharray="163.4" strokeDashoffset="115" transform="rotate(-90 30 30)" strokeLinecap="round" />
                </svg>
                <span className="kyc-score-num">38</span>
              </div>
              <div>
                <div className="kyc-score-label">{t("viz.u3.score")}</div>
                <div className="kyc-pill alert">{t("viz.u3.pill")}</div>
              </div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.u3.kycl")}</span><span>{t("viz.u3.kycv")}</span></div>
              <div><span>{t("viz.u3.stl")}</span><span>{t("viz.u3.stv")}</span></div>
              <div><span>{t("viz.u3.prl")}</span><span>68%</span></div>
            </div>
          </div>
        </div>

        {/* 02 — Grafo de vinculaciones */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.u3.c2")}</div>
          <div className="u360-graph">
            <svg viewBox="0 0 220 160" className="u360-svg" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
              {/* Edges */}
              <line x1="110" y1="80" x2="40"  y2="40"  stroke="var(--line-strong)" strokeWidth="0.8" />
              <line x1="110" y1="80" x2="180" y2="40"  stroke="var(--line-strong)" strokeWidth="0.8" />
              <line x1="110" y1="80" x2="30"  y2="100" stroke="var(--accent)" strokeWidth="1.2" />
              <line x1="110" y1="80" x2="190" y2="105" stroke="var(--line-strong)" strokeWidth="0.8" />
              <line x1="110" y1="80" x2="60"  y2="140" stroke="var(--line-strong)" strokeWidth="0.8" />
              <line x1="110" y1="80" x2="160" y2="140" stroke="var(--accent)" strokeWidth="1.2" />
              {/* Nodes */}
              <circle cx="40"  cy="40"  r="11" fill="#fff" stroke="var(--line-strong)" strokeWidth="1" />
              <text x="40"  y="43"  fontFamily="JetBrains Mono" fontSize="7" textAnchor="middle" fill="var(--neutral-2)">DEV</text>
              <circle cx="180" cy="40"  r="11" fill="#fff" stroke="var(--line-strong)" strokeWidth="1" />
              <text x="180" y="43"  fontFamily="JetBrains Mono" fontSize="7" textAnchor="middle" fill="var(--neutral-2)">EML</text>
              <circle cx="30"  cy="100" r="11" fill="var(--accent-soft)" stroke="var(--accent)" strokeWidth="1" />
              <text x="30"  y="103" fontFamily="JetBrains Mono" fontSize="7" textAnchor="middle" fill="var(--ink)">REL</text>
              <circle cx="190" cy="105" r="11" fill="#fff" stroke="var(--line-strong)" strokeWidth="1" />
              <text x="190" y="108" fontFamily="JetBrains Mono" fontSize="7" textAnchor="middle" fill="var(--neutral-2)">CARD</text>
              <circle cx="60"  cy="140" r="11" fill="#fff" stroke="var(--line-strong)" strokeWidth="1" />
              <text x="60"  y="143" fontFamily="JetBrains Mono" fontSize="7" textAnchor="middle" fill="var(--neutral-2)">IP</text>
              <circle cx="160" cy="140" r="11" fill="var(--accent-soft)" stroke="var(--accent)" strokeWidth="1" />
              <text x="160" y="143" fontFamily="JetBrains Mono" fontSize="7" textAnchor="middle" fill="var(--ink)">CASE</text>
              {/* Center node (user) */}
              <circle cx="110" cy="80" r="16" fill="var(--ink)" />
              <text x="110" y="84" fontFamily="JetBrains Mono" fontSize="9" fontWeight="600" textAnchor="middle" fill="var(--accent)">P-21</text>
            </svg>
            <div className="u360-graph-legend">{t("viz.u3.gleg")}</div>
          </div>
        </div>

        {/* 03 — Asistente IA */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.u3.c3")}</div>
          <div className="u360-ai">
            <span className="case-ai-tag">{t("viz.case.ait")}</span>
            <p className="u360-ai-text">
              {t("viz.u3.aip")}
            </p>
            <div className="u360-ai-foot">
              <span className="audit-meta">{t("viz.u3.aimeta")}</span>
              <span className="kyc-pill ok">{t("viz.u3.btns")}</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.u3.f1")}</span>
        <span>{t("viz.u3.f2")}</span>
        <span>{t("viz.u3.f3")}</span>
      </div>
    </div>);

}

// ============ Risk Matrix Visual ============
function RiskMatrixVisual() {
  const { t, lang } = useLang();
  const factors = useMemo(() => [
    { name: t("viz.mx.fn1"), score: 21.24, max: 30 },
    { name: t("viz.mx.fn2"), score: 0.0, max: 30 },
    { name: t("viz.mx.fn3"), score: 21.0, max: 30, critical: true }
  ], [lang, t]);

  const subfactors = useMemo(() => [
    { name: t("viz.mx.sn1"), val: t("viz.mx.sv1"), score: 5.28 },
    { name: t("viz.mx.sn2"), val: t("viz.mx.sv2"), score: 3.96 },
    { name: t("viz.mx.sn3"), val: t("viz.mx.sv3"), score: 12.0 }
  ], [lang, t]);

  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.mx.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.mx.status")}</span>
      </div>

      <div className="kyc-grid matrix-grid">
        {/* 01 — Factores */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.mx.c1")}</div>
          <div className="matrix-factors">
            {factors.map((f) =>
            <div key={f.name} className={`matrix-factor ${f.critical ? "is-critical" : ""}`}>
                <div className="matrix-factor-head">
                  <span className="matrix-factor-name">
                    {f.name}
                    {f.critical && <span className="matrix-tag-crit">{t("viz.mx.crit")}</span>}
                  </span>
                  <span className="matrix-factor-score">{f.score.toFixed(2)}</span>
                </div>
                <div className="matrix-bar">
                  <div className="matrix-bar-fill" style={{ width: `${f.score / f.max * 100}%` }} />
                </div>
              </div>
            )}
          </div>
        </div>

        {/* 02 — Subfactores · Onboarding */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.mx.c2")}</div>
          <div className="matrix-sub">
            {subfactors.map((s) =>
            <div key={s.name} className="matrix-sub-row">
                <div className="matrix-sub-name">{s.name}</div>
                <div className="matrix-sub-foot">
                  <span className="matrix-sub-val">{s.val}</span>
                  <span className="matrix-sub-score">{s.score.toFixed(2)}</span>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* 03 — Score final */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.mx.c3")}</div>
          <div className="matrix-final">
            <div className="matrix-final-num">100<em>/100</em></div>
            <div className="matrix-final-note">{t("viz.mx.note")}</div>
            <span className="kyc-pill alert">{t("viz.mx.pill")}</span>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.mx.m1l")}</span><span>42.24</span></div>
              <div><span>{t("viz.mx.m2l")}</span><span>PEP</span></div>
              <div><span>{t("viz.mx.m3l")}</span><span>{t("viz.mx.m3v")}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.mx.f1")}</span>
        <span>{t("viz.mx.f2")}</span>
        <span>{t("viz.mx.f3")}</span>
      </div>
    </div>);

}

// ============ Transactional Monitoring Visual ============
function TxMonitoringVisual() {
  const { t } = useLang();
  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.txm.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.txm.status")}</span>
      </div>

      <div className="kyc-grid tx-grid">
        {/* 01 — Patrón relacional (grafo) */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.txm.c1")}</div>
          <div className="tx-graph">
            <svg viewBox="0 0 220 160" className="tx-svg" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
              <defs>
                <marker id="tx-arrow-n" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto">
                  <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--neutral-3)" />
                </marker>
                <marker id="tx-arrow-a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto">
                  <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--accent)" />
                </marker>
              </defs>

              {/* Edges (triangulation A → B → C → A, closing edge in accent) */}
              <line x1="56"  y1="118" x2="156" y2="118" stroke="var(--neutral-3)" strokeWidth="1" markerEnd="url(#tx-arrow-n)" />
              <line x1="172" y1="106" x2="124" y2="50"  stroke="var(--neutral-3)" strokeWidth="1" markerEnd="url(#tx-arrow-n)" />
              <line x1="100" y1="46"  x2="56"  y2="106" stroke="var(--accent)" strokeWidth="1.4" markerEnd="url(#tx-arrow-a)" strokeDasharray="3 3" />

              {/* Amount labels */}
              <text x="110" y="135" fontFamily="JetBrains Mono" fontSize="8" textAnchor="middle" fill="var(--neutral-2)">$5.0k</text>
              <text x="160" y="76"  fontFamily="JetBrains Mono" fontSize="8" textAnchor="middle" fill="var(--neutral-2)">$4.8k</text>
              <text x="60"  y="76"  fontFamily="JetBrains Mono" fontSize="8" textAnchor="middle" fill="var(--accent)" fontWeight="600">$4.6k</text>

              {/* Nodes */}
              <circle cx="50"  cy="120" r="14" fill="#fff" stroke="var(--line-strong)" strokeWidth="1" />
              <text x="50"  y="124" fontFamily="JetBrains Mono" fontSize="9" textAnchor="middle" fill="var(--ink)" fontWeight="600">A</text>
              <circle cx="170" cy="120" r="14" fill="#fff" stroke="var(--line-strong)" strokeWidth="1" />
              <text x="170" y="124" fontFamily="JetBrains Mono" fontSize="9" textAnchor="middle" fill="var(--ink)" fontWeight="600">B</text>
              <circle cx="110" cy="38"  r="14" fill="var(--accent-soft)" stroke="var(--accent)" strokeWidth="1.2" />
              <text x="110" y="42"  fontFamily="JetBrains Mono" fontSize="9" textAnchor="middle" fill="var(--ink)" fontWeight="600">C</text>
            </svg>
            <div className="tx-graph-legend">
              <span><span className="tx-leg-line normal" /> {t("viz.txm.lg1")}</span>
              <span><span className="tx-leg-line susp" /> {t("viz.txm.lg2")}</span>
            </div>
          </div>
        </div>

        {/* 02 — Reglas disparadas */}
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.txm.c2")}</div>
          <div className="risk-rules">
            <div className="risk-rule triggered">
              <div className="risk-rule-head">
                <span className="risk-rule-tag tag-morphing">Triangulación</span>
                <span className="risk-rule-status flag">!</span>
              </div>
              <div className="risk-rule-name">{t("viz.txm.rn1")}</div>
              <div className="risk-rule-cond">{t("viz.txm.rc1")}</div>
            </div>
            <div className="risk-rule triggered">
              <div className="risk-rule-head">
                <span className="risk-rule-tag tag-velocity">Smurfing</span>
                <span className="risk-rule-status flag">!</span>
              </div>
              <div className="risk-rule-name">{t("viz.txm.rn2")}</div>
              <div className="risk-rule-cond">{t("viz.txm.rc2")}</div>
            </div>
            <div className="risk-rule">
              <div className="risk-rule-head">
                <span className="risk-rule-tag tag-advanced">Mule pattern</span>
                <span className="risk-rule-status ok">✓</span>
              </div>
              <div className="risk-rule-name">{t("viz.txm.rn3")}</div>
              <div className="risk-rule-cond">{t("viz.txm.rc3")}</div>
            </div>
          </div>
        </div>

        {/* 03 — Decisión */}
        <div className="kyc-card kyc-decision">
          <div className="kyc-card-label">{t("viz.txm.c3")}</div>
          <div className="kyc-decision-body">
            <div className="kyc-score">
              <div className="kyc-score-ring">
                <svg viewBox="0 0 60 60" width="60" height="60">
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--line)" strokeWidth="4" />
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--accent)" strokeWidth="4" strokeDasharray="163.4" strokeDashoffset="26" transform="rotate(-90 30 30)" strokeLinecap="round" />
                </svg>
                <span className="kyc-score-num">84</span>
              </div>
              <div>
                <div className="kyc-score-label">{t("viz.txm.score")}</div>
                <div className="kyc-pill reject">{t("viz.txm.pill")}</div>
              </div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.txm.m1l")}</span><span>3</span></div>
              <div><span>{t("viz.txm.m2l")}</span><span>CSE-92HJ4M</span></div>
              <div><span>{t("viz.txm.m3l")}</span><span>{t("viz.txm.m3v")}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.txm.f1")}</span>
        <span>{t("viz.txm.f2")}</span>
        <span>{t("viz.txm.f3")}</span>
      </div>
    </div>);

}

// ============ ATO Visual (Solutions · digital activity · modificaciones) ============
function ATOVisual() {
  const { t } = useLang();
  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.ato.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.ato.status")}</span>
      </div>

      <div className="kyc-grid ato-grid">
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.ato.c1")}</div>
          <div className="ato-sessions">
            <div className="ato-session">
              <div className="ato-session-head">
                <span className="ato-session-label">{t("viz.ato.s1")}</span>
                <span className="ato-session-time">{t("viz.ato.s1t")}</span>
              </div>
              <div className="ato-session-meta">{t("viz.ato.smeta1")}</div>
            </div>
            <div className="ato-session current">
              <div className="ato-session-head">
                <span className="ato-session-label">{t("viz.ato.s2")}</span>
                <span className="ato-session-time">{t("viz.ato.s2t")}</span>
              </div>
              <div className="ato-session-meta">{t("viz.ato.smeta2")}</div>
            </div>
          </div>
          <div className="ato-impossible">
            <span className="ato-impossible-tag">!</span>
            <span>{t("viz.ato.imp")}</span>
          </div>
        </div>

        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.ato.c2")}</div>
          <div className="ato-changes">
            <div className="ato-change">
              <span className="ato-change-time">12:04</span>
              <span className="ato-change-field">{t("viz.ato.cf1")}</span>
              <span className="ato-change-diff">l••@uy.io → l••@n.io</span>
            </div>
            <div className="ato-change">
              <span className="ato-change-time">12:06</span>
              <span className="ato-change-field">{t("viz.ato.cf2")}</span>
              <span className="ato-change-diff">+598 9• → +54 11•</span>
            </div>
            <div className="ato-change">
              <span className="ato-change-time">12:07</span>
              <span className="ato-change-field">{t("viz.ato.cf3")}</span>
              <span className="ato-change-diff">{t("viz.ato.cf3d")}</span>
            </div>
          </div>
        </div>

        <div className="kyc-card kyc-decision">
          <div className="kyc-card-label">{t("viz.ato.c3")}</div>
          <div className="kyc-decision-body">
            <div className="kyc-score">
              <div className="kyc-score-ring">
                <svg viewBox="0 0 60 60" width="60" height="60">
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--line)" strokeWidth="4" />
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--accent)" strokeWidth="4" strokeDasharray="163.4" strokeDashoffset="13" transform="rotate(-90 30 30)" strokeLinecap="round" />
                </svg>
                <span className="kyc-score-num">92</span>
              </div>
              <div>
                <div className="kyc-score-label">{t("viz.ato.score")}</div>
                <div className="kyc-pill reject">{t("viz.ato.pill")}</div>
              </div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.ato.m1l")}</span><span>{t("viz.ato.m1v")}</span></div>
              <div><span>{t("viz.ato.m2l")}</span><span>{t("viz.ato.m2v")}</span></div>
              <div><span>{t("viz.ato.m3l")}</span><span>{t("viz.ato.m3v")}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.ato.f1")}</span>
        <span>{t("viz.ato.f2")}</span>
        <span>{t("viz.ato.f3")}</span>
      </div>
    </div>);

}

// ============ Login Visual (digital activity · inicio de sesión) ============
function LoginVisual() {
  const { t } = useLang();
  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.log.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.log.status")}</span>
      </div>

      <div className="kyc-grid login-grid">
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.log.c1")}</div>
          <div className="login-attempt">
            <div className="login-user">
              <span className="login-avatar">LM</span>
              <div className="login-user-block">
                <div className="login-username">@lmendez</div>
                <div className="login-time">{t("viz.log.tm")}</div>
              </div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.log.rl1")}</span><span>{t("viz.log.rv1")}</span></div>
              <div><span>{t("viz.log.rl2")}</span><span>{t("viz.log.rv2")}</span></div>
              <div><span>{t("viz.log.rl3")}</span><span>{t("viz.log.rv3")}</span></div>
              <div><span>{t("viz.log.rl4")}</span><span style={{ fontFamily: "var(--font-mono)" }}>181.46.•••.••</span></div>
            </div>
          </div>
        </div>

        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.log.c2")}</div>
          <div className="device-signals">
            <div className="device-signal flag"><span className="device-signal-mark">!</span> {t("viz.log.sg1")}</div>
            <div className="device-signal flag"><span className="device-signal-mark">!</span> {t("viz.log.sg2")}</div>
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.log.sg3")}</div>
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.log.sg4")}</div>
            <div className="device-signal flag"><span className="device-signal-mark">!</span> {t("viz.log.sg5")}</div>
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.log.sg6")}</div>
          </div>
        </div>

        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.log.c3")}</div>
          <div className="login-stepup">
            <div className="login-stepup-title">{t("viz.log.su")}</div>
            <div className="case-timeline login-ladder">
              <div className="case-step pending"><span className="case-step-mark"></span><span className="case-step-name">{t("viz.log.st1")}</span></div>
              <div className="case-step active"><span className="case-step-mark"></span><span className="case-step-name">{t("viz.log.st2")}</span></div>
              <div className="case-step pending"><span className="case-step-mark"></span><span className="case-step-name">{t("viz.log.st3")}</span></div>
              <div className="case-step pending"><span className="case-step-mark"></span><span className="case-step-name">{t("viz.log.st4")}</span></div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.log.m1l")}</span><span>{t("viz.log.m1v")}</span></div>
              <div><span>{t("viz.log.m2l")}</span><span>{t("viz.log.m2v")}</span></div>
              <div><span>{t("viz.log.m3l")}</span><span>{t("viz.log.m3v")}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.log.f1")}</span>
        <span>{t("viz.log.f2")}</span>
        <span>{t("viz.log.f3")}</span>
      </div>
    </div>);

}

// ============ Register Visual (digital activity · registro) ============
function RegisterVisual() {
  const { t } = useLang();
  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.reg.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.reg.status")}</span>
      </div>

      <div className="kyc-grid register-grid">
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.reg.c1")}</div>
          <div className="register-form">
            <div className="register-field">
              <span className="register-field-label">{t("viz.reg.fl1")}</span>
              <span className="register-field-value">Laura Méndez</span>
              <span className="register-field-mark ok">✓</span>
            </div>
            <div className="register-field">
              <span className="register-field-label">{t("viz.reg.fl2")}</span>
              <span className="register-field-value">l.m@uy.io</span>
              <span className="register-field-mark flag">!</span>
            </div>
            <div className="register-field">
              <span className="register-field-label">{t("viz.reg.fl3")}</span>
              <span className="register-field-value">+598 9•••</span>
              <span className="register-field-mark ok">✓</span>
            </div>
            <div className="register-field">
              <span className="register-field-label">{t("viz.reg.fl4")}</span>
              <span className="register-field-value">CI 4•••</span>
              <span className="register-field-mark ok">✓</span>
            </div>
            <div className="register-field">
              <span className="register-field-label">{t("viz.reg.fl5")}</span>
              <span className="register-field-value">iPhone 14</span>
              <span className="register-field-mark ok">✓</span>
            </div>
          </div>
        </div>

        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.reg.c2")}</div>
          <div className="device-signals">
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.reg.sg1")}</div>
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.reg.sg2")}</div>
            <div className="device-signal flag"><span className="device-signal-mark">!</span> {t("viz.reg.sg3")}</div>
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.reg.sg4")}</div>
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.reg.sg5")}</div>
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.reg.sg6")}</div>
          </div>
        </div>

        <div className="kyc-card kyc-decision">
          <div className="kyc-card-label">{t("viz.reg.c3")}</div>
          <div className="kyc-decision-body">
            <div className="kyc-score">
              <div className="kyc-score-ring">
                <svg viewBox="0 0 60 60" width="60" height="60">
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--line)" strokeWidth="4" />
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--accent)" strokeWidth="4" strokeDasharray="163.4" strokeDashoffset="105" transform="rotate(-90 30 30)" strokeLinecap="round" />
                </svg>
                <span className="kyc-score-num">35</span>
              </div>
              <div>
                <div className="kyc-score-label">{t("viz.reg.score")}</div>
                <div className="kyc-pill ok">{t("viz.reg.pill")}</div>
              </div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.reg.m1l")}</span><span>{t("viz.reg.m1v")}</span></div>
              <div><span>{t("viz.reg.m2l")}</span><span>{t("viz.reg.m2v")}</span></div>
              <div><span>{t("viz.reg.m3l")}</span><span>{t("viz.reg.m3v")}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.reg.f1")}</span>
        <span>{t("viz.reg.f2")}</span>
        <span>{t("viz.reg.f3")}</span>
      </div>
    </div>);

}

// ============ Product Request Visual (digital activity · solicitud) ============
function ProductRequestVisual() {
  const { t } = useLang();
  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.prd.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.prd.status")}</span>
      </div>

      <div className="kyc-grid product-grid">
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.prd.c1")}</div>
          <div className="product-request">
            <div className="product-type">
              <span className="product-type-icon">$</span>
              <div className="product-type-block">
                <div className="product-type-name">{t("viz.prd.pn")}</div>
                <div className="product-type-meta">{t("viz.prd.pm")}</div>
              </div>
            </div>
            <div className="product-amount">
              <span className="product-amount-num">$5,000</span>
              <span className="product-amount-cur">USD</span>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.prd.m1l")}</span><span>Laura M.</span></div>
              <div><span>{t("viz.prd.m2l")}</span><span>{t("viz.prd.m2v")}</span></div>
              <div><span>{t("viz.prd.m3l")}</span><span>{t("viz.prd.m3v")}</span></div>
            </div>
          </div>
        </div>

        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.prd.c2")}</div>
          <div className="product-dims">
            <div className="product-dim">
              <div className="product-dim-head"><span>{t("viz.prd.d1")}</span><span>92</span></div>
              <div className="product-bar"><div className="product-bar-fill" style={{ width: "92%" }} /></div>
            </div>
            <div className="product-dim">
              <div className="product-dim-head"><span>{t("viz.prd.d2")}</span><span>78</span></div>
              <div className="product-bar"><div className="product-bar-fill" style={{ width: "78%" }} /></div>
            </div>
            <div className="product-dim">
              <div className="product-dim-head"><span>{t("viz.prd.d3")}</span><span>85</span></div>
              <div className="product-bar"><div className="product-bar-fill" style={{ width: "85%" }} /></div>
            </div>
            <div className="product-dim">
              <div className="product-dim-head"><span>{t("viz.prd.d4")}</span><span>100</span></div>
              <div className="product-bar"><div className="product-bar-fill" style={{ width: "100%" }} /></div>
            </div>
            <div className="product-dim">
              <div className="product-dim-head"><span>{t("viz.prd.d5")}</span><span>62</span></div>
              <div className="product-bar"><div className="product-bar-fill" style={{ width: "62%" }} /></div>
            </div>
          </div>
        </div>

        <div className="kyc-card kyc-decision">
          <div className="kyc-card-label">{t("viz.prd.c3")}</div>
          <div className="kyc-decision-body">
            <div className="kyc-score">
              <div className="kyc-score-ring">
                <svg viewBox="0 0 60 60" width="60" height="60">
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--line)" strokeWidth="4" />
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--accent)" strokeWidth="4" strokeDasharray="163.4" strokeDashoffset="29" transform="rotate(-90 30 30)" strokeLinecap="round" />
                </svg>
                <span className="kyc-score-num">82</span>
              </div>
              <div>
                <div className="kyc-score-label">{t("viz.prd.score")}</div>
                <div className="kyc-pill ok">{t("viz.prd.pill")}</div>
              </div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.prd.a1l")}</span><span>$5,000</span></div>
              <div><span>{t("viz.prd.a2l")}</span><span>$3,000</span></div>
              <div><span>{t("viz.prd.a3l")}</span><span>{t("viz.prd.a3v")}</span></div>
              <div><span>{t("viz.prd.a4l")}</span><span>{t("viz.prd.a4v")}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.prd.f1")}</span>
        <span>{t("viz.prd.f2")}</span>
        <span>{t("viz.prd.f3")}</span>
      </div>
    </div>);

}

// ============ Payment Visual (transactional · pagos) ============
function PaymentVisual() {
  const { t } = useLang();
  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.pay.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.pay.status")}</span>
      </div>

      <div className="kyc-grid pay-grid">
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.pay.c1")}</div>
          <div className="pay-body">
            <div className="pay-amount">$1,250<em>.00</em><span className="pay-cur">USD</span></div>
            <div className="pay-card">VISA · ••••a4f2</div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.pay.m1l")}</span><span>OnlineShop AR</span></div>
              <div><span>{t("viz.pay.m2l")}</span><span>{t("viz.pay.m2v")}</span></div>
              <div><span>{t("viz.pay.m3l")}</span><span>{t("viz.pay.m3v")}</span></div>
            </div>
          </div>
        </div>

        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.pay.c2")}</div>
          <div className="device-signals">
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.pay.sg1")}</div>
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.pay.sg2")}</div>
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.pay.sg3")}</div>
            <div className="device-signal ok"><span className="device-signal-mark">✓</span> {t("viz.pay.sg4")}</div>
          </div>
        </div>

        <div className="kyc-card kyc-decision">
          <div className="kyc-card-label">{t("viz.pay.c3")}</div>
          <div className="kyc-decision-body">
            <div className="kyc-score">
              <div className="kyc-score-ring">
                <svg viewBox="0 0 60 60" width="60" height="60">
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--line)" strokeWidth="4" />
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--accent)" strokeWidth="4" strokeDasharray="163.4" strokeDashoffset="143" transform="rotate(-90 30 30)" strokeLinecap="round" />
                </svg>
                <span className="kyc-score-num">12</span>
              </div>
              <div>
                <div className="kyc-score-label">{t("viz.pay.score")}</div>
                <div className="kyc-pill ok">{t("viz.pay.pill")}</div>
              </div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.pay.dl")}</span><span>{t("viz.pay.dv")}</span></div>
              <div><span>{t("viz.pay.latl")}</span><span>{t("viz.pay.latv")}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.pay.f1")}</span>
        <span>{t("viz.pay.f2")}</span>
        <span>{t("viz.pay.f3")}</span>
      </div>
    </div>);

}

// ============ Transfer Visual (transactional · transferencias) ============
function TransferVisual() {
  const { t } = useLang();
  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.tr.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.tr.status")}</span>
      </div>

      <div className="kyc-grid transfer-grid">
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.tr.c1")}</div>
          <div className="transfer-body">
            <div className="transfer-flow">
              <div className="transfer-account">
                <div className="transfer-account-label">{t("viz.tr.f1")}</div>
                <div className="transfer-account-name">L. Méndez</div>
                <div className="transfer-account-meta">{t("viz.tr.fm1")}</div>
              </div>
              <div className="transfer-arrow">→</div>
              <div className="transfer-account current">
                <div className="transfer-account-label">{t("viz.tr.f2")}</div>
                <div className="transfer-account-name">@usr_4f2</div>
                <div className="transfer-account-meta">{t("viz.tr.fm2")}</div>
              </div>
            </div>
            <div className="transfer-amount">
              <span className="transfer-amount-num">$8,500</span>
              <span className="transfer-amount-cur">USD</span>
              <span className="transfer-amount-time">14:23</span>
            </div>
          </div>
        </div>

        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.tr.c2")}</div>
          <div className="transfer-graph">
            <svg viewBox="0 0 220 140" className="transfer-svg" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
              <line x1="40"  y1="35"  x2="160" y2="70" stroke="var(--neutral-3)" strokeWidth="0.8" />
              <line x1="40"  y1="70"  x2="160" y2="70" stroke="var(--accent)" strokeWidth="1.4" />
              <line x1="40"  y1="105" x2="160" y2="70" stroke="var(--neutral-3)" strokeWidth="0.8" />
              <line x1="80"  y1="30"  x2="160" y2="70" stroke="var(--neutral-3)" strokeWidth="0.8" />
              <line x1="80"  y1="110" x2="160" y2="70" stroke="var(--neutral-3)" strokeWidth="0.8" />
              <circle cx="40"  cy="35"  r="9" fill="#fff" stroke="var(--line-strong)" strokeWidth="1" />
              <circle cx="40"  cy="70"  r="9" fill="var(--accent-soft)" stroke="var(--accent)" strokeWidth="1" />
              <circle cx="40"  cy="105" r="9" fill="#fff" stroke="var(--line-strong)" strokeWidth="1" />
              <circle cx="80"  cy="30"  r="9" fill="#fff" stroke="var(--line-strong)" strokeWidth="1" />
              <circle cx="80"  cy="110" r="9" fill="#fff" stroke="var(--line-strong)" strokeWidth="1" />
              <circle cx="160" cy="70" r="14" fill="var(--ink)" />
              <text x="160" y="74" fontFamily="JetBrains Mono" fontSize="9" fontWeight="600" textAnchor="middle" fill="var(--accent)">MULE</text>
            </svg>
            <div className="transfer-graph-legend">{t("viz.tr.gleg")}</div>
          </div>
        </div>

        <div className="kyc-card kyc-decision">
          <div className="kyc-card-label">{t("viz.tr.c3")}</div>
          <div className="kyc-decision-body">
            <div className="kyc-score">
              <div className="kyc-score-ring">
                <svg viewBox="0 0 60 60" width="60" height="60">
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--line)" strokeWidth="4" />
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--accent)" strokeWidth="4" strokeDasharray="163.4" strokeDashoffset="20" transform="rotate(-90 30 30)" strokeLinecap="round" />
                </svg>
                <span className="kyc-score-num">88</span>
              </div>
              <div>
                <div className="kyc-score-label">{t("viz.tr.score")}</div>
                <div className="kyc-pill reject">{t("viz.tr.pill")}</div>
              </div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.tr.m1l")}</span><span>{t("viz.tr.m1v")}</span></div>
              <div><span>{t("viz.tr.m2l")}</span><span>{t("viz.tr.m2v")}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.tr.ftr1")}</span>
        <span>{t("viz.tr.ftr2")}</span>
        <span>{t("viz.tr.ftr3")}</span>
      </div>
    </div>);

}

// ============ Withdrawal Visual (transactional · retiros) ============
function WithdrawalVisual() {
  const { t } = useLang();
  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.wd.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.wd.status")}</span>
      </div>

      <div className="kyc-grid withdraw-grid">
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.wd.c1")}</div>
          <div className="withdraw-body">
            <div className="withdraw-amount">$8,500<em>.00</em><span className="withdraw-cur">USD</span></div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.wd.m1l")}</span><span>{t("viz.wd.m1v")}</span></div>
              <div><span>{t("viz.wd.m2l")}</span><span>@usr_4f2</span></div>
              <div><span>{t("viz.wd.m3l")}</span><span>{t("viz.wd.m3v")}</span></div>
            </div>
            <div className="withdraw-clock">
              <div className="withdraw-clock-bar"><div className="withdraw-clock-fill" style={{ width: "82%" }} /></div>
              <span>{t("viz.wd.ck")}</span>
            </div>
          </div>
        </div>

        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.wd.c2")}</div>
          <div className="withdraw-trace">
            <div className="withdraw-event">
              <span className="withdraw-event-time">14:18</span>
              <span className="withdraw-event-name">{t("viz.wd.e1")}</span>
              <span className="withdraw-event-meta">{t("viz.wd.e1m")}</span>
            </div>
            <div className="withdraw-event">
              <span className="withdraw-event-time">14:21</span>
              <span className="withdraw-event-name">{t("viz.wd.e2")}</span>
              <span className="withdraw-event-meta">$8,510 USD</span>
            </div>
            <div className="withdraw-event">
              <span className="withdraw-event-time">14:23</span>
              <span className="withdraw-event-name">{t("viz.wd.e3")}</span>
              <span className="withdraw-event-meta">{t("viz.wd.e3m")}</span>
            </div>
          </div>
        </div>

        <div className="kyc-card kyc-decision">
          <div className="kyc-card-label">{t("viz.wd.c3")}</div>
          <div className="kyc-decision-body">
            <div className="kyc-score">
              <div className="kyc-score-ring">
                <svg viewBox="0 0 60 60" width="60" height="60">
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--line)" strokeWidth="4" />
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--accent)" strokeWidth="4" strokeDasharray="163.4" strokeDashoffset="13" transform="rotate(-90 30 30)" strokeLinecap="round" />
                </svg>
                <span className="kyc-score-num">92</span>
              </div>
              <div>
                <div className="kyc-score-label">{t("viz.wd.score")}</div>
                <div className="kyc-pill reject">{t("viz.wd.pill")}</div>
              </div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.wd.m4l")}</span><span>{t("viz.wd.m4v")}</span></div>
              <div><span>{t("viz.wd.m5l")}</span><span>{t("viz.wd.m5v")}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.wd.f1")}</span>
        <span>{t("viz.wd.f2")}</span>
        <span>{t("viz.wd.f3")}</span>
      </div>
    </div>);

}

// ============ Promo Visual (transactional · promociones) ============
function PromoVisual() {
  const { t } = useLang();
  return (
    <div className="kyc-visual">
      <div className="kyc-head">
        <span className="kyc-tag">{t("viz.pr.tag")}</span>
        <span className="kyc-status"><span className="kyc-dot" /> {t("viz.pr.status")}</span>
      </div>

      <div className="kyc-grid promo-grid">
        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.pr.c1")}</div>
          <div className="promo-body">
            <div className="promo-name">{t("viz.pr.nm")}</div>
            <div className="promo-amount">+$50 USD</div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.pr.m1l")}</span><span>3,420</span></div>
              <div><span>{t("viz.pr.m2l")}</span><span>184</span></div>
              <div><span>{t("viz.pr.m3l")}</span><span>{t("viz.pr.m3v")}</span></div>
            </div>
          </div>
        </div>

        <div className="kyc-card">
          <div className="kyc-card-label">{t("viz.pr.c2")}</div>
          <div className="promo-cluster">
            <svg viewBox="0 0 220 150" className="promo-svg" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
              <line x1="110" y1="75" x2="40"  y2="30"  stroke="var(--accent)" strokeWidth="0.8" strokeDasharray="2 2" />
              <line x1="110" y1="75" x2="180" y2="30"  stroke="var(--accent)" strokeWidth="0.8" strokeDasharray="2 2" />
              <line x1="110" y1="75" x2="20"  y2="80"  stroke="var(--accent)" strokeWidth="0.8" strokeDasharray="2 2" />
              <line x1="110" y1="75" x2="200" y2="80"  stroke="var(--accent)" strokeWidth="0.8" strokeDasharray="2 2" />
              <line x1="110" y1="75" x2="50"  y2="125" stroke="var(--accent)" strokeWidth="0.8" strokeDasharray="2 2" />
              <line x1="110" y1="75" x2="170" y2="125" stroke="var(--accent)" strokeWidth="0.8" strokeDasharray="2 2" />
              <line x1="110" y1="75" x2="110" y2="20"  stroke="var(--accent)" strokeWidth="0.8" strokeDasharray="2 2" />
              <circle cx="40"  cy="30"  r="8" fill="#fff" stroke="var(--accent)" strokeWidth="1" />
              <circle cx="180" cy="30"  r="8" fill="#fff" stroke="var(--accent)" strokeWidth="1" />
              <circle cx="20"  cy="80"  r="8" fill="#fff" stroke="var(--accent)" strokeWidth="1" />
              <circle cx="200" cy="80"  r="8" fill="#fff" stroke="var(--accent)" strokeWidth="1" />
              <circle cx="50"  cy="125" r="8" fill="#fff" stroke="var(--accent)" strokeWidth="1" />
              <circle cx="170" cy="125" r="8" fill="#fff" stroke="var(--accent)" strokeWidth="1" />
              <circle cx="110" cy="20"  r="8" fill="#fff" stroke="var(--accent)" strokeWidth="1" />
              <rect x="92"  y="53" width="36" height="48" rx="4" fill="var(--ink)" />
              <rect x="98"  y="59" width="24" height="32" rx="2" fill="var(--paper)" />
              <circle cx="110" cy="97" r="2" fill="var(--paper)" />
            </svg>
            <div className="promo-cluster-legend">{t("viz.pr.leg")}</div>
          </div>
        </div>

        <div className="kyc-card kyc-decision">
          <div className="kyc-card-label">{t("viz.pr.c3")}</div>
          <div className="kyc-decision-body">
            <div className="kyc-score">
              <div className="kyc-score-ring">
                <svg viewBox="0 0 60 60" width="60" height="60">
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--line)" strokeWidth="4" />
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--accent)" strokeWidth="4" strokeDasharray="163.4" strokeDashoffset="22" transform="rotate(-90 30 30)" strokeLinecap="round" />
                </svg>
                <span className="kyc-score-num">86</span>
              </div>
              <div>
                <div className="kyc-score-label">{t("viz.pr.score")}</div>
                <div className="kyc-pill reject">{t("viz.pr.pill")}</div>
              </div>
            </div>
            <div className="kyc-meta-rows">
              <div><span>{t("viz.pr.m4l")}</span><span>{t("viz.pr.m4v")}</span></div>
              <div><span>{t("viz.pr.m5l")}</span><span>{t("viz.pr.m5v")}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="kyc-footer">
        <span>{t("viz.pr.f1")}</span>
        <span>{t("viz.pr.f2")}</span>
        <span>{t("viz.pr.f3")}</span>
      </div>
    </div>);

}

// ============ One platform ============
function OnePlatform() {
  const { t } = useLang();
  return (
    <section id="una-plataforma" className="on-ink">
      <div className="container">
        <div className="section-head center">
          <div>
            <span className="kicker"><span className="dot" />{t("p2.one.kicker")}</span>
            <h2 className="section" style={{ marginTop: 18, maxWidth: 18 + "ch", color: "#fff" }}>
              {t("p2.one.h2a")}<br /><span style={{ color: "#e0b145" }}>{t("p2.one.h2b")}</span>
            </h2>
            <p className="lead" style={{ marginTop: 22 }}>{t("p2.one.lead")}</p>
          </div>
        </div>

        <div className="cards-3">
          <div className="card">
            <div className="num">{t("p2.one.c0n")}</div>
            <h3 className="card-title">{t("p2.one.c0t")}</h3>
            <p>{t("p2.one.c0p")}</p>
          </div>
          <div className="card">
            <div className="num">{t("p2.one.c1n")}</div>
            <h3 className="card-title">{t("p2.one.c1t")}</h3>
            <p>{t("p2.one.c1p")}</p>
          </div>
          <div className="card">
            <div className="num">{t("p2.one.c2n")}</div>
            <h3 className="card-title">{t("p2.one.c2t")}</h3>
            <p>{t("p2.one.c2p")}</p>
          </div>
        </div>
      </div>
    </section>);

}

// ============ Industries grid ============
function Industries() {
  const { t, lang } = useLang();
  const items = useMemo(() =>
    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => [t("p2.ind.i" + i + "n"), t("p2.ind.i" + i + "m")]),
  [lang, t]);

  return (
    <section id="industrias" className="on-paper">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot" />{t("p2.ind.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16 }}>{t("p2.ind.h2")}</h2>
          </div>
          <p className="lead">{t("p2.ind.lead")}</p>
        </div>

        <div className="chip-grid">
          {items.map(([n, m], i) =>
          <div className="chip" key={i}>
              <span className="name">{n}</span>
              <span className="meta">{m}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============ FAQ ============
function FAQ() {
  const { t, lang } = useLang();
  const [open, setOpen] = useState2(0);
  const items = useMemo(() => [
    [t("p2.faq.q0"), t("p2.faq.a0")],
    [t("p2.faq.q1"), t("p2.faq.a1")],
    [t("p2.faq.q2"), t("p2.faq.a2")],
    [t("p2.faq.q3"), t("p2.faq.a3")],
    [t("p2.faq.q4"), t("p2.faq.a4")],
    [t("p2.faq.q5"), t("p2.faq.a5")]
  ], [lang, t]);

  return (
    <section id="faq">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot" />{t("p2.faq.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16 }}>{t("p2.faq.h2")}</h2>
          </div>
          <p className="lead">
            {t("p2.faq.leadto")}{" "}
            <a href="mailto:contacto@forsvar.io" style={{ color: "var(--ink)", borderBottom: "1px solid currentColor" }}>contacto@forsvar.io</a>{" "}
            {t("p2.faq.leada")}
          </p>
        </div>

        <div>
          {items.map(([q, a], i) =>
          <div className="faq-item" key={i} data-open={open === i}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{q}</span>
                <span className="plus">+</span>
              </div>
              <div className="faq-a"><div><p>{a}</p></div></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============ CTA ============
function CTA() {
  const { t } = useLang();
  return (
    <section id="demo" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="cta-wrap on-ink">
          <div>
            <span className="kicker"><span className="dot" />{t("p2.cta.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16, color: "#fff" }}>{t("p2.cta.h2")}</h2>
            <p>{t("p2.cta.p")}</p>
          </div>
          <div className="cta-actions">
            <a href={window.FORSVAR_BOOK_DEMO_CALENDAR_HREF} className="btn btn-primary" target="_blank" rel="noopener noreferrer">{t("p2.cta.btn1")} <Arrow /></a>
            <a href="mailto:contacto@forsvar.io" className="btn btn-ghost">contacto@forsvar.io</a>
          </div>
        </div>
      </div>
    </section>);

}

// ============ Blog ============
function Blog() {
  const { t, lang } = useLang();
  const posts = useMemo(() => [
    [t("blog.posts.p3.category"), t("blog.posts.p3.title"), t("blog.posts.p3.excerpt"), "#eef2f6", "blog-fraude-digital-riesgo-estructural-fintech.html", "assets/blog-artworks/manual-fintech.png"],
    [t("p2.blog.p0c"), t("p2.blog.p0t"), t("p2.blog.p0d"), "var(--paper)", "blog-como-reducir-fraude-sin-frenar-crecimiento.html", "assets/blog-artworks/aprobacion-vs-perdidas.png"],
    [t("p2.blog.p1c"), t("p2.blog.p1t"), t("p2.blog.p1d"), "#e8e3d6", "blog-aml-operativo-alertas-casos-evidencia.html", "assets/blog-artworks/expediente-de-caso.png"],
    [t("p2.blog.p2c"), t("p2.blog.p2t"), t("p2.blog.p2d"), "#dadfe8", "blog-riesgo-digital-en-cada-punto-del-recorrido.html", "assets/blog-artworks/signal-matrix.png"]
  ], [lang, t]);

  return (
    <section id="blog">
      <div className="container">
        <div className="eyebrow-row">
          <div>
            <span className="kicker"><span className="dot" />{t("p2.blog.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16 }}>{t("p2.blog.h2")}</h2>
          </div>
          <a href="blog.html" className="btn btn-ghost">{t("p2.blog.all")} <Arrow /></a>
        </div>

        <div className="cards-4" style={{ gap: 20 }}>
          {posts.map(([cat, title, d, bg, href, artwork], i) =>
          <a className="blog-card" key={i} href={href}>
              <div className="thumb" style={{ background: bg }}>
                {artwork ? (
                  <img src={artwork} alt="" loading="lazy" />
                ) : (
                  <div className="placeholder" style={{ position: "absolute", inset: 16, background: "transparent", border: "1px dashed #1f2a3d44", color: "#1f2a3d99" }}>
                    {t("p2.blog.art")}{String(i + 1).padStart(2, "0")} ]
                  </div>
                )}
              </div>
              <div className="body">
                <div className="meta">{cat}</div>
                <h3>{title}</h3>
                <p style={{ color: "var(--neutral-2)", fontSize: 14.5, marginTop: 10 }}>{d}</p>
                <div className="read">{t("p2.blog.read")}</div>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

function PageDemoCTA() {
  const { t } = useLang();
  return (
    <section id="demo">
      <div className="container">
        <div className="cta-wrap on-ink">
          <div>
            <span className="kicker"><span className="dot" />{t("p2.cta.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16, color: "#fff" }}>{t("p2.cta.h2")}</h2>
            <p>{t("p2.cta.p")}</p>
          </div>
          <div className="cta-actions">
            <a href={window.FORSVAR_BOOK_DEMO_CALENDAR_HREF} className="btn btn-primary" target="_blank" rel="noopener noreferrer">{t("p2.cta.btn1")} <Arrow /></a>
            <a href="mailto:contacto@forsvar.io" className="btn btn-ghost">contacto@forsvar.io</a>
          </div>
        </div>
      </div>
    </section>);
}

// ============ Footer ============
function Footer() {
  const { t } = useLang();
  return (
    <footer className="site-footer" id="contacto">
      <div className="container">
        <div className="grid">
          <div>
            <a href="index.html" className="logo-link on-dark" style={{ marginBottom: 22 }}>
              <img src="assets/forsvar-eagle-white.png" alt="" className="logo-eagle" />
              <span className="wordmark on-dark">FORSVAR</span>
            </a>
            <p style={{ color: "var(--on-ink-dim)", fontSize: 14, maxWidth: 36 + "ch", marginTop: 8 }}>
              {t("p2.footer.tagline")}
            </p>
            <a href={window.FORSVAR_BOOK_DEMO_CALENDAR_HREF} className="btn btn-primary" style={{ marginTop: 22, backgroundColor: "rgb(224, 177, 69)", color: "rgb(26, 26, 26)" }} target="_blank" rel="noopener noreferrer">{t("p2.footer.demo")} <Arrow /></a>
          </div>
          <div>
            <h4>{t("p2.footer.hprod")}</h4>
            <ul>
              <li><a href="fraud_prevention.html">{t("p2.footer.fraud")}</a></li>
              <li><a href="aml.html">{t("p2.footer.aml")}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t("p2.footer.hs")}</h4>
            <ul>
              <li><a href="digital_activity.html">{t("p2.footer.dig")}</a></li>
              <li><a href="transactional_activity.html">{t("p2.footer.tx")}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t("p2.footer.hi")}</h4>
            <ul>
              <li><a href="industries.html#billeteras-digitales">{t("p2.footer.wal")}</a></li>
              <li><a href="industries.html#procesadores-pago">{t("p2.footer.pay")}</a></li>
              <li><a href="industries.html#marketplaces">{t("p2.footer.mar")}</a></li>
            </ul>
            <a href="industries.html" className="footer-see-all">
              {t("p2.footer.see")} <Arrow />
            </a>
          </div>
          <div>
            <h4>{t("p2.footer.hc")}</h4>
            <ul>
              <li><a href="about_us.html">{t("p2.footer.about")}</a></li>
              <li><a href="blog.html">{t("p2.footer.blog")}</a></li>
              <li><a href="join_us.html">{t("p2.footer.join")}</a></li>
              <li><a href="https://www.linkedin.com/company/forsvar-risk-solution/" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
            </ul>
          </div>
          <div>
            <h4>{t("p2.footer.hco")}</h4>
            <ul>
              <li><a href="mailto:contacto@forsvar.io">contacto@forsvar.io</a></li>
              <li><a href="contact_us.html">{t("p2.footer.form")}</a></li>
              <li><a href={window.FORSVAR_BOOK_DEMO_CALENDAR_HREF} target="_blank" rel="noopener noreferrer">{t("p2.footer.demob")}</a></li>
            </ul>
          </div>
        </div>

        <div className="baseline">
          <span>{t("p2.footer.copy")}</span>
          <span>{t("p2.footer.langs")}</span>
          <span>{t("p2.footer.latam")}</span>
        </div>
      </div>
    </footer>);

}

window.CapabilityRows = CapabilityRows;
window.FeatRow = FeatRow;
window.RiskEngineVisual = RiskEngineVisual;
window.AnomalyVisual = AnomalyVisual;
window.CasesVisual = CasesVisual;
window.ComplianceVisual = ComplianceVisual;
window.MLVisual = MLVisual;
window.DeviceVisual = DeviceVisual;
window.DigitalProfileVisual = DigitalProfileVisual;
window.GeoVisual = GeoVisual;
window.User360Visual = User360Visual;
window.RiskMatrixVisual = RiskMatrixVisual;
window.TxMonitoringVisual = TxMonitoringVisual;
window.ATOVisual = ATOVisual;
window.LoginVisual = LoginVisual;
window.RegisterVisual = RegisterVisual;
window.ProductRequestVisual = ProductRequestVisual;
window.PaymentVisual = PaymentVisual;
window.TransferVisual = TransferVisual;
window.WithdrawalVisual = WithdrawalVisual;
window.PromoVisual = PromoVisual;
window.OnePlatform = OnePlatform;
window.Industries = Industries;
window.FAQ = FAQ;
window.CTA = CTA;
window.Blog = Blog;
window.PageDemoCTA = PageDemoCTA;
window.Footer = Footer;