// Arsenal.jsx — operator tooling arsenal
// Animated marquees of real offensive-security tools, grouped by category.
// Tool names are accurate references to widely-used open-source pentest tooling.

const ARSENAL_CATEGORIES = [
  {
    id: 'recon',
    label: 'Recon & OSINT',
    desc: 'Asset discovery, subdomain enum, exposure mining',
    color: '#828fff',
    tools: [
      { n: 'Nmap',         k: 'port + service' },
      { n: 'Amass',         k: 'subdomain graph' },
      { n: 'Subfinder',     k: 'passive enum' },
      { n: 'httpx',         k: 'web probing' },
      { n: 'Shodan',        k: 'internet census' },
      { n: 'Censys',        k: 'cert intel' },
      { n: 'theHarvester',  k: 'osint email' },
      { n: 'ffuf',          k: 'fuzz · brute' },
      { n: 'gowitness',     k: 'screenshot' },
      { n: 'waybackurls',   k: 'history' },
      { n: 'dnsx',          k: 'dns enum' },
      { n: 'gs-recon',      k: 'in-house · ledger', custom: true },
    ],
  },
  {
    id: 'web',
    label: 'Web & API',
    desc: 'Manual web testing, GraphQL, API abuse, fuzzing',
    color: '#828fff',
    tools: [
      { n: 'Burp Suite Pro', k: 'proxy + extender' },
      { n: 'Caido',          k: 'modern proxy' },
      { n: 'OWASP ZAP',      k: 'open proxy' },
      { n: 'sqlmap',         k: 'injection' },
      { n: 'Nuclei',         k: 'template engine' },
      { n: 'dalfox',         k: 'xss scanner' },
      { n: 'GraphQL Voyager',k: 'schema map' },
      { n: 'Postman',        k: 'api replay' },
      { n: 'gobuster',       k: 'directory brute' },
      { n: 'jwt_tool',       k: 'token attack' },
      { n: 'turbo-intruder', k: 'race-cond' },
      { n: 'gs-fuzz',        k: 'in-house · schema-aware', custom: true },
    ],
  },
  {
    id: 'ad',
    label: 'Active Directory & Identity',
    desc: 'Kerberos, ADCS, lateral movement, credential attacks',
    color: '#828fff',
    tools: [
      { n: 'BloodHound',     k: 'attack-path graph' },
      { n: 'NetExec',        k: 'protocol exec' },
      { n: 'Impacket',       k: 'smb · kerberos' },
      { n: 'Rubeus',         k: 'kerberos toolkit' },
      { n: 'Certipy',        k: 'adcs esc' },
      { n: 'Kerbrute',       k: 'username · spray' },
      { n: 'mimikatz',       k: 'lsass · dpapi' },
      { n: 'ldapdomaindump', k: 'ldap recon' },
      { n: 'Coercer',        k: 'auth coercion' },
      { n: 'PowerView',      k: 'ad recon' },
      { n: 'SharpHound',     k: 'collector' },
      { n: 'gs-graph',       k: 'in-house · adcs scoring', custom: true },
    ],
  },
  {
    id: 'c2',
    label: 'Exploitation & C2',
    desc: 'Command and control, post-exploitation, payloads',
    color: '#828fff',
    tools: [
      { n: 'Metasploit',  k: 'framework' },
      { n: 'Sliver',      k: 'open c2' },
      { n: 'Mythic',      k: 'multi-agent c2' },
      { n: 'Havoc',       k: 'modern c2' },
      { n: 'Cobalt Strike', k: 'commercial' },
      { n: 'NimPlant',    k: 'lightweight implant' },
      { n: 'donut',       k: 'shellcode gen' },
      { n: 'PEzor',       k: 'pe loader' },
      { n: 'Inceptor',    k: 'evasion' },
      { n: 'ScareCrow',   k: 'edr bypass' },
      { n: 'gs-implant',  k: 'in-house · BOFs', custom: true },
    ],
  },
  {
    id: 'mobile',
    label: 'Mobile & Reversing',
    desc: 'iOS, Android, binary analysis, runtime hooking',
    color: '#828fff',
    tools: [
      { n: 'Frida',     k: 'runtime hook' },
      { n: 'Objection', k: 'mobile toolkit' },
      { n: 'MobSF',     k: 'mobile sast' },
      { n: 'apktool',   k: 'apk decompile' },
      { n: 'jadx',      k: 'dex → java' },
      { n: 'Ghidra',    k: 'reverse engineering' },
      { n: 'IDA Pro',   k: 'disassembler' },
      { n: 'radare2',   k: 'open re' },
      { n: 'drozer',    k: 'android ipc' },
      { n: 'class-dump',k: 'objc inspect' },
    ],
  },
  {
    id: 'cloud',
    label: 'Cloud & Kubernetes',
    desc: 'AWS, Azure, GCP, Kubernetes',
    color: '#828fff',
    tools: [
      { n: 'Pacu',         k: 'aws exploit' },
      { n: 'ScoutSuite',   k: 'multi-cloud audit' },
      { n: 'Prowler',      k: 'cis benchmark' },
      { n: 'PMapper',      k: 'iam graph' },
      { n: 'CloudFox',     k: 'aws recon' },
      { n: 'kube-hunter',  k: 'k8s discovery' },
      { n: 'peirates',     k: 'k8s privesc' },
      { n: 'kubeaudit',    k: 'cluster review' },
      { n: 'ROADtools',    k: 'entra id' },
      { n: 'AzureHound',   k: 'azure path' },
      { n: 'gs-trustgraph',k: 'in-house · cross-account', custom: true },
    ],
  },
];

