function Platform() {
  return (
    <section id="platform" className="section">
      <div className="page">
        <SectionHeader number="02" eyebrow="Platform" title={<>Six surfaces.<br />One operator.</>} sub="Cyrion is a single agent operating across your entire footprint. Each surface has a dedicated module — they share a memory of your environment, so findings on one fuel hypotheses on the next." />

        <div className="row" style={{ gap: 32, marginTop: 36, flexWrap: 'wrap' }}>
          {[
            { icon: <IconGlobe size={20} />, label: 'Six attack surfaces', body: 'Web, API, mobile, cloud, and LLM endpoints — one operator, one shared memory of your environment.' },
            { icon: <IconShieldCheck size={20} />, label: 'Independently validated', body: 'Every finding is re-attempted by a second agent before it ships. 0% false-positive rate, audited monthly.' },
            { icon: <IconClipboard size={20} />, label: 'Compliance mapped', body: 'Cross-walked to SOC 2, ISO 27001, PCI-DSS, HIPAA and eight more frameworks automatically.' },
          ].map((v, i) => (
            <Reveal key={v.label} delay={i * 80} style={{ flex: '1 1 220px', minWidth: 220 }}>
              <div className="row" style={{ gap: 10, alignItems: 'flex-start' }}>
                <span style={{ color: 'var(--accent)', flexShrink: 0, marginTop: 2 }}>{v.icon}</span>
                <div><div style={{ fontSize: 13, color: 'var(--ink)', fontWeight: 600 }}>{v.label}</div><p className="dim" style={{ fontSize: 12.5, marginTop: 4, lineHeight: 1.5, maxWidth: 280 }}>{v.body}</p></div>
              </div>
            </Reveal>
          ))}
        </div>

        <div className="grid-bento" style={{ marginTop: 36 }}>
          <BentoCard span="bento-7-2" id="MOD-01" badge="WEB · API" icon={<IconGlobe size={16} />}>
            <div className="h3" style={{ maxWidth: 480, fontSize: 21 }}>Web & API <span className="accent">attack-graph</span></div>
            <p className="body" style={{ marginTop: 10, maxWidth: 480, fontSize: 13 }}>IDOR, BOLA, SSRF, GraphQL introspection abuse, token-replay — chained, validated against a shadow target, and presented as an executable scenario.</p>
            <AttackGraph />
            <div style={{ display: 'flex', gap: 6, marginTop: 14, flexWrap: 'wrap' }}>{['OWASP API Top-10', 'JWT / OAuth', 'GraphQL', 'WebSocket', 'Postman / OpenAPI'].map(t => <span key={t} className="pill" style={{ background: 'transparent' }}>{t}</span>)}</div>
          </BentoCard>

          <BentoCard span="bento-5" id="MOD-02" badge="MOBILE" icon={<IconMobile size={16} />} delay={80}>
            <div className="h3" style={{ fontSize: 18 }}>Android & iOS</div>
            <p className="body" style={{ marginTop: 6, fontSize: 13 }}>Static + dynamic analysis. Detects insecure storage, jailbreak bypass, and broken cert pinning by actually attempting them.</p>
            <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 6 }}>
              <ModuleRow label=".apk · acme-prod-7.2.apk" status="ANALYZED" />
              <ModuleRow label=".ipa · acme-prod-7.2.ipa" status="ANALYZED" />
              <ModuleRow label="frida hooks · 47" status="ACTIVE" tone="amber" />
              <ModuleRow label="cert pin · bypassed" status="EXPLOIT" tone="red" />
            </div>
          </BentoCard>

          <BentoCard span="bento-5" id="MOD-03" badge="CLOUD" icon={<IconCloud size={16} />} delay={160}>
            <div className="h3" style={{ fontSize: 18 }}>AWS / Azure / GCP</div>
            <p className="body" style={{ marginTop: 6, fontSize: 13 }}>Privilege-graph analysis with simulated lateral movement across accounts and roles.</p>
            <div style={{ marginTop: 14, display: 'flex', gap: 18, alignItems: 'stretch' }}>
              <CloudPill label="AWS" pct={62} /><CloudPill label="AZURE" pct={28} /><CloudPill label="GCP" pct={10} />
            </div>
          </BentoCard>

          <BentoCard span="bento-7" id="MOD-04" badge="VALIDATION" tone="accent" icon={<IconShieldCheck size={16} />}>
            <div className="row" style={{ alignItems: 'flex-start', gap: 24 }}>
              <div style={{ flex: 1 }}>
                <div className="h3" style={{ fontSize: 21 }}><span className="accent">Zero</span> false-positives.</div>
                <p className="body" style={{ marginTop: 8, maxWidth: 420, fontSize: 13 }}>Every finding is re-attempted by a second agent in an isolated replica of your stack. Only confirmed, reproducible exploits ship.</p>
              </div>
              <div style={{ flex: '0 0 160px', textAlign: 'right' }}>
                <div className="tnum" style={{ fontSize: 52, lineHeight: 1, letterSpacing: '-0.05em' }}><Counter to={0} /></div>
                <div className="caption">verified · last 90 days</div>
              </div>
            </div>
          </BentoCard>

          <BentoCard span="bento-5" id="MOD-05" badge="COMPLIANCE" icon={<IconClipboard size={16} />} delay={80}>
            <div className="h3" style={{ fontSize: 18 }}>Auto-mapped frameworks</div>
            <p className="body" style={{ marginTop: 6, fontSize: 13 }}>Each finding cross-walked to standards your auditor speaks.</p>
            <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
              {['OWASP Top 10', 'PCI-DSS 4.0', 'SOC 2 Type II', 'ISO 27001', 'HIPAA', 'NIS2', 'CIS v8', 'MITRE ATT&CK'].map(s => <div key={s} style={{ padding: '8px 10px', border: '1px solid var(--line)', fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '0.04em' }}>{s}</div>)}
            </div>
          </BentoCard>

          <BentoCard span="bento-12" id="MOD-06" badge="INTEGRATIONS" icon={<IconPlug size={16} />} delay={160}>
            <div className="row" style={{ justifyContent: 'space-between', alignItems: 'flex-start', gap: 24, flexWrap: 'wrap' }}>
              <div style={{ maxWidth: 380 }}>
                <div className="h3" style={{ fontSize: 18 }}>Plug into your engineering reality</div>
                <p className="body" style={{ marginTop: 6, fontSize: 13 }}>Pull-request comments. Slack threads. Jira tickets with PoC. Pipe webhooks anywhere.</p>
              </div>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', maxWidth: 480 }}>
                {['github', 'gitlab', 'bitbucket', 'jira', 'linear', 'slack', 'teams', 'pagerduty', 'datadog', 'splunk', 'kubernetes', 'terraform'].map(n => <div key={n} style={{ padding: '10px 14px', border: '1px solid var(--line)', fontSize: 11, letterSpacing: '0.08em', color: 'var(--ink-mute)', textTransform: 'uppercase', background: 'var(--bg-lift)' }}>{n}</div>)}
              </div>
            </div>
          </BentoCard>
        </div>
      </div>
    </section>
  );
}

