// Platform page — primitives, investigation pipeline, containment, integrations, no-agent arch.

const PRIMITIVES = [
  {
    code: 'aws.cred',
    name: 'AWS Credential',
    where: 'CI/CD env files · ~/.aws/credentials · S3 buckets · K8s secrets',
    detects: 'Credential theft via supply-chain compromise or insider access.',
    example: 'AKIA-prefixed key is exercised against sts:GetCallerIdentity from a new ASN.',
  },
  {
    code: 'url.beacon',
    name: 'URL Beacon',
    where: 'Internal wikis · Notion pages · pinned Slack messages · admin docs',
    detects: 'Lateral movement, exfiltration via collaboration tools, phishing landing.',
    example: 'A wiki link disguised as a runbook is fetched from a residential IP.',
  },
  {
    code: 'dns.hook',
    name: 'DNS Hook',
    where: 'Hosts files · staging configs · DNS zone files · ENV.STAGING_HOST',
    detects: 'Recon, config dumps, leaked .env files reaching attacker infra.',
    example: 'A fake staging hostname is resolved from a country you do not operate in.',
  },
  {
    code: 'doc.tracker',
    name: 'Document Tracker',
    where: 'Shared drives · M&A folders · board decks · HR PDFs',
    detects: 'Document exfiltration and unauthorized review by external parties.',
    example: 'A canary PDF named "Q4-board.pdf" opens from a new device fingerprint.',
  },
  {
    code: 'db.cred',
    name: 'Database Credential',
    where: 'Backup scripts · ORM configs · Terraform state · legacy services',
    detects: 'Database access via leaked DSNs or compromised backup archives.',
    example: 'A Postgres DSN authenticates from outside your VPC peering range.',
  },
  {
    code: 'ai.key',
    name: 'AI API Key',
    where: 'LLM gateway configs · agent prompts · CI secrets · prototype repos',
    detects: 'AI agents and operators harvesting model credits or routing chains.',
    example: 'An OpenAI-prefixed token is used to enumerate /v1/models from a new origin.',
  },
  {
    code: 'rag.canary',
    name: 'RAG Canary Document',
    where: 'Vector databases · LLM knowledge bases · internal AI assistants · Notion/Confluence pages indexed by AI',
    detects: 'AI agents and LLMs exfiltrating internal documents via RAG pipelines.',
    example: 'A canary document chunk is retrieved from the vector store by an unauthorized agent query.',
  },
  {
    code: 'cicd.canary',
    name: 'CI/CD Pipeline Canary',
    where: 'GitHub Actions workflow files · .env.example · CI/CD secrets · runner environments',
    detects: 'Supply chain compromise, cache poisoning attacks, compromised CI/CD runners harvesting credentials.',
    example: 'A fake AWS key planted in a workflow env var is exercised from a GitHub Actions runner IP.',
  },
  {
    code: 'npm.canary',
    name: 'npm Package Canary',
    where: 'Published as a decoy package under your org namespace or a plausible typosquat name',
    detects: 'Dependency confusion attacks, typosquatting, malicious package installation attempts.',
    example: 'A postinstall webhook fires from an IP that has never touched your legitimate packages.',
  },
];

const PIPELINE = [
  { t: 'T+0ms',  label: 'Token triggered',           detail: 'Any of 9 primitives reports a touch event.' },
  { t: 'T+3s',   label: 'IP enrichment',             detail: 'VirusTotal · AbuseIPDB · Shodan · GeoIP · ASN.' },
  { t: 'T+5s',   label: 'Risk score calculated',     detail: 'Deterministic 0–100. Same inputs always produce the same score.' },
  { t: 'T+8s',   label: 'MITRE ATT&CK mapped',       detail: 'Tactics + techniques attached, ready for SIEM.' },
  { t: 'T+15s',  label: 'Actor classified',          detail: 'human-novice · human-expert · script · autonomous agent.' },
  { t: 'T+30s',  label: 'Containment executed',      detail: 'If score crosses your configured threshold, IAM revoke + IP block.' },
  { t: 'T+60s',  label: 'NIS2 dossier generated',    detail: 'Full incident PDF — ready for Article 23 notification.' },
];