const Arsenal = () => {
  const [hovered, setHovered] = React.useState(null);
  return (
    <section style={{
      maxWidth: 1280, margin: '0 auto', padding: '96px 32px',
      position: 'relative',
    }}>
      <div style={{ marginBottom: 48, maxWidth: 760 }}>
        <p style={{
          fontSize: 13, fontWeight: 500, color: '#828fff',
          letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14,
        }}>The arsenal</p>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 4.4vw, 56px)',
          fontWeight: 600, lineHeight: 1.05, letterSpacing: '-2px',
          color: '#f7f8f8', margin: '0 0 16px',
        }}>The tools we use</h2>
        <p style={{ fontSize: 17, color: '#8a8f98', lineHeight: 1.55, margin: 0, maxWidth: 620 }}>
          Community and commercial tools, plus the ones we built ourselves.
        </p>
      </div>

      <div style={{
        background: '#0f1011', border: '1px solid #23252a',
        borderRadius: 16, padding: 4, position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 1,
          background: 'linear-gradient(90deg, transparent, rgba(94,105,210,0.4) 50%, transparent)', zIndex: 2,
        }} />

        {/* Edge fade overlays */}
        <div style={{
          position: 'absolute', top: 0, bottom: 0, left: 0, width: 80,
          background: 'linear-gradient(90deg, #0f1011, transparent)', zIndex: 3, pointerEvents: 'none',
        }} />
        <div style={{
          position: 'absolute', top: 0, bottom: 0, right: 0, width: 80,
          background: 'linear-gradient(270deg, #0f1011, transparent)', zIndex: 3, pointerEvents: 'none',
        }} />

        {ARSENAL_CATEGORIES.map((cat, i) => (
          <ArsenalRow
            key={cat.id}
            cat={cat}
            direction={i % 2 === 0 ? 'left' : 'right'}
            duration={36 + i * 4}
            isHovered={hovered === cat.id}
            onEnter={() => setHovered(cat.id)}
            onLeave={() => setHovered(null)}
          />
        ))}
      </div>

      {/* Footnote */}
      <div style={{
        marginTop: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 16, flexWrap: 'wrap',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 8, height: 8, borderRadius: 2, background: '#5e6ad2' }} />
            <span style={{ fontSize: 12, color: '#8a8f98' }}>Community or commercial</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 8, height: 8, borderRadius: 2, background: '#27a644' }} />
            <span style={{ fontSize: 12, color: '#8a8f98' }}>Written in-house by GreySurface</span>
          </div>
        </div>
        <span style={{ fontSize: 12, color: '#62666d', fontFamily: 'var(--font-mono)' }}>
          {ARSENAL_CATEGORIES.reduce((n, c) => n + c.tools.length, 0)} tools across {ARSENAL_CATEGORIES.length} areas · reviewed quarterly
        </span>
      </div>
    </section>
  );
};