function BentoCard({ children, span = '', id, badge, tone, icon, delay = 0 }) {
  return (
    <Reveal delay={delay} className={span}>
      <div className="card card-hover card-glow" style={{ height: '100%', padding: 18, display: 'flex', flexDirection: 'column', position: 'relative', background: tone === 'accent' ? 'linear-gradient(180deg, rgba(0,224,198,0.05), transparent 60%), var(--panel)' : undefined, borderColor: tone === 'accent' ? 'rgba(0,224,198,0.25)' : undefined }}>
        <span className="ticks"><i /><b /></span>
        <div className="row" style={{ justifyContent: 'space-between', marginBottom: 12 }}>
          <span className="row" style={{ gap: 8 }}>{icon && <span style={{ color: tone === 'accent' ? 'var(--accent)' : 'var(--ink-mute)' }}>{icon}</span>}<span className="bracket">{id}</span></span>
          <span className="caption" style={{ color: tone === 'accent' ? 'var(--accent)' : undefined }}>{badge}</span>
        </div>
        {children}
      </div>
    </Reveal>
  );
}

function ModuleRow({ label, status, tone }) {
  const color = tone === 'red' ? 'var(--red)' : tone === 'amber' ? 'var(--amber)' : 'var(--accent)';
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 10px', border: '1px solid var(--line)', fontSize: 11, minWidth: 0 }}>
      <span className="mute" style={{ fontSize: 11, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>{label}</span>
      <span style={{ color, letterSpacing: '0.06em', marginLeft: 8 }}>● {status}</span>
    </div>
  );
}

function CloudPill({ label, pct }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div className="row" style={{ justifyContent: 'space-between', fontSize: 11 }}><span className="dim">{label}</span><span className="tnum accent">{pct}%</span></div>
      <div style={{ height: 4, background: 'var(--bg-lift)', border: '1px solid var(--line)' }}><div style={{ height: '100%', width: `${pct}%`, background: 'var(--accent)', boxShadow: '0 0 12px var(--accent-shadow)' }} /></div>
    </div>
  );
}

