// sections-hacker.jsx — All sections for the Hacker edition

function HSection({ num, title, sub, surface, id, children }) {
  return (
    <section id={id} className={`section${surface ? ' section-surface' : ''}`}>
      <div className="container">
        <div style={{ marginBottom: 48 }}>
          {num && <span className="sh-num">{num}</span>}
          <h2 className="sh-title">{title}</h2>
          {sub && <p className="sh-sub">{sub}</p>}
        </div>
        {children}
      </div>
    </section>
  );
}

// ── 01 Problem ──
function HackerProblem() {
  const stats = [
    { val: '$47M', lbl: 'single prompt injection loss' },
    { val: '82%', lbl: 'MCP servers vulnerable' },
    { val: '$2.3B', lbl: 'documented LLM attack losses' },
    { val: 'AUG_26', lbl: 'EU AI Act enforcement' },
  ];
  const threats = [
    { id: 'PROMPT_INJECT', desc: 'Override system instructions, hijack agent behavior' },
    { id: 'DESTRUCTIVE_ACT', desc: 'DROP TABLE, rm -rf, delete_all — agents run what they\'re told' },
    { id: 'DATA_EXFIL', desc: 'API keys, PII, system prompts leaked to attackers' },
    { id: 'JAILBREAK', desc: 'DAN, dev mode, persona hijack bypass every guardrail' },
    { id: 'INDIRECT_INJECT', desc: 'Hidden payloads in docs, tool results, RAG context' },
    { id: 'HARMFUL_OUTPUT', desc: 'Toxic, biased, or dangerous responses reach end users' },
  ];

  return (
    <HSection num="THREAT_LANDSCAPE" id="problem"
      title="Your agents are compromised."
      sub="Real attacks. Real losses. Happening right now.">
      
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 48 }}>
        {stats.map((s, i) => (
          <div key={i} style={{
            padding: '24px 16px', border: '1px solid var(--border)',
            textAlign: 'center', background: 'var(--bg-elevated)',
          }}>
            <div style={{
              fontSize: 36, fontWeight: 700, color: 'var(--accent)',
              fontFamily: 'var(--font-mono)', letterSpacing: '-0.02em', marginBottom: 8,
            }}>{s.val}</div>
            <div style={{ fontSize: 12, color: 'var(--text-secondary)', fontFamily: 'var(--font-mono)' }}>{s.lbl}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {threats.map((t, i) => (
          <div key={i} style={{
            padding: '16px 20px', border: '1px solid var(--border)',
            display: 'flex', gap: 16, alignItems: 'baseline',
          }}>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)',
              fontWeight: 600, flexShrink: 0, letterSpacing: '0.03em',
            }}>{t.id}</span>
            <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{t.desc}</span>
          </div>
        ))}
      </div>
    </HSection>
  );
}

// ── 02 Architecture ──
const PIPE_INNER = 49;

function pipeTop() {
  return `┌${'─'.repeat(PIPE_INNER)}┐`;
}

function pipeBottom() {
  return `└${'─'.repeat(PIPE_INNER)}┘`;
}

function pipeDiv(label) {
  const text = ` ${label} `;
  const dashes = Math.max(0, PIPE_INNER - text.length);
  const left = Math.floor(dashes / 2);
  return `├${'─'.repeat(left)}${text}${'─'.repeat(dashes - left)}┤`;
}

function pipeRow(content) {
  const inner = content.length > PIPE_INNER ? content.slice(0, PIPE_INNER) : content;
  return `│${inner.padEnd(PIPE_INNER, ' ')}│`;
}

function pipeRowLR(left, right) {
  const gap = PIPE_INNER - left.length - right.length;
  const inner = gap >= 1
    ? left + ' '.repeat(gap) + right
    : `${left} ${right}`.slice(0, PIPE_INNER);
  return `│${inner.padEnd(PIPE_INNER, ' ')}│`;
}