const ArsenalRow = ({ cat, direction, duration, isHovered, onEnter, onLeave }) => {
  // Duplicate the tool list 3x for seamless loop
  const tripled = [...cat.tools, ...cat.tools, ...cat.tools];
  const animName = direction === 'left' ? 'gs-marquee' : 'gs-marquee-rtl';

  return (
    <div
      onMouseEnter={onEnter}
      onMouseLeave={onLeave}
      style={{
        position: 'relative',
        padding: '14px 0',
        borderTop: '1px solid #1a1b1e',
      }}
    >
      {/* Category label rail */}
      <div style={{
        position: 'absolute', left: 18, top: 14, zIndex: 4,
        background: 'rgba(15,16,17,0.92)', backdropFilter: 'blur(6px)',
        padding: '6px 12px', borderRadius: 8,
        border: '1px solid #23252a',
        display: 'flex', alignItems: 'center', gap: 8,
        boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
        whiteSpace: 'nowrap',
      }}>
        <div className="gs-pulse" style={{ width: 5, height: 5, borderRadius: '50%', background: '#828fff' }} />
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <span style={{ fontSize: 11, fontWeight: 600, color: '#f7f8f8', letterSpacing: 0.3, whiteSpace: 'nowrap' }}>{cat.label}</span>
          <span style={{ fontSize: 10, color: '#62666d', fontFamily: 'var(--font-mono)', whiteSpace: 'nowrap' }}>{cat.tools.length} tools</span>
        </div>
      </div>

      <div style={{
        display: 'flex', gap: 10, paddingLeft: 280,
        width: 'max-content',
        animation: `${animName} ${duration}s linear infinite`,
        animationPlayState: isHovered ? 'paused' : 'running',
      }}>
        {tripled.map((t, i) => <ToolCard key={`${t.n}-${i}`} t={t} />)}
      </div>
    </div>
  );
};

const ToolCard = ({ t }) => (
  <div style={{
    flexShrink: 0,
    background: t.custom ? 'linear-gradient(155deg, rgba(39,166,68,0.10), rgba(39,166,68,0.03))' : '#141516',
    border: `1px solid ${t.custom ? 'rgba(39,166,68,0.30)' : '#23252a'}`,
    borderRadius: 10, padding: '10px 14px',
    minWidth: 180,
    display: 'flex', alignItems: 'center', gap: 10,
    transition: 'transform 200ms ease-out, border-color 200ms',
  }}
  onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.borderColor = t.custom ? 'rgba(39,166,68,0.55)' : '#34343a'; }}
  onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = t.custom ? 'rgba(39,166,68,0.30)' : '#23252a'; }}
  >
    <ToolGlyph name={t.n} custom={t.custom} />
    <div style={{ minWidth: 0 }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 12.5, fontWeight: 500,
        color: '#f7f8f8', letterSpacing: '-0.2px',
        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
      }}>{t.n}</div>
      <div style={{
        fontSize: 10.5, color: t.custom ? '#5fd178' : '#62666d',
        textTransform: 'uppercase', letterSpacing: 0.4, fontWeight: 500,
        whiteSpace: 'nowrap',
      }}>{t.k}</div>
    </div>
  </div>
);

// Procedural glyph — each tool name hashes to a unique 2-letter mark + accent
const ToolGlyph = ({ name, custom }) => {
  const letters = name.replace(/[^a-zA-Z0-9]/g, '').slice(0, 2).toUpperCase();
  const hash = [...name].reduce((a, c) => a + c.charCodeAt(0), 0);
  const accent = custom ? '#27a644' : ['#828fff', '#5e6ad2', '#7a7fad'][hash % 3];
  return (
    <div style={{
      width: 34, height: 34, borderRadius: 7, flexShrink: 0,
      background: `linear-gradient(155deg, ${accent}22, ${accent}05)`,
      border: `1px solid ${accent}55`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* corner glint */}
      <div style={{
        position: 'absolute', top: -8, right: -8, width: 24, height: 24,
        background: `radial-gradient(circle, ${accent}55, transparent 70%)`,
      }} />
      <span style={{
        fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
        color: accent, letterSpacing: '-0.3px', position: 'relative',
      }}>{letters}</span>
    </div>
  );
};

Object.assign(window, { Arsenal });