// Threat section — DARK editorial slab. The first block after the gradient hero
// fades smoothly from the aurora into pure ink. Editorial serif used as accent
// (italic vinho stops) but the main display moves to heavy grotesk for cohesion
// with the rest of the site.

function ThreatSection() {
  return (
    <section data-screen-label="02 The new attacker" className="bg-ink" style={{position:'relative', padding:'180px 0 130px'}}>
      <div className="grid-fine" style={{position:'absolute', inset:0, opacity:.25, pointerEvents:'none'}}/>
      <div className="wrap" style={{position:'relative'}}>
        <div className="threat-main" style={{display:'grid', gridTemplateColumns:'minmax(0,260px) minmax(0,1fr)', gap:80, alignItems:'start'}}>
          <div style={{position:'sticky', top:40}}>
            <div className="chip" style={{marginBottom:18}}>FILE № 01 · THE ATTACKER</div>
            <div className="mono" style={{fontSize:11, color:'var(--txt-3)', letterSpacing:'.1em', lineHeight:1.7}}>
              Reading time<br/>
              <span style={{color:'#fff'}}>2 minutes</span>
              <div className="hairline" style={{margin:'18px 0'}}/>
              Published<br/>
              <span style={{color:'#fff'}}>May 2026</span>
              <div className="hairline" style={{margin:'18px 0'}}/>
              Cited<br/>
              <span style={{color:'#fff'}}>Claude Mythos 04/2026<br/>FreeBSD CVE-2008-1207</span>
            </div>
          </div>

          <div>
            <h2 className="display" style={{fontSize:'clamp(48px, 6vw, 96px)', margin:0, color:'#fff', maxWidth:980, fontWeight:700}}>
              For seventeen years, a vulnerability sat in FreeBSD.<br/>
              <span className="display-italic txt-grad">An AI found it in an afternoon.</span>
            </h2>

            <div className="threat-2col" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, marginTop:48, fontSize:17, lineHeight:1.6, color:'var(--txt-2)'}}>
              <p>The attacker on the other end of your perimeter is no longer a human with a notebook of TTPs. Increasingly, it's an autonomous agent that can read your repos, infer your architecture, draft an exploit and adapt mid-session — at machine speed, in parallel, without fatigue.</p>
              <p>Traditional SIEMs were never built for this. They raise thousands of probabilistic alerts your team has hours, not seconds, to triage. By the time someone has read the first line of the ticket, the agent has already finished its work.</p>
            </div>

            <div className="card" style={{
              marginTop:64, padding:'40px 44px',
              background:'rgba(255,255,255,.03)', borderRadius:18,
              position:'relative', overflow:'hidden'
            }}>
              {/* soft blue corner glow */}
              <div style={{position:'absolute', top:-60, right:-60, width:260, height:260, background:'radial-gradient(circle, rgba(74,109,245,.18), transparent 65%)', filter:'blur(20px)', pointerEvents:'none'}}/>
              <div style={{position:'relative'}}>
                <div className="mono" style={{fontSize:11, letterSpacing:'.2em', color:'var(--aurora-2)', textTransform:'uppercase', marginBottom:14}}>// THE VANTUZ THESIS</div>
                <div className="display" style={{fontSize:42, lineHeight:1.08, color:'#fff', letterSpacing:'-.02em', fontWeight:700}}>
                  Probability detection cannot outrun autonomous attack.<br/>
                  <span className="display-italic" style={{color:'var(--aurora-3)'}}>Deception can.</span>
                </div>
                <p style={{fontSize:15, lineHeight:1.65, color:'var(--txt-2)', maxWidth:760, marginTop:22, marginBottom:0}}>
                  A honeytoken has no false positive. No legitimate user reads a fake AWS key. No internal service queries a decoy database. Every touch is, by construction, an attacker — human or otherwise. That single property is what makes deception the only detection model that survives contact with autonomous adversaries.
                </p>
              </div>
            </div>

            {/* the contrast strip */}
            <div className="threat-compare" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, marginTop:48, border:'1px solid var(--ink-line)', borderRadius:16, overflow:'hidden'}}>
              {[
                { label:'LEGACY SIEM', body:'Generates 11,000 alerts/month. 99.4% noise. Human-only response. Built before LLMs existed.', tone:'var(--txt-3)' },
                { label:'VANTUZ',      body:'0 noise. Every alert is an attacker. AI pipeline contains in 11s. Built for an adversary that runs on tokens, not coffee.', tone:'var(--aurora-2)' },
              ].map((it, i) => (
                <div key={i} style={{padding:'28px 32px', background: i===1 ? 'rgba(74,109,245,.08)' : 'rgba(255,255,255,.02)', color:'#fff', borderLeft: i===1 ? '1px solid var(--ink-line)' : 'none'}}>
                  <div className="mono" style={{fontSize:10, letterSpacing:'.22em', color: it.tone, marginBottom:12}}>{it.label}</div>
                  <div style={{fontSize:16, lineHeight:1.55, color: i===1 ? '#fff' : 'var(--txt-2)'}}>{it.body}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ThreatSection = ThreatSection;
