// Methodology.jsx — VAPT-specific 6-phase process timeline
const PHASES = [
  {
    n: '01', t: 'Scope & Threat Model',
    d: 'We agree on your assets, your likely adversaries, and what a successful test looks like before testing begins.',
    detail: 'A signed statement of work listing in-scope and out-of-scope assets, rules of engagement, emergency contacts, and the threat model we are testing against.',
    rows: [
      { k: 'Deliverable', v: 'Statement of work · rules of engagement · threat model' },
      { k: 'Lead', v: 'Engagement lead (OSCP or higher, 8+ years)' },
      { k: 'Duration', v: '2–3 business days' },
    ],
  },
  {
    n: '02', t: 'Reconnaissance',
    d: 'We find what an attacker would find first: your public footprint, leaked credentials, and forgotten infrastructure.',
    detail: 'Exposed services, third-party dependencies, leaked credentials, and shadow IT, collected into one inventory your engineers can act on right away.',
    rows: [
      { k: 'Tooling', v: 'Custom enumeration, Amass, Shodan, Censys' },
      { k: 'Output', v: 'Asset ledger · pre-engagement findings' },
      { k: 'Duration', v: '2–4 business days' },
    ],
  },
  {
    n: '03', t: 'Exploitation',
    d: 'Manual testing led by an experienced tester. We find issues, prove them, and combine them into realistic attack paths.',
    detail: 'Every finding is reproducible, with step-by-step replay, evidence, payloads, and an impact rating that reflects your business.',
    rows: [
      { k: 'Approach', v: 'Manual chained exploitation, OWASP and PTES aligned' },
      { k: 'Output', v: 'Proof of concept · payloads · screen captures per finding' },
      { k: 'Duration', v: '5–15 business days, depending on scope' },
    ],
  },
  {
    n: '04', t: 'Reporting',
    d: 'An executive summary for leadership and a technical report for your engineers.',
    detail: 'CVSS, CWE, OWASP, and MITRE ATT&CK mappings, severity calibrated to your environment, and remediation guidance checked against your stack.',
    rows: [
      { k: 'Deliverables', v: 'Executive report · technical report · raw evidence pack' },
      { k: 'Mappings', v: 'CVSS v3.1 · CWE · MITRE ATT&CK · compliance' },
      { k: 'Duration', v: '3–5 business days' },
    ],
  },
  {
    n: '05', t: 'Remediation Support',
    d: 'We work alongside your engineers until the fixes are in.',
    detail: 'A shared Slack or Teams channel runs from kickoff through retest. We answer questions throughout remediation and debrief with your security team at the end.',
    rows: [
      { k: 'Channel', v: 'Slack, Teams, or Zoom — your choice' },
      { k: 'SLA', v: 'Critical findings disclosed within one hour' },
      { k: 'Duration', v: 'Up to 90 days included' },
    ],
  },
  {
    n: '06', t: 'Retest & Sign-off',
    d: 'Free retesting within 90 days. Every finding is marked as fixed or still open.',
    detail: 'A retest report shows what was fixed, what was partially fixed, and what you have accepted as risk. It is signed off by your tester and ready for your auditor.',
    rows: [
      { k: 'Deliverable', v: 'Retest delta report · sign-off letter' },
      { k: 'Cost', v: 'Included — no separate engagement' },
      { k: 'Duration', v: '2–4 business days' },
    ],
  },
];

const Methodology = () => {
  const [active, setActive] = React.useState(0);
  return (
    <section style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 32px' }}>
      <div style={{ marginBottom: 48, maxWidth: 720 }}>
        <p style={{
          fontSize: 13, fontWeight: 500, color: '#828fff',
          letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14,
        }}>Methodology</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',
        }}>Our methodology</h2>
        <p style={{ fontSize: 17, color: '#8a8f98', lineHeight: 1.55, margin: 0, maxWidth: 600 }}>
          Six phases, documented at every step and aligned to OWASP WSTG, OSSTMM, NIST SP 800-115, and PTES.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12 }}>
        {/* Timeline */}
        <div style={{
          background: '#0f1011', border: '1px solid #23252a',
          borderRadius: 16, padding: 8, 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)',
          }} />
          {PHASES.map((p, i) => (
            <button
              key={p.n}
              onClick={() => setActive(i)}
              style={{
                width: '100%', textAlign: 'left',
                background: active === i ? '#141516' : 'transparent',
                border: 'none', borderRadius: 10, padding: '14px 16px',
                display: 'flex', alignItems: 'flex-start', gap: 14,
                cursor: 'pointer', transition: 'background 150ms ease-out',
                position: 'relative',
              }}
              onMouseEnter={e => { if (active !== i) e.currentTarget.style.background = '#101113'; }}
              onMouseLeave={e => { if (active !== i) e.currentTarget.style.background = 'transparent'; }}
            >
              {/* Connecting line */}
              {i < PHASES.length - 1 && (
                <div style={{
                  position: 'absolute', left: 30, top: 42, bottom: -12,
                  width: 1, background: '#23252a',
                }} />
              )}
              <div style={{
                width: 28, height: 28, borderRadius: '50%',
                background: active === i ? '#5e6ad2' : '#141516',
                border: `1px solid ${active === i ? '#5e6ad2' : '#23252a'}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-mono)', fontSize: 11,
                color: active === i ? '#fff' : '#8a8f98', fontWeight: 500,
                flexShrink: 0, position: 'relative', zIndex: 1,
                boxShadow: active === i ? '0 0 0 4px rgba(94,105,210,0.18)' : 'none',
                transition: 'all 200ms',
              }}>{p.n}</div>
              <div style={{ flex: 1, minWidth: 0, paddingTop: 2 }}>
                <div style={{
                  fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 500,
                  color: '#f7f8f8', letterSpacing: '-0.3px', marginBottom: 3,
                }}>{p.t}</div>
                <div style={{ fontSize: 13.5, color: '#8a8f98', lineHeight: 1.5 }}>{p.d}</div>
              </div>
            </button>
          ))}
        </div>

        {/* Detail panel */}
        <div key={active} style={{
          background: '#141516', border: '1px solid #34343a',
          borderRadius: 16, padding: 28, position: 'relative', overflow: 'hidden',
          alignSelf: 'start', position: 'sticky', top: 80,
          animation: 'gs-rise 320ms ease-out',
        }}>
          <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)',
          }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18 }}>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              color: '#828fff', letterSpacing: '0.4px',
            }}>PHASE {PHASES[active].n}</span>
          </div>
          <h3 style={{
            fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600,
            letterSpacing: '-0.8px', color: '#f7f8f8', margin: '0 0 14px',
          }}>{PHASES[active].t}</h3>
          <p style={{ fontSize: 15, color: '#d0d6e0', lineHeight: 1.6, margin: '0 0 24px' }}>
            {PHASES[active].detail}
          </p>
          <div style={{
            paddingTop: 18, borderTop: '1px solid #23252a',
            display: 'flex', flexDirection: 'column', gap: 10,
          }}>
            {PHASES[active].rows.map(row => (
              <div key={row.k} style={{ display: 'flex', justifyContent: 'space-between', gap: 16 }}>
                <span style={{ fontSize: 12, color: '#62666d', fontWeight: 500, flexShrink: 0 }}>{row.k}</span>
                <span style={{ fontSize: 12, color: '#d0d6e0', textAlign: 'right' }}>{row.v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Methodology });