// PEN Landing — HackStory
// Auto-cycling 5-scene illustration of a phishing → transfer scam,
// ending with PEN's intervention. Replaces the techy LiveConsole in the hero.

const { useState: useStateHS, useEffect: useEffectHS } = React;

const SCENES = [
{
  tag: "Lun 08:42",
  chip: "Día normal",
  title: "Llega un correo del director",
  body: "Pide a contabilidad transferir S/ 42.000 urgente a un proveedor.",
  visual: "inbox",
  ui: { app: "Gmail", tab: "Bandeja de entrada · Trabajo" }
},
{
  tag: "Lun 08:43",
  chip: "El detalle invisible",
  title: "Parece su correo. No lo es.",
  body: "El dominio está cambiado por una letra. Imposible verlo de pasada.",
  visual: "lookalike",
  ui: { app: "Outlook", tab: "Verificación de remitente" }
},
{
  tag: "Lun 09:15",
  chip: "La transferencia sale",
  title: "Contabilidad procesa el pago",
  body: "BBVA Perú confirma envío. El dinero entra en una cuenta en el extranjero.",
  visual: "bank",
  ui: { app: "BBVA Net Cash", tab: "Transferencias · Confirmación" }
},
{
  tag: "Lun 14:00",
  chip: "El descubrimiento",
  title: "El director nunca envió ese correo",
  body: "Demasiado tarde. Recuperar el dinero es prácticamente imposible.",
  visual: "alert",
  ui: { app: "WhatsApp Business", tab: "Dirección general" }
},
{
  tag: "Con PEN",
  chip: "Resultado real",
  title: "El correo nunca llega al buzón",
  body: "PEN Mail Shield detecta la suplantación y lo aísla. Tu equipo nunca lo ve.",
  visual: "shield",
  ui: { app: "PEN Mail Shield", tab: "Cuarentena · amenaza contenida" }
}];


function HackStory() {
  const [idx, setIdx] = useStateHS(0);
  const [auto, setAuto] = useStateHS(true);

  useEffectHS(() => {
    if (!auto) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % SCENES.length), 8000);
    return () => clearInterval(t);
  }, [auto]);

  const goto = (i) => {setAuto(false);setIdx(i);};
  const isFinal = idx === SCENES.length - 1;

  return (
    <div className={"hs " + (isFinal ? "hs-final" : "hs-attack")}>
      {/* window chrome */}
      <div className="hs-chrome">
        <div className="hs-dots">
          <span className="hs-dot hs-dot-r" />
          <span className="hs-dot hs-dot-y" />
          <span className="hs-dot hs-dot-g" />
        </div>
        <div className="hs-chrome-title">
          <span className="mono-eyebrow">CÓMO OCURRE UN ATAQUE REAL</span>
        </div>
        <div className="hs-chrome-meta">
          <span className="mono-dim">caso · BEC</span>
        </div>
      </div>

      {/* progress timeline */}
      <div className="hs-timeline">
        {SCENES.map((s, i) =>
        <button
          key={i}
          className={"hs-step" + (i === idx ? " is-active" : "") + (i < idx ? " is-done" : "") + (i === SCENES.length - 1 ? " is-shield" : "")}
          onClick={() => goto(i)}
          aria-label={s.title}>
          
            <span className="hs-step-num mono">{i === SCENES.length - 1 ? "✓" : "0" + (i + 1)}</span>
            <span className="hs-step-time mono">{s.tag}</span>
          </button>
        )}
      </div>

      {/* stage */}
      <div className="hs-stage">
        {SCENES.map((s, i) =>
        <div key={i} className={"hs-scene hs-scene-" + s.visual + (i === idx ? " is-active" : "")}>
            {/* fake browser/app tab bar to make it feel like a real interface */}
            <div className="hs-app-bar">
              <span className="hs-app-glyph" data-app={s.visual} />
              <span className="hs-app-name">{s.ui.app}</span>
              <span className="hs-app-sep">›</span>
              <span className="hs-app-tab">{s.ui.tab}</span>
            </div>
            <div className="hs-scene-head">
              <span className={"hs-scene-chip" + (i === SCENES.length - 1 ? " hs-scene-chip-ok" : "")}>{s.chip}</span>
              <span className="hs-scene-time mono">{s.tag}</span>
            </div>
            <h3 className="hs-scene-title">{s.title}</h3>
            <div className="hs-scene-visual">
              {s.visual === "inbox" && <HSInbox />}
              {s.visual === "lookalike" && <HSLookalike />}
              {s.visual === "bank" && <HSBank />}
              {s.visual === "alert" && <HSAlert />}
              {s.visual === "shield" && <HSShield />}
            </div>
            <div className="hs-scene-body">{s.body}</div>
          </div>
        )}
      </div>

      <div className="hs-foot">
        <span className="mono-dim">{auto ? "▸ reproducción automática" : "▸ pausado — pulsa un paso"}</span>
        <button className="hs-replay" onClick={() => {setAuto(true);setIdx(0);}}>
          <span>↻</span> reproducir
        </button>
      </div>
    </div>);

}

