// PEN Landing — Vulnerabilidades & Soluciones sections.
// All evidence panes are now illustrative (not raw terminal output) so a
// non-technical reader gets it at a glance.

const { useState: useStateV, useEffect: useEffectV } = React;

// ════════════════════════════════════════════════════════════════════
// Evidence renderers — one per attack
// ════════════════════════════════════════════════════════════════════

function VulnEvidence({ example, severity }) {
  if (!example) return null;
  const wrap = (inner, cap) =>
  <div className="ev-wrap">
      {inner}
      {cap && <div className="ev-caption">{cap}</div>}
    </div>;


  switch (example.type) {
    case "email":return wrap(<EvEmail e={example} />, example.caption);
    case "slides":return wrap(<EvSlides />, example.caption);
    case "doors":return wrap(<EvDoors />, example.caption);
    case "passwords":return wrap(<EvPasswords />, example.caption);
    case "network":return wrap(<EvNetwork />, example.caption);
    case "backup":return wrap(<EvBackup />, example.caption);
    default:return null;
  }
}

// ── 1. Phishing email mock (kept, with highlight + caption) ──────────
function EvEmail({ e }) {
  return (
    <div className="ev ev-email">
      <div className="ev-email-head">
        <div className="ev-email-row">
          <span className="ev-email-label">De:</span>
          <span className="ev-email-from">
            <span className="ev-email-addr">{e.from}</span>
            <span className="ev-flag">⚠ dominio falso</span>
          </span>
        </div>
        <div className="ev-email-row">
          <span className="ev-email-label">Asunto:</span>
          <span className="ev-email-subj">{e.subject}</span>
        </div>
      </div>
      <div className="ev-email-body">
        {e.body.split("\n").map((l, i) =>
        <div key={i} className={l ? "" : "ev-email-empty"}>{l || "\u00A0"}</div>
        )}
      </div>
      <div className="ev-email-foot">
        <span className="ev-flag-line">▸ Remitente: <b>no verificado</b></span>
        <span className="ev-flag-line">▸ Urgencia: <b>sospechosa</b></span>
      </div>
    </div>);

}

// ── 2. Ransomware — auto-cycling 4-scene slideshow ───────────────────
function EvSlides() {
  const [idx, setIdx] = useStateV(0);
  useEffectV(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % 4), 2200);
    return () => clearInterval(t);
  }, []);

  const scenes = [
  {
    tag: "08:42",
    title: "Llega un correo",
    body: <RansomScene1 />
  },
  {
    tag: "08:43",
    title: "Empleado abre el PDF",
    body: <RansomScene2 />
  },
  {
    tag: "03:00",
    title: "Cifrado en silencio",
    body: <RansomScene3 />
  },
  {
    tag: "08:00",
    title: "Pide rescate",
    body: <RansomScene4 />
  }];


  return (
    <div className="ev ev-slides">
      <div className="ev-slides-stage">
        {scenes.map((s, i) =>
        <div key={i} className={"ev-slide" + (i === idx ? " is-active" : "")}>
            <div className="ev-slide-head">
              <span className="ev-slide-tag mono">{s.tag}</span>
              <span className="ev-slide-title">{s.title}</span>
            </div>
            <div className="ev-slide-body">{s.body}</div>
          </div>
        )}
      </div>
      <div className="ev-slides-dots">
        {scenes.map((_, i) =>
        <span key={i} className={"ev-dot" + (i === idx ? " is-active" : "")} />
        )}
      </div>
    </div>);

}
function RansomScene1() {
  return (
    <div className="rs rs-1">
      <div className="rs-inbox-row rs-row-old"><span>Cliente Acme</span><span className="rs-time">ayer</span></div>
      <div className="rs-inbox-row rs-row-new"><span className="rs-dot" /><span>Factura · pago pendiente</span><span className="rs-time">08:42</span></div>
      <div className="rs-inbox-row rs-row-old"><span>Newsletter sector</span><span className="rs-time">08:30</span></div>
      <div className="rs-attach">📎 factura-2025-Q1.pdf</div>
    </div>);

}
function RansomScene2() {
  return (
    <div className="rs rs-2">
      <div className="rs-pdf">
        <div className="rs-pdf-bar"><span /><span /><span /></div>
        <div className="rs-pdf-page">
          <div className="rs-pdf-line rs-pdf-line-lg" />
          <div className="rs-pdf-line" />
          <div className="rs-pdf-line" />
          <div className="rs-pdf-line rs-pdf-line-short" />
          <div className="rs-pdf-line" />
          <div className="rs-pdf-line rs-pdf-line-short" />
        </div>
      </div>
      <div className="rs-hidden">▸ malware.exe · ejecutando en segundo plano</div>
    </div>);

}
function RansomScene3() {
  return (
    <div className="rs rs-3">
      <div className="rs-files">
        {["clientes.db", "facturas.xlsx", "nominas.pdf", "contratos.zip", "fotos/", "backup.bak"].map((f, i) =>
        <div key={i} className={"rs-file rs-file-" + i % 6}>
            <span className="rs-file-name">{f}</span>
            <span className="rs-file-suffix">.lockbit</span>
          </div>
        )}
      </div>
      <div className="rs-progress">
        <div className="rs-progress-fill" />
        <span className="rs-progress-label mono">cifrando · 73%</span>
      </div>
    </div>);

}
function RansomScene4() {
  return (
    <div className="rs rs-4">
      <div className="rs-ransom-screen">
        <div className="rs-ransom-skull">!</div>
        <div className="rs-ransom-h">TUS ARCHIVOS ESTÁN CIFRADOS</div>
        <div className="rs-ransom-sub">Paga 2.4 BTC en 48 horas o todo se pierde.</div>
        <div className="rs-ransom-timer mono">47:59:23</div>
      </div>
    </div>);

}