const CONTAINMENT = [
  { tag: 'iam.revoke',   note: 'Revoke compromised AWS IAM key' },
  { tag: 'cf.block',     note: 'Block attacker IP at Cloudflare edge' },
  { tag: 'siem.ingest',  note: 'Forward event into Splunk / Elastic' },
  { tag: 'nis2.pdf',     note: 'Generate Article 23 incident PDF' },
  { tag: 'slack.page',   note: 'Page on-call via Slack channel' },
  { tag: 'npm.revoke',   note: 'Revoke compromised npm publish token via registry API' },
  { tag: 'webhook.post', note: 'POST event to your own endpoint' },
];

const INTEGRATIONS = [
  'AWS', 'Cloudflare', 'Splunk', 'Elastic', 'PagerDuty', 'Slack', 'GitHub', 'npm', 'Webhook',
];

function PrimitiveCard({ p, i }) {
  return (
    <div className="card" style={{padding:'28px 26px', display:'flex', flexDirection:'column', gap:14, minHeight: 280}}>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <span className="mono" style={{fontSize:11, color:'var(--aurora-2)', letterSpacing:'.12em'}}>
          [{String(i+1).padStart(2,'0')}]  {p.code}
        </span>
        <span className="mono" style={{fontSize:10, color:'var(--txt-4)', letterSpacing:'.2em'}}>PRIMITIVE</span>
      </div>
      <div className="display" style={{fontSize:28, lineHeight:1.05, color:'#fff', fontWeight:600, letterSpacing:'-.02em'}}>
        {p.name}
      </div>

      <div>
        <div className="mono" style={{fontSize:10, color:'var(--txt-4)', letterSpacing:'.2em', textTransform:'uppercase', marginBottom:6}}>Where to plant</div>
        <div style={{fontSize:13, lineHeight:1.5, color:'var(--txt-2)'}}>{p.where}</div>
      </div>
      <div>
        <div className="mono" style={{fontSize:10, color:'var(--txt-4)', letterSpacing:'.2em', textTransform:'uppercase', marginBottom:6}}>What it detects</div>
        <div style={{fontSize:13, lineHeight:1.5, color:'var(--txt-2)'}}>{p.detects}</div>
      </div>
      <div style={{borderTop:'1px solid var(--ink-line)', paddingTop:14, marginTop:'auto'}}>
        <div className="mono" style={{fontSize:10, color:'var(--txt-4)', letterSpacing:'.2em', textTransform:'uppercase', marginBottom:6}}>Example trigger</div>
        <div className="mono" style={{fontSize:12, lineHeight:1.55, color:'var(--signal-warn)'}}>↳ {p.example}</div>
      </div>
    </div>
  );
}

function PipelineRow({ step, i, last }) {
  return (
    <div className="pipe-row" style={{display:'grid', gridTemplateColumns:'120px 32px minmax(0,1fr)', gap:24, alignItems:'flex-start', padding:'22px 0'}}>
      <div className="mono" style={{fontSize:14, color:'var(--aurora-2)', letterSpacing:'.04em', paddingTop:4}}>
        {step.t}
      </div>
      <div style={{position:'relative', alignSelf:'stretch', display:'flex', justifyContent:'center', paddingTop:8}}>
        <div style={{width:11, height:11, borderRadius:'50%', background:'var(--aurora-2)', boxShadow:'0 0 18px var(--aurora-glow)'}}/>
        {!last && <div style={{position:'absolute', top:22, bottom:-22, width:1, background:'var(--ink-line)'}}/>}
      </div>
      <div>
        <div className="display" style={{fontSize:'clamp(22px, 2.2vw, 30px)', color:'#fff', fontWeight:600, letterSpacing:'-.02em', lineHeight:1.15}}>
          {step.label}
        </div>
        <div style={{fontSize:15, lineHeight:1.55, color:'var(--txt-2)', marginTop:6, maxWidth:560}}>
          {step.detail}
        </div>
      </div>
    </div>
  );
}

