function BlogIndex(){
const posts=window.POSTS;
const [tag,setTag]=React.useState('All');
const tags=['All',...new Set(posts.map(p=>p.tag))];
const shown=tag==='All'?posts:posts.filter(p=>p.tag===tag);
return <section className="wrap sec" style={{paddingTop:0}}>
<div className="reveal" style={{display:'flex',gap:8,flexWrap:'wrap',marginBottom:'clamp(20px,3vw,36px)'}}>
{tags.map(t=><button key={t} onClick={()=>setTag(t)} className="pill" style={{cursor:'pointer',border:'none',minHeight:44,
background:t===tag?'var(--brand-100)':'transparent',color:t===tag?'var(--brand-700)':'var(--ink-500)'}}>{t}</button>)}
</div>
<div className="postlist">
{shown.map(p=><PostCard key={p.slug} post={p}/>)}
</div>
<p className="small" style={{marginTop:32}}>Posts are written in Markdown and live in <code>content/</code> — add a file, add a line to <code>posts.js</code>, and it appears here.</p>
</section>;
}

mountPage(<Page active="Blog">
<PageHead eyebrow="Blog" title="Notes from the workshop" lead="Whatever we're thinking through — design, engineering, the odd tangent, and how the work is going."/>
<BlogIndex/>
</Page>);