function StageRow({ left, right }) {
  const gap = PIPE_INNER - left.length - right.length;
  const spacer = gap >= 1 ? ' '.repeat(gap) : ' ';
  return (
    <div className="pipeline-line">
      <span className="pipeline-border">│</span>
      <span className="pipeline-stage-label">{left}</span>
      <span className="pipeline-timing">{spacer}{right}</span>
      <span className="pipeline-border">│</span>
    </div>
  );
}

function BodyRow({ text, tone }) {
  return <div className={`pipeline-line pipeline-${tone}`}>{pipeRow(text)}</div>;
}

const PIPELINE_ROWS = [
  { kind: 'border', text: pipeTop() },
  { kind: 'stage', left: ' STAGE 1  Pattern Engine', right: '<1ms' },
  { kind: 'body', text: ' 12-stage normalize · regex · encoding · secrets', tone: 'detail' },
  { kind: 'body', text: ' injection · destructive · leakage · harmful', tone: 'muted' },
  { kind: 'divider', text: pipeDiv('if gray zone') },
  { kind: 'stage', left: ' STAGE 2  Span Classifier', right: '5-20ms' },
  { kind: 'body', text: ' fine-tuned Unplug models · hosted API only', tone: 'detail' },
  { kind: 'body', text: ' invoked on borderline risk, not every scan', tone: 'muted' },
  { kind: 'divider', text: pipeDiv('always') },
  { kind: 'stage', left: ' STAGE 3  Policy + Redaction', right: '<1ms' },
  { kind: 'body', text: ' risk_score · allow/redact/block/review', tone: 'detail' },
  { kind: 'body', text: ' span-level evidence on every finding', tone: 'muted' },
  { kind: 'border', text: pipeBottom() },
];

function PipelineBox() {
  return (
    <div className="pipeline-box">
      {PIPELINE_ROWS.map((row, i) => {
        if (row.kind === 'stage') {
          return <StageRow key={i} left={row.left} right={row.right} />;
        }
        if (row.kind === 'body') {
          return <BodyRow key={i} text={row.text} tone={row.tone} />;
        }
        return (
          <div key={i} className={`pipeline-line pipeline-${row.kind}`}>{row.text}</div>
        );
      })}
    </div>
  );
}

function HackerArch() {
  return (
    <HSection num="PIPELINE" surface id="architecture"
      title={<>Three stages. <span style={{ color: 'var(--accent)' }}>&lt;20ms.</span></>}
      sub="Normalize → scan → decide. Most attacks stop at stage 1.">

      <div style={{ maxWidth: 720 }}>
        <div className="terminal">
          <div className="terminal-chrome">
            <div className="terminal-dot" style={{ background: '#ff5f57' }}></div>
            <div className="terminal-dot" style={{ background: '#febc2e' }}></div>
            <div className="terminal-dot" style={{ background: '#28c840' }}></div>
            <div className="terminal-title">unplug — pipeline</div>
          </div>
          <div className="terminal-body" style={{ fontSize: 13 }}>
            <PipelineBox />
            <div style={{ marginTop: 12 }}>
              <span className="sp">{'>>'}</span> <span className="sf">ScanResult</span>{'{'}<span className="ss">safe</span>: <span className="sb">false</span>, <span className="ss">risk_score</span>: <span className="sn">0.97</span>, <span className="ss">action</span>: <span className="ss">"redact"</span>, <span className="ss">stages_run</span>: [<span className="ss">"regex"</span>]{'}'}</div>
          </div>
        </div>
      </div>
    </HSection>
  );
}

// ── 03 Deploy ──
function CodePre({ text }) {
  return <pre className="code-pre">{text}</pre>;
}

function DeployTerminal({ install, children, raw }) {
  return (
    <div className="terminal-body deploy-terminal">
      {install && (
        <div className="deploy-install">
          <span className="sp">$</span> {install}
        </div>
      )}
      <div className="deploy-code">
        {raw ? <CodePre text={children} /> : children}
      </div>
    </div>
  );
}