// ── 3. RDP / SSH — door metaphor: open server vs closed server ───────
function EvDoors() {
  return (
    <div className="ev ev-doors">
      <div className="ev-door-row">
        <div className="ev-door ev-door-open">
          <div className="ev-door-icon">
            <div className="ev-door-frame" />
            <div className="ev-door-panel ev-door-panel-open" />
          </div>
          <div className="ev-door-label">
            <div className="mono-eyebrow ev-door-tag">TU SERVIDOR HOY</div>
            <div className="ev-door-name">Puerta abierta</div>
            <div className="ev-door-desc">Cualquier bot encuentra tu IP y prueba a entrar 24/7.</div>
          </div>
          <div className="ev-door-meta">
            <span className="ev-door-bots mono">▸ 1.847 intentos hoy</span>
          </div>
        </div>
        <div className="ev-door ev-door-closed">
          <div className="ev-door-icon">
            <div className="ev-door-frame" />
            <div className="ev-door-panel ev-door-panel-closed" />
            <div className="ev-door-lock">●</div>
          </div>
          <div className="ev-door-label">
            <div className="mono-eyebrow ev-door-tag ev-door-tag-ok">CON PEN</div>
            <div className="ev-door-name">Acceso solo por VPN</div>
            <div className="ev-door-desc">Cerrado a internet. Solo entra tu equipo, autenticado y verificado.</div>
          </div>
          <div className="ev-door-meta">
            <span className="ev-door-bots mono">▸ 0 expuestos</span>
          </div>
        </div>
      </div>
    </div>);

}

// ── 4. Passwords — leaked-password notification cards ────────────────
function EvPasswords() {
  const rows = [
  { who: "director@", service: "LinkedIn", year: "2021", pwd: "Verano2018!", changed: false },
  { who: "ana@", service: "Adobe", year: "2019", pwd: "ana1234", changed: false },
  { who: "compras@", service: "Dropbox", year: "2022", pwd: "Compras2020", changed: false }];

  return (
    <div className="ev ev-passwords">
      <div className="ev-pwd-head">
        <span className="mono-eyebrow ev-pwd-source">▸ Filtraciones públicas encontradas</span>
        <span className="ev-pwd-counter mono">3 / 12 cuentas</span>
      </div>
      <div className="ev-pwd-list">
        {rows.map((r, i) =>
        <div key={i} className="ev-pwd-row">
            <div className="ev-pwd-who">
              <div className="ev-pwd-mail">{r.who}<span className="ev-pwd-domain">tuempresa.es</span></div>
              <div className="mono ev-pwd-service">{r.service} · {r.year}</div>
            </div>
            <div className="ev-pwd-pass">
              <div className="ev-pwd-pass-label mono">contraseña filtrada</div>
              <div className="ev-pwd-pass-value">
                {r.pwd.slice(0, 3)}<span className="ev-pwd-pass-hidden">{"●".repeat(Math.max(0, r.pwd.length - 3))}</span>
              </div>
            </div>
            <div className="ev-pwd-status">
              <span className="ev-pwd-flag">⚠ sin cambiar</span>
            </div>
          </div>
        )}
      </div>
      <div className="ev-pwd-foot">
        <span className="mono ev-pwd-flag-line">▸ 0 cuentas con verificación en dos pasos</span>
      </div>
    </div>);

}

