// Capabilities.jsx — three pillars of a real pentest practice
const Capabilities = () => {
  const rows = [
    {
      tag: 'Manual exploitation',
      title: 'Real exploits, chained and reproduced',
      body: 'Automated tools report individual issues. Our team combines them into the full attack path, reproduces it, and explains what it means for your business.',
      bullets: ['Step-by-step exploit walkthroughs', 'Proofs of concept with cURL, payloads, and screenshots', 'Custom tooling where it is needed'],
      visual: 'terminal',
    },
    {
      tag: 'Coverage you can audit',
      title: 'Every test case, documented',
      body: 'We test against published standards (OWASP WSTG, ASVS, MASVS, API Top 10) and record every test case, including the ones that passed. Your auditors see exactly what was covered, and so do you.',
      bullets: ['Checklist-mapped test execution', 'Tested, passed, vulnerable, or n/a for every item', 'Fully verifiable reporting'],
      visual: 'scan',
    },
    {
      tag: 'Reports engineers will fix',
      title: 'Two reports for two audiences',
      body: 'An executive summary for leadership and a technical report for the engineers doing the work. Severity reflects your environment, and every remediation is checked against your stack before we hand it over.',
      bullets: ['Executive and technical reports for every engagement', 'CVSS, CWE, and MITRE ATT&CK mappings', 'Direct access to your tester throughout remediation'],
      visual: 'map',
    },
  ];

  return (
    <section style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 32px' }}>
      <div style={{ marginBottom: 56, maxWidth: 760, textAlign: 'center', margin: '0 auto 56px' }}>
        <p style={{
          fontSize: 13, fontWeight: 500, color: '#828fff',
          letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14,
        }}>Our approach</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',
        }}>How we work</h2>
        <p style={{ fontSize: 17, color: '#8a8f98', lineHeight: 1.55, margin: 0 }}>
          Manual testing, documented coverage, and reports your engineers can use.
        </p>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {rows.map((r, i) => (
          <CapabilityRow key={r.tag} {...r} flip={i % 2 === 1} />
        ))}
      </div>
    </section>
  );
};