function HackerDeploy() {
  const [tab, setTab] = React.useState(0);
  const apiSnippet = `$ curl -X POST ${SITE_CONFIG.apiBaseUrl}/scan \\
  -H "Authorization: Bearer $UNPLUG_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{"text":"Ignore all instructions","source":"user","redact":true}'

# regex + optional tier classifier on gray zone
# returns ScanResult: safe, risk_score, findings[], latency_ms`;

  const mcpSnippet = `// claude_desktop_config.json
{
  "mcpServers": {
    "unplug": {
      "command": "uvx",
      "args": ["unplug-mcp"]
    }
  }
}

# scans tool calls + agent I/O via MCP`;

  const tabs = [
    {
      label: 'SDK',
      install: `pip install ${SITE_CONFIG.pipPackage}`,
      raw: false,
      code: (
        <>
          <span className="sk">from</span> <span className="sg">unplug</span> <span className="sk">import</span> <span className="sg">Guard</span>{'\n\n'}
          guard = <span className="sg">Guard</span>()  <span className="sc"># local mode, offline</span>{'\n'}
          result = guard.<span className="sf">scan</span>(text, source=<span className="ss">"user"</span>){'\n\n'}
          <span className="sk">if not</span> result.safe:{'\n'}
          {'    '}text = result.redacted_text  <span className="sc"># span-level redaction</span>{'\n\n'}
          <span className="sc"># hosted API (when server is live):</span>{'\n'}
          <span className="sc"># guard = Guard(mode="server")</span>
        </>
      ),
    },
    { label: 'API', install: null, raw: true, code: apiSnippet },
    { label: 'MCP', install: null, raw: true, code: mcpSnippet },
  ];

  return (
    <HSection num="DEPLOY" id="deploy"
      title="Three vectors. Same defense."
      sub="Local SDK, hosted API, or MCP agent integration.">

      <div style={{ maxWidth: 640 }}>
        <div style={{ display: 'flex', gap: 0, marginBottom: 0, borderBottom: '1px solid var(--border)' }}>
          {tabs.map((t, i) => (
            <button key={i} onClick={() => setTab(i)} style={{
              background: 'transparent', border: 'none', borderBottom: `2px solid ${i === tab ? 'var(--accent)' : 'transparent'}`,
              padding: '10px 20px', fontFamily: 'var(--font-mono)', fontSize: 13,
              color: i === tab ? 'var(--accent)' : 'var(--text-muted)',
              cursor: 'pointer', marginBottom: -1,
            }}>{t.label}</button>
          ))}
        </div>
        <div className="terminal" style={{ borderRadius: '0 0 var(--r-lg) var(--r-lg)', borderTop: 'none' }}>
          <DeployTerminal install={tabs[tab].install} raw={tabs[tab].raw}>
            {tabs[tab].code}
          </DeployTerminal>
        </div>
      </div>
    </HSection>
  );
}

// ── 04 Features ──
function HackerFeatures() {
  const feats = [
    'span-level redaction — redact malicious spans, keep clean text',
    'evidence-based findings — category, subcategory, span, score, evidence',
    'source-aware scanning — user · retrieved · tool_output · system',
    'Guard.init() — global instance for app-wide scanning',
    'local + server modes — offline SDK or Guard(mode="server")',
    'six scanner categories — injection · destructive · leakage · harmful · financial · secrets',
    'hosted tier classifiers — small/medium/large span models (API)',
    'session context — session_id, agent_id, turn_id on every scan',
  ];

  return (
    <HSection num="FEATURES" surface id="features"
      title="Capabilities">
      <div style={{ maxWidth: 640, fontFamily: 'var(--font-mono)', fontSize: 13 }}>
        {feats.map((f, i) => (
          <div key={i} style={{
            padding: '12px 0', borderBottom: '1px solid var(--border)',
            display: 'flex', gap: 12, alignItems: 'baseline',
          }}>
            <span style={{ color: 'var(--accent)', flexShrink: 0 }}>[{String(i).padStart(2, '0')}]</span>
            <span style={{ color: 'var(--text-secondary)' }}>{f}</span>
          </div>
        ))}
      </div>
    </HSection>
  );
}

Object.assign(window, {
  HSection, HackerProblem, HackerArch, HackerDeploy, HackerFeatures, DeployTerminal, CodePre, PipelineBox,
});