// ── 5. Network — before/after, all-flat vs segmented ─────────────────
function EvNetwork() {
  return (
    <div className="ev ev-network">
      <div className="ev-net-col ev-net-before">
        <div className="ev-net-h mono-eyebrow">ANTES · TODO EN UNA RED</div>
        <div className="ev-net-cloud">internet</div>
        <div className="ev-net-router">router</div>
        <div className="ev-net-hub" />
        <div className="ev-net-devices">
          {["Wifi invitados", "Cámaras", "Impresora", "Contabilidad", "Servidor ERP", "Nóminas"].map((d, i) =>
          <div key={i} className="ev-net-dev">
              <span className="ev-net-dev-dot" />
              <span className="ev-net-dev-name">{d}</span>
            </div>
          )}
        </div>
        <div className="ev-net-warn mono">⚠ 1 infectado = todos infectados</div>
      </div>

      <div className="ev-net-col ev-net-after">
        <div className="ev-net-h mono-eyebrow ev-net-h-ok">CON PEN · SEGMENTADO + FIREWALL</div>
        <div className="ev-net-cloud">internet</div>
        <div className="ev-net-fw">FORTIGATE · firewall</div>
        <div className="ev-net-zones">
          <div className="ev-net-zone ev-net-zone-pub">
            <span className="ev-net-zone-label">PÚBLICA</span>
            <span className="ev-net-zone-dev">Wifi · Cámaras</span>
          </div>
          <div className="ev-net-zone ev-net-zone-off">
            <span className="ev-net-zone-label">OFICINA</span>
            <span className="ev-net-zone-dev">Impresoras · PCs</span>
          </div>
          <div className="ev-net-zone ev-net-zone-crit">
            <span className="ev-net-zone-label">CRÍTICA</span>
            <span className="ev-net-zone-dev">ERP · Nóminas</span>
          </div>
        </div>
        <div className="ev-net-warn ev-net-warn-ok mono">✓ Cada zona aislada</div>
      </div>
    </div>);

}

// ── 6. Backup — bad vs good cycle ─────────────────────────────────────
function EvBackup() {
  return (
    <div className="ev ev-backup">
      <div className="ev-bk-col ev-bk-bad">
        <div className="mono-eyebrow ev-bk-h">SIN PEN</div>
        <div className="ev-bk-scene">
          <div className="ev-bk-disk ev-bk-disk-prod">
            <div className="ev-bk-disk-label">datos</div>
            <div className="ev-bk-x">✕</div>
          </div>
          <div className="ev-bk-arrow">→</div>
          <div className="ev-bk-disk ev-bk-disk-prod ev-bk-disk-same">
            <div className="ev-bk-disk-label">backup</div>
            <div className="ev-bk-x">✕</div>
          </div>
        </div>
        <ul className="ev-bk-list">
          <li>Backup en la misma red</li>
          <li>Última prueba: <span className="mono">hace 14 meses</span></li>
          <li className="ev-bk-bad-line">Restaurar = <b>no se sabe si funciona</b></li>
        </ul>
      </div>

      <div className="ev-bk-col ev-bk-good">
        <div className="mono-eyebrow ev-bk-h ev-bk-h-ok">CON PEN · 3-2-1 VERIFICADO</div>
        <div className="ev-bk-scene">
          <div className="ev-bk-disk ev-bk-disk-prod">
            <div className="ev-bk-disk-label">datos</div>
          </div>
          <div className="ev-bk-arrow">→</div>
          <div className="ev-bk-disks-stack">
            <div className="ev-bk-disk ev-bk-disk-ok"><div className="ev-bk-disk-label">copia · local</div></div>
            <div className="ev-bk-disk ev-bk-disk-ok"><div className="ev-bk-disk-label">copia · externa</div></div>
            <div className="ev-bk-disk ev-bk-disk-ok"><div className="ev-bk-disk-label">copia · cloud</div></div>
          </div>
        </div>
        <ul className="ev-bk-list">
          <li>3 copias · 2 sitios · 1 fuera</li>
          <li>Restauración probada <span className="mono">cada 30 días</span></li>
          <li className="ev-bk-good-line">Recuperas tu negocio en <b>horas, no semanas</b></li>
        </ul>
      </div>
    </div>);

}

