function AIRedTeam() {
  const flow = [
    { n: '01', title: 'Point', body: 'Provide your AI endpoint URL or select a model directly — OpenAI, Anthropic, and others.', icon: <IconCrosshair size={20} /> },
    { n: '02', title: 'Configure', body: 'Choose a test preset or hand-pick plugins, strategies, and orchestrators.', icon: <IconSliders size={20} /> },
    { n: '03', title: 'Run', body: 'Cyrion generates adversarial probes, sends them to your target, and scores every response.', icon: <IconPlay size={20} /> },
    { n: '04', title: 'Report', body: 'Pass/fail breakdown per category with OWASP LLM Top 10, NIST AI RMF & EU AI Act mapping.', icon: <IconFileCheck size={20} /> },
  ];
  const categories = [
    { tag: 'SEC', title: 'Security', tone: 'red', items: ['Prompt injection', 'Jailbreak', 'SQL / shell injection', 'SSRF', 'RBAC bypass', 'Data exfiltration'] },
    { tag: 'SAFE', title: 'Safety', tone: 'amber', items: ['Harmful content', 'Toxicity & bias', 'Hate speech', 'Harassment', 'Graphic content'] },
    { tag: 'PRIV', title: 'Privacy', tone: 'accent', items: ['PII disclosure', 'PII social-engineering', 'Data leakage', 'Cross-session leaks'] },
    { tag: 'POL', title: 'Brand & Policy', tone: 'accent', items: ['Competitor mentions', 'Off-topic responses', 'Political content', 'Imitation'] },
    { tag: 'REL', title: 'Reliability', tone: 'accent', items: ['Hallucination', 'Overreliance', 'Excessive agency'] },
    { tag: 'CMP', title: 'Compliance', tone: 'accent', items: ['COPPA', 'PII handling', 'Data leakage', 'Contract adherence'] },
  ];
  const presets = [
    { name: 'default', desc: 'Prompt injection, jailbreak, PII, harmful content, hallucination' },
    { name: 'owasp:llm', desc: 'Full OWASP LLM Top 10 coverage (12 plugins)' },
    { name: 'security', desc: 'Deep security testing (17 plugins)' },
    { name: 'safety', desc: 'Content safety & harm prevention (10 plugins)' },
    { name: 'comprehensive', desc: 'Everything — all 40+ plugins' },
  ];

  return (
    <section id="ai-red-team" className="section" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="page">
        <SectionHeader number="02 · AI RED TEAM" eyebrow="Adversarial Testing" title={<>Red-team your<br />AI &amp; LLM apps.</>} sub="Cyrion probes your models and AI-powered endpoints for vulnerabilities — prompt injection, jailbreaks, data leakage, and more — before attackers do. 40+ plugins across six categories." />

        <div className="grid-4" style={{ marginTop: 44 }}>
          {flow.map((s, i) => (
            <Reveal key={s.n} delay={i * 70} style={{ height: '100%' }}>
              <div className="card card-hover card-glow" style={{ height: '100%', padding: 18, position: 'relative', display: 'flex', flexDirection: 'column' }}>
                <span className="ticks"><i /><b /></span>
                <div className="row" style={{ justifyContent: 'space-between', marginBottom: 16 }}><span style={{ color: 'var(--accent)' }}>{s.icon}</span>{i < flow.length - 1 && <span className="dim" style={{ fontSize: 14 }}>→</span>}</div>
                <div className="row" style={{ gap: 8, alignItems: 'baseline' }}><span className="tnum" style={{ fontSize: 13, color: 'var(--ink-faint)' }}>{s.n}</span><div className="h3" style={{ fontSize: 17 }}>{s.title}</div></div>
                <p className="body" style={{ marginTop: 6, fontSize: 12.5 }}>{s.body}</p>
              </div>
            </Reveal>
          ))}
        </div>

        <div className="grid-2" style={{ marginTop: 12, gap: 12 }}>
          <Reveal style={{ height: '100%' }}><TargetMode tag="HTTP" title="HTTP Endpoint" body="Any REST API that accepts a prompt and returns a response. Supports Bearer, API-key, and Basic auth." /></Reveal>
          <Reveal delay={70} style={{ height: '100%' }}><TargetMode tag="MODEL" title="Direct Model" body={<>Test a model by ID (<code style={{ color: 'var(--accent)', background: 'var(--bg-lift)', padding: '1px 5px', fontSize: 11 }}>openai/gpt-4o</code>, <code style={{ color: 'var(--accent)', background: 'var(--bg-lift)', padding: '1px 5px', fontSize: 11 }}>anthropic/claude-sonnet-4-5</code>) — no deployment needed.</>} /></Reveal>
        </div>

        <div style={{ marginTop: 40 }}>
          <div className="bracket" style={{ marginBottom: 16 }}>TEST CATEGORIES · 40+ PLUGINS</div>
          <div className="grid-3">{categories.map((c, i) => <Reveal key={c.title} delay={i * 50} style={{ height: '100%' }}><CategoryCard cat={c} /></Reveal>)}</div>
        </div>

        <div className="grid-2" style={{ marginTop: 12, gap: 12 }}>
          <div className="card" style={{ padding: 18, position: 'relative' }}>
            <span className="ticks"><i /><b /></span>
            <div className="h3" style={{ fontSize: 17 }}>Attack strategies</div>
            <p className="body" style={{ marginTop: 6, fontSize: 12.5 }}>Probes are transformed through evasion strategies to test defense-in-depth.</p>
            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[{ label: 'Encoding', ex: 'Base64, ROT13, leetspeak, homoglyphs, Morse, Unicode confusables' }, { label: 'Semantic', ex: 'Tone-shift, persuasion, hypothetical framing, few-shot priming, role-play' }, { label: 'Adversarial', ex: 'Suffix/prefix injection, payload splitting, iterative jailbreak, crescendo' }].map((s) => (
                <div key={s.label} style={{ padding: '10px 12px', border: '1px solid var(--line)', background: 'var(--bg-lift)' }}><span className="accent" style={{ fontSize: 12, letterSpacing: '0.04em', display: 'block', marginBottom: 3 }}>{s.label}</span><span className="dim" style={{ fontSize: 11.5 }}>{s.ex}</span></div>
              ))}
            </div>
          </div>
          <div className="card" style={{ padding: 18, position: 'relative' }}>
            <span className="ticks"><i /><b /></span>
            <div className="h3" style={{ fontSize: 17 }}>Ready-made presets</div>
            <p className="body" style={{ marginTop: 6, fontSize: 12.5 }}>Pre-configured test suites for common use cases.</p>
            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
              {presets.map((p) => (
                <div key={p.name} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '9px 12px', border: '1px solid var(--line)', background: 'var(--bg-lift)' }}><code style={{ color: 'var(--accent)', background: 'rgba(0,224,198,0.08)', padding: '2px 7px', fontSize: 11, whiteSpace: 'nowrap', flexShrink: 0 }}>{p.name}</code><span className="dim" style={{ fontSize: 11.5, lineHeight: 1.45 }}>{p.desc}</span></div>
              ))}
            </div>
          </div>
        </div>

        <div className="card" style={{ marginTop: 12, padding: '16px 18px', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 14, background: 'linear-gradient(90deg, rgba(0,224,198,0.05), transparent 60%), var(--panel)' }}>
          <span className="ticks"><i /><b /></span>
          <div><div className="h3" style={{ fontSize: 16 }}>Auto-mapped to AI frameworks</div><p className="dim" style={{ fontSize: 12, marginTop: 4 }}>Every result is cross-walked with pass/fail rates per item.</p></div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>{['OWASP LLM Top 10', 'NIST AI RMF', 'EU AI Act'].map((fw) => <span key={fw} className="pill"><span className="swatch" />{fw}</span>)}</div>
        </div>
      </div>
    </section>
  );
}

