/* Features F1–F3, What-we-detect D1–D2, How-it-works W1–W3 */

/* ───────── F1 · Feature grid — icon cards, 2×3 ───────── */
const F1 = () => {
  const items = [
    [I.layers, 'Attack surface inventory', 'Subdomains, live hosts, open ports, services, and endpoints — discovered automatically and kept in one searchable inventory.'],
    [I.target, 'Real exploit modules', '30+ active checks: XSS, SQLi, SSRF, IDOR, auth bypass, takeover, secrets, and CVE matching against live service versions.'],
    [I.file, 'Evidence-first findings', 'Every result ships with the request, response, and reproduction step — not a generic "possible" flag you have to chase.'],
    [I.gauge, 'Risk-ranked, not noise', 'CVSS + EPSS + exploitability fold into one priority so the 10.0 on your edge sorts above 300 informational TLS notes.'],
    [I.activity, 'Continuous monitoring', 'Re-scan on a schedule. Get diffed alerts the moment a new port opens, a cert expires, or a fresh CVE hits your stack.'],
    [I.file, 'One-click reporting', 'Export client-ready PDF or push to Jira, Slack, and webhooks. Same evidence, three audiences, zero re-formatting.'],
  ];
  return (
    <div style={{ padding: '52px 36px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32 }}>
        <div>
          <Eyebrow>Platform</Eyebrow>
          <h2 style={{ fontSize: 34, fontWeight: 700, color: L.text, margin: 0, letterSpacing: '-0.02em' }}>Everything from discovery to proof</h2>
        </div>
        <p style={{ fontSize: 15, color: L.textDim, maxWidth: 360, margin: 0, lineHeight: 1.6 }}>One workflow — scan, inspect, compare, export — without the interface turning into a lab bench.</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14 }}>
        {items.map(([icon, title, body]) => (
          <div key={title} style={{ padding: 24, borderRadius: 12, border: `1px solid ${L.border}`, background: L.surface }}>
            <div style={{ width: 42, height: 42, borderRadius: 10, background: L.accentDim, border: `1px solid ${L.borderAmber}`, display: 'grid', placeItems: 'center', color: L.accent, marginBottom: 16 }}>{icon}</div>
            <h3 style={{ fontSize: 16.5, fontWeight: 700, color: L.text, margin: '0 0 8px' }}>{title}</h3>
            <p style={{ fontSize: 13.5, color: L.textDim, lineHeight: 1.6, margin: 0 }}>{body}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ───────── F2 · Alternating feature rows with mock visual ───────── */
const FeatureRow = ({ flip, eyebrow, title, body, bullets, visual }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center', padding: '44px 0', borderBottom: `1px solid ${L.border}` }}>
    <div style={{ order: flip ? 2 : 1 }}>
      <Eyebrow>{eyebrow}</Eyebrow>
      <h3 style={{ fontSize: 28, fontWeight: 700, color: L.text, margin: '0 0 12px', letterSpacing: '-0.02em' }}>{title}</h3>
      <p style={{ fontSize: 15, color: L.textDim, lineHeight: 1.6, margin: '0 0 18px' }}>{body}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {bullets.map(b => (
          <div key={b} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13.5, color: L.textDim }}>
            <span style={{ color: L.accent, display: 'flex' }}>{I.check}</span>{b}
          </div>
        ))}
      </div>
    </div>
    <div style={{ order: flip ? 1 : 2 }}>{visual}</div>
  </div>
);

const F2 = () => (
  <div style={{ padding: '40px 36px' }}>
    <FeatureRow eyebrow="Discovery" title="See assets you forgot you owned"
      body="Passive + active enumeration finds the staging boxes, vendor subdomains, and shadow infrastructure that never made it into your CMDB."
      bullets={['Certificate transparency + DNS brute force', 'Live host & port fingerprinting', 'Tech stack and service version detection']}
      visual={<DashGlimpse />} />
    <FeatureRow flip eyebrow="Validation" title="Findings you can actually reproduce"
      body="Each result is tied to the exact request and response that proved it — so your team fixes the bug instead of arguing whether it's real."
      bullets={['Full HTTP evidence per finding', 'CVSS 3.1 + EPSS exploit scoring', 'One-click re-test after a fix']}
      visual={
        <div style={{ background: '#05080D', border: `1px solid ${L.border}`, borderRadius: 10, overflow: 'hidden' }}>
          <div style={{ padding: '9px 14px', borderBottom: `1px solid ${L.border}`, background: L.surface, fontSize: 10.5, fontFamily: L.mono, color: L.textMute }}>EVIDENCE · CVE-2024-3094</div>
          <pre style={{ margin: 0, padding: 16, fontFamily: L.mono, fontSize: 11.5, lineHeight: 1.7, color: L.textDim, whiteSpace: 'pre-wrap' }}>{`$ apt-cache policy liblzma5
  Installed: 5.6.1-1
`}<span style={{ color: L.crit }}>✗ MATCH — in known-bad range</span>{`
$ readelf -s sshd | grep RSA_
`}<span style={{ color: L.crit }}>✗ IFUNC hook present</span></pre>
        </div>
      } />
  </div>
);

/* ───────── F3 · Bento grid ───────── */
const F3 = () => (
  <div style={{ padding: '52px 36px' }}>
    <Eyebrow>Why ThirdEyeScan</Eyebrow>
    <h2 style={{ fontSize: 34, fontWeight: 700, color: L.text, margin: '0 0 28px', letterSpacing: '-0.02em', maxWidth: 600 }}>Signal density other scanners can't match</h2>
    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gridTemplateRows: 'auto auto', gap: 14 }}>
      <div style={{ gridRow: 'span 2', padding: 26, borderRadius: 14, border: `1px solid ${L.borderAmber}`, background: `linear-gradient(160deg, ${L.accentDim}, ${L.surface})`, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div style={{ color: L.accent }}>{I.gauge}</div>
        <div>
          <div style={{ fontSize: 44, fontFamily: L.mono, fontWeight: 700, color: L.text, letterSpacing: '-0.02em' }}>94%</div>
          <h3 style={{ fontSize: 18, fontWeight: 700, color: L.text, margin: '8px 0 6px' }}>Less noise to triage</h3>
          <p style={{ fontSize: 13.5, color: L.textDim, lineHeight: 1.55, margin: 0 }}>Exploitability scoring collapses thousands of raw flags into the handful that actually matter this week.</p>
        </div>
      </div>
      {[
        [I.bolt, 'Active exploitation', '30+ modules safely confirm findings instead of guessing from a banner.'],
        [I.clock, 'Minutes, not days', 'A full scan across 1,200 assets finishes in ~14 minutes.'],
        [I.network, 'Surface diffing', 'Every re-scan diffs against the last so new exposure surfaces instantly.'],
        [I.file, 'Audit-ready output', 'Export evidence packs your auditors and clients accept as-is.'],
      ].map(([icon, title, body]) => (
        <div key={title} style={{ padding: 22, borderRadius: 14, border: `1px solid ${L.border}`, background: L.surface }}>
          <div style={{ color: L.accent, marginBottom: 12 }}>{icon}</div>
          <h3 style={{ fontSize: 15.5, fontWeight: 700, color: L.text, margin: '0 0 6px' }}>{title}</h3>
          <p style={{ fontSize: 12.5, color: L.textDim, lineHeight: 1.55, margin: 0 }}>{body}</p>
        </div>
      ))}
    </div>
  </div>
);

/* ───────── D1 · What we detect — module matrix ───────── */
const D1 = () => {
  const mods = [
    [I.globe, 'Subdomain enumeration', 'CT logs + DNS'],
    [I.server, 'Live host discovery', 'ICMP / TCP'],
    [I.target, 'Port & service scan', 'top 1000 + full'],
    [I.eye, 'Service fingerprint', 'version detection'],
    [I.lock, 'Exposed panels', 'admin / login'],
    [I.bug, 'CVE matching', 'NVD + EPSS'],
    [I.shield, 'Security misconfig', 'headers / CORS'],
    [I.file, 'Sensitive files', '.git / .env / bak'],
    [I.network, 'Subdomain takeover', 'dangling CNAME'],
    [I.bolt, 'XSS · SQLi · SSRF', 'web exploit set'],
    [I.lock, 'Auth bypass', 'default creds'],
    [I.shieldCheck, 'TLS / SSL review', 'cipher + expiry'],
  ];
  return (
    <div style={{ padding: '52px 36px' }}>
      <div style={{ textAlign: 'center', marginBottom: 32 }}>
        <Eyebrow dot={false}>What we detect</Eyebrow>
        <h2 style={{ fontSize: 34, fontWeight: 700, color: L.text, margin: '0 auto 12px', letterSpacing: '-0.02em', maxWidth: 600 }}>30+ modules across the whole kill chain</h2>
        <p style={{ fontSize: 15, color: L.textDim, maxWidth: 520, margin: '0 auto', lineHeight: 1.6 }}>From the first DNS lookup to a confirmed RCE — every stage runs in one pipeline.</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12 }}>
        {mods.map(([icon, name, sub]) => (
          <div key={name} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', borderRadius: 10, border: `1px solid ${L.border}`, background: L.surface }}>
            <span style={{ color: L.accent, display: 'flex', flexShrink: 0 }}>{icon}</span>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: L.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</div>
              <div style={{ fontSize: 11, fontFamily: L.mono, color: L.textMute, marginTop: 2 }}>{sub}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ textAlign: 'center', marginTop: 24 }}>
        <Chip accent>+ 18 more attack modules in the Recon engine</Chip>
      </div>
    </div>
  );
};

/* ───────── D2 · Severity-led detection callout ───────── */
const D2 = () => (
  <div style={{ padding: '48px 36px' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 44, alignItems: 'center' }}>
      <div>
        <Eyebrow>Ranked by real risk</Eyebrow>
        <h2 style={{ fontSize: 32, fontWeight: 700, color: L.text, margin: '0 0 14px', letterSpacing: '-0.02em' }}>Not all findings are emergencies</h2>
        <p style={{ fontSize: 15, color: L.textDim, lineHeight: 1.6, margin: 0 }}>ThirdEyeScan folds CVSS base score, EPSS exploit probability, and asset exposure into a single priority — so your one critical never drowns under 300 low-severity TLS notes.</p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {[['CRITICAL','12','P1 — exploit available, public asset',L.crit,'94% EPSS'],
          ['HIGH','47','P2 — high impact, needs validation',L.high,'61% EPSS'],
          ['MEDIUM','184','P3 — hardening & config',L.med,'12% EPSS'],
          ['LOW','312','P4 — informational',L.low,'—']].map(([sev,n,desc,c,epss])=>(
          <div key={sev} style={{ display: 'grid', gridTemplateColumns: 'auto auto 1fr auto', gap: 14, alignItems: 'center', padding: '14px 16px', borderRadius: 10, border: `1px solid ${L.border}`, background: L.surface, position: 'relative' }}>
            <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: c, borderRadius: '3px 0 0 3px' }} />
            <span style={{ fontSize: 22, fontFamily: L.mono, fontWeight: 700, color: c, minWidth: 44 }}>{n}</span>
            <span style={{ fontSize: 10, fontFamily: L.mono, fontWeight: 700, color: c, background: `${c}1f`, padding: '3px 7px', borderRadius: 3, border: `1px solid ${c}33` }}>{sev}</span>
            <span style={{ fontSize: 12.5, color: L.textDim }}>{desc}</span>
            <span style={{ fontSize: 11, fontFamily: L.mono, color: L.textMute }}>{epss}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

/* ───────── W1 · How it works — 3 numbered steps ───────── */
const W1 = () => {
  const steps = [
    ['01', 'Add a target', 'Point ThirdEyeScan at a domain or IP range. No agents, no DNS changes, no install — scanning starts in seconds.', I.plus],
    ['02', 'Run the pipeline', 'The pipeline enumerates the surface, fingerprints services, and runs every detection module — live, with a streaming event log.', I.scan],
    ['03', 'Triage & report', 'Review ranked findings with full evidence, mark status, and export a client-ready report or push to your tools.', I.file],
  ];
  return (
    <div style={{ padding: '52px 36px' }}>
      <div style={{ textAlign: 'center', marginBottom: 36 }}>
        <Eyebrow dot={false}>How it works</Eyebrow>
        <h2 style={{ fontSize: 34, fontWeight: 700, color: L.text, margin: 0, letterSpacing: '-0.02em' }}>From domain to evidence in three steps</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16, position: 'relative' }}>
        {steps.map(([num, title, body, icon], i) => (
          <div key={num} style={{ padding: 26, borderRadius: 14, border: `1px solid ${L.border}`, background: L.surface, position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
              <span style={{ fontSize: 40, fontFamily: L.mono, fontWeight: 700, color: L.accentDim, lineHeight: 1, WebkitTextStroke: `1px ${L.accent}` }}>{num}</span>
              <span style={{ color: L.accent }}>{icon}</span>
            </div>
            <h3 style={{ fontSize: 18, fontWeight: 700, color: L.text, margin: '0 0 8px' }}>{title}</h3>
            <p style={{ fontSize: 13.5, color: L.textDim, lineHeight: 1.6, margin: 0 }}>{body}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ───────── W2 · Horizontal timeline ───────── */
const W2 = () => {
  const steps = [
    ['Discover', 'Surface mapping', L.low],
    ['Fingerprint', 'Service & version ID', L.med],
    ['Exploit', 'Active module run', L.high],
    ['Confirm', 'Evidence capture', L.crit],
    ['Report', 'Rank & export', L.ok],
  ];
  return (
    <div style={{ padding: '52px 36px' }}>
      <Eyebrow>The scan pipeline</Eyebrow>
      <h2 style={{ fontSize: 32, fontWeight: 700, color: L.text, margin: '0 0 36px', letterSpacing: '-0.02em', maxWidth: 560 }}>Every scan walks the same disciplined path</h2>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 0 }}>
        {steps.map(([title, sub, c], i) => (
          <div key={title} style={{ flex: 1, position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div style={{ width: 14, height: 14, borderRadius: 100, background: c, boxShadow: `0 0 0 4px ${c}22`, flexShrink: 0 }} />
              {i < steps.length - 1 && <div style={{ flex: 1, height: 2, background: `linear-gradient(90deg, ${c}, ${steps[i+1][2]})` }} />}
            </div>
            <div style={{ paddingTop: 18, paddingRight: 20 }}>
              <div style={{ fontSize: 10.5, fontFamily: L.mono, color: L.textMute, fontWeight: 700, letterSpacing: '0.1em' }}>{`STAGE ${i+1}`}</div>
              <div style={{ fontSize: 16, fontWeight: 700, color: L.text, margin: '6px 0 4px' }}>{title}</div>
              <div style={{ fontSize: 12.5, color: L.textDim }}>{sub}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ───────── W3 · Split — copy + code terminal ───────── */
const W3 = () => (
  <div style={{ padding: '48px 36px', display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 44, alignItems: 'center' }}>
    <div>
      <Eyebrow>Built for operators</Eyebrow>
      <h2 style={{ fontSize: 30, fontWeight: 700, color: L.text, margin: '0 0 14px', letterSpacing: '-0.02em' }}>CLI or dashboard — same engine</h2>
      <p style={{ fontSize: 15, color: L.textDim, lineHeight: 1.6, margin: '0 0 20px' }}>Kick off scans from the terminal, wire them into CI, or drive everything from the dashboard. Results land in the same place, ranked the same way.</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {['Scriptable scans for CI/CD gates', 'Webhook + Slack + Jira delivery', 'Scheduled re-scans with diff alerts'].map(b => (
          <div key={b} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13.5, color: L.textDim }}><span style={{ color: L.accent, display: 'flex' }}>{I.check}</span>{b}</div>
        ))}
      </div>
    </div>
    <div style={{ background: '#05080D', border: `1px solid ${L.border}`, borderRadius: 10, overflow: 'hidden' }}>
      <div style={{ display: 'flex', gap: 7, padding: '10px 14px', borderBottom: `1px solid ${L.border}`, background: L.surface }}>
        <span style={{ width: 9, height: 9, borderRadius: 5, background: '#FF5F57' }} />
        <span style={{ width: 9, height: 9, borderRadius: 5, background: '#FEBC2E' }} />
        <span style={{ width: 9, height: 9, borderRadius: 5, background: '#28C840' }} />
      </div>
      <pre style={{ margin: 0, padding: '16px', fontFamily: L.mono, fontSize: 12, lineHeight: 1.85, color: L.textDim, whiteSpace: 'pre-wrap' }}>
<span style={{ color: L.accent }}>$</span> scan target.com --json{'\n'}
<span style={{ color: L.textMute }}>[14:08:02]</span> <span style={{ color: L.ok }}>recon</span>     73 hosts · 65 ports{'\n'}
<span style={{ color: L.textMute }}>[14:11:18]</span> <span style={{ color: L.high }}>panels</span>    default creds → jenkins{'\n'}
<span style={{ color: L.textMute }}>[14:21:54]</span> <span style={{ color: L.crit }}>cve</span>       CVE-2024-3094 · 4 hosts{'\n'}
<span style={{ color: L.textMute }}>[14:22:08]</span> <span style={{ color: L.ok }}>done</span>      644 findings · report 7f4a{'\n'}
<span style={{ color: L.accent }}>→</span> exported results.json
      </pre>
    </div>
  </div>
);

Object.assign(window, { F1, F2, F3, D1, D2, W1, W2, W3 });