function PlatformPage() {
  return (
    <>
      <Nav current="How it works"/>

      <PageHero
        eyebrow="HOW IT WORKS · THE PLATFORM"
        title={<>Every surface covered.<br/>Every actor classified.</>}
        subtitle="Nine honeytoken primitives. One AI investigation pipeline. Deterministic containment — under 60 seconds, every time."
      />

      {/* SECTION 1 — Primitives */}
      <section data-screen-label="02 Primitives" className="bg-ink" style={{padding:'120px 0 140px', position:'relative', borderTop:'1px solid var(--ink-line)'}}>
        <div className="grid-dots" style={{position:'absolute', inset:0, opacity:.3, pointerEvents:'none'}}/>
        <div className="wrap" style={{position:'relative'}}>
          <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap:48, marginBottom:56, flexWrap:'wrap'}}>
            <div>
              <div className="eyebrow" style={{marginBottom:18}}><span className="dot"/> FILE № 01 · PRIMITIVES</div>
              <h2 className="display" style={{fontSize:'clamp(40px, 5.2vw, 80px)', margin:0, color:'#fff', letterSpacing:'-.03em', fontWeight:700, lineHeight:1}}>
                Nine primitives.<br/>One alert language.
              </h2>
            </div>
            <p style={{fontSize:15, lineHeight:1.55, color:'var(--txt-2)', maxWidth:380}}>
              Each primitive is engineered to be indistinguishable from a real production secret.
              No employee should ever touch one. The moment something does — you know.
            </p>
          </div>

          <div className="primitives-grid" style={{display:'grid', gridTemplateColumns:'repeat(3, minmax(0,1fr))', gap:18}}>
            {PRIMITIVES.map((p, i) => <PrimitiveCard key={p.code} p={p} i={i}/>)}
          </div>

          {/* Strategic strapline — the credentials-not-traffic argument */}
          <div style={{
            marginTop: 56, padding: '34px 40px',
            border: '1px solid var(--ink-line)', borderLeft: '2px solid var(--aurora-2)',
            borderRadius: 14, background: 'rgba(74,109,245,.04)',
            display: 'flex', flexDirection: 'column', gap: 10,
          }}>
            <div className="mono" style={{fontSize:10, letterSpacing:'.22em', color:'var(--aurora-2)', textTransform:'uppercase'}}>
              // WHY IT WORKS
            </div>
            <p className="display" style={{margin:0, fontSize:'clamp(22px, 2.6vw, 32px)', lineHeight:1.25, color:'#fff', fontWeight:600, letterSpacing:'-.015em', maxWidth: 920}}>
              Works even when attackers exfiltrate via encrypted channels — we don't watch your traffic, we watch your credentials.
            </p>
          </div>
        </div>
      </section>

      {/* SECTION 2 — Pipeline */}
      <section data-screen-label="03 Pipeline" className="bg-ink-2" style={{padding:'140px 0 140px', borderTop:'1px solid var(--ink-line)', position:'relative'}}>
        <div className="wrap">
          <div style={{display:'grid', gridTemplateColumns:'minmax(0,.85fr) minmax(0,1.15fr)', gap:72, alignItems:'flex-start'}} className="pipe-grid">
            <div className="pipe-stick" style={{position:'sticky', top:120}}>
              <div className="eyebrow" style={{marginBottom:18}}><span className="dot"/> FILE № 02 · PIPELINE</div>
              <h2 className="display" style={{fontSize:'clamp(40px, 5.2vw, 80px)', margin:0, color:'#fff', letterSpacing:'-.03em', fontWeight:700, lineHeight:1}}>
                The investigation<br/>pipeline.
              </h2>
              <p style={{fontSize:15, lineHeight:1.55, color:'var(--txt-2)', marginTop:22, maxWidth:380}}>
                Every trip runs through the same deterministic chain. No black boxes,
                no opaque ML scores. You can replay any incident step-by-step.
              </p>
            </div>
            <div>
              {PIPELINE.map((s, i) => (
                <PipelineRow key={i} step={s} i={i} last={i === PIPELINE.length-1}/>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 3 — Containment */}
      <section data-screen-label="04 Containment" className="bg-ink" style={{padding:'140px 0 140px', borderTop:'1px solid var(--ink-line)', position:'relative'}}>
        <div className="grid-fine" style={{position:'absolute', inset:0, opacity:.25, pointerEvents:'none'}}/>
        <div className="wrap" style={{position:'relative'}}>
          <div className="eyebrow" style={{marginBottom:18}}><span className="dot"/> FILE № 03 · CONTAINMENT</div>
          <h2 className="display" style={{fontSize:'clamp(40px, 5.2vw, 80px)', margin:0, color:'#fff', letterSpacing:'-.03em', fontWeight:700, lineHeight:1, marginBottom:24}}>
            Actions, not<br/>recommendations.
          </h2>
          <p style={{fontSize:16, lineHeight:1.55, color:'var(--txt-2)', maxWidth:620, marginBottom:48}}>
            When risk crosses your threshold, Vantuz executes — it doesn't escalate, it doesn't wait.
            Every containment action is reversible and fully audited.
          </p>

          <div className="containment-grid" style={{display:'grid', gridTemplateColumns:'repeat(3, minmax(0,1fr))', gap:14}}>
            {CONTAINMENT.map(c => (
              <div key={c.tag} className="card-flat" style={{padding:'22px 22px', display:'flex', flexDirection:'column', gap:10}}>
                <div className="mono" style={{fontSize:13, color:'var(--aurora-2)', letterSpacing:'.04em'}}>
                  {c.tag}
                </div>
                <div style={{fontSize:14, color:'var(--txt-2)', lineHeight:1.5}}>{c.note}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SECTION 4 — Integrations */}
      <section data-screen-label="05 Integrations" className="bg-ink-2" style={{padding:'120px 0 130px', borderTop:'1px solid var(--ink-line)', position:'relative'}}>
        <div className="wrap">
          <div className="eyebrow" style={{marginBottom:18}}><span className="dot"/> FILE № 04 · INTEGRATIONS</div>
          <h2 className="display" style={{fontSize:'clamp(40px, 5.2vw, 80px)', margin:0, color:'#fff', letterSpacing:'-.03em', fontWeight:700, lineHeight:1, marginBottom:48}}>
            Plug into what<br/>you already run.
          </h2>

          <div style={{display:'grid', gridTemplateColumns:'repeat(9, minmax(0,1fr))', gap:14}} className="integrations-grid">
            {INTEGRATIONS.map(name => (
              <div key={name} style={{
                border:'1px solid var(--ink-line)', borderRadius:14, padding:'32px 18px',
                display:'flex', alignItems:'center', justifyContent:'center',
                background:'rgba(255,255,255,.02)',
                minHeight: 112, textAlign:'center',
              }}>
                <div className="display" style={{fontSize:18, color:'#fff', fontWeight:500, letterSpacing:'-.01em'}}>
                  {name}
                </div>
              </div>
            ))}
          </div>

          <div className="mono" style={{fontSize:12, color:'var(--txt-3)', letterSpacing:'.15em', textTransform:'uppercase', marginTop:24}}>
            + Generic webhook for everything else
          </div>
        </div>
      </section>

      {/* SECTION 5 — No-agent arch */}
      <section data-screen-label="06 No-agent" className="bg-ink" style={{padding:'140px 0 160px', borderTop:'1px solid var(--ink-line)', position:'relative'}}>
        <div className="grid-dots" style={{position:'absolute', inset:0, opacity:.3, pointerEvents:'none'}}/>
        <div className="wrap" style={{position:'relative'}}>
          <div style={{display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1.1fr)', gap:64, alignItems:'center'}} className="arch-grid">
            <div>
              <div className="eyebrow" style={{marginBottom:18}}><span className="dot"/> FILE № 05 · ARCHITECTURE</div>
              <h2 className="display" style={{fontSize:'clamp(40px, 5.2vw, 80px)', margin:0, color:'#fff', letterSpacing:'-.03em', fontWeight:700, lineHeight:1}}>
                No agent.<br/>No surface.
              </h2>
              <p style={{fontSize:16, lineHeight:1.6, color:'var(--txt-2)', marginTop:24, maxWidth:480}}>
                Vantuz lives outside your infrastructure. No daemon to install,
                no privileged access, no kernel module, no extra attack surface.
                You plant tokens. We watch the world for them.
              </p>
              <ul style={{margin:'24px 0 0', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:10}}>
                {[
                  'Zero software deployed on customer systems',
                  'Outbound-only triggers — no inbound connections',
                  'EU-only data plane · GDPR by design',
                  'Read-only integrations until you authorize a containment action',
                ].map((s, i) => (
                  <li key={i} style={{display:'flex', gap:10, fontSize:14.5, color:'var(--txt-2)'}}>
                    <span style={{color:'var(--signal-ok)', marginTop:7, width:6, height:6, borderRadius:'50%', background:'var(--signal-ok)', flex:'0 0 auto'}}/>
                    <span>{s}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Diagram */}
            <div className="card" style={{padding:32, position:'relative'}}>
              <div className="mono" style={{fontSize:10, color:'var(--txt-4)', letterSpacing:'.22em', textTransform:'uppercase', marginBottom:18}}>
                ARCH · v2026.05
              </div>
              <div className="arch-diagram" style={{display:'grid', gridTemplateColumns:'1fr 56px 1fr', gap:18, alignItems:'center'}}>
                <div style={{border:'1px dashed var(--ink-line-2)', borderRadius:12, padding:'22px 18px', background:'rgba(255,255,255,.015)'}}>
                  <div className="mono" style={{fontSize:10, color:'var(--txt-3)', letterSpacing:'.2em', textTransform:'uppercase', marginBottom:8}}>YOUR INFRASTRUCTURE</div>
                  {['AWS account','K8s cluster','Wiki / Notion','CI/CD secrets','Shared drives'].map(s => (
                    <div key={s} style={{display:'flex', alignItems:'center', gap:8, padding:'8px 0', fontSize:13, color:'var(--txt-2)'}}>
                      <span style={{width:6, height:6, borderRadius:'50%', background:'var(--signal-info)'}}/>{s}
                    </div>
                  ))}
                  <div className="mono" style={{fontSize:10, color:'var(--aurora-2)', marginTop:10}}>↳ tokens planted</div>
                </div>

                <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:4}}>
                  <div style={{width:'100%', height:1, background:'linear-gradient(to right, transparent, var(--aurora-2), transparent)'}}/>
                  <div className="mono" style={{fontSize:10, color:'var(--aurora-2)', letterSpacing:'.15em'}}>TRIP</div>
                  <div style={{width:'100%', height:1, background:'linear-gradient(to right, transparent, var(--aurora-2), transparent)'}}/>
                </div>

                <div style={{border:'1px solid rgba(108,139,255,.45)', borderRadius:12, padding:'22px 18px', background:'rgba(74,109,245,.06)'}}>
                  <div className="mono" style={{fontSize:10, color:'var(--aurora-2)', letterSpacing:'.2em', textTransform:'uppercase', marginBottom:8}}>VANTUZ · EU</div>
                  {['Trigger receiver','Enrichment','Risk scoring','MITRE mapping','Actor classifier','Containment engine'].map(s => (
                    <div key={s} style={{display:'flex', alignItems:'center', gap:8, padding:'6px 0', fontSize:13, color:'var(--txt-2)'}}>
                      <span style={{width:6, height:6, borderRadius:'50%', background:'var(--aurora-2)'}}/>{s}
                    </div>
                  ))}
                </div>
              </div>

              <div style={{marginTop:22, paddingTop:18, borderTop:'1px solid var(--ink-line)', display:'flex', justifyContent:'space-between', gap:12, flexWrap:'wrap'}}>
                <div className="mono" style={{fontSize:11, color:'var(--txt-3)', letterSpacing:'.12em'}}>
                  → outbound-only · no inbound
                </div>
                <div className="mono" style={{fontSize:11, color:'var(--signal-ok)', letterSpacing:'.12em'}}>
                  ✓ no daemon · ✓ no agent
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <PageCTA
        kicker="FILE № 06 · DEPLOY"
        title={<>Read the full<br/>technical spec.</>}
        primary="See the docs"
        primaryHref="/contact"
        secondary="Talk to engineering"
      />

      <FooterSection/>

      <style>{`
        @media (max-width: 1100px){
          .primitives-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
          .pipe-grid       { grid-template-columns: 1fr !important; gap: 40px !important; }
          .containment-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
          .integrations-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
          .arch-grid       { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
        @media (max-width: 900px){
          /* Pipeline left rail must NOT be sticky on mobile — it slides over
             the timeline and overwrites the steps. Drop sticky behaviour. */
          .pipe-stick { position: static !important; top: auto !important; }

          /* Architecture diagram — inner 1fr/56px/1fr grid gets clipped on
             narrow screens. Stack it vertically with the TRIP separator in
             the middle. */
          .arch-diagram { grid-template-columns: 1fr !important; gap: 14px !important; }
          /* Hide the horizontal/vertical "TRIP" connector lines on mobile —
             stacking the two boxes vertically with a small TRIP chip between
             them reads cleaner than squashed gradient lines. */
          .arch-diagram > div:nth-child(2) > div:nth-child(odd) { display: none !important; }
          .arch-diagram > div:nth-child(2) { padding: 4px 0 !important; }
        }
        @media (max-width: 640px){
          .primitives-grid { grid-template-columns: 1fr !important; }
          .containment-grid{ grid-template-columns: 1fr !important; }
          .integrations-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
        }
      `}</style>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<PlatformPage/>);