function AttackGraph() {
  return (
    <svg viewBox="0 0 480 180" style={{ width: '100%', height: 150, marginTop: 16, display: 'block' }}>
      <defs><marker id="arrow" markerWidth="6" markerHeight="6" refX="6" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 z" fill="var(--accent)" /></marker></defs>
      {[['M40,90 L130,40'], ['M40,90 L130,140'], ['M130,40 L240,60'], ['M130,140 L240,120'], ['M240,60 L350,90'], ['M240,120 L350,90'], ['M350,90 L440,90']].map(([d], i) => (
        <path key={i} d={d} stroke="var(--accent)" strokeWidth="1" strokeDasharray="3 4" fill="none" opacity="0.55" markerEnd="url(#arrow)"><animate attributeName="stroke-dashoffset" from="0" to="-14" dur="1.4s" repeatCount="indefinite" /></path>
      ))}
      {[[40, 90, 'ENTRY', 'var(--ink)'], [130, 40, '/login', 'var(--ink-mute)'], [130, 140, '/api/v1', 'var(--ink-mute)'], [240, 60, 'IDOR', 'var(--accent)'], [240, 120, 'S3', 'var(--accent)'], [350, 90, 'PRIV-ESC', 'var(--amber)'], [440, 90, 'ROOT', 'var(--red)']].map(([x, y, label, color], i) => (
        <g key={i}><rect x={x - 18} y={y - 10} width="36" height="20" fill="var(--bg-deep)" stroke={color} strokeWidth="1" /><text x={x} y={y + 3} textAnchor="middle" fontSize="8" fontFamily="JetBrains Mono" fill={color} letterSpacing="0.06em">{label}</text></g>
      ))}
      <text x="40" y="120" textAnchor="middle" fontSize="8" fill="var(--ink-faint)" letterSpacing="0.12em">PUBLIC</text>
      <text x="440" y="120" textAnchor="middle" fontSize="8" fill="var(--red)" letterSpacing="0.12em">CROWN-JEWEL</text>
    </svg>
  );
}

function Method() {
  const steps = [
    { n: '01', code: 'RECON', title: 'Surface mapping', body: 'OSINT, subdomain expansion, port and service fingerprinting, asset classification.', meta: 'avg 47s · 100% non-intrusive' },
    { n: '02', code: 'MODEL', title: 'Threat hypotheses', body: 'Three independent agents propose attack paths. They argue. The most defensible win.', meta: 'Σ 6.2 hypotheses · 1.4 retained' },
    { n: '03', code: 'EXPLOIT', title: 'Validated proof', body: 'PoCs executed in an isolated replica of your environment. No production blast-radius.', meta: 'sandbox-isolated · revertable' },
    { n: '04', code: 'BRIEF', title: 'Auditor-ready report', body: 'Findings, paths, remediations, ticket-drafts. Signed manifest. Reproducible.', meta: 'exec · technical · compliance' },
  ];
  return (
    <section id="method" className="section" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="page">
        <SectionHeader number="03" eyebrow="Method" title={<>The engagement,<br />step by step.</>} sub="A Cyrion engagement is structured like a human red-team — recon, hypothesize, exploit, debrief — but the loop runs in minutes and never sleeps." />
        <div style={{ marginTop: 64 }}>{steps.map((s, i) => <MethodRow key={s.n} idx={i} step={s} last={i === steps.length - 1} />)}</div>
      </div>
    </section>
  );
}

