/* Delto Web 2.0 — Sections
   Conversations · Architecture · Suite · Skills · Metrics ·
   TTV · Compliance · Cases · Partners · CTA · Footer        */

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

const PREFERS_REDUCED_MOTION =
  typeof window !== 'undefined' &&
  window.matchMedia &&
  window.matchMedia('(prefers-reduced-motion: reduce)').matches;

/* ================================================
   CONVERSATIONS SHOWCASE
   Three parallel phone mockups, each running a different
   conversation simultaneously. Auto-loops with stagger.
   ================================================ */
function ConvosShowcase({ t }) {
  const cards = [
    {
      brand: 'Banco Andes', tone: 'teal', tag: t.convos.tag_a,
      avatar: 'BA',
      script: [
        { from: 'bot', t: '¡Hola Ana! Tu Visa vence en 2 días. ¿La pagás ahora?' },
        { from: 'user', t: 'Sí, pagá todo' },
        { from: 'bot', card: 'pay-confirm', amount: '$17.847,00', src: 'Caja de Ahorro' },
        { from: 'bot', t: '✓ Pagado. Comprobante a tu mail.' },
      ],
    },
    {
      brand: 'Turing Bank', tone: 'lilac', tag: t.convos.tag_b,
      avatar: 'TB',
      script: [
        { from: 'user', t: 'No reconozco un cargo de $4.200' },
        { from: 'bot', t: 'Veo el cargo en BurgerKing 14/04. ¿Lo desconocés?' },
        { from: 'user', t: 'Sí, ese mismo' },
        { from: 'bot', card: 'dispute', merchant: 'BurgerKing', amount: '$4.200' },
      ],
    },
    {
      brand: 'Ficohsa', tone: 'sand', tag: t.convos.tag_c,
      avatar: 'FH',
      script: [
        { from: 'bot', t: 'Te ofrezco un préstamo de $80.000 a 12 cuotas.' },
        { from: 'bot', card: 'loan-offer', amount: '$80.000', term: '12 cuotas', rate: '38% TNA' },
        { from: 'user', t: 'Aceptar' },
        { from: 'bot', t: '✓ Acreditado. Cuota mensual: $9.420.' },
      ],
    },
  ];

  return (
    <section className="sect on-cream" id="live">
      <div className="sect-inner">
        <div className="sect-head reveal">
          <div className="eyebrow">{t.convos.eyebrow}</div>
          <h2>
            {t.convos.title_a}{' '}
            <span className="hl">{t.convos.title_b}</span>{' '}
            {t.convos.title_c}
          </h2>
          <p className="sect-sub">{t.convos.sub}</p>
        </div>
        <div className="convos-grid reveal">
          {cards.map((c, i) => (
            <ConvoPhone key={c.brand} card={c} delay={i * 600} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ConvoPhone({ card, delay }) {
  const [visible, setVisible] = useState(0);
  const [typing, setTyping] = useState(false);

  useEffect(() => {
    let cancelled = false;
    let i = 0;
    setVisible(0);
    setTyping(false);
    async function run() {
      await new Promise(r => setTimeout(r, delay));
      if (cancelled) return;
      while (!cancelled) {
        if (i >= card.script.length) {
          await new Promise(r => setTimeout(r, 4500));
          if (cancelled) return;
          i = 0;
          setVisible(0);
          continue;
        }
        const m = card.script[i];
        if (m.from === 'bot' && m.t) {
          setTyping(true);
          await new Promise(r => setTimeout(r, 900));
          if (cancelled) return;
          setTyping(false);
          await new Promise(r => setTimeout(r, 120));
        } else {
          await new Promise(r => setTimeout(r, m.from === 'user' ? 1500 : 1100));
        }
        if (cancelled) return;
        setVisible(v => v + 1);
        i++;
      }
    }
    run();
    return () => { cancelled = true; };
  }, [card, delay]);

  return (
    <div className={`convo-phone tone-${card.tone}`}>
      <div className="convo-phone-tag">
        <span className="convo-phone-dot"></span>
        {card.tag}
      </div>
      <div className="convo-phone-frame">
        <div className="convo-phone-notch"></div>
        <div className="convo-phone-screen">
          <div className="convo-phone-head">
            <div className="convo-phone-avatar">{card.avatar}</div>
            <div>
              <div className="convo-phone-brand">{card.brand}</div>
              <div className="convo-phone-status"><span></span>en línea</div>
            </div>
          </div>
          <div className="convo-phone-body">
            {card.script.slice(0, visible).map((m, i) => (
              <ConvoBubble key={i} msg={m} />
            ))}
            {typing && visible < card.script.length && card.script[visible]?.from === 'bot' && card.script[visible]?.t && (
              <div className="convo-bubble convo-bot convo-typing">
                <span></span><span></span><span></span>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function ConvoBubble({ msg }) {
  if (msg.card === 'pay-confirm') {
    return (
      <div className="convo-bubble convo-bot convo-card">
        <div className="cc-pay-head">
          <div className="cc-pay-brand">VISA</div>
          <div className="cc-pay-num">•••• 4457</div>
        </div>
        <div className="cc-pay-amt">{msg.amount}</div>
        <div className="cc-pay-src">desde {msg.src}</div>
        <div className="cc-pay-cta">Pagado ✓</div>
      </div>
    );
  }
  if (msg.card === 'dispute') {
    return (
      <div className="convo-bubble convo-bot convo-card cc-dispute">
        <div className="cc-d-row"><span>Comercio</span><b>{msg.merchant}</b></div>
        <div className="cc-d-row"><span>Monto</span><b>{msg.amount}</b></div>
        <div className="cc-d-row"><span>Estado</span><b className="cc-d-pending">En revisión</b></div>
      </div>
    );
  }
  if (msg.card === 'loan-offer') {
    return (
      <div className="convo-bubble convo-bot convo-card cc-loan">
        <div className="cc-loan-amt">{msg.amount}</div>
        <div className="cc-loan-row"><span>Plazo</span><b>{msg.term}</b></div>
        <div className="cc-loan-row"><span>TNA</span><b>{msg.rate}</b></div>
        <div className="cc-loan-cta">Aceptar oferta →</div>
      </div>
    );
  }
  return (
    <div className={`convo-bubble convo-${msg.from}`}>{msg.t}</div>
  );
}

/* ================================================
   ARCHITECTURE V2 — Dark teal showcase running an
   actual balance-inquiry skill across the platform
   layers, with custom mini-vizs per layer and
   continuous flowing connectors (no step loop).
   ================================================ */

function Conn({ flavor }) {
  return (
    <div className={`ba-conn ${flavor ? 'f-' + flavor : ''}`} aria-hidden>
      <span className="ba-conn-line"></span>
      <span className="ba-conn-dot"></span>
    </div>
  );
}

function ChannelIco({ kind }) {
  // Tiny SVG channel icons
  switch (kind) {
    case 'wa':
      return (
        <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.8-1.6-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.7-1-2.3-.2-.6-.5-.5-.7-.5-.2 0-.4 0-.6 0-.2 0-.5.1-.8.4-.3.3-1.1 1.1-1.1 2.6 0 1.6 1.2 3.1 1.3 3.3.2.3 2.3 3.6 5.7 5 .8.3 1.4.5 1.9.7.8.2 1.5.2 2.1.1.6-.1 1.7-.7 2-1.4.3-.7.3-1.2.2-1.4-.1-.2-.3-.2-.5-.3z"/><path d="M12 21c-1.5 0-3-.4-4.3-1.1L3 21l1.2-4.5C3.4 15.1 3 13.6 3 12c0-5 4-9 9-9s9 4 9 9-4 9-9 9z"/></svg>
      );
    case 'web':
      return (
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a13.5 13.5 0 0 1 0 18M12 3a13.5 13.5 0 0 0 0 18"/></svg>
      );
    case 'voice':
      return (
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"/><path d="M19 10v1a7 7 0 0 1-14 0v-1M12 18v3M8 21h8"/></svg>
      );
    case 'teams':
      return (
        <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><rect x="3" y="6" width="11" height="12" rx="1.5"/><circle cx="18" cy="9" r="2.4"/><path d="M14 13h6.5a1.5 1.5 0 0 1 1.5 1.5v3a3 3 0 0 1-3 3H17a3 3 0 0 1-3-3V13z" opacity=".75"/><text x="8.5" y="14.6" fontSize="7" fill="#01373d" fontWeight="700" textAnchor="middle">T</text></svg>
      );
    case 'ios':
      return (
        <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M17.05 12.54c-.03-2.76 2.25-4.08 2.35-4.15-1.28-1.87-3.28-2.13-3.99-2.16-1.7-.17-3.31 1-4.17 1-.88 0-2.2-.97-3.61-.94-1.86.03-3.57 1.08-4.52 2.74-1.93 3.33-.49 8.27 1.39 10.98.92 1.33 2.01 2.82 3.44 2.77 1.38-.05 1.9-.9 3.57-.9 1.66 0 2.13.9 3.59.87 1.48-.02 2.42-1.34 3.33-2.68 1.05-1.54 1.49-3.03 1.51-3.11-.03-.02-2.89-1.11-2.89-4.42zM14.57 4.36c.75-.9 1.26-2.15 1.12-3.39-1.08.04-2.38.72-3.16 1.62-.7.79-1.31 2.07-1.15 3.28 1.21.1 2.44-.61 3.19-1.51z"/></svg>
      );
    case 'android':
      return (
        <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M17.6 9.48l1.84-3.18a.4.4 0 0 0-.15-.55.4.4 0 0 0-.55.15l-1.87 3.22A11.5 11.5 0 0 0 12 8.25c-1.75 0-3.39.39-4.87 1.07L5.26 6.1a.4.4 0 0 0-.55-.15.4.4 0 0 0-.15.55l1.84 3.18A10.47 10.47 0 0 0 1 18h22a10.47 10.47 0 0 0-5.4-8.52zM7 15.25a1.13 1.13 0 1 1 0-2.25 1.13 1.13 0 0 1 0 2.25zm10 0a1.13 1.13 0 1 1 0-2.25 1.13 1.13 0 0 1 0 2.25z"/></svg>
      );
    default: return null;
  }
}

function Architecture({ t }) {
  return (
    <section className="sect on-dark-deep ba-v2" id="architecture">
      <div className="sect-inner">
        <div className="sect-head reveal">
          <div className="eyebrow on-dark">{t.arch.eyebrow}</div>
          <h2>
            {t.arch.title_a}{' '}
            <span className="hl">{t.arch.title_b}</span>
            {t.arch.title_c}
          </h2>
        </div>

        <div className="ba-kpis reveal">
          <div className="ba-kpi"><div className="ba-kpi-v">{t.arch.kpi_a_v}</div><div className="ba-kpi-l">{t.arch.kpi_a_l}</div></div>
          <div className="ba-kpi"><div className="ba-kpi-v">{t.arch.kpi_b_v}</div><div className="ba-kpi-l">{t.arch.kpi_b_l}</div></div>
          <div className="ba-kpi"><div className="ba-kpi-v">{t.arch.kpi_c_v}</div><div className="ba-kpi-l">{t.arch.kpi_c_l}</div></div>
        </div>

        {/* Sovereignty perimeter wrap (no top/bottom labels) */}
        <div className="ba-perim reveal">

          {/* ─────────── CHANNELS + USER MESSAGE ─────────── */}
          <div className="ba-card ba-channels-card">
            <div className="ba-card-head">
              <div className="ba-eye">Mensaje del usuario</div>
              <div className="ba-card-meta">› entrada multi-canal</div>
            </div>
            <div className="ba-channels-grid">
              {[
                { k: 'wa', n: 'WhatsApp' },
                { k: 'web', n: 'Web Chat', live: true },
                { k: 'voice', n: 'Voice' },
                { k: 'teams', n: 'Teams' },
                { k: 'ios', n: 'iOS' },
                { k: 'android', n: 'Android' },
              ].map(c => (
                <div key={c.k} className={`ba-ch ${c.live ? 'is-live' : ''}`}>
                  <div className="ba-ch-ico"><ChannelIco kind={c.k} /></div>
                  <div className="ba-ch-n">{c.n}</div>
                  {c.live && <span className="ba-ch-dot"></span>}
                </div>
              ))}
            </div>
            <div className="ba-user-msg">
              <span className="ba-user-meta">{t.arch.user_meta}</span>
              <div className="ba-user-bubble">{t.arch.user_msg}</div>
            </div>
          </div>

          <Conn />

          {/* ─────────── 2-COL: SHIELD + INTENT ─────────── */}
          <div className="ba-split">
            <div className="ba-card k-shield">
              <div className="ba-card-head">
                <div className="ba-card-num">🛡</div>
                <div>
                  <div className="ba-eye">Anonimización + políticas</div>
                  <div className="ba-card-t">AI Shield</div>
                </div>
              </div>
              <div className="ba-pii">
                <div className="ba-pii-row">
                  <span className="ba-pii-k">cuenta inferida</span>
                  <span className="ba-pii-arrow">→</span>
                  <span className="ba-pii-tok">vault://tx_9a1f</span>
                </div>
                <div className="ba-pii-row">
                  <span className="ba-pii-k">user_id</span>
                  <span className="ba-pii-arrow">→</span>
                  <span className="ba-pii-tok">vault://tx_9a1g</span>
                </div>
              </div>
              <div className="ba-checks">
                <span className="ba-check ok">PII <b>3</b></span>
                <span className="ba-check ok">Bias <b>0.02</b></span>
                <span className="ba-check ok">Jailbreak <b>OK</b></span>
                <span className="ba-check ok">Toxicity <b>0.01</b></span>
              </div>
            </div>

            <div className="ba-card">
              <div className="ba-card-head">
                <div className="ba-card-num">🎯</div>
                <div>
                  <div className="ba-eye">Match semántico + planner</div>
                  <div className="ba-card-t">Banking Intent Router</div>
                </div>
              </div>
              <div className="ba-intents">
                <div className="ba-intent-row win">
                  <span className="ba-intent-n">balance_inquiry</span>
                  <div className="ba-intent-bar"><span style={{width:'97%'}}></span></div>
                  <span className="ba-intent-v">0.97</span>
                </div>
                <div className="ba-intent-row">
                  <span className="ba-intent-n">statement_request</span>
                  <div className="ba-intent-bar"><span style={{width:'4%'}}></span></div>
                  <span className="ba-intent-v">0.04</span>
                </div>
                <div className="ba-intent-row">
                  <span className="ba-intent-n">transfer</span>
                  <div className="ba-intent-bar"><span style={{width:'1%'}}></span></div>
                  <span className="ba-intent-v">0.01</span>
                </div>
              </div>
              <div className="ba-intent-out">
                → skill: <b>getBalance</b> · single-skill plan
              </div>
            </div>
          </div>

          <Conn />

          {/* ─────────── BLAM CORE (HERO) ─────────── */}
          <div className="ba-card ba-blam">
            <div className="ba-blam-orb"></div>
            <div className="ba-card-head">
              <div className="ba-card-num blam">◈</div>
              <div>
                <div className="ba-eye blam">Adaptive Reasoning Loop · ≤20 iter</div>
                <div className="ba-card-t">BLAM Core</div>
              </div>
              <div className="ba-blam-model">
                <span className="ba-blam-model-dot"></span>
                blam-v3.2 · Opus 4.6
              </div>
            </div>
            <div className="ba-blam-grid">
              <div className="ba-blam-cell">
                <div className="ba-blam-k">Iteración</div>
                <div className="ba-blam-v">1<span>/20</span></div>
              </div>
              <div className="ba-blam-cell">
                <div className="ba-blam-k">Contexto</div>
                <div className="ba-blam-list">
                  <span>✓ user_session</span>
                  <span>✓ account_lookup</span>
                </div>
              </div>
              <div className="ba-blam-cell">
                <div className="ba-blam-k">Knowledge RAG</div>
                <div className="ba-blam-list">
                  <span>balance_policies.md</span>
                  <span className="muted">retrieved · 92% match</span>
                </div>
              </div>
              <div className="ba-blam-cell">
                <div className="ba-blam-k">Decisión</div>
                <div className="ba-blam-deci">
                  <span className="ba-blam-deci-fn">execute_skill</span>
                  <span className="ba-blam-deci-arg">("getBalance")</span>
                </div>
              </div>
            </div>
          </div>

          <Conn />

          {/* ─────────── 2-COL: GUARDRAILS + MFA ─────────── */}
          <div className="ba-split">
            <div className="ba-card k-guard">
              <div className="ba-card-head">
                <div className="ba-card-num g">✓</div>
                <div>
                  <div className="ba-eye">Validaciones por contrato</div>
                  <div className="ba-card-t">Compliance Guardrails</div>
                </div>
              </div>
              <div className="ba-guard-list">
                <div className="ba-guard-row"><span>PEP / OFAC / AML</span><b className="ok">passed</b></div>
                <div className="ba-guard-row"><span>Scope contract</span><b className="ok">self_account ✓</b></div>
                <div className="ba-guard-row"><span>Rate limit</span><b className="ok">12/100</b></div>
                <div className="ba-guard-row"><span>Data residency</span><b className="ok">BR-South</b></div>
              </div>
            </div>

            <div className="ba-card k-gate is-active">
              <div className="ba-card-head">
                <div className="ba-card-num gate">🔐</div>
                <div>
                  <div className="ba-eye">Multi-Factor Signature</div>
                  <div className="ba-card-t">Validación de identidad</div>
                </div>
              </div>
              <div className="ba-gate-body">
                <div className="ba-gate-mode">
                  <span className="ba-gate-mode-l">Modo elegido</span>
                  <span className="ba-gate-mode-v">SMS OTP · one-shot</span>
                </div>
                <div className="ba-otp-row">
                  <div className="ba-otp-info">
                    <div className="ba-otp-meta">Código enviado a +54 11 ••••3210</div>
                    <div className="ba-otp-boxes">
                      <span>4</span><span>8</span><span>2</span><span>9</span><span>1</span><span>7</span>
                    </div>
                  </div>
                </div>
                <div className="ba-gate-status">
                  <span className="ok-pill">✓ Verificado · firma válida 60s</span>
                </div>
              </div>
            </div>
          </div>

          <Conn />

          {/* ─────────── EXECUTION (full + terminal) ─────────── */}
          <div className="ba-card ba-exec">
            <div className="ba-card-head">
              <div className="ba-card-num">⚡</div>
              <div>
                <div className="ba-eye">Banking Bridge · adapters</div>
                <div className="ba-card-t">Secure Execution</div>
              </div>
              <div className="ba-exec-tabs">
                <span className="active">REST</span>
                <span>GraphQL</span>
                <span>SOAP</span>
                <span>Python</span>
              </div>
            </div>
            <div className="ba-term">
              <div className="ba-term-bar">
                <span></span><span></span><span></span>
                <em>banking_bridge › balance.fetch</em>
              </div>
              <div className="ba-term-body">
                <div className="ba-term-line"><span className="t-mt">GET</span> /accounts/<span className="t-acc">7022</span>/balance</div>
                <div className="ba-term-line"><span className="t-mt">Headers:</span> Authorization: Bearer <span className="t-mask">●●●●●</span> · X-Tenant: turing-bank</div>
                <div className="ba-term-line"><span className="t-status">→ 200 OK</span> · 312 ms · TLS 1.3</div>
                <div className="ba-term-line t-payload">{`{ "account": "7022", "balance": 145230.45, "currency": "ARS" }`}</div>
              </div>
            </div>
          </div>

          <Conn />

          {/* ─────────── 2-COL: REHYDRATION + AUDIT ─────────── */}
          <div className="ba-split">
            <div className="ba-card">
              <div className="ba-card-head">
                <div className="ba-card-num">💧</div>
                <div>
                  <div className="ba-eye">Format · channel adapter</div>
                  <div className="ba-card-t">Response Rehydration</div>
                </div>
              </div>
              <div className="ba-rehyd">
                <div className="ba-rehyd-step">
                  <span className="ba-rehyd-k">raw</span>
                  <code className="ba-rehyd-v">{`{balance:145230.45}`}</code>
                </div>
                <div className="ba-rehyd-arrow">↓</div>
                <div className="ba-rehyd-step">
                  <span className="ba-rehyd-k">unmask</span>
                  <code className="ba-rehyd-v">cuenta ···7022</code>
                </div>
                <div className="ba-rehyd-arrow">↓</div>
                <div className="ba-rehyd-step">
                  <span className="ba-rehyd-k">format · es-AR</span>
                  <code className="ba-rehyd-v lime">$145.230,45</code>
                </div>
                <div className="ba-rehyd-arrow">↓</div>
                <div className="ba-rehyd-step">
                  <span className="ba-rehyd-k">channel</span>
                  <code className="ba-rehyd-v">Web Chat · interactive payload</code>
                </div>
              </div>
            </div>

            <div className="ba-card k-vault">
              <div className="ba-card-head">
                <div className="ba-card-num vault">📜</div>
                <div>
                  <div className="ba-eye">Trazabilidad y gobernanza</div>
                  <div className="ba-card-t">Registro auditable</div>
                </div>
              </div>
              <div className="ba-audit">
                <div className="ba-audit-line"><span className="t">11:42:01.301</span><span className="tag pii">PII</span><span>3 tokens redacted → vault</span></div>
                <div className="ba-audit-line"><span className="t">11:42:01.510</span><span className="tag ct">CONTRACT</span><span>scope=self_account · allowed</span></div>
                <div className="ba-audit-line"><span className="t">11:42:01.788</span><span className="tag llm">LLM</span><span>blam-v3.2 · 1 iter · 396 tok</span></div>
                <div className="ba-audit-line"><span className="t">11:42:02.145</span><span className="tag api">API</span><span>GET /balance · 200 · 312ms</span></div>
                <div className="ba-audit-line"><span className="t">11:42:02.210</span><span className="tag worm">WORM</span><span>sha256=3f2a…e901 · retain 7y</span></div>
              </div>
            </div>
          </div>

          <Conn />

          {/* ─────────── BOT REPLY (centered for web chat) ─────────── */}
          <div className="ba-bot-reply">
            <div className="ba-bot-ava">D</div>
            <div className="ba-bot-bubble">
              <div className="ba-bot-text">{t.arch.bot_msg}</div>
              <div className="ba-bot-stamps">
                <span>✓ entregado</span>
                <span>✓ firmado</span>
                <span>✓ auditado</span>
                <span className="t">893 ms total</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================================================
   SUITE — Inspired by slide 5 of the commercial deck.
   4 modules (Studio · Analytics · Engage · Pulse — no
   Loop). Each tab swaps the browser mockup screenshot
   and the side detail panel.
   ================================================ */
function Suite({ t }) {
  const [active, setActive] = useState(0);
  const [activeFunc, setActiveFunc] = useState(0);

  // Modules + per-module views — names, copy and order taken
  // verbatim from slide 5 of the commercial deck. Captures are
  // the deck's own HTML/CSS mockups, rendered to PNG via
  // puppeteer (see Web/assets/images/deck/).
  const modules = [
    {
      key: 'studio', letter: 'S', name: 'Studio', tagline: 'Bot builder visual',
      desc: 'Bot builder visual con skills pre-entrenadas, deploy multi-canal y A/B testing integrado.',
      funcs: [
        { slug: 'skill-builder', ico: '◆', n: 'Skill Builder',     d: 'Visual flow builder con hooks y variables', img: 'assets/images/deck/studio-skill-builder.png' },
        { slug: 'deployments',   ico: '▲', n: 'Deployments',       d: 'Versionado git-like + rollback instantáneo', img: 'assets/images/deck/studio-deployments.png' },
        { slug: 'ab-testing',    ico: '⇌', n: 'A/B Testing',       d: 'Experimentos de skills con métricas en vivo', img: 'assets/images/deck/studio-ab-testing.png' },
        { slug: 'knowledge',     ico: '⌂', n: 'Knowledge Center',  d: 'RAG + documentos con embeddings',           img: 'assets/images/deck/studio-knowledge.png' },
      ],
    },
    {
      key: 'analytics', letter: 'A', name: 'Analytics', tagline: 'Dashboards tiempo real',
      desc: 'Dashboards en tiempo real con KPIs por skill, token tracking y consultas en lenguaje natural.',
      funcs: [
        { slug: 'dashboard',      ico: '▣', n: 'Dashboard',     d: 'KPIs en tiempo real + token tracking',  img: 'assets/images/deck/analytics-dashboard.png' },
        { slug: 'chat-with-data', ico: '✦', n: 'Chat with Data', d: '"Mostrame el churn del mes" en NL',     img: 'assets/images/deck/analytics-chat-with-data.png' },
        { slug: 'reports',        ico: '☰', n: 'Report Builder', d: 'Reportes custom + export a Excel/PDF',  img: 'assets/images/deck/analytics-reports.png' },
        { slug: 'user-profile',   ico: '◉', n: 'User Profile',   d: 'Perfil 360° del cliente con historial', img: 'assets/images/deck/analytics-user-profile.png' },
      ],
    },
    {
      key: 'engage', letter: 'E', name: 'Engage', tagline: 'Campañas WhatsApp',
      desc: 'Motor de campañas WhatsApp con audiencias, templates, scheduling y analytics por nodo.',
      funcs: [
        { slug: 'campaigns',  ico: '+', n: 'Crear Campaña', d: 'Ventas · cobranzas · retención · onboarding', img: 'assets/images/deck/engage-campaigns.png' },
        { slug: 'templates',  ico: '▤', n: 'Templates',     d: 'Multi-idioma con aprobación integrada',       img: 'assets/images/deck/engage-templates.png' },
        { slug: 'results',    ico: '◈', n: 'Results',       d: 'Delivery · open-rate · conversión',           img: 'assets/images/deck/engage-results.png' },
        { slug: 'playbooks',  ico: '▶', n: 'Playbooks',     d: 'Secuencias automatizadas reutilizables',      img: 'assets/images/deck/engage-playbooks.png' },
      ],
    },
    {
      key: 'pulse', letter: 'P', name: 'Pulse', tagline: 'NPS / CSAT in-chat',
      desc: 'NPS, CSAT y encuestas custom dentro del chat. Insights con IA y alertas en vivo.',
      funcs: [
        { slug: 'insights',    ico: '▣', n: 'Dashboard',      d: 'NPS · CSAT · CES en tiempo real',         img: 'assets/images/deck/pulse-insights.png' },
        { slug: 'create',      ico: '+', n: 'Crear Encuesta', d: 'NPS · CSAT · CES · custom multi-step',    img: 'assets/images/deck/pulse-create.png' },
        { slug: 'ai-insights', ico: '✦', n: 'AI Insights',    d: 'Análisis de comentarios con IA',          img: 'assets/images/deck/pulse-ai-insights.png' },
        { slug: 'alerts',      ico: '⚠', n: 'Alertas',        d: 'Detractores en vivo → acción inmediata',  img: 'assets/images/deck/pulse-alerts.png' },
      ],
    },
  ];

  // Reset func selection when changing module
  const setMod = (i) => { setActive(i); setActiveFunc(0); };
  const m = modules[active];
  const f = m.funcs[activeFunc];
  const url = `app.delto.com/${m.key}/${f.slug}`;

  return (
    <section className="sect on-cream suite-v2" id="platform">
      <div className="sect-inner">
        <div className="suite-v2-head reveal">
          <div className="suite-v2-head-l">
            <div className="eyebrow">La plataforma</div>
            <h2>
              Una suite, <span className="hl">cuatro módulos</span>, infinitas posibilidades.
            </h2>
          </div>
        </div>

        <div className="suite-v2-tabs reveal">
          {modules.map((mm, i) => (
            <button
              key={mm.key}
              className={`suite-v2-tab ${active === i ? 'active' : ''}`}
              onClick={() => setMod(i)}
            >
              <span className="suite-v2-tab-ico">{mm.letter}</span>
              <span className="suite-v2-tab-txt">
                <span className="suite-v2-tab-n">{mm.name}</span>
                <span className="suite-v2-tab-d">{mm.tagline}</span>
              </span>
            </button>
          ))}
        </div>

        <div className="suite-v2-stage reveal">
          <div className="suite-v2-tablet-wrap">
            <div className="suite-v2-tablet">
              <span className="suite-v2-tablet-cam" aria-hidden></span>
              <div className="suite-v2-tablet-screen">
                <div className="suite-v2-browser-bar">
                  <div className="suite-v2-browser-dots">
                    <span></span><span></span><span></span>
                  </div>
                  <div className="suite-v2-browser-url">
                    <span className="lock">🔒</span> {url}
                  </div>
                  <div className="suite-v2-browser-zoom">
                    <IconArrowRight size={11} stroke={2} />
                    Ver fullscreen
                  </div>
                </div>
                <div className="suite-v2-browser-body">
                  {modules.map((mm, i) => (
                    mm.funcs.map((ff, j) => (
                      <img
                        key={`${mm.key}-${j}`}
                        className={`suite-v2-shot ${active === i && activeFunc === j ? 'active' : ''}`}
                        src={ff.img}
                        alt={`${mm.name} · ${ff.n}`}
                        loading="lazy"
                      />
                    ))
                  ))}
                </div>
              </div>
            </div>
            <div className="suite-v2-tablet-shadow" aria-hidden></div>
          </div>

          <div className="suite-v2-detail">
            <div className="suite-v2-detail-eye">Módulo · {m.name}</div>
            <div className="suite-v2-detail-name">{m.name}</div>
            <div className="suite-v2-detail-desc">{m.desc}</div>

            <div className="suite-v2-funcs-label">
              Funcionalidades — click para explorar
            </div>
            <div className="suite-v2-funcs">
              {m.funcs.map((ff, j) => (
                <button
                  key={j}
                  className={`suite-v2-func ${activeFunc === j ? 'active' : ''}`}
                  onClick={() => setActiveFunc(j)}
                  onMouseEnter={() => setActiveFunc(j)}
                >
                  <span className="suite-v2-func-ico">{ff.ico}</span>
                  <span className="suite-v2-func-txt">
                    <span className="suite-v2-func-n">{ff.n}</span>
                    <span className="suite-v2-func-d">{ff.d}</span>
                  </span>
                </button>
              ))}
            </div>
          </div>
        </div>

        <div className="suite-v2-kpis reveal">
          <div className="suite-v2-kpi">
            <div className="suite-v2-kpi-k">+340</div>
            <div className="suite-v2-kpi-l">Skills bancarias listas</div>
          </div>
          <div className="suite-v2-kpi">
            <div className="suite-v2-kpi-k">4-8</div>
            <div className="suite-v2-kpi-l">Semanas en UAT</div>
          </div>
          <div className="suite-v2-kpi">
            <div className="suite-v2-kpi-k">24/7</div>
            <div className="suite-v2-kpi-l">Soporte dedicado</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================================================
   SKILLS LIBRARY — interactive grid of bank skills
   Filter chips by category. Hover cards.
   ================================================ */
const SKILLS = [
  // Cuentas
  { c: 'acc',   n: 'Saldo y movimientos',   d: 'Resumen de cuentas y últimos movimientos' },
  { c: 'acc',   n: 'Transferencias',        d: 'Entre cuentas propias o a terceros' },
  { c: 'acc',   n: 'Apertura de cuenta',    d: 'Onboarding 100% conversacional' },
  { c: 'acc',   n: 'Certificado de saldo',  d: 'Genera y entrega PDF firmado' },
  { c: 'acc',   n: 'Cambio de dirección',   d: 'KYC + actualización de datos' },
  // Tarjetas
  { c: 'card',  n: 'Pagar tarjeta',         d: 'Mínimo, total o monto custom' },
  { c: 'card',  n: 'Aumentar límite',       d: 'Score + aprobación on-the-fly' },
  { c: 'card',  n: 'Bloquear / desbloquear', d: 'Por robo, viaje o sospecha' },
  { c: 'card',  n: 'Reset PIN',             d: 'Sin call center, sin sucursal' },
  { c: 'card',  n: 'Travel notice',         d: 'Aviso de viaje multi-país' },
  { c: 'card',  n: 'Solicitar tarjeta',     d: 'Adicional, upgrade, virtual' },
  // Pagos
  { c: 'pay',   n: 'Pagar servicios',       d: 'Luz, agua, gas, internet, impuestos' },
  { c: 'pay',   n: 'Recargar celular',      d: 'Multi-operador con confirmación' },
  { c: 'pay',   n: 'PIX / SPEI / CCE',      d: 'Multi-país, real-time' },
  { c: 'pay',   n: 'Programar pagos',       d: 'Recurrentes y futuros' },
  // Préstamos
  { c: 'loan',  n: 'Oferta personalizada',  d: 'Pre-aprobado con score en vivo' },
  { c: 'loan',  n: 'Simular cuota',         d: 'Plazo, tasa, sistema francés' },
  { c: 'loan',  n: 'Aceptar préstamo',      d: 'Acreditación inmediata' },
  { c: 'loan',  n: 'Refinanciar',           d: 'Nuevo plazo, nueva cuota' },
  // Cobranzas
  { c: 'coll',  n: 'Recordatorio de cuota', d: 'Outbound con respuesta interactiva' },
  { c: 'coll',  n: 'Plan de pago',          d: 'Negociación auto + escalado humano' },
  { c: 'coll',  n: 'Promesa de pago',       d: 'Compromiso registrado en core' },
  { c: 'coll',  n: 'Recupero late-stage',   d: 'Segmentación + tono adaptativo' },
  // Fraude
  { c: 'fraud', n: 'Verificar transacción', d: 'Push + chat para validar consumo' },
  { c: 'fraud', n: 'Reporte de fraude',     d: 'Bloqueo + ticket en tiempo real' },
  { c: 'fraud', n: 'Reclamar contracargo',  d: 'Dispute con SLA' },
  { c: 'fraud', n: 'Phishing flag',         d: 'Detección de mensajes sospechosos' },
  // Onboarding
  { c: 'onb',   n: 'KYC conversacional',    d: 'Doc + selfie + liveness' },
  { c: 'onb',   n: 'Verificación biométrica', d: 'Match + score + audit' },
  { c: 'onb',   n: 'Activación de tarjeta', d: 'Primer uso guiado' },
  { c: 'onb',   n: 'Alta de servicio',      d: 'Home banking, app, push' },
  // Soporte
  { c: 'supp',  n: 'FAQ + base de conocimiento', d: 'Respuestas con citas a fuente' },
  { c: 'supp',  n: 'Estado de reclamo',     d: 'Lookup en tiempo real + ETA' },
  { c: 'supp',  n: 'Agendar sucursal',      d: 'Geo + horarios + recordatorio' },
  { c: 'supp',  n: 'Encuesta CSAT/NPS',     d: 'In-conversation, multi-idioma' },
  { c: 'supp',  n: 'Chat con humano',       d: 'Handoff con contexto completo' },
  { c: 'supp',  n: 'Análisis de gastos',    d: 'Categorías + insights mensual' },
];

function SkillsLibrary({ t }) {
  const [cat, setCat] = useState('all');
  const cats = [
    { k: 'all',   l: t.skills.cat_all,   col: 'lime' },
    { k: 'acc',   l: t.skills.cat_acc,   col: 'lime' },
    { k: 'card',  l: t.skills.cat_card,  col: 'lilac' },
    { k: 'pay',   l: t.skills.cat_pay,   col: 'sand' },
    { k: 'loan',  l: t.skills.cat_loan,  col: 'cyan' },
    { k: 'coll',  l: t.skills.cat_coll,  col: 'lime' },
    { k: 'fraud', l: t.skills.cat_fraud, col: 'lilac' },
    { k: 'onb',   l: t.skills.cat_onb,   col: 'sand' },
    { k: 'supp',  l: t.skills.cat_supp,  col: 'cyan' },
  ];
  const filtered = cat === 'all' ? SKILLS : SKILLS.filter(s => s.c === cat);
  const counterRef = useRef(null);
  const [count, setCount] = useState(0);
  useEffect(() => {
    const target = filtered.length;
    if (PREFERS_REDUCED_MOTION) { setCount(target); return; }
    let raf = 0;
    const t0 = performance.now();
    const dur = 600;
    const start = count;
    const loop = (now) => {
      const p = Math.min(1, (now - t0) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setCount(Math.round(start + (target - start) * eased));
      if (p < 1) raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
    // eslint-disable-next-line
  }, [cat]);

  return (
    <section className="sect on-lilac skills-sect" id="skills">
      <div className="sect-inner">
        <div className="sect-head reveal">
          <div className="eyebrow">{t.skills.eyebrow}</div>
          <h2>
            <span className="hl">{t.skills.title_a}</span>{' '}
            {t.skills.title_b}
          </h2>
          <p className="sect-sub">{t.skills.sub}</p>
        </div>
        <div className="skills-controls reveal">
          <div className="skills-counter">
            <span className="skills-counter-n" ref={counterRef}>{count}</span>
            <span className="skills-counter-l">skills</span>
          </div>
          <div className="skills-cats">
            {cats.map(c => (
              <button
                key={c.k}
                className={`skills-cat ${cat === c.k ? 'active' : ''} sk-${c.col}`}
                onClick={() => setCat(c.k)}
              >
                {c.l}
              </button>
            ))}
          </div>
        </div>
        <div className="skills-grid reveal">
          {filtered.map((s, i) => (
            <div key={`${cat}-${i}`} className={`skill-card sk-cat-${s.c}`} style={{ animationDelay: `${i * 22}ms` }}>
              <div className="skill-card-tag">{cats.find(c => c.k === s.c)?.l}</div>
              <div className="skill-card-n">{s.n}</div>
              <div className="skill-card-d">{s.d}</div>
              <div className="skill-card-arrow"><IconArrowRight size={14} stroke={2.5} /></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================================================
   METRICS — count-up on reveal
   ================================================ */
function CountUp({ value, suffix, decimals = 0, duration = 1400 }) {
  const ref = useRef(null);
  const [v, setV] = useState(0);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (PREFERS_REDUCED_MOTION) { setV(value); return; }
    let raf = 0; let started = false;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started) {
        started = true;
        const t0 = performance.now();
        const loop = (now) => {
          const p = Math.min(1, (now - t0) / duration);
          const eased = 1 - Math.pow(1 - p, 3);
          setV(value * eased);
          if (p < 1) raf = requestAnimationFrame(loop);
        };
        raf = requestAnimationFrame(loop);
        io.disconnect();
      }
    }, { threshold: 0.4 });
    io.observe(el);
    return () => { io.disconnect(); if (raf) cancelAnimationFrame(raf); };
  }, [value, duration]);
  const display = decimals > 0 ? v.toFixed(decimals) : Math.round(v).toLocaleString();
  return <span ref={ref}>{display}{suffix && <sup>{suffix}</sup>}</span>;
}

function Metrics({ t }) {
  return (
    <section className="sect on-cream metrics-light">
      <div className="sect-inner">
        <div className="sect-head reveal">
          <div className="eyebrow">{t.metrics.eyebrow}</div>
          <h2 dangerouslySetInnerHTML={{ __html: t.metrics.title }} />
          <p className="sect-sub">{t.metrics.sub}</p>
        </div>
        <div className="metrics reveal">
          <div className="metric">
            <div className="metric-num"><CountUp value={20.5} decimals={1} suffix="M+" duration={1600} /></div>
            <div className="metric-lbl">Conversaciones monitoreadas</div>
            <div className="metric-sub">Últimos 12 meses</div>
          </div>
          <div className="metric">
            <div className="metric-num"><CountUp value={94} suffix="%" /></div>
            <div className="metric-lbl">Tasa de automatización</div>
            <div className="metric-sub">Mediana en bancos clientes</div>
          </div>
          <div className="metric">
            <div className="metric-num"><CountUp value={10} suffix="×" /></div>
            <div className="metric-lbl">Time-to-recurrent</div>
            <div className="metric-sub">vs build in-house</div>
          </div>
          <div className="metric">
            <div className="metric-num"><CountUp value={7} /></div>
            <div className="metric-lbl">Países en LATAM</div>
            <div className="metric-sub">MX · AR · CO · BR · GT · PE · CL</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================================================
   TIME TO VALUE — comparison + week-by-week timeline
   ================================================ */
function TimeToValue({ t }) {
  return (
    <section className="sect on-cream">
      <div className="sect-inner">
        <div className="sect-head reveal">
          <div className="eyebrow">{t.ttv.eyebrow}</div>
          <h2 dangerouslySetInnerHTML={{ __html: t.ttv.title }} />
          <p className="sect-sub">{t.ttv.sub}</p>
        </div>
        <div className="ttv-compare reveal">
          <div className="ttv-card bad">
            <span className="ttv-tag">{t.ttv.bad_tag}</span>
            <div className="ttv-big">
              {t.ttv.bad_big} <span className="ttv-unit-inline">meses</span>
            </div>
            <div className="ttv-list">
              <div className="ttv-li"><span className="dot"><IconX size={8} stroke={3} /></span>Adaptar la plataforma a la industria financiera.</div>
              <div className="ttv-li"><span className="dot"><IconX size={8} stroke={3} /></span>Construir compliance bancario desde cero.</div>
              <div className="ttv-li"><span className="dot"><IconX size={8} stroke={3} /></span>Reportería genérica no específica para el negocio.</div>
              <div className="ttv-li"><span className="dot"><IconX size={8} stroke={3} /></span>Roadmap de solución sin foco en banca.</div>
              <div className="ttv-li"><span className="dot"><IconX size={8} stroke={3} /></span>Equipo sin conocimiento de la industria financiera.</div>
            </div>
          </div>
          <div className="ttv-card good">
            <span className="ttv-tag">{t.ttv.good_tag}</span>
            <div className="ttv-big">
              {t.ttv.good_big} <span className="ttv-unit-inline">semanas</span>
            </div>
            <div className="ttv-list">
              <div className="ttv-li"><span className="dot"><IconCheck size={10} stroke={3} /></span>Plataforma diseñada específicamente para instituciones financieras.</div>
              <div className="ttv-li"><span className="dot"><IconCheck size={10} stroke={3} /></span>Compliance bancario out of the box.</div>
              <div className="ttv-li"><span className="dot"><IconCheck size={10} stroke={3} /></span>+340 skills y agentes de banca pre-construidos.</div>
              <div className="ttv-li"><span className="dot"><IconCheck size={10} stroke={3} /></span>Roadmap de producto laser focus en banca.</div>
              <div className="ttv-li"><span className="dot"><IconCheck size={10} stroke={3} /></span>Equipo con +10 años de experiencia en la industria.</div>
            </div>
          </div>
        </div>

        <div className="ttv-cta reveal">
          <a href="#demo" className="btn btn-primary">
            Solicitar demo
            <IconArrowRight size={16} stroke={2.5} />
          </a>
        </div>
      </div>
    </section>
  );
}

/* ================================================
   COMPLIANCE
   ================================================ */
function Compliance({ t }) {
  const pillars = [
    { ic: <IconShield />, t: 'Audit trail inmutable', d: 'Cada mensaje, cada decisión del bot, cada aprobación — trazables, inmutables, retención 7 años.' },
    { ic: <IconGlobe />, t: 'Data residency por país', d: 'Tus datos donde tu regulador lo exige. México, Argentina, Colombia, Brasil — cada uno en su región.' },
    { ic: <IconLock />, t: 'Encriptación end-to-end', d: 'TLS 1.3 en tránsito, AES-256 en reposo, gestión de llaves con Azure Key Vault o HSM propio.' },
    { ic: <IconUsers />, t: 'RBAC granular', d: '3 niveles de acceso por feature. Separación de deberes nativa. Aprobaciones multi-step.' },
    { ic: <IconBrain />, t: 'AI governance', d: 'Guardrails, PII detection, filtros de contenido. El bot nunca dice lo que no debe.' },
    { ic: <IconCode />, t: 'SDK + hooks', d: 'Tu equipo extiende el bot con Python. Sin comprometer compliance. Sin tickets al vendor.' },
  ];
  return (
    <section className="sect on-lilac compliance-light">
      <div className="sect-inner">
        <div className="sect-head reveal">
          <div className="eyebrow">{t.compliance.eyebrow}</div>
          <h2 dangerouslySetInnerHTML={{ __html: t.compliance.title }} />
          <p className="sect-sub">{t.compliance.sub}</p>
        </div>
        <div className="compliance-grid reveal">
          {pillars.map((p, i) => (
            <div key={i} className="compliance-card">
              <div className="compliance-ic">{p.ic}</div>
              <div className="compliance-t">{p.t}</div>
              <div className="compliance-d">{p.d}</div>
            </div>
          ))}
        </div>
        <div className="compliance-badges reveal">
          <span>SOC 2 Type II</span>
          <span>ISO 27001</span>
          <span>PCI DSS ready</span>
          <span>GDPR compliant</span>
          <span>LGPD (Brasil)</span>
          <span>Ley 25.326 (AR)</span>
        </div>
      </div>
    </section>
  );
}

/* ================================================
   CASES
   ================================================ */
function Cases({ t }) {
  return (
    <section className="sect on-cream" id="customers">
      <div className="sect-inner">
        <div className="sect-head reveal">
          <div className="eyebrow">{t.cases.eyebrow}</div>
          <h2 dangerouslySetInnerHTML={{ __html: t.cases.title }} />
        </div>
        <div className="cases reveal">
          <article className="case">
            <div className="case-orbs" aria-hidden="true">
              <span className="case-orb case-orb-lime" />
              <span className="case-orb case-orb-lilac" />
              <span className="case-orb case-orb-sand" />
            </div>
            <div className="case-content">
              <div className="case-eyebrow">
                <span className="case-dot" aria-hidden="true" />
                <span>SOLUCIÓN REGIONAL · 4 PAÍSES</span>
              </div>
              <div className="case-bank">Ficohsa</div>
              <p className="case-body">Solución conversacional en producción con Delto. Agente en WhatsApp resolviendo consultas, gestiones de tarjetas, transferencias y soporte de primer nivel. Implementación multi-país HN · GT · NI · PA.</p>
              <div className="case-foot">
                <div className="case-metric">
                  <div className="case-n">+60</div>
                  <div className="case-l">skills en producción</div>
                </div>
                <div className="case-metric">
                  <div className="case-n">+4M</div>
                  <div className="case-l">clientes atendidos</div>
                </div>
              </div>
            </div>
          </article>
          <article className="case">
            <div className="case-orbs" aria-hidden="true">
              <span className="case-orb case-orb-lilac" />
              <span className="case-orb case-orb-lime" />
              <span className="case-orb case-orb-sand" />
            </div>
            <div className="case-content">
              <div className="case-eyebrow">
                <span className="case-dot" aria-hidden="true" />
                <span>BANCO ESTATAL REPÚBLICA DOMINICANA</span>
              </div>
              <div className="case-bank">Banreservas</div>
              <p className="case-body">Agente conversacional multi-producto operando en WhatsApp y canales digitales, integrado a core bancario y contact center.</p>
              <div className="case-foot">
                <div className="case-metric">
                  <div className="case-n">+45</div>
                  <div className="case-l">skills en producción</div>
                </div>
                <div className="case-metric">
                  <div className="case-n">+1M</div>
                  <div className="case-l">clientes atendidos</div>
                </div>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

/* ================================================
   PARTNERS
   ================================================ */
function Partners({ t }) {
  const logos = [
    { key: 'azure',      name: 'Microsoft Azure',    logo: 'azure.svg' },
    { key: 'aws',        name: 'AWS',                logo: 'aws.svg' },
    { key: 'openai',     name: 'OpenAI',             logo: 'openai.svg' },
    { key: 'anthropic',  name: 'Anthropic / Claude', logo: 'anthropic.svg' },
    { key: 'meta',       name: 'Meta Business',      logo: 'meta.svg' },
    { key: 'salesforce', name: 'Salesforce',         logo: 'salesforce.svg' },
    { key: 'zendesk',    name: 'Zendesk',            logo: 'zendesk.svg' },
    { key: 'genesys',    name: 'Genesys',            logo: 'genesys.svg' },
    { key: 'datadog',    name: 'Datadog',            logo: 'datadog.svg' },
    { key: 'bitbucket',  name: 'Bitbucket',          logo: 'bitbucket.svg' },
    { key: 'bigquery',   name: 'BigQuery',           logo: 'bigquery.svg' },
    { key: 'redis',      name: 'Redis',              logo: 'redis.svg' },
  ];
  return (
    <section className="sect on-cream">
      <div className="sect-inner">
        <div className="sect-head reveal">
          <div className="eyebrow">{t.partners.eyebrow}</div>
          <h2 dangerouslySetInnerHTML={{ __html: t.partners.title }} />
        </div>
        <div className="tstack-grid reveal">
          <div className="tstack-card tstack-integ">
            <div className="tstack-card-eyebrow">{t.partners.integ_eyebrow}</div>
            <div className="tstack-card-t">{t.partners.integ_title}</div>
            <div className="tstack-card-d">{t.partners.integ_sub}</div>
            <div className="tstack-logos">
              {logos.map(p => (
                <div key={p.key} className="tstack-logo" title={p.name}>
                  <span
                    className="tstack-logo-img"
                    role="img"
                    aria-label={p.name}
                    style={{ '--logo': `url(/assets/logos/stack/${p.logo})` }}
                  />
                </div>
              ))}
            </div>
          </div>
          <div className="tstack-card tstack-human">
            <div className="tstack-photo">
              <img src="/img/Delto-83.jpg" alt="Equipo Delto" loading="lazy" />
            </div>
            <div className="tstack-human-copy">
              <div className="tstack-card-eyebrow">{t.partners.human_eyebrow}</div>
              <div className="tstack-card-t">{t.partners.human_title}</div>
              <div className="tstack-card-d">{t.partners.human_body}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================================================
   CTA FINAL + FOOTER
   ================================================ */
function CTAFinal({ t }) {
  const ICONS = {
    toolkit: <IconSparkles size={22} stroke={2} />,
    banking: <IconBank size={22} stroke={2} />,
    compliance: <IconShield size={22} stroke={2} />,
  };
  return (
    <section className="cta-final" id="demo">
      <div className="cta-final-inner">
        <div className="cta-final-grid">
          <div className="cta-final-content reveal">
            <div className="eyebrow">{t.cta.eyebrow}</div>
            <h2 dangerouslySetInnerHTML={{ __html: t.cta.title }} />
            <p className="cta-final-sub">{t.cta.sub}</p>
            <div className="cta-diffs">
              {t.cta.diffs.map(d => (
                <div key={d.key} className="cta-diff">
                  <div className="cta-diff-icon">{ICONS[d.key]}</div>
                  <div className="cta-diff-text">
                    <div className="cta-diff-title">{d.title}</div>
                    <div className="cta-diff-body">{d.body}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <form className="cta-form reveal" onSubmit={e => e.preventDefault()}>
            <div className="cta-form-eyebrow">{t.cta.form.eyebrow}</div>
            <div className="cta-form-row">
              <label className="cta-field">
                <span>{t.cta.form.first_name} <em>*</em></span>
                <input type="text" required />
              </label>
              <label className="cta-field">
                <span>{t.cta.form.last_name} <em>*</em></span>
                <input type="text" required />
              </label>
            </div>
            <div className="cta-form-row">
              <label className="cta-field">
                <span>{t.cta.form.email} <em>*</em></span>
                <input type="email" required />
              </label>
              <label className="cta-field">
                <span>{t.cta.form.phone}</span>
                <input type="tel" />
              </label>
            </div>
            <label className="cta-field">
              <span>{t.cta.form.company} <em>*</em></span>
              <input type="text" required />
            </label>
            <label className="cta-field">
              <span>{t.cta.form.message}</span>
              <textarea rows="3" placeholder={t.cta.form.message_ph} />
            </label>
            <button type="submit" className="btn btn-primary cta-form-submit">
              {t.cta.form.submit} <IconArrowRight size={16} stroke={2.5} />
            </button>
            <div className="cta-form-disclaimer" dangerouslySetInnerHTML={{ __html: t.cta.form.disclaimer }} />
          </form>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer>
      <div className="foot-inner">
        {/* ── NEWSLETTER STRIP ───────────────────────────────── */}
        <div className="foot-news">
          <div className="foot-news-copy">
            <div className="foot-news-eyebrow">{t.foot.news_eyebrow}</div>
            <h3 className="foot-news-title">{t.foot.news_title}</h3>
            <p className="foot-news-sub">{t.foot.news_sub}</p>
          </div>
          <form className="foot-news-form" onSubmit={e => e.preventDefault()}>
            <div className="foot-news-row">
              <input
                type="email"
                className="foot-news-input"
                placeholder={t.foot.news_placeholder}
                aria-label={t.foot.news_placeholder}
                required
              />
              <button type="submit" className="foot-news-cta">
                {t.foot.news_cta} <IconArrowRight size={14} stroke={2.5} />
              </button>
            </div>
            <p className="foot-news-disclaimer">{t.foot.news_disclaimer}</p>
          </form>
        </div>

        {/* ── MAIN GRID — brand + 4 nav columns ──────────────── */}
        <div className="foot-grid">
          <div className="foot-brand">
            <img src="/assets/logos/delto-logo-white-full.svg" alt="Delto" />
            <p>{t.foot.tagline}</p>
          </div>
          <div>
            <div className="foot-col-t">{t.foot.col_product}</div>
            <div className="foot-links">
              <a href="/platform.html">Studio</a>
              <a href="/platform.html">Engage</a>
              <a href="/platform.html">Analytics</a>
              <a href="/platform.html">Feedback</a>
              <a href="/platform.html">Loop</a>
              <a href="/platform.html">Auth</a>
            </div>
          </div>
          <div>
            <div className="foot-col-t">{t.foot.col_company}</div>
            <div className="foot-links">
              <a href="/nosotros.html">{t.foot.about}</a>
              <a href="#">{t.foot.careers}</a>
              <a href="#">{t.foot.press}</a>
              <a href="#">{t.foot.contact}</a>
            </div>
          </div>
          <div>
            <div className="foot-col-t">{t.foot.col_resources}</div>
            <div className="foot-links">
              <a href="/blog.html">{t.foot.blog}</a>
              <a href="#">{t.foot.insights}</a>
              <a href="#">{t.foot.docs}</a>
              <a href="#">{t.foot.changelog}</a>
            </div>
          </div>
          <div>
            <div className="foot-col-t">{t.foot.col_legal}</div>
            <div className="foot-links">
              <a href="#">{t.foot.privacy}</a>
              <a href="#">{t.foot.terms}</a>
              <a href="#">{t.foot.security}</a>
              <a href="#">{t.foot.compliance}</a>
            </div>
          </div>
        </div>

        {/* ── BAND — partner badges (left) + socials + address (right) */}
        <div className="foot-band">
          <div className="foot-badges">
            <img src="/img/69bb038edff91be56b3b560d_microsoft logo.svg" alt="Microsoft Partner" />
            <img src="/img/69bb038e8a0406623c8a4fb5_meta logo.svg" alt="Meta Business Partner" />
            <img className="foot-badge-cubo" src="/img/cubo-itau.png" alt="Cubo Itaú Startup 2025" />
            <img className="foot-badge-gptw" src="/img/gptw.png" alt="Great Place to Work Certified" />
          </div>

          <div className="foot-right">
            <div className="foot-socials">
              <a href="#" className="foot-social" aria-label="LinkedIn"><IconLinkedin size={16} /></a>
              <a href="#" className="foot-social" aria-label="Instagram"><IconInstagram size={16} /></a>
            </div>
            <address className="foot-address">
              <span className="foot-address-l">Oficina</span>
              <span className="foot-address-v">Montevideo · Uruguay</span>
            </address>
          </div>
        </div>

        {/* ── BOTTOM BAR ──────────────────────────────────────── */}
        <div className="foot-bottom">
          <div>{t.foot.copyright}</div>
          <div className="foot-bottom-meta">
            <span>The Agentic Banking Suite</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  ConvosShowcase, Architecture, Suite, SkillsLibrary,
  Metrics, TimeToValue, Compliance, Cases, Partners,
  CTAFinal, Footer, CountUp,
});
})();