// 6-step Lifecycle (replaces older methodology)
const { useState: useStateM } = React;

const STEPS = [
  {
    phase: 'STEP 01',
    name: 'Scope',
    sub: 'CONFIGURE',
    title: 'Scope, credentials, and rules of engagement.',
    desc: 'You define authorized assets, environments, test windows, credentials, roles, and exclusions. Testing intensity is configurable per asset.',
    bullets: [
      'Asset inventory + authentication setup',
      'Allowed testing intensity per environment',
      'Excluded endpoints and business-critical flows',
      'API documentation ingestion (OpenAPI / GraphQL)',
    ],
  },
  {
    phase: 'STEP 02',
    name: 'AI Assessment',
    sub: 'AGENTS RUN',
    title: 'Dedicated AI agents start working.',
    desc: 'Twelve specialized agents probe asset discovery, endpoint mapping, authentication, access control, input validation, misconfigurations, sensitive data exposure, and known weaknesses.',
    bullets: [
      'Asset & endpoint discovery',
      'Auth, authz, and access-control testing',
      'Input validation + injection probing',
      'Misconfigurations + sensitive data exposure',
    ],
  },
  {
    phase: 'STEP 03',
    name: 'Dedupe',
    sub: 'CLUSTER + MATCH',
    title: 'Similar findings are clustered into one.',
    desc: 'The dedupe engine groups related findings by payload, endpoint, root cause, and stack trace, then matches them against previously closed issues for regression detection.',
    bullets: [
      'Similarity scoring + cluster grouping',
      'Root-cause matching (one fix → many resolved)',
      'Cross-scan + cross-asset dedupe',
      'Regression detection on closed findings',
    ],
  },
  {
    phase: 'STEP 04',
    name: 'Noise Filter',
    sub: 'CONFIDENCE',
    title: 'Confidence-scored. Sandbox-validated.',
    desc: 'Every finding gets a confidence score. Low-confidence, environmental, and informational hits are filtered. Sandbox replay is required for any "exploitable" claim before it advances.',
    bullets: [
      'AI confidence score · transparent reasoning',
      'Sandbox replay for exploitability claims',
      'Environmental + low-value detection',
      'Suppression of previously-fixed findings',
    ],
  },
  {
    phase: 'STEP 05',
    name: 'Human Validation',
    sub: 'EXPERT REVIEW',
    title: 'Senior pentesters validate what matters.',
    desc: 'Every meaningful low → critical finding gets reviewed by a senior pentester. They confirm exploitability, adjust severity, refine business impact, and add evidence the AI may have missed.',
    bullets: [
      'Confirm exploitability · adjust severity',
      'Business-logic and access-control testing',
      'Add evidence · screenshots · payloads · logs',
      'Record video PoCs for important findings',
    ],
  },
  {
    phase: 'STEP 06',
    name: 'Report',
    sub: 'DELIVERY',
    title: 'Professional, manual-quality reports.',
    desc: 'Findings ship with description, business + technical impact, CVSS / CWE, reproduction steps, evidence, remediation, and retest status. Exported as PDF, HTML, SARIF, or pushed to your tracker.',
    bullets: [
      'Executive summary + technical detail',
      'Reproduction steps · screenshots · video PoC',
      'Jira / Linear / GitHub / Slack sync',
      'Retest support + risk-trend analytics',
    ],
  },
];

function MethodViz({ index }) {
  return (
    <svg viewBox="0 0 800 160" style={{ width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id="mvLine" x1="0" x2="1">
          <stop offset="0" stopColor="var(--accent)" stopOpacity="0.0" />
          <stop offset="0.5" stopColor="var(--accent)" stopOpacity="0.9" />
          <stop offset="1" stopColor="var(--accent-2)" stopOpacity="0.0" />
        </linearGradient>
        <filter id="mvGlow"><feGaussianBlur stdDeviation="3" /></filter>
      </defs>
      <line x1="40" y1="80" x2="760" y2="80" stroke="var(--border)" strokeWidth="1" />
      <line x1="40" y1="80" x2={40 + ((760-40) * (index+1) / STEPS.length)} y2="80"
        stroke="url(#mvLine)" strokeWidth="2" />
      {STEPS.map((_, i) => {
        const x = 40 + ((760-40) * i / (STEPS.length-1));
        const active = i <= index;
        return (
          <g key={i}>
            <circle cx={x} cy={80} r={active ? 6 : 4}
              fill={active ? 'var(--accent)' : 'var(--border)'}
              stroke={active ? 'var(--accent-hi)' : 'var(--border-2)'} strokeWidth="1.5"
              filter={i === index ? 'url(#mvGlow)' : undefined} />
            <text x={x} y={108} textAnchor="middle"
              fontFamily="JetBrains Mono, monospace" fontSize="10"
              fill={i === index ? 'var(--accent-hi)' : 'var(--text-3)'} letterSpacing="0.1em">
              {String(i+1).padStart(2,'0')}
            </text>
          </g>
        );
      })}
      <circle cx={40 + ((760-40) * index / (STEPS.length-1))} cy="80" r="10"
              fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.4">
        <animate attributeName="r" values="8;16;8" dur="2.4s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.6;0;0.6" dur="2.4s" repeatCount="indefinite" />
      </circle>
    </svg>
  );
}

function Methodology() {
  const [active, setActive] = useStateM(0);
  const step = STEPS[active];
  return (
    <section className="section" id="lifecycle">
      <div className="container">
        <div className="section-head">
          <div className="section-head__title">
            <span className="eyebrow">04 · Lifecycle</span>
            <h2 style={{ marginTop: 18 }}>How a finding travels from<br/>AI agent to engineering ticket.</h2>
          </div>
          <div className="section-head__meta">[ 6 steps · click to explore ]</div>
        </div>

        <div className="method">
          <div className="method__steps">
            {STEPS.map((s, i) => (
              <div key={i}
                   className={`method__step${i === active ? ' method__step--active' : ''}`}
                   onClick={() => setActive(i)}>
                <div className="method__step-num">{String(i+1).padStart(2,'0')}</div>
                <div>
                  <div className="method__step-name">{s.name}</div>
                  <div className="method__step-sub">{s.sub}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="method__panel">
            <div className="method__phase">{step.phase} · {step.sub}</div>
            <div className="method__title">{step.title}</div>
            <p className="method__desc">{step.desc}</p>
            <div className="method__list">
              {step.bullets.map((b, i) => (
                <div key={i} className="method__list-item">{b}</div>
              ))}
            </div>
            <div className="method__viz">
              <MethodViz index={active} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Methodology });