// Method — dark again. Three columns. Diagrammatic SVGs.

function StepGlyph({ kind }) {
  if (kind === 'plant') return (
    <svg viewBox="0 0 220 170" style={{width:'100%', height:'auto'}}>
      <defs>
        <radialGradient id="gP" cx="50%" cy="50%" r="50%"><stop offset="0%" stopColor="#a18bff" stopOpacity=".8"/><stop offset="100%" stopColor="#a18bff" stopOpacity="0"/></radialGradient>
      </defs>
      <rect x="10" y="30" width="200" height="100" rx="6" fill="none" stroke="#262a44" strokeDasharray="2 4"/>
      {[[40,50],[100,48],[160,52],[35,90],[110,90],[170,92]].map(([x,y],i)=>(
        <g key={i}>
          <circle cx={x} cy={y} r="14" fill="url(#gP)"/>
          <circle cx={x} cy={y} r="4" fill="#a18bff"/>
        </g>
      ))}
      <text x="20" y="155" fontFamily="JetBrains Mono" fontSize="9" fill="#7a7c95">prd-eu · 6 tokens armed</text>
    </svg>
  );
  if (kind === 'provoke') return (
    <svg viewBox="0 0 220 170" style={{width:'100%', height:'auto'}}>
      <circle cx="110" cy="75" r="10" fill="#ff5c5c">
        <animate attributeName="r" values="10;26;10" dur="2.4s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="1;0;1" dur="2.4s" repeatCount="indefinite"/>
      </circle>
      <circle cx="110" cy="75" r="6" fill="#ff5c5c"/>
      {[0,72,144,216,288].map((a,i)=>{
        const rad = a*Math.PI/180;
        return <line key={i} x1="110" y1="75" x2={110+Math.cos(rad)*48} y2={75+Math.sin(rad)*48} stroke="#262a44" strokeWidth="1"/>;
      })}
      {['VT','SHO','GEO','IP','MIT'].map((l,i)=>{
        const a = i*72*Math.PI/180;
        const x = 110+Math.cos(a)*52, y = 75+Math.sin(a)*52;
        return <g key={i}><circle cx={x} cy={y} r="11" fill="#0c0e18" stroke="#262a44"/><text x={x} y={y+3} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="#b0b0c4">{l}</text></g>;
      })}
      <text x="20" y="158" fontFamily="JetBrains Mono" fontSize="9" fill="#7a7c95">parallel enrichment · &lt; 4s</text>
    </svg>
  );
  return (
    <svg viewBox="0 0 220 170" style={{width:'100%', height:'auto'}}>
      <rect x="10" y="30" width="60" height="32" rx="4" fill="none" stroke="#262a44"/>
      <text x="40" y="50" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#a18bff">iam.revoke</text>
      <rect x="80" y="30" width="60" height="32" rx="4" fill="none" stroke="#262a44"/>
      <text x="110" y="50" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#a18bff">cf.block</text>
      <rect x="150" y="30" width="60" height="32" rx="4" fill="none" stroke="#262a44"/>
      <text x="180" y="50" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#a18bff">siem.ingest</text>
      <rect x="10" y="72" width="95" height="32" rx="4" fill="#6fd7a1" opacity=".15" stroke="#6fd7a1"/>
      <text x="57.5" y="92" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#6fd7a1">nis2.dossier</text>
      <rect x="115" y="72" width="95" height="32" rx="4" fill="none" stroke="#262a44"/>
      <text x="162.5" y="92" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#a18bff">slack.page</text>
      <text x="20" y="145" fontFamily="JetBrains Mono" fontSize="9" fill="#7a7c95">deterministic · audited · &lt; 60s</text>
    </svg>
  );
}

function MethodSection() {
  const steps = [
    { n:'01', title:'Plant', sub:'Nine primitives', body:'AWS IAM keys, URL hooks, DNS subdomains, PDF beacons, JDBC credentials, LLM API tokens, RAG canaries, CI/CD pipeline canaries, npm package canaries. Indistinguishable from the real thing. Five-minute setup, no agent on your network.', kind:'plant' },
    { n:'02', title:'Provoke', sub:'AI investigation', body:'A LangGraph pipeline fires the moment a token is touched. Parallel enrichment via VirusTotal, AbuseIPDB, Shodan, GeoIP. MITRE-mapped. Classifies the actor as human-novice, human-expert, script, or autonomous agent.', kind:'provoke' },
    { n:'03', title:'Prevail', sub:'Deterministic response', body:'Above your risk threshold, Vantuz revokes the IAM key, blocks the IP at Cloudflare, ingests to your SIEM, and writes the NIS2 Article 23 incident dossier. All before your phone has finished ringing.', kind:'contain' },
  ];
  return (
    <section id="method" data-screen-label="03 Method" className="bg-ink" style={{position:'relative', padding:'140px 0 120px', borderTop:'1px solid var(--ink-line)'}}>
      <div className="grid-dots" style={{position:'absolute', inset:0, opacity:.4}}/>
      <div className="wrap" style={{position:'relative'}}>
        <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:64, gap:32, flexWrap:'wrap'}}>
          <div>
            <div className="chip" style={{marginBottom:18}}>FILE № 02 · METHOD</div>
            <h2 className="display" style={{fontSize:'clamp(48px, 6vw, 96px)', margin:0, color:'#fff', maxWidth:880, fontWeight:700}}>
              Three moves. <span className="display-italic txt-grad">Sixty seconds.</span>
            </h2>
          </div>
          <p style={{maxWidth:380, color:'var(--txt-2)', fontSize:15, lineHeight:1.55, margin:0}}>
            Every Vantuz response is deterministic — no LLM in the critical path. Claude only narrates after containment is done.
          </p>
        </div>

        <div className="method-grid" style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:24}}>
          {steps.map(s => (
            <div key={s.n} className="card" style={{padding:'28px 28px 32px', position:'relative', overflow:'hidden'}}>
              <div style={{position:'absolute', top:-40, right:-40, width:160, height:160, background:'radial-gradient(circle, rgba(74,109,245,.28), transparent 65%)', filter:'blur(20px)'}}/>
              <div style={{position:'relative'}}>
                <div className="mono" style={{fontSize:11, letterSpacing:'.2em', color:'var(--aurora-2)'}}>{s.n}  ·  {s.sub.toUpperCase()}</div>
                <div className="display" style={{fontSize:54, color:'#fff', margin:'10px 0 18px', fontWeight:700, letterSpacing:'-.025em'}}>{s.title}.</div>
                <div style={{margin:'8px 0 22px'}}>
                  <StepGlyph kind={s.kind}/>
                </div>
                <p style={{fontSize:14.5, lineHeight:1.6, color:'var(--txt-2)', margin:0}}>{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.MethodSection = MethodSection;
