// NIS2 page — SEO-leaning, educational tone with sales hook.

const MAPPING = [
  { req: 'Detect significant incidents within 24h',  vantuz: 'Vantuz detects in seconds via honeytokens.' },
  { req: 'Document evidence of detection',           vantuz: 'Automated timestamped audit trail.' },
  { req: 'Report to authorities within 24h',         vantuz: 'NIS2 Article 23 PDF generated automatically.' },
  { req: 'Implement containment measures',           vantuz: 'Automatic revocation and blocking in <60s.' },
];

const DOSSIER_FIELDS = [
  { code: '01', label: 'Attacker IP + geolocation',    note: 'ASN, country, residential vs. datacenter, TOR exit flag.' },
  { code: '02', label: 'Attack timestamp',             note: 'UTC + your local TZ, sub-second precision.' },
  { code: '03', label: 'Honeytoken triggered',         note: 'Which primitive, where it was planted, when.' },
  { code: '04', label: 'Risk score',                   note: 'Deterministic 0–100, with the breakdown of each input.' },
  { code: '05', label: 'MITRE techniques',             note: 'Full ATT&CK chain — tactic + technique IDs.' },
  { code: '06', label: 'Containment actions',          note: 'Every action Vantuz executed, with timestamps and return codes.' },
  { code: '07', label: 'Evidence chain',               note: 'Hash-chained event log, suitable for legal review.' },
];

const SECTORS = [
  { name: 'Energy',                examples: 'Electricity, gas, oil, district heating' },
  { name: 'Transport',             examples: 'Air, rail, road, water' },
  { name: 'Banking',               examples: 'Credit institutions' },
  { name: 'Financial markets',     examples: 'Trading venues, central counterparties' },
  { name: 'Healthcare',            examples: 'Hospitals, labs, manufacturers of devices' },
  { name: 'Drinking water',        examples: 'Supply and distribution' },
  { name: 'Digital infrastructure',examples: 'DNS, TLD registries, IXPs, data centres' },
  { name: 'ICT service mgmt.',     examples: 'MSPs, MSSPs' },
  { name: 'Public administration', examples: 'Central + regional government' },
  { name: 'Cloud services',        examples: 'IaaS, PaaS, SaaS at scale' },
];

