// ToolkitNIST.jsx — Verigo Global: NIST CSF v2.0 implementation toolkit page
const { V: TV, MAXW: TMW, FONT: TFT } = window;
const N_ACCENT = TV.g600;
const N_ACCENTBG = TV.g100;

/* ── BREADCRUMB ──────────────────────────────────────────── */
const NiCrumb = ({ onNav }) => (
  <div style={{display:'flex',alignItems:'center',gap:8,fontSize:13,fontWeight:600,color:TV.g500,marginBottom:24,fontFamily:TFT}}>
    <button onClick={()=>onNav('home')} style={niCrumbBtn}>Home</button><span style={{color:TV.g300}}>/</span>
    <button onClick={()=>onNav('toolkits')} style={niCrumbBtn}>Toolkits</button><span style={{color:TV.g300}}>/</span>
    <span style={{color:TV.purple}}>NIST CSF Toolkit</span>
  </div>
);
const niCrumbBtn = {background:'none',border:'none',cursor:'pointer',color:'#7A7A8A',fontSize:13,fontWeight:600,padding:0,fontFamily:"'DM Sans', system-ui, sans-serif"};

/* ── HERO ────────────────────────────────────────────────── */
const NiHero = ({ onNav }) => (
  <section style={{background:TV.g50,padding:'56px 0 64px',borderBottom:`1px solid ${TV.g200}`,position:'relative',overflow:'hidden'}}>
    <window.HeroWatermark variant="grid" color={TV.g400} opacity={0.25} style={{top:-20,right:-20,width:480,height:440}} />
    <div style={{maxWidth:TMW,margin:'0 auto',padding:'0 32px',position:'relative',zIndex:1}}>
      <NiCrumb onNav={onNav} />
      <div style={{display:'grid',gridTemplateColumns:'1fr 360px',gap:64,alignItems:'end'}}>
        <div>
          <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:22}}>
            <div style={{width:60,height:60,background:N_ACCENTBG,color:N_ACCENT,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><window.Icon name="building" size={30} /></div>
            <div style={{display:'flex',gap:8}}>
              <window.Tag color={N_ACCENT} bg={N_ACCENTBG} border={N_ACCENTBG}>US Gov Foundation</window.Tag>
              <window.Tag color={TV.g600} bg="#fff" border={TV.g200}>NIST CSF v2.0</window.Tag>
            </div>
          </div>
          <h1 className="vg-hero-title" style={{fontSize:60,fontWeight:800,letterSpacing:'-0.035em',color:TV.black,margin:'0 0 18px',lineHeight:1.02,fontFamily:TFT}}>
            The NIST CSF toolkit, <span style={{color:TV.purple}}>ready to deploy.</span>
          </h1>
          <p style={{fontSize:19,color:TV.g600,lineHeight:1.6,margin:'0 0 30px',maxWidth:600}}>
            A complete, practitioner-maintained document set — 14 policies, 12 procedures, and subcategory templates across all six CSF v2.0 functions — tailored to your organization so you implement the framework without starting from a blank page.
          </p>
          <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
            <window.Btn kind="primary" onClick={()=>onNav('evaluation')}>Start the readiness evaluation <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
            <window.Btn kind="ghost" onClick={()=>document.getElementById('downloads')?.scrollIntoView({behavior:'smooth',block:'start'})}>See what's inside</window.Btn>
          </div>
        </div>
        <div style={{background:'#fff',border:`1px solid ${TV.g200}`,padding:'26px',boxShadow:'0 8px 32px rgba(91,46,145,0.08)'}}>
          <div style={{fontSize:11,fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:TV.g400,marginBottom:16}}>Inside the toolkit</div>
          <div style={{display:'flex',flexDirection:'column',gap:14}}>
            {[['doc','14','Approval-ready policies'],['file','12','Operational procedures'],['layers',String(window.TK_NIST.CTRL_COUNT),'CSF v2.0 subcategory templates'],['clipboard','120+','Profiles, tier checklists & samples']].map(([ic,n,l],i)=>(
              <div key={i} style={{display:'flex',alignItems:'center',gap:12}}>
                <div style={{width:34,height:34,background:TV.purpleSubtle,color:TV.purple,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><window.Icon name={ic} size={18} /></div>
                <div style={{fontSize:22,fontWeight:800,color:TV.black,fontFamily:TFT,letterSpacing:'-0.02em',minWidth:46}}>{n}</div>
                <div style={{fontSize:13.5,color:TV.g600,fontWeight:500}}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ── OVERVIEW ────────────────────────────────────────────── */
const NiOverview = () => (
  <window.Section bg="#fff" pad="80px 0">
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:64,alignItems:'start'}}>
      <div>
        <window.Overline style={{marginBottom:14}}>Overview</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 36,fontWeight:800,letterSpacing:'-0.025em',color:TV.black,margin:'0 0 20px',lineHeight:1.12,fontFamily:TFT}}>All six functions covered — from Govern to Recover.</h2>
        <p style={{fontSize:16.5,color:TV.g600,lineHeight:1.7,margin:'0 0 18px'}}>The Verigo NIST CSF v2.0 toolkit is the document backbone of a structured cybersecurity program. NIST CSF v2.0 added the <strong style={{color:TV.black}}>Govern</strong> function as the sixth pillar — this toolkit covers all six, with subcategory templates across every outcome statement from GV.OC-01 to RC.CO-04.</p>
        <p style={{fontSize:16.5,color:TV.g600,lineHeight:1.7,margin:0}}>Each artefact is tailored to your sector, scope, and target tier — embedded into how you operate, the <strong style={{color:TV.black}}>Compliance by Design</strong> way, so your current profile generates evidence continuously.</p>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:14}}>
        {[['compass','Profile-driven','Built around current and target profiles — so your implementation roadmap comes straight from the gap between the two.'],['network','Multi-framework ready','Subcategories are mapped to ISO 27001, HIPAA, PCI-DSS, and FISMA so evidence is reused across programs.'],['refresh','v2.0 native','Fully aligned to NIST CSF v2.0, including the new Govern function and the updated subcategory structure.']].map(([ic,t,d],i)=>(
          <div key={i} style={{display:'flex',gap:16,border:`1px solid ${TV.g200}`,padding:'22px 24px',background:'#fff'}}>
            <div style={{width:44,height:44,background:TV.purpleSubtle,color:TV.purple,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><window.Icon name={ic} size={22} /></div>
            <div><h3 style={{fontSize:16.5,fontWeight:700,color:TV.black,margin:'0 0 5px',fontFamily:TFT}}>{t}</h3><p style={{fontSize:14,color:TV.g600,lineHeight:1.6,margin:0}}>{d}</p></div>
          </div>
        ))}
      </div>
    </div>
  </window.Section>
);

/* ── COVERAGE ────────────────────────────────────────────── */
const NiCoverage = () => (
  <window.Section bg={TV.g50} pad="80px 0">
    <window.SectionHeader overline="Coverage" align="center" title="All six functions — across four implementation tiers" sub="The toolkit covers every CSF v2.0 outcome from Govern to Recover, with profile templates and tier checklists for Tier 1 through Tier 4." />
    <div style={{marginBottom:16,fontSize:11,fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:TV.g400}}>Four implementation tiers</div>
    <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,marginBottom:40}}>
      {window.TK_NIST.TIERS.map((t,i)=>{const pop=!!t.popular;return(
        <div key={i} style={{background:'#fff',border:`1px solid ${pop?TV.purple:TV.g200}`,outline:pop?`1px solid ${TV.purple}`:'none',padding:'20px'}}>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:10}}>
            <span style={{fontSize:11,fontWeight:700,letterSpacing:'0.08em',textTransform:'uppercase',color:pop?TV.purple:TV.g500,fontFamily:"'JetBrains Mono',monospace"}}>{t.id}</span>
            {pop&&<span style={{fontSize:10,fontWeight:700,letterSpacing:'0.06em',textTransform:'uppercase',color:'#fff',background:TV.purple,padding:'3px 9px'}}>Target</span>}
          </div>
          <div style={{fontSize:16,fontWeight:800,color:TV.black,fontFamily:TFT,marginBottom:8}}>{t.name.split(' — ')[1]}</div>
          <p style={{fontSize:12.5,color:TV.g500,lineHeight:1.5,margin:0}}>{t.blurb}</p>
        </div>
      );})}
    </div>
    <div style={{marginBottom:16,fontSize:11,fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:TV.g400}}>Six CSF functions · {window.TK_NIST.CTRL_COUNT} subcategories</div>
    <div style={{display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:12}}>
      {window.TK_NIST.FUNCS.map((f,i)=>{
        const count=f.cats.reduce((a,c)=>a+c.items.length,0);
        return(
        <div key={i} style={{background:'#fff',border:`1px solid ${TV.g200}`,padding:'16px 10px',textAlign:'center'}}>
          <div style={{width:36,height:36,background:TV.purpleSubtle,color:TV.purple,display:'flex',alignItems:'center',justifyContent:'center',margin:'0 auto 10px'}}><window.Icon name={f.icon} size={18} /></div>
          <div style={{fontSize:18,fontWeight:800,color:TV.purple,fontFamily:"'JetBrains Mono',monospace",letterSpacing:'-0.01em'}}>{f.fn}</div>
          <div style={{fontSize:11,fontWeight:600,color:TV.black,marginTop:3}}>{f.name}</div>
          <div style={{fontSize:11,color:TV.g400,marginTop:2}}>{count} subcategories</div>
        </div>
        );
      })}
    </div>
  </window.Section>
);