// ════════════════════════════════════════════════════════════════════
// Helpers
// ════════════════════════════════════════════════════════════════════

function sevClass(sev) {
  const s = (sev || "").toLowerCase();
  if (s.startsWith("crít") || s === "critical") return "crit";
  if (s === "alto" || s === "high") return "warn";
  return "info";
}

// ════════════════════════════════════════════════════════════════════
// SectionVuln
// ════════════════════════════════════════════════════════════════════
function SectionVuln({ copy }) {
  return (
    <section className="sec sec-vuln" id="vulnerabilidades">
      <div className="container">
        <div className="sec-head sec-head-left">
          <div className="mono-eyebrow">{copy.eyebrow}</div>
          <h2 className="sec-title vuln-title">{copy.title}</h2>
          <p className="sec-sub">{copy.sub}</p>
        </div>

        <div className="vuln-list">
          {copy.items.map((v, i) => {
            const sev = sevClass(v.severity);
            const flip = i % 2 === 1;
            return (
              <div className={"vuln-row" + (flip ? " is-flip" : "")} key={i}>
                <div className="vuln-row-num">
                  <span className="mono">0{i + 1}</span>
                  <span className={"vuln-sev vuln-sev-" + sev}>● {v.severity}</span>
                </div>

                <div className="vuln-text">
                  <div className={"mono-eyebrow vuln-tag vuln-tag-" + sev}>{v.tag}</div>
                  <h3 className="vuln-h">{v.title}</h3>
                  <p className="vuln-body">{v.body}</p>
                  <div className="vuln-stat">
                    <span className={"vuln-stat-num vuln-stat-num-" + sev}>{v.stat}</span>
                    <span className="vuln-stat-label">{v.statLabel}</span>
                  </div>
                </div>

                <div className="vuln-evidence">
                  <VulnEvidence example={v.example} severity={sev} />
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

// ════════════════════════════════════════════════════════════════════
// SectionSoluciones — card now has 3 layers: plain → benefit → caso
// ════════════════════════════════════════════════════════════════════

// ────────────────────────────────────────────────────────────────────
// Animated SVG illustrations for solution steps (vector schematics)
// ────────────────────────────────────────────────────────────────────

function VisualFirewall() {
  return (
    <svg className="sol-svg-vis" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="sol-grid-pat-0" width="16" height="16" patternUnits="userSpaceOnUse">
          <path d="M 16 0 L 0 0 0 16" fill="none" stroke="rgba(0, 255, 122, 0.04)" strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#sol-grid-pat-0)" />

      {/* Firewall barrier in center */}
      <line x1="200" y1="20" x2="200" y2="180" stroke="var(--pen-neon)" strokeWidth="3" strokeDasharray="4 4" className="firewall-barrier" />
      <rect x="194" y="60" width="12" height="80" rx="6" fill="var(--bg)" stroke="var(--pen-neon)" strokeWidth="2" className="firewall-core" />
      
      {/* Glowing shield indicators */}
      <circle cx="200" cy="100" r="30" stroke="var(--pen-neon)" strokeWidth="1" strokeDasharray="5 5" className="firewall-glow-ring" />

      {/* Traffic flow particles */}
      <circle cx="50" cy="70" r="4" fill="var(--pen-neon)" className="traffic-clean-1" />
      <circle cx="80" cy="130" r="4" fill="var(--pen-neon)" className="traffic-clean-2" />

      <circle cx="30" cy="100" r="4" fill="var(--status-crit)" className="traffic-threat-1" />
      <circle cx="60" cy="150" r="4" fill="var(--status-crit)" className="traffic-threat-2" />
    </svg>
  );
}

function VisualAgent() {
  return (
    <svg className="sol-svg-vis" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="sol-grid-pat-1" width="16" height="16" patternUnits="userSpaceOnUse">
          <path d="M 16 0 L 0 0 0 16" fill="none" stroke="rgba(0, 255, 122, 0.04)" strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#sol-grid-pat-1)" />
      
      {/* Laptop Keyboard / Base */}
      <path d="M 120 145 L 280 145 L 305 165 L 95 165 Z" stroke="var(--pen-line-strong)" strokeWidth="2" fill="var(--pen-ink-900)" />
      <line x1="160" y1="155" x2="240" y2="155" stroke="var(--pen-line)" strokeWidth="2" />

      {/* Laptop Screen */}
      <rect x="135" y="45" width="130" height="90" rx="4" stroke="var(--pen-line-strong)" strokeWidth="2" fill="var(--bg)" />
      
      {/* Shield inside Screen */}
      <path d="M 200 70 L 225 80 V 100 C 225 113 200 120 200 120 C 200 120 175 113 175 100 V 80 Z" 
            stroke="var(--pen-neon)" strokeWidth="2" fill="rgba(0, 255, 122, 0.05)" className="agent-shield" />

      {/* Radar pulse lines from screen */}
      <circle cx="200" cy="90" r="45" stroke="var(--pen-neon)" strokeWidth="1" strokeDasharray="3 3" className="agent-radar-1" />
      <circle cx="200" cy="90" r="65" stroke="var(--pen-neon)" strokeWidth="1" opacity="0.5" className="agent-radar-2" />
    </svg>
  );
}

function VisualRadar() {
  return (
    <svg className="sol-svg-vis" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="sol-grid-pat-2" width="16" height="16" patternUnits="userSpaceOnUse">
          <path d="M 16 0 L 0 0 0 16" fill="none" stroke="rgba(0, 255, 122, 0.04)" strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#sol-grid-pat-2)" />

      {/* Radar rings */}
      <circle cx="200" cy="100" r="80" stroke="var(--pen-line-strong)" strokeWidth="1" />
      <circle cx="200" cy="100" r="55" stroke="var(--pen-line)" strokeWidth="1" />
      <circle cx="200" cy="100" r="30" stroke="var(--pen-line)" strokeWidth="1" />

      {/* Crosshairs */}
      <line x1="200" y1="10" x2="200" y2="190" stroke="var(--pen-line)" strokeWidth="0.5" />
      <line x1="110" y1="100" x2="290" y2="100" stroke="var(--pen-line)" strokeWidth="0.5" />

      {/* Radar Sweep line */}
      <line x1="200" y1="100" x2="200" y2="20" stroke="var(--pen-neon)" strokeWidth="2.5" className="radar-sweep-line" />

      {/* Blinking target nodes */}
      <circle cx="160" cy="60" r="5" fill="var(--pen-neon)" className="radar-node-1" />
      <circle cx="240" cy="140" r="4" fill="var(--pen-neon)" className="radar-node-2" />
      <circle cx="250" cy="70" r="5" fill="var(--pen-neon)" className="radar-node-3" />
    </svg>
  );
}

function VisualPhishing() {
  return (
    <svg className="sol-svg-vis" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="sol-grid-pat-3" width="16" height="16" patternUnits="userSpaceOnUse">
          <path d="M 16 0 L 0 0 0 16" fill="none" stroke="rgba(0, 255, 122, 0.04)" strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#sol-grid-pat-3)" />

      {/* Valid Card (Verified User) */}
      <g className="phish-card-valid">
        <rect x="50" y="40" width="130" height="120" rx="8" fill="var(--pen-ink-900)" stroke="var(--pen-neon)" strokeWidth="2" />
        <circle cx="90" cy="80" r="20" fill="var(--bg)" stroke="var(--pen-line-strong)" strokeWidth="1" />
        <path d="M 90 85 C 80 85 75 95 75 95 L 105 95 C 105 95 100 85 90 85 Z" fill="var(--fg-3)" />
        <circle cx="90" cy="75" r="8" fill="var(--fg-3)" />
        <rect x="70" y="115" width="90" height="6" rx="3" fill="var(--fg-3)" />
        <rect x="70" y="127" width="60" height="6" rx="3" fill="var(--fg-3)" />
        <circle cx="155" cy="55" r="12" fill="var(--pen-neon)" className="phish-badge-ok" />
        <path d="M 150 55 L 153 58 L 160 51" stroke="var(--pen-ink-900)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
      </g>

      {/* Spoofed Card (Blocked Impostor) */}
      <g className="phish-card-spoof">
        <rect x="220" y="40" width="130" height="120" rx="8" fill="var(--bg)" stroke="var(--status-crit)" strokeWidth="2" strokeDasharray="5 3" />
        <circle cx="260" cy="80" r="20" fill="var(--pen-ink-900)" stroke="var(--pen-line-strong)" strokeWidth="1" />
        <path d="M 260 85 C 250 85 245 95 245 95 L 275 95 C 275 95 270 85 260 85 Z" fill="var(--status-crit)" />
        <circle cx="260" cy="75" r="8" fill="var(--status-crit)" />
        <rect x="240" y="115" width="90" height="6" rx="3" fill="var(--pen-line)" />
        <rect x="240" y="127" width="60" height="6" rx="3" fill="var(--pen-line)" />
        <circle cx="325" cy="55" r="12" fill="var(--status-crit)" className="phish-badge-err" />
        <line x1="319" y1="49" x2="331" y2="61" stroke="#fff" strokeWidth="2" />
        <line x1="331" y1="49" x2="319" y2="61" stroke="#fff" strokeWidth="2" />
      </g>
    </svg>
  );
}

function VisualVPN() {
  return (
    <svg className="sol-svg-vis" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="sol-grid-pat-4" width="16" height="16" patternUnits="userSpaceOnUse">
          <path d="M 16 0 L 0 0 0 16" fill="none" stroke="rgba(0, 255, 122, 0.04)" strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#sol-grid-pat-4)" />

      {/* Remote Laptop Outline */}
      <g className="vpn-laptop">
        <rect x="50" y="80" width="40" height="30" rx="2" stroke="var(--pen-line-strong)" strokeWidth="2" fill="var(--bg)" />
        <path d="M 40 110 L 100 110 L 105 116 L 35 116 Z" stroke="var(--pen-line-strong)" strokeWidth="2" fill="var(--pen-ink-900)" />
      </g>

      {/* Secure Enterprise Cloud Database */}
      <g className="vpn-db">
        <rect x="310" y="65" width="40" height="70" rx="4" stroke="var(--pen-neon)" strokeWidth="2" fill="var(--pen-ink-900)" />
        <line x1="316" y1="80" x2="344" y2="80" stroke="var(--pen-neon)" strokeWidth="2" />
        <line x1="316" y1="100" x2="344" y2="100" stroke="var(--pen-neon)" strokeWidth="2" />
        <line x1="316" y1="120" x2="344" y2="120" stroke="var(--pen-neon)" strokeWidth="2" />
        <circle cx="322" cy="80" r="2" fill="var(--pen-mint)" />
        <circle cx="322" cy="100" r="2" fill="var(--pen-mint)" />
        <circle cx="322" cy="120" r="2" fill="var(--pen-mint)" />
      </g>

      {/* Tunnel Pipe line */}
      <path d="M 100 95 L 310 95" stroke="var(--pen-line-strong)" strokeWidth="12" strokeLinecap="round" />
      <path d="M 100 95 L 310 95" stroke="var(--bg)" strokeWidth="8" strokeLinecap="round" />
      <path d="M 100 95 L 310 95" stroke="var(--pen-neon)" strokeWidth="2" strokeLinecap="round" strokeDasharray="5 15" className="vpn-tunnel-flow" />
    </svg>
  );
}

function VisualBackup() {
  return (
    <svg className="sol-svg-vis" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="sol-grid-pat-5" width="16" height="16" patternUnits="userSpaceOnUse">
          <path d="M 16 0 L 0 0 0 16" fill="none" stroke="rgba(0, 255, 122, 0.04)" strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#sol-grid-pat-5)" />

      {/* Main Server Cylinder (Center) */}
      <g className="bk-main">
        <path d="M 170 80 C 170 70, 230 70, 230 80 V 130 C 230 140, 170 140, 170 130 Z" stroke="var(--pen-line-strong)" strokeWidth="2" fill="var(--bg)" />
        <ellipse cx="200" cy="80" rx="30" ry="10" stroke="var(--pen-line-strong)" strokeWidth="2" fill="var(--pen-ink-900)" />
        <ellipse cx="200" cy="98" rx="30" ry="10" stroke="var(--pen-line)" strokeWidth="1" />
        <ellipse cx="200" cy="115" rx="30" ry="10" stroke="var(--pen-line)" strokeWidth="1" />
        <circle cx="190" cy="80" r="2" fill="var(--pen-neon)" />
        <circle cx="190" cy="98" r="2" fill="var(--pen-neon)" />
        <circle cx="190" cy="115" r="2" fill="var(--pen-neon)" />
      </g>

      {/* Backup Dest 1: Local Copy (Top Left) */}
      <g className="bk-dest-1">
        <rect x="70" y="45" width="40" height="35" rx="4" stroke="var(--pen-line-strong)" strokeWidth="2" fill="var(--bg)" />
        <line x1="78" y1="55" x2="102" y2="55" stroke="var(--pen-line)" strokeWidth="1.5" />
        <line x1="78" y1="65" x2="95" y2="65" stroke="var(--pen-line)" strokeWidth="1.5" />
      </g>

      {/* Backup Dest 2: External Copy (Bottom Left) */}
      <g className="bk-dest-2">
        <rect x="70" y="125" width="40" height="35" rx="4" stroke="var(--pen-line-strong)" strokeWidth="2" fill="var(--bg)" />
        <line x1="78" y1="135" x2="102" y2="135" stroke="var(--pen-line)" strokeWidth="1.5" />
        <line x1="78" y1="145" x2="95" y2="145" stroke="var(--pen-line)" strokeWidth="1.5" />
      </g>

      {/* Backup Dest 3: Cloud Copy (Right) */}
      <g className="bk-dest-3">
        <path d="M 285 105 C 285 92, 297 85, 308 85 C 312 75, 325 70, 335 78 C 345 70, 358 78, 358 90 C 365 92, 370 102, 365 112 C 365 120, 355 125, 345 125 H 295 C 285 125, 285 112, 285 105 Z" 
              stroke="var(--pen-neon)" strokeWidth="2" fill="rgba(0, 255, 122, 0.05)" />
      </g>

      {/* Sync path arrows */}
      <path d="M 230 100 Q 260 90, 280 98" stroke="var(--pen-line)" strokeWidth="1.5" strokeDasharray="3 3" className="bk-arrow-cloud" />
      <path d="M 170 95 Q 140 70, 115 67" stroke="var(--pen-line)" strokeWidth="1.5" strokeDasharray="3 3" className="bk-arrow-local" />
      <path d="M 170 115 Q 140 135, 115 137" stroke="var(--pen-line)" strokeWidth="1.5" strokeDasharray="3 3" className="bk-arrow-ext" />
    </svg>
  );
}

function SolucionVisual({ index }) {
  switch (index) {
    case 0: return <VisualFirewall />;
    case 1: return <VisualAgent />;
    case 2: return <VisualRadar />;
    case 3: return <VisualPhishing />;
    case 4: return <VisualVPN />;
    case 5: return <VisualBackup />;
    default: return null;
  }
}

// ════════════════════════════════════════════════════════════════════
// SectionSoluciones — card now has 3 layers: plain → benefit → caso
// ════════════════════════════════════════════════════════════════════
function SectionSoluciones({ copy }) {
  const [activeIndex, setActiveIndex] = useStateV(0);

  const isEn = copy.eyebrow.toLowerCase().includes("what");
  const stepLabels = isEn 
    ? ["Network", "Endpoints", "Support", "Identity", "Access", "Backups"] 
    : ["Red", "Equipos", "Soporte", "Identidad", "Accesos", "Respaldos"];

  const handlePrev = () => {
    setActiveIndex((prev) => (prev > 0 ? prev - 1 : 5));
  };

  const handleNext = () => {
    setActiveIndex((prev) => (prev < 5 ? prev + 1 : 0));
  };

  const activeItem = copy.items[activeIndex];

  return (
    <section className="sec sec-sol" id="soluciones">
      <div className="container">
        <div className="sec-head">
          <div className="mono-eyebrow">{copy.eyebrow}</div>
          <h2 className="sec-title">{copy.title}</h2>
          <p className="sec-sub">{copy.sub}</p>
        </div>

        {/* 1. Stepper / Sequence Timeline */}
        <div className="sol-stepper-container">
          <div className="sol-stepper">
            <div className="sol-stepper-line" />
            <div 
              className="sol-stepper-progress" 
              style={{ width: `${(activeIndex / 5) * 100}%` }}
            />
            {copy.items.map((item, idx) => {
              const isActive = idx === activeIndex;
              const isCompleted = idx < activeIndex;
              return (
                <div 
                  key={idx}
                  className={`sol-stepper-item ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`}
                  onClick={() => setActiveIndex(idx)}
                >
                  <div className="sol-step-node">
                    {idx + 1}
                  </div>
                  <span className="sol-step-label">{stepLabels[idx]}</span>
                </div>
              );
            })}
          </div>
        </div>

        {/* 2. Main Showcase Panel */}
        <div className="sol-showcase-panel">
          <div className="sol-showcase-content" key={activeIndex}>
            {/* Left Column: Core Identity, Benefit, and Tech Features */}
            <div className="sol-col-left">
              <div className="sol-card-head">
                <div className="mono-eyebrow sol-cat">{activeItem.cat}</div>
                <span className="sol-idx mono">0{activeIndex + 1} / 06</span>
              </div>
              <h3 className="sol-name">{activeItem.name}</h3>
              <div className="sol-model-badge">
                <span className="sol-model mono">{activeItem.model}</span>
              </div>
              <p className="sol-plain">{activeItem.plain}</p>
              <div className="sol-benefit">
                <span className="sol-benefit-glyph">›</span>
                <span className="sol-benefit-text">{activeItem.benefit}</span>
              </div>

              <div className="sol-features-wrapper">
                <div className="mono-eyebrow sol-features-title">CARACTERÍSTICAS CLAVE</div>
                <ul className="sol-features">
                  {activeItem.features.map((f, j) => (
                    <li key={j}>
                      <span className="sol-feat-glyph">▸</span>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            {/* Right Column: Illustration, Case Report & Specs */}
            <div className="sol-col-right">
              <div className="sol-illustration-container">
                <SolucionVisual index={activeIndex} />
              </div>

              <div className="sol-caso-box">
                <div className="sol-caso-header">
                  <span className="sol-caso-icon">⚡</span>
                  <span className="mono-eyebrow sol-caso-label">CASO REAL / IMPACTO</span>
                </div>
                <p className="sol-caso-body">"{activeItem.caso}"</p>
              </div>

              <div className="sol-spec-box">
                <div className="sol-spec">
                  <div className="sol-spec-item">
                    <span className="sol-spec-label">RENDIMIENTO</span>
                    <span className="mono sol-spec-value">{activeItem.spec.l1}</span>
                  </div>
                  <div className="sol-spec-item">
                    <span className="sol-spec-label">INTEGRACIÓN</span>
                    <span className="mono-dim sol-spec-value">{activeItem.spec.l2}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 3. Navigation Controls */}
        <div className="sol-nav-controls">
          <button className="btn btn-ghost sol-nav-btn" onClick={handlePrev}>
            <span className="btn-glyph" style={{ marginRight: '6px', marginLeft: 0 }}>◀</span> {isEn ? "Prev" : "Anterior"}
          </button>
          
          <div className="sol-nav-dots">
            {copy.items.map((_, idx) => (
              <span 
                key={idx}
                className={`sol-nav-dot ${idx === activeIndex ? 'is-active' : ''}`}
                onClick={() => setActiveIndex(idx)}
              />
            ))}
          </div>

          <button className="btn btn-primary sol-nav-btn" onClick={handleNext}>
            {activeIndex === 5 ? (isEn ? "Restart" : "Reiniciar") : (isEn ? "Next" : "Siguiente")} <span className="btn-glyph" style={{ marginLeft: '6px' }}>▶</span>
          </button>
        </div>

        {/* Partners Strip */}
        <div className="sol-partners">
          <span className="mono-eyebrow sol-partners-label">{copy.partnerStrip.label}</span>
          <span className="sol-partners-rule" />
          <div className="sol-partners-list">
            {(copy.partnerStrip.items || (copy.partnerStrip.groups ? copy.partnerStrip.groups.flatMap(g => g.items || []) : [])).map((p, i) =>
            <span className="sol-partner-name" key={i}>{p}</span>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SectionVuln, SectionSoluciones });