function MethodRow({ step, idx, last }) {
  return (
    <Reveal delay={idx * 90}>
      <div className="method-row" style={{ padding: '32px 0', borderBottom: last ? 'none' : '1px dashed var(--line)' }}>
        <div><div className="tnum" style={{ fontSize: 48, color: 'var(--ink-faint)', lineHeight: 1, letterSpacing: '-0.04em' }}>{step.n}</div><div className="caption" style={{ marginTop: 8, color: 'var(--accent)' }}>{step.code}</div></div>
        <div><div className="h2" style={{ marginTop: 0 }}>{step.title}</div></div>
        <div><p className="body" style={{ margin: 0, maxWidth: 460 }}>{step.body}</p><p className="caption" style={{ marginTop: 14 }}>{step.meta}</p></div>
        <div className="card-flat" style={{ padding: 14, position: 'relative' }}><span className="ticks"><i /><b /></span><MethodMiniViz idx={idx} /></div>
      </div>
    </Reveal>
  );
}

function MethodMiniViz({ idx }) {
  if (idx === 0) return <ReconScan />;
  if (idx === 1) return <HypothesesViz />;
  if (idx === 2) return <ExploitWindow />;
  return <ReportViz />;
}

function ReconScan() {
  return (
    <svg viewBox="0 0 180 100" style={{ width: '100%', height: 100 }}>
      {[20, 50, 80, 110, 140].map((x, i) => (
        <g key={i}><line x1={x} y1="20" x2={x} y2="80" stroke="var(--line)" strokeWidth="1" /><circle cx={x} cy={20 + i * 12} r="2.5" fill="var(--accent)"><animate attributeName="cy" values={`${20 + i * 5};${80 - i * 5};${20 + i * 5}`} dur="3s" repeatCount="indefinite" /></circle></g>
      ))}
      <text x="90" y="96" textAnchor="middle" fontSize="8" fill="var(--ink-faint)" letterSpacing="0.1em">SUBDOMAIN · 142</text>
    </svg>
  );
}
function HypothesesViz() {
  return (
    <svg viewBox="0 0 180 100" style={{ width: '100%', height: 100 }}>
      {[['α', 30, 30], ['β', 30, 70], ['γ', 90, 50], ['δ', 150, 30], ['ε', 150, 70]].map(([l, x, y], i) => (
        <g key={i}><circle cx={x} cy={y} r="11" fill="var(--bg-deep)" stroke={i === 2 ? 'var(--accent)' : 'var(--line-2)'} /><text x={x} y={y + 3} textAnchor="middle" fontSize="9" fill={i === 2 ? 'var(--accent)' : 'var(--ink-mute)'}>{l}</text></g>
      ))}
      <line x1="41" y1="30" x2="79" y2="50" stroke="var(--line)" /><line x1="41" y1="70" x2="79" y2="50" stroke="var(--line)" />
      <line x1="101" y1="50" x2="139" y2="30" stroke="var(--accent)" /><line x1="101" y1="50" x2="139" y2="70" stroke="var(--line)" />
      <text x="90" y="96" textAnchor="middle" fontSize="8" fill="var(--ink-faint)" letterSpacing="0.1em">γ · CONFIDENCE 0.94</text>
    </svg>
  );
}
function ExploitWindow() {
  return (
    <div style={{ fontSize: 10, color: 'var(--ink-mute)', lineHeight: 1.6 }}>
      <div style={{ color: 'var(--accent)' }}>$ poc.run --idor</div><div>» replica.boot ok</div><div>» payload sent · 8.2ms</div>
      <div style={{ color: 'var(--red)' }}>! root@target obtained</div><div style={{ color: 'var(--green)' }}>✓ rollback successful</div>
    </div>
  );
}
function ReportViz() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <div style={{ height: 8, background: 'var(--line)', width: '85%' }} /><div style={{ height: 4, background: 'var(--ink-faint)', width: '70%' }} />
      <div style={{ height: 4, background: 'var(--ink-faint)', width: '50%' }} /><div style={{ height: 4, background: 'var(--accent)', width: '60%' }} />
      <div style={{ height: 4, background: 'var(--ink-faint)', width: '75%' }} /><div style={{ height: 4, background: 'var(--ink-faint)', width: '40%' }} />
      <div className="caption" style={{ marginTop: 6, color: 'var(--accent)' }}>47 findings · signed</div>
    </div>
  );
}

Object.assign(window, { Platform, Method });