/* ── CONTENTS EXPLORER ────────────────────────────────────── */
const NiContents = ({ onDownload, unlocked }) => {
  const [tab, setTab] = React.useState('policies');
  const A = window.TK_NIST.ASSETS;
  const tabs = [['policies','Policies',A.policies.count],['procedures','Procedures',A.procedures.count],['controls','Subcategory Templates',A.controls.count]];
  const meta = A[tab];
  const renderList = () => {
    if (tab === 'controls') return (
      <div style={{display:'flex',flexDirection:'column',gap:28}}>
        {window.TK_NIST.FUNCS.map((f,fi)=>(
          <div key={fi}>
            <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:16,paddingBottom:8,borderBottom:`2px solid ${TV.g200}`}}>
              <window.Icon name={f.icon} size={20} color={TV.purple} />
              <span style={{fontSize:15,fontWeight:800,color:TV.black,fontFamily:TFT}}>{f.fn} · {f.name}</span>
            </div>
            {f.cats.map((c,ci)=>(
              <div key={ci} style={{marginBottom:18}}>
                <div style={{fontSize:12.5,fontWeight:700,color:TV.g600,marginBottom:8}}>{c.cat} · {c.name}</div>
                <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:'6px 24px'}}>
                  {c.items.map(([id,t],k)=>(
                    <div key={k} style={{display:'flex',gap:10,alignItems:'baseline',fontSize:12.5,lineHeight:1.4,paddingBottom:5,borderBottom:`1px solid ${TV.g100}`}}>
                      <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10.5,fontWeight:700,color:TV.orange,flexShrink:0,minWidth:60}}>{id}</span>
                      <span style={{color:TV.g700}}>{t}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    );
    const list = tab==='policies'?window.TK_NIST.POLICIES:window.TK_NIST.PROCEDURES;
    return (<div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:'14px 24px'}}>{list.map(([t,d],i)=>(<div key={i} style={{display:'flex',gap:12,alignItems:'flex-start',paddingBottom:14,borderBottom:`1px solid ${TV.g100}`}}><span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:12,fontWeight:700,color:TV.purple,flexShrink:0,marginTop:1}}>{String(i+1).padStart(2,'0')}</span><div><div style={{fontSize:14.5,fontWeight:700,color:TV.black,lineHeight:1.3,fontFamily:TFT}}>{t}</div><div style={{fontSize:13,color:TV.g500,lineHeight:1.5,marginTop:2}}>{d}</div></div></div>))}</div>);
  };
  return (
    <section id="downloads" style={{background:'#fff',padding:'84px 0',scrollMarginTop:80}}>
      <div style={{maxWidth:TMW,margin:'0 auto',padding:'0 32px'}}>
        <window.SectionHeader overline="Toolkit contents" title="Browse the full set — and take it with you" sub="Explore every policy, procedure, and subcategory in the toolkit. Download any list as a branded PDF." maxSub={620} />
        <div style={{display:'flex',gap:8,borderBottom:`1px solid ${TV.g200}`}}>
          {tabs.map(([id,label,count])=>(<button key={id} onClick={()=>setTab(id)} style={{fontFamily:TFT,fontSize:14.5,fontWeight:700,padding:'14px 20px',cursor:'pointer',background:'none',border:'none',borderBottom:tab===id?`3px solid ${TV.purple}`:'3px solid transparent',color:tab===id?TV.purple:TV.g500,marginBottom:-1,display:'flex',alignItems:'center',gap:8}}>{label}<span style={{fontSize:11,fontWeight:700,padding:'2px 8px',borderRadius:9999,background:tab===id?TV.purpleSubtle:TV.g100,color:tab===id?TV.purple:TV.g500}}>{count}</span></button>))}
        </div>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:24,flexWrap:'wrap',background:TV.g50,border:`1px solid ${TV.g200}`,borderTop:'none',padding:'20px 24px'}}>
          <div style={{display:'flex',alignItems:'center',gap:14}}>
            <div style={{width:46,height:46,background:TV.purple,color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><window.Icon name={meta.icon} size={23} color="#fff" /></div>
            <div><div style={{fontSize:16,fontWeight:800,color:TV.black,fontFamily:TFT}}>{meta.label}</div><div style={{fontSize:13,color:TV.g500,maxWidth:520,lineHeight:1.4}}>{meta.blurb}</div></div>
          </div>
          <window.Btn kind="primary" onClick={()=>onDownload(tab)} style={{flexShrink:0}}>
            <window.Icon name={unlocked?'arrow':'lock'} size={16} color="#fff" />
            {unlocked?`Download PDF · ${meta.count} ${meta.unit}`:`Download PDF (${meta.count} ${meta.unit})`}
          </window.Btn>
        </div>
        <div style={{border:`1px solid ${TV.g200}`,borderTop:'none',padding:'32px 28px'}}>{renderList()}</div>
      </div>
    </section>
  );
};

