const {Card,Tag}=window.HelixCyberDesignSystem_c2a1e7||{};
function NewsIndex(){
const [posts,setPosts]=React.useState(null);
const [err,setErr]=React.useState(null);
const q=new URLSearchParams(location.search).get('cat')||'all';
const [cat,setCat]=React.useState(q);
React.useEffect(()=>{
fetch('news/index.json').then(r=>{if(!r.ok)throw new Error(r.status);return r.json();})
.then(setPosts).catch(e=>setErr(String(e)));
},[]);
const CATS=[
{id:'all',l:'All',d:'CVE alerts, incidents, playbooks'},
{id:'news',l:'Dispatch',d:'CVE, incidents, vendor advisories'},
{id:'tutorial',l:'Playbooks',d:'WAF, Nginx, hardening, forensics'}
];
if(err)return <div><BlogNav/><div style={{padding:64,fontFamily:'var(--font-mono)',color:'var(--text-muted)'}}>Failed to load news/index.json — {err}</div><BlogFoot/></div>;
if(!posts)return <div><BlogNav/><div style={{padding:64,fontFamily:'var(--font-mono)',color:'var(--text-faint)'}}>Loading…</div><BlogFoot/></div>;
const go=id=>{setCat(id);const u=new URL(location.href);if(id==='all')u.searchParams.delete('cat');else u.searchParams.set('cat',id);history.replaceState(null,'',u);};
const list=(cat==='all'?posts:posts.filter(p=>p.cat===cat)).slice().sort((a,b)=>b.date.localeCompare(a.date));
const n=id=>id==='all'?posts.length:posts.filter(p=>p.cat===id).length;
return <div>
<BlogNav/>
<div style={{maxWidth:840,margin:'0 auto',padding:'56px 40px 0'}}>
<div style={{fontFamily:'var(--font-mono)',fontSize:12,letterSpacing:'.08em',color:'var(--text-faint)',marginBottom:12}}>/NEWS</div>
<h1 style={{fontSize:'var(--text-2xl)',fontWeight:700,margin:'0 0 12px'}}>Security news & playbooks</h1>
<p style={{fontSize:15,color:'var(--text-muted)',maxWidth:640,marginBottom:12}}>CVE alerts, incidents, WAF and hardening notes. Not a bypass cookbook.</p>
<p style={{fontSize:13,color:'var(--text-faint)',marginBottom:36}}>{posts.length} posts</p>
<div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10,marginBottom:40}}>
{CATS.map(c=><button key={c.id} onClick={()=>go(c.id)} style={{textAlign:'left',cursor:'pointer',background:cat===c.id?'var(--fg-1)':'var(--bg-1)',color:cat===c.id?'var(--bg-0)':'var(--text-body)',border:'1px solid var(--border-default)',borderRadius:'var(--radius-2)',padding:'14px 16px'}}>
<div style={{fontSize:13,fontWeight:600,marginBottom:4}}>{c.l} <span style={{fontWeight:400,opacity:.7}}>{n(c.id)}</span></div>
<div style={{fontSize:12,opacity:.75,lineHeight:1.4}}>{c.d}</div>
</button>)}
</div>
<div style={{display:'flex',flexDirection:'column',gap:14}}>
{list.map(p=><a key={p.slug} href={'news/'+encodeURIComponent(p.slug)+'.html'} style={{textDecoration:'none',display:'block'}}>
<Card hoverable style={{cursor:'pointer'}}>
<div style={{display:'flex',alignItems:'center',gap:12,marginBottom:10}}>
<span style={{fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'.1em',color:'var(--brand)'}}>{p.cat==='tutorial'?'/PLAYBOOK':'/DISPATCH'}</span>
<span style={{fontSize:11,color:'var(--text-faint)'}}>{p.date} · {p.read}</span></div>
<div style={{fontSize:18,fontWeight:700,color:'var(--text-body)',marginBottom:8}}>{p.title}</div>
<div style={{fontSize:13,color:'var(--text-muted)',marginBottom:14,lineHeight:1.6}}>{p.excerpt}</div>
<div style={{display:'flex',gap:8,flexWrap:'wrap'}}>{(p.tags||[]).map(t=><Tag key={t}>{t}</Tag>)}</div>
</Card></a>)}
</div>
</div>
<BlogFoot/>
</div>;
}
window.Page=NewsIndex;