function NIS2Page() {
  return (
    <>
      <Nav current="NIS2"/>

      <PageHero
        eyebrow="NIS2 · ARTICLE 23 · EU"
        title={<>
          NIS2 requires<br/>
          detection in 24 hours.<br/>
          <span style={{color:'var(--aurora-3)'}}>Most companies take 197 days.</span>
        </>}
        subtitle="Vantuz closes that gap. Detection in seconds. Dossier ready in 60."
      />

      {/* SECTION 1 — The problem */}
      <section data-screen-label="02 Problem" className="bg-ink" style={{padding:'130px 0 120px', 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.2fr)', gap:64, alignItems:'flex-start'}} className="prob-grid">
            <div>
              <div className="eyebrow" style={{marginBottom:18}}><span className="dot"/> FILE № 01 · THE LAW</div>
              <h2 className="display" style={{fontSize:'clamp(40px, 5.2vw, 76px)', margin:0, color:'#fff', letterSpacing:'-.03em', fontWeight:700, lineHeight:1}}>
                What Article 23<br/>actually demands.
              </h2>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:22}}>
              <p style={{fontSize:17, lineHeight:1.6, color:'var(--txt-2)', margin:0}}>
                NIS2 — the EU's Network and Information Security directive — became enforceable in October 2024.
                Article 23 of the directive requires in-scope organisations to <span style={{color:'#fff'}}>detect significant incidents within 24 hours</span> and
                report them to the relevant national authority in the same window.
              </p>
              <p style={{fontSize:17, lineHeight:1.6, color:'var(--txt-2)', margin:0}}>
                Failure to comply carries fines of <span style={{color:'#fff'}}>up to €10 million or 2% of global annual turnover</span>, whichever is higher.
                Boards can be held personally liable.
              </p>
              <p style={{fontSize:17, lineHeight:1.6, color:'var(--txt-2)', margin:0}}>
                The directive applies to EU companies with more than 50 employees or €10M in turnover, operating in essential or important sectors —
                roughly 160,000 organisations across the union.
              </p>

              <div style={{display:'grid', gridTemplateColumns:'repeat(3, minmax(0,1fr))', gap:14, marginTop:18}}>
                {[
                  ['€10M', 'maximum fine'],
                  ['24h',  'to detect + report'],
                  ['197d', 'industry-average MTTD'],
                ].map(([k,v], i) => (
                  <div key={i} className="card-flat" style={{padding:'20px 18px'}}>
                    <div className="display" style={{fontSize:34, color:'#fff', fontWeight:700, letterSpacing:'-.03em', lineHeight:1}}>{k}</div>
                    <div className="mono" style={{fontSize:10, color:'var(--txt-3)', letterSpacing:'.18em', textTransform:'uppercase', marginTop:8}}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 2 — Mapping table */}
      <section data-screen-label="03 Mapping" className="bg-ink-2" style={{padding:'130px 0 130px', borderTop:'1px solid var(--ink-line)', position:'relative'}}>
        <div className="wrap">
          <div className="eyebrow" style={{marginBottom:18}}><span className="dot"/> FILE № 02 · MAPPING</div>
          <h2 className="display" style={{fontSize:'clamp(40px, 5.2vw, 76px)', margin:0, color:'#fff', letterSpacing:'-.03em', fontWeight:700, lineHeight:1, marginBottom:14}}>
            Requirement, covered.
          </h2>
          <p style={{fontSize:16, lineHeight:1.55, color:'var(--txt-2)', maxWidth:620, marginBottom:48}}>
            How each NIS2 obligation maps onto a Vantuz capability — with no manual workflow required.
          </p>

          <div style={{borderTop:'1px solid var(--ink-line)'}}>
            <div style={{display:'grid', gridTemplateColumns:'80px minmax(0,1.2fr) minmax(0,1fr)', gap:32, padding:'18px 4px', borderBottom:'1px solid var(--ink-line)'}}>
              <div className="mono" style={{fontSize:10, color:'var(--txt-4)', letterSpacing:'.22em', textTransform:'uppercase'}}>№</div>
              <div className="mono" style={{fontSize:10, color:'var(--txt-4)', letterSpacing:'.22em', textTransform:'uppercase'}}>NIS2 requirement</div>
              <div className="mono" style={{fontSize:10, color:'var(--txt-4)', letterSpacing:'.22em', textTransform:'uppercase'}}>How Vantuz covers it</div>
            </div>
            {MAPPING.map((m, i) => (
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'80px minmax(0,1.2fr) minmax(0,1fr)', gap:32,
                padding:'30px 4px', borderBottom:'1px solid var(--ink-line)', alignItems:'flex-start',
              }} className="map-row">
                <div className="mono" style={{fontSize:13, color:'var(--aurora-2)', letterSpacing:'.05em'}}>{String(i+1).padStart(2,'0')}</div>
                <div style={{fontSize:'clamp(18px, 1.5vw, 22px)', color:'#fff', lineHeight:1.35, fontWeight:500, letterSpacing:'-.01em'}}>
                  "{m.req}"
                </div>
                <div style={{fontSize:15, color:'var(--txt-2)', lineHeight:1.55}}>
                  → {m.vantuz}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SECTION 3 — Dossier */}
      <section data-screen-label="04 Dossier" className="bg-ink" style={{padding:'130px 0 130px', 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 style={{display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)', gap:64, alignItems:'flex-start'}} className="doss-grid">
            <div>
              <div className="eyebrow" style={{marginBottom:18}}><span className="dot"/> FILE № 03 · DOSSIER</div>
              <h2 className="display" style={{fontSize:'clamp(40px, 5.2vw, 76px)', margin:0, color:'#fff', letterSpacing:'-.03em', fontWeight:700, lineHeight:1}}>
                What's in the<br/>compliance PDF.
              </h2>
              <p style={{fontSize:16, lineHeight:1.55, color:'var(--txt-2)', marginTop:22, maxWidth:420}}>
                One file. Auto-generated. Authority-ready. Designed with European regulators and CISOs.
              </p>

              {/* Faux PDF preview */}
              <div className="card" style={{marginTop:32, padding:'22px 24px 26px', background:'rgba(243,239,230,.04)'}}>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14}}>
                  <div className="mono" style={{fontSize:10, color:'var(--txt-3)', letterSpacing:'.22em'}}>VTZ-2026-05-12-7714.pdf</div>
                  <div className="mono" style={{fontSize:10, color:'var(--signal-ok)', letterSpacing:'.15em'}}>● READY</div>
                </div>
                <div style={{borderTop:'1px solid var(--ink-line)', paddingTop:14, fontFamily:'var(--f-mono)', fontSize:11.5, lineHeight:1.8, color:'var(--txt-2)'}}>
                  <div className="line-aurora">NIS2 — Article 23 incident dossier</div>
                  <div className="line-dim">────────────────────────────────────</div>
                  <div>Filed by   : Vantuz · tenant eu-prod-04</div>
                  <div>Filed at   : 2026-05-12T14:33:12Z</div>
                  <div>Authority  : CNCS (PT) · authority-eu pending</div>
                  <div>Severity   : high · score 0.97</div>
                  <div>Actor      : autonomous-agent</div>
                  <div>Contained  : iam.revoke · cf.block</div>
                  <div className="line-dim">────────────────────────────────────</div>
                  <div className="line-ok">✓ submission-ready · sha256 e3b0c44…</div>
                </div>
              </div>
            </div>

            <div>
              {DOSSIER_FIELDS.map((d, i) => (
                <div key={d.code} style={{
                  display:'grid', gridTemplateColumns:'48px minmax(0,1fr)', gap:24,
                  padding:'22px 4px', borderTop:'1px solid var(--ink-line)',
                  borderBottom: i === DOSSIER_FIELDS.length-1 ? '1px solid var(--ink-line)' : 'none',
                }}>
                  <div className="mono" style={{fontSize:13, color:'var(--aurora-2)', letterSpacing:'.05em', paddingTop:2}}>{d.code}</div>
                  <div>
                    <div style={{fontSize:'clamp(18px, 1.5vw, 21px)', color:'#fff', fontWeight:500, letterSpacing:'-.01em', lineHeight:1.3}}>{d.label}</div>
                    <div style={{fontSize:14, color:'var(--txt-2)', marginTop:6, lineHeight:1.55}}>{d.note}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 4 — Sectors */}
      <section data-screen-label="05 Scope" className="bg-ink-2" style={{padding:'130px 0 140px', borderTop:'1px solid var(--ink-line)', position:'relative'}}>
        <div className="wrap">
          <div className="eyebrow" style={{marginBottom:18}}><span className="dot"/> FILE № 04 · SCOPE</div>
          <h2 className="display" style={{fontSize:'clamp(40px, 5.2vw, 76px)', margin:0, color:'#fff', letterSpacing:'-.03em', fontWeight:700, lineHeight:1, marginBottom:14}}>
            Who's in scope.
          </h2>
          <p style={{fontSize:16, lineHeight:1.55, color:'var(--txt-2)', maxWidth:620, marginBottom:48}}>
            NIS2 covers essential and important sectors. If you operate in one of these and have more than 50 employees or €10M turnover, the directive applies to you.
          </p>

          <div style={{display:'grid', gridTemplateColumns:'repeat(2, minmax(0,1fr))', gap:0, borderTop:'1px solid var(--ink-line)'}} className="sectors-grid">
            {SECTORS.map((s, i) => (
              <div key={s.name} style={{
                padding:'24px 4px', borderBottom:'1px solid var(--ink-line)',
                borderRight: i % 2 === 0 ? '1px solid var(--ink-line)' : 'none',
                paddingRight: i % 2 === 0 ? 32 : 4,
                paddingLeft: i % 2 === 1 ? 32 : 4,
                display:'flex', alignItems:'baseline', gap:24,
              }} className="sector-row">
                <div className="mono" style={{fontSize:11, color:'var(--aurora-2)', letterSpacing:'.15em', minWidth: 36}}>{String(i+1).padStart(2,'0')}</div>
                <div style={{flex:1}}>
                  <div style={{fontSize:'clamp(20px, 1.7vw, 26px)', color:'#fff', fontWeight:500, letterSpacing:'-.015em', lineHeight:1.25}}>{s.name}</div>
                  <div style={{fontSize:13, color:'var(--txt-3)', marginTop:6, lineHeight:1.5}}>{s.examples}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <PageCTA
        kicker="FILE № 05 · DEPLOY"
        title={<>Get your first NIS2-compliant<br/>detection set up in 5 minutes.</>}
        primary="Start free"
        primaryHref="https://app.vantuz.co/login"
        secondary="Talk to compliance"
      />

      <FooterSection/>

      <style>{`
        @media (max-width: 1100px){
          .prob-grid    { grid-template-columns: 1fr !important; gap: 40px !important; }
          .doss-grid    { grid-template-columns: 1fr !important; gap: 40px !important; }
          .map-row      { grid-template-columns: 48px minmax(0,1fr) !important; }
          .map-row > div:last-child { grid-column: 1 / -1; padding-left: 80px; padding-top: 4px; }
        }
        @media (max-width: 760px){
          .sectors-grid { grid-template-columns: 1fr !important; }
          .sector-row   { border-right: none !important; padding-left: 4px !important; padding-right: 4px !important; }
        }
      `}</style>
    </>
  );
}

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