// ────────────────────────────────────────────────────────────────
// Scene visuals — small static illustrations made with HTML/CSS.
// ────────────────────────────────────────────────────────────────

function HSInbox() {
  return (
    <div className="hs-vis hs-inbox">
      <div className="hs-inbox-tab">Bandeja de entrada</div>
      <div className="hs-mail hs-mail-old"><span className="hs-mail-from">Cliente Acme</span><span className="hs-mail-subj">Pedido — confirmación</span><span className="hs-mail-time">ayer</span></div>
      <div className="hs-mail hs-mail-new is-pulsing">
        <span className="hs-mail-dot" />
        <span className="hs-mail-from">Director General</span>
        <span className="hs-mail-subj">URGENTE — transferencia proveedor</span>
        <span className="hs-mail-time">08:42</span>
      </div>
      <div className="hs-mail hs-mail-old"><span className="hs-mail-from">Newsletter</span><span className="hs-mail-subj">Boletín sector</span><span className="hs-mail-time">08:30</span></div>
    </div>);

}

function HSLookalike() {
  return (
    <div className="hs-vis hs-lookalike">
      <div className="hs-look-row hs-look-row-fake">
        <span className="hs-look-label">Correo recibido</span>
        <span className="hs-look-addr" style={{ textAlign: "center" }}>director@empresa-so<mark className="hs-look-mark">I</mark>uciones.com</span>
      </div>
      <div className="hs-look-row hs-look-row-real">
        <span className="hs-look-label">Correo real</span>
        <span className="hs-look-addr">director@empresa-so<span className="hs-look-good">l</span>uciones.com</span>
      </div>
      <div className="hs-look-zoom">
        <div className="hs-look-zoom-glyph hs-look-zoom-bad"><span>I</span><span className="hs-look-zoom-tag">capital i</span></div>
        <div className="hs-look-zoom-vs">≠</div>
        <div className="hs-look-zoom-glyph hs-look-zoom-good"><span>l</span><span className="hs-look-zoom-tag">lower L</span></div>
      </div>
    </div>);

}

function HSBank() {
  return (
    <div className="hs-vis hs-bank">
      <div className="hs-bank-row">
        <span className="hs-bank-label">De</span>
        <span className="hs-bank-acct mono">BBVA ·· 0011 ···· 4521</span>
      </div>
      <div className="hs-bank-arrow">
        <span className="hs-bank-arrow-line" />
        <span className="hs-bank-arrow-amt">– S/ 42.000,00</span>
      </div>
      <div className="hs-bank-row hs-bank-row-dest">
        <span className="hs-bank-label">A</span>
        <span className="hs-bank-acct mono">PL ·· 4427 ···· 0099</span>
      </div>
      <div className="hs-bank-flag">
        <span className="hs-bank-flag-dot" />
        <span className="mono">transferencia ejecutada · 09:15</span>
      </div>
    </div>);

}

function HSAlert() {
  return (
    <div className="hs-vis hs-alert">
      <div className="hs-alert-glyph">!</div>
      <div className="hs-alert-quote">
        <span className="hs-alert-quote-mark">“</span>
        <span>¿Qué transferencia? Yo no envié ese correo.</span>
        <span className="hs-alert-quote-mark">”</span>
      </div>
      <div className="hs-alert-meta mono">— Director, 14:00</div>
      <div className="hs-alert-loss">
        <span className="hs-alert-loss-label mono">DAÑO</span>
        <span className="hs-alert-loss-num">– S/ 42.000</span>
      </div>
    </div>);

}

function HSShield() {
  return (
    <div className="hs-vis hs-shield">
      <div className="hs-shield-icon">
        <div className="hs-shield-svg">
          <svg viewBox="0 0 64 64" fill="none">
            <path d="M32 6 L54 14 V32 C54 46 44 56 32 60 C20 56 10 46 10 32 V14 Z" stroke="currentColor" strokeWidth="2" fill="rgba(0,255,122,0.06)" />
            <path d="M22 32 L29 39 L43 25" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
      </div>
      <div className="hs-shield-rows">
        <div className="hs-shield-row">
          <span className="hs-shield-status">✓</span>
          <span>Correo bloqueado por <b>PEN Mail Shield</b></span>
        </div>
        <div className="hs-shield-row">
          <span className="hs-shield-status">✓</span>
          <span>Dominio look-alike marcado</span>
        </div>
        <div className="hs-shield-row">
          <span className="hs-shield-status">✓</span>
          <span>Equipo notificado · cero impacto</span>
        </div>
      </div>
    </div>);

}

Object.assign(window, { HackStory });