// Coverage — DARK section. 7 honeytoken primitives as a tight grid.
// Sits between two black sections; no fade needed (consecutive dark blocks).

function CoverageSection() {
  const items = [
    { code:'AWS-IAM',    name:'Cloud credential',  body:'Real IAM user with zero scope. Any API call fires CloudTrail → webhook.', deploy:'GitHub repos · .env files · dev docs' },
    { code:'URL-TKN',    name:'URL beacon',        body:'Unique URL on your domain. GET → IP, UA, referrer captured.', deploy:'PDFs · wikis · marketing emails' },
    { code:'DNS-TKN',    name:'DNS hook',          body:'Unique subdomain. Lookup fires alert. Works through VPN & proxies.', deploy:'Network configs · connection strings' },
    { code:'PDF-TKN',    name:'Document tracker',  body:'Tracking pixel + JS action. Triggers on open, even offline-then-online.', deploy:'Finance docs · HR files · board decks' },
    { code:'DB-CRED',    name:'Database credential', body:'Fake JDBC string. Listener catches connection attempts.', deploy:'Code repos · deployment scripts' },
    { code:'LLM-KEY',    name:'AI key',            body:'Fake sk-proj-… key. Proxy catches any usage attempt.', deploy:'Internal AI tooling · Notion pages' },
    { code:'RAG-CANARY', name:'RAG canary doc',    body:'Doc with embedded canary in vector store. Catches LLM exfiltration.', deploy:'RAG pipelines · vector databases' },
    { code:'CICD-CANARY',name:'CI/CD pipeline canary', body:'Decoy secret in workflow env. Triggers on runner-IP usage — catches supply-chain & cache-poisoning attacks.', deploy:'GitHub Actions · CI/CD pipelines · runner environments' },
    { code:'NPM-CANARY', name:'npm package canary',body:'Decoy package under your org namespace. postinstall webhook flags dependency confusion & typosquats.', deploy:'npm registry · internal package mirrors' },
  ];

  return (
    <section data-screen-label="05 Coverage" className="bg-ink" style={{padding:'180px 0 130px', position:'relative'}}>
      <div className="grid-dots" style={{position:'absolute', inset:0, opacity:.3, pointerEvents:'none'}}/>
      <div className="wrap" style={{position:'relative'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:56, flexWrap:'wrap', gap:32}}>
          <div>
            <div className="chip" style={{marginBottom:18}}>FILE № 04 · COVERAGE</div>
            <h2 className="display" style={{fontSize:'clamp(48px, 6vw, 96px)', margin:0, color:'#fff', maxWidth:880, fontWeight:700, letterSpacing:'-.025em'}}>
              Nine tripwires.<br/>
              <span className="display-italic txt-grad">One signal.</span>
            </h2>
          </div>
          <p style={{maxWidth:380, color:'var(--txt-2)', fontSize:15, lineHeight:1.55, margin:0}}>
            Each primitive maps to a different surface — credentials, identity, data, AI — so an attacker tripping anywhere is caught everywhere.
          </p>
        </div>

        <div className="coverage-grid" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0, border:'1px solid var(--ink-line)', borderRadius:18, overflow:'hidden', background:'rgba(255,255,255,.015)'}}>
          {items.map((it, i) => (
            <div key={it.code} style={{
              borderRight: (i % 3 !== 2) ? '1px solid var(--ink-line)' : 'none',
              borderTop:   (i >= 3) ? '1px solid var(--ink-line)' : 'none',
              padding:'26px 26px 30px',
              position:'relative',
              minHeight: 220,
              background:'rgba(255,255,255,.01)',
            }}>
              <div className="mono" style={{fontSize:10, letterSpacing:'.2em', color:'var(--aurora-2)'}}>TOKEN · {it.code}</div>
              <div className="display" style={{fontSize:28, lineHeight:1.05, color:'#fff', margin:'10px 0 12px', letterSpacing:'-.02em', fontWeight:600}}>{it.name}.</div>
              <p style={{fontSize:14, lineHeight:1.55, color:'var(--txt-2)', margin:'0 0 14px', maxWidth: 320}}>{it.body}</p>
              <div className="mono" style={{fontSize:10, letterSpacing:'.05em', color:'var(--txt-3)'}}>↳ {it.deploy}</div>

              {/* corner index */}
              <div className="display" style={{position:'absolute', top:18, right:22, fontSize:34, color:'var(--ink-line-2)', lineHeight:1, fontWeight:700}}>{String(i+1).padStart(2,'0')}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.CoverageSection = CoverageSection;