/* ── PRICING ──────────────────────────────────────────────── */
const NiPricing = ({ onNav }) => {
  const TIERS = window.TK_NIST.PKG_TIERS;
  const baseFmt = window.TK_NIST.fmtPrice(window.TK_NIST.QUOTE_BASE.price);
  return (
    <section id="pricing" style={{background:'#fff',padding:'84px 0',scrollMarginTop:80}}>
      <div style={{maxWidth:TMW,margin:'0 auto',padding:'0 32px'}}>
        <window.SectionHeader overline="Packages" align="center"
          title="Build without the evaluation"
          sub={'Start from the document toolkit at ' + baseFmt + ' and add exactly what you need — see your custom total update live, then download a quote.'}
          maxSub={600} />
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:16,marginBottom:24}}>
          {TIERS.map((t,i)=>{ const pop=!!t.popular; return (
            <div key={t.id} style={{position:'relative',display:'flex',flexDirection:'column',border:`1px solid ${pop?TV.purple:TV.g200}`,padding:'28px 24px',background:pop?TV.g50:'#fff'}}>
              {pop&&<div style={{position:'absolute',top:0,left:'50%',transform:'translate(-50%,-50%)',background:TV.purple,color:'#fff',fontSize:10.5,fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',padding:'5px 14px',whiteSpace:'nowrap'}}>Most popular</div>}
              <div style={{fontSize:13,fontWeight:700,letterSpacing:'0.08em',textTransform:'uppercase',color:pop?TV.purple:TV.g500,marginBottom:8}}>{t.name}</div>
              <p style={{fontSize:14.5,color:TV.g600,lineHeight:1.5,margin:'0 0 16px',minHeight:44}}>{t.tagline}</p>
              <div style={{display:'flex',flexDirection:'column',gap:9,flex:1,marginBottom:20}}>
                {(t.features||[]).slice(0,4).map((f,fi)=>(
                  <div key={fi} style={{display:'flex',gap:8,alignItems:'flex-start',fontSize:13,color:TV.g700,lineHeight:1.4}}>
                    <window.Icon name="check" size={16} color={TV.purple} style={{flexShrink:0,marginTop:2}} />{f}
                  </div>
                ))}
              </div>
            </div>
          ); })}
        </div>
        <div style={{display:'flex',alignItems:'center',justifyContent:'center',gap:16,flexWrap:'wrap'}}>
          <window.Btn kind="primary" onClick={()=>onNav('checkout')}>Build custom package <window.Icon name="arrow" size={16} color="#fff" /></window.Btn>
          <span style={{fontSize:13.5,color:TV.g500}}>Starts from {baseFmt} · add only what you need · live pricing</span>
        </div>
      </div>
    </section>
  );
};

/* ── EVAL BAND ────────────────────────────────────────────── */
const NiEvalBand = ({ onNav }) => (
  <section style={{position:'relative',background:TV.purpleDark,overflow:'hidden'}}>
    <window.GeoWatermark color={TV.orange} style={{top:-40,right:40,width:360,height:340,opacity:0.18}} />
    <div style={{position:'relative',zIndex:1,maxWidth:TMW,margin:'0 auto',padding:'80px 32px'}}>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:64,alignItems:'center'}}>
        <div>
          <div style={{display:'inline-flex',alignItems:'center',gap:8,background:'rgba(255,255,255,0.12)',color:'#fff',fontSize:11,fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',padding:'6px 13px',marginBottom:20}}>
            <span style={{width:7,height:7,borderRadius:'50%',background:TV.orange}}></span> Online evaluation · tier-aware
          </div>
          <h2 className="vg-section-title" style={{ fontSize: 40,fontWeight:800,color:'#fff',letterSpacing:'-0.03em',lineHeight:1.08,margin:'0 0 16px',fontFamily:TFT}}>Know where you stand across all six functions.</h2>
          <p style={{fontSize:17,color:'rgba(255,255,255,0.66)',lineHeight:1.65,margin:'0 0 28px',maxWidth:520}}>Our NIST CSF evaluation scores your current state across all six functions — and maps every gap straight to the toolkit subcategory that closes it.</p>
          <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
            <window.Btn kind="accent" onClick={()=>onNav('evaluation')}>Start the evaluation <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
            <window.Btn kind="ghostLight" onClick={()=>onNav('evaluation')}>See how it works</window.Btn>
          </div>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:14}}>
          {[['target','Pick your target tier','Tier 1–4 — your choice shapes the evaluation depth and recommendations.'],['gauge','Get your readiness score','Instant maturity score across GV, ID, PR, DE, RS, and RC.'],['flag','Build your target profile','Every gap maps to the subcategory template that closes it.']].map(([ic,t,d],i)=>(
            <div key={i} style={{display:'flex',gap:16,background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.12)',padding:'20px 22px'}}>
              <div style={{width:44,height:44,background:'rgba(255,255,255,0.1)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><window.Icon name={ic} size={22} color="#fff" /></div>
              <div>
                <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:4}}>
                  <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,fontWeight:700,color:TV.orange}}>{String(i+1).padStart(2,'0')}</span>
                  <h3 style={{fontSize:16.5,fontWeight:700,color:'#fff',margin:0,fontFamily:TFT}}>{t}</h3>
                </div>
                <p style={{fontSize:13.5,color:'rgba(255,255,255,0.6)',lineHeight:1.55,margin:0}}>{d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ── PAGE ────────────────────────────────────────────────── */
const ToolkitNISTPage = ({ onNav }) => {
  const [modalAsset, setModalAsset] = React.useState(null);
  const [unlocked, setUnlocked] = React.useState(false);
  const sessionOk = () => { try { return !!sessionStorage.getItem('verigo_dl_ok'); } catch(e) { return false; } };
  React.useEffect(() => { if (sessionOk()) setUnlocked(true); }, []);
  const onDownload = (asset) => { if (sessionOk()) window.TK_NIST.generatePDF(asset, window.TK_NIST.getUser()||{}); else setModalAsset(asset); };
  const onModalSubmit = (form) => { window.TK_NIST.storeLead(form); try{sessionStorage.setItem('verigo_dl_ok','1');}catch(e){} setUnlocked(true); const a=modalAsset; setModalAsset(null); setTimeout(()=>window.TK_NIST.generatePDF(a,form),60); };
  const A = modalAsset ? window.TK_NIST.ASSETS[modalAsset] : null;
  return (
    <div>
      <NiHero onNav={onNav} />
      <NiOverview />
      <NiCoverage />
      <NiContents onDownload={onDownload} unlocked={unlocked} />
      <NiPricing onNav={onNav} />
      <NiEvalBand onNav={onNav} />
      {A && <window.LeadCaptureModal icon={A.icon} eyebrow={`Download · ${A.count} ${A.unit}`} heading={A.label} intro="Tell us where to send it and a practitioner can tailor it to your scope. Your PDF downloads immediately." cta="Download PDF" note="We'll only use your details to share the toolkit and follow up." onClose={()=>setModalAsset(null)} onSubmit={onModalSubmit} />}
    </div>
  );
};
Object.assign(window, { ToolkitNISTPage });