function TargetMode({ tag, title, body }) {
  return (
    <div className="card card-hover card-glow" style={{ height: '100%', padding: 18, position: 'relative', display: 'flex', flexDirection: 'column' }}>
      <span className="ticks"><i /><b /></span>
      <div className="row" style={{ justifyContent: 'space-between', marginBottom: 12 }}><span className="bracket">{tag}</span><span className="caption">TARGET MODE</span></div>
      <div className="h3" style={{ fontSize: 17 }}>{title}</div><p className="body" style={{ marginTop: 6, fontSize: 12.5 }}>{body}</p>
    </div>
  );
}

function CategoryCard({ cat }) {
  const color = cat.tone === 'red' ? 'var(--red)' : cat.tone === 'amber' ? 'var(--amber)' : 'var(--accent)';
  return (
    <div className="card card-hover card-glow" style={{ height: '100%', padding: 18, position: 'relative', display: 'flex', flexDirection: 'column' }}>
      <span className="ticks"><i /><b /></span>
      <div className="row" style={{ justifyContent: 'space-between', marginBottom: 12 }}><span style={{ fontSize: 11, letterSpacing: '0.12em', color }}>● {cat.tag}</span></div>
      <div className="h3" style={{ fontSize: 16, marginBottom: 12 }}>{cat.title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 7 }}>
        {cat.items.map((it) => <li key={it} style={{ display: 'flex', gap: 8, fontSize: 11.5, color: 'var(--ink-mute)', alignItems: 'center' }}><span style={{ flexShrink: 0 }}><IconCheck size={10} color={color} /></span>{it}</li>)}
      </ul>
    </div>
  );
}

Object.assign(window, { AIRedTeam });