const CapabilityRow = ({ tag, title, body, bullets, visual, flip }) => {
  const useVP = window.useIsMobile || (() => false);
  const isMobile = useVP(900);
  return (
  <div style={{
    background: '#0f1011', border: '1px solid #23252a', borderRadius: 16,
    padding: 14, display: 'grid',
    gridTemplateColumns: isMobile ? '1fr' : (flip ? '1.1fr 1fr' : '1fr 1.1fr'),
    gap: 14, position: 'relative', overflow: 'hidden',
  }}>
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, height: 1,
      background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.06) 50%, transparent)',
    }} />

    {/* Visual */}
    <div style={{
      gridColumn: isMobile ? 'auto' : (flip ? 2 : 1),
      gridRow: isMobile ? 'auto' : 1,
      background: '#0a0a0b', border: '1px solid #1e1f22', borderRadius: 12,
      overflow: 'hidden', minHeight: isMobile ? 260 : 340, position: 'relative',
    }}>
      {visual === 'scan' && <CoverageVisual />}
      {visual === 'terminal' && <TerminalVisual />}
      {visual === 'map' && <ReportVisual />}
    </div>

    {/* Copy */}
    <div style={{
      gridColumn: isMobile ? 'auto' : (flip ? 1 : 2), gridRow: isMobile ? 'auto' : 1,
      padding: isMobile ? '22px 18px' : '32px 28px 32px 32px',
      display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 16,
    }}>
      <span style={{
        fontSize: 11, fontWeight: 500, color: '#828fff',
        background: 'rgba(94,105,210,0.12)',
        border: '1px solid rgba(94,105,210,0.2)',
        borderRadius: 9999, padding: '3px 9px',
        letterSpacing: '0.4px', textTransform: 'uppercase', whiteSpace: 'nowrap',
        alignSelf: 'flex-start',
      }}>{tag}</span>
      <h3 style={{
        fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 600,
        letterSpacing: '-0.9px', color: '#f7f8f8', margin: 0, lineHeight: 1.12,
        textWrap: 'balance',
      }}>{title}</h3>
      <p style={{ fontSize: 15, color: '#8a8f98', lineHeight: 1.6, margin: 0, maxWidth: 540 }}>{body}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 4 }}>
        {bullets.map(b => (
          <div key={b} style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <Icon name="check" size={13} color="#27a644" strokeWidth={2.5} />
            <span style={{ fontSize: 14, color: '#d0d6e0' }}>{b}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
  );
};

// Coverage visual — checklist of OWASP test cases ticking in real time
const CoverageVisual = () => {
  const [progress, setProgress] = React.useState(12);
  React.useEffect(() => {
    const t = setInterval(() => setProgress(p => p >= 142 ? 12 : p + 1), 240);
    return () => clearInterval(t);
  }, []);
  const items = [
    { id: 'WSTG-INFO-02', t: 'Fingerprint Web Server' },
    { id: 'WSTG-CONF-04', t: 'File Extensions Handling' },
    { id: 'WSTG-IDNT-04', t: 'Account Enumeration' },
    { id: 'WSTG-ATHN-02', t: 'Default Credentials' },
    { id: 'WSTG-ATHN-04', t: 'Bypass Authentication' },
    { id: 'WSTG-ATHZ-02', t: 'Bypass Authorization' },
    { id: 'WSTG-SESS-03', t: 'Session Fixation' },
    { id: 'WSTG-INPV-05', t: 'SQL Injection' },
    { id: 'WSTG-INPV-11', t: 'Code Injection' },
    { id: 'WSTG-CRYP-04', t: 'Weak Encryption' },
    { id: 'WSTG-BUSL-09', t: 'Upload of Malicious Files' },
  ];
  return (
    <div style={{ padding: 18, height: '100%', position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon name="layers" size={13} color="#828fff" />
          <span style={{ fontSize: 12, color: '#d0d6e0', fontWeight: 500 }}>OWASP WSTG · v4.2</span>
        </div>
        <span style={{ fontSize: 11, color: '#62666d', fontFamily: 'var(--font-mono)' }}>{progress} / 142 cases</span>
      </div>
      <div style={{
        height: 4, background: '#1a1b1e', borderRadius: 2, overflow: 'hidden', marginBottom: 14,
      }}>
        <div style={{
          height: '100%', width: `${(progress / 142) * 100}%`,
          background: 'linear-gradient(90deg, #5e6ad2, #828fff)',
          transition: 'width 240ms linear',
        }} />
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {items.map((it, i) => {
          const tested = i * 13 + 6 < progress;
          const flagged = it.id === 'WSTG-INPV-05' || it.id === 'WSTG-ATHZ-02';
          return (
            <div key={it.id} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '6px 10px', borderRadius: 6,
              background: tested ? '#0f1011' : 'transparent',
              border: `1px solid ${tested ? '#1e1f22' : 'transparent'}`,
              opacity: tested ? 1 : 0.45,
              transition: 'all 200ms',
            }}>
              <span style={{
                fontSize: 10, fontFamily: 'var(--font-mono)',
                color: tested ? '#62666d' : '#3e3e44', minWidth: 88,
              }}>{it.id}</span>
              <span style={{ fontSize: 11.5, color: tested ? '#d0d6e0' : '#62666d', flex: 1 }}>{it.t}</span>
              {tested && (
                flagged
                  ? <span style={{ fontSize: 9.5, padding: '1px 7px', borderRadius: 9999, background: 'rgba(232,84,58,0.15)', color: '#e8543a', fontFamily: 'var(--font-mono)' }}>VULN</span>
                  : <Icon name="check" size={11} color="#27a644" strokeWidth={2.5} />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

// Terminal visual (kept) — more pentest-flavored commands
const TerminalVisual = () => (
  <div style={{ padding: 20, height: '100%', background: '#06070a', position: 'relative' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
      <div style={{ display: 'flex', gap: 5 }}>
        {['#ff5f57', '#febc2e', '#28c840'].map(c => (
          <div key={c} style={{ width: 9, height: 9, borderRadius: '50%', background: c, opacity: 0.7 }} />
        ))}
      </div>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#62666d', marginLeft: 6 }}>operator@gs-pentest ~ </span>
    </div>
    <TerminalAnim
      lines={[
        { prompt: '$', text: 'gs-chain --target acme.corp', color: '#d0d6e0' },
        { text: '→ entry: jenkins.acme.corp / CVE-2024-23897', color: '#62666d', pause: 200 },
        { text: '→ leaked: ssh_key · ~/.ssh/id_ed25519', color: '#d98326', pause: 200 },
        { prompt: '$', text: 'gs-pivot ssh deploy@10.21.4.18', color: '#d0d6e0', pause: 350 },
        { text: '✓ shell · uid=1003(deploy)', color: '#27a644', pause: 250 },
        { prompt: '$', text: 'gs-linpeas --quick', color: '#d0d6e0', pause: 350 },
        { text: '◉ sudo NOPASSWD on /usr/bin/find', color: '#d98326', pause: 250 },
        { text: '✓ uid=0(root) · gid=0(root)', color: '#e8543a', pause: 250 },
        { text: '◉ tier-0 path · 2 hops to DC01', color: '#828fff' },
      ]}
    />
  </div>
);

// Report visual — animated severity distribution + finding cards
const ReportVisual = () => (
  <div style={{ padding: 18, height: '100%', position: 'relative' }}>
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14,
      paddingBottom: 12, borderBottom: '1px solid #1a1b1e',
    }}>
      <div style={{
        width: 28, height: 28, borderRadius: 6, background: '#1a1b1e',
        border: '1px solid #23252a',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon name="layers" size={13} color="#828fff" />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 12.5, color: '#f7f8f8', fontWeight: 500 }}>ACME Corp · External Pentest</div>
        <div style={{ fontSize: 10.5, color: '#62666d', fontFamily: 'var(--font-mono)' }}>GS-2026-0418 · 127 pages · v1.2</div>
      </div>
      <span style={{ fontSize: 9.5, padding: '2px 7px', borderRadius: 4, background: 'rgba(39,166,68,0.15)', color: '#27a644', fontFamily: 'var(--font-mono)' }}>FINAL</span>
    </div>

    {/* Stacked severity bar */}
    <div style={{ marginBottom: 14 }}>
      <div style={{ fontSize: 10, color: '#62666d', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 6 }}>Findings by severity</div>
      <div style={{ display: 'flex', height: 8, borderRadius: 4, overflow: 'hidden', background: '#1a1b1e' }}>
        <div style={{ width: '8%', background: '#e8543a' }} />
        <div style={{ width: '18%', background: '#d98326' }} />
        <div style={{ width: '34%', background: '#5e6ad2' }} />
        <div style={{ width: '40%', background: '#34343a' }} />
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6 }}>
        {[
          { l: 'Critical', n: 3, c: '#e8543a' },
          { l: 'High', n: 7, c: '#d98326' },
          { l: 'Medium', n: 13, c: '#5e6ad2' },
          { l: 'Low', n: 15, c: '#62666d' },
        ].map(s => (
          <div key={s.l} style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
            <div style={{ width: 6, height: 6, borderRadius: '50%', background: s.c }} />
            <span style={{ fontSize: 10.5, color: '#a8aeb8' }}>{s.l}</span>
            <span style={{ fontSize: 10.5, color: '#62666d', fontFamily: 'var(--font-mono)' }}>{s.n}</span>
          </div>
        ))}
      </div>
    </div>

    {/* Finding rows */}
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {[
        { id: 'F-01', t: 'Jenkins CLI arbitrary file read → RCE', cvss: 9.8, sev: 'critical' },
        { id: 'F-02', t: 'Kerberoastable SPN with weak password', cvss: 8.4, sev: 'high' },
        { id: 'F-03', t: 'IDOR in /v2/orgs/{id}/members', cvss: 7.7, sev: 'high' },
        { id: 'F-04', t: 'Stored XSS in admin internal notes', cvss: 6.1, sev: 'medium' },
      ].map(f => (
        <div key={f.id} style={{
          background: '#0f1011', border: '1px solid #1e1f22', borderRadius: 6,
          padding: '8px 10px', display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{
            width: 5, height: 5, borderRadius: '50%',
            background: f.sev === 'critical' ? '#e8543a' : f.sev === 'high' ? '#d98326' : '#5e6ad2',
          }} />
          <span style={{ fontSize: 10, color: '#3e3e44', fontFamily: 'var(--font-mono)', minWidth: 32 }}>{f.id}</span>
          <span style={{ fontSize: 11.5, color: '#d0d6e0', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.t}</span>
          <span style={{ fontSize: 10, color: '#62666d', fontFamily: 'var(--font-mono)' }}>{f.cvss}</span>
        </div>
      ))}
    </div>
  </div>
);

Object.assign(window, { Capabilities, CapabilityRow });