// ---------- Blog ----------
function BlogPage() {
  const posts = [
    { t: 'Why offline-first is the only honest promise in site software', d: '2026.04.08', cat: 'Field notes', read: '6 min', excerpt: 'Cellular signal dies in basements. A tool that needs connectivity loses defects. Here\'s how we rebuilt sync from the ground up.' },
    { t: 'The anatomy of a compliance-ready defect report', d: '2026.03.22', cat: 'Playbook', read: '9 min', excerpt: 'What goes into a handover report that stands up to certifier scrutiny? Five sections, one audit trail, zero spreadsheets.' },
    { t: 'Trade assignment: the two-tap standard', d: '2026.03.02', cat: 'Product', read: '4 min', excerpt: 'We rebuilt assignment around one question: what would a site supervisor do if they had 90 seconds between tasks?' },
    { t: 'Photo metadata as evidence', d: '2026.02.14', cat: 'Engineering', read: '7 min', excerpt: 'GPS, heading, timestamp, device ID — how we make on-site photos defensible in dispute resolution.' },
    { t: 'Field report: Hartley Build\'s 240-dwelling rollout', d: '2026.01.28', cat: 'Case study', read: '5 min', excerpt: 'How one of NSW\'s largest multi-residential builders moved from paper registers to IssuesId in 14 days.' },
  ];
  return (
    <SideRailLayout current="/blog">
      <Block pad="56px 56px 32px">
        <Headline eyebrow="Resources" title="Field notes from the defect register." subtitle="How we think about site software, compliance, and building things that don\'t break at 4pm on a Friday." align="left" />
      </Block>
      <Block pad="0 56px 72px">
        {posts.map((p, i) => (
          <a key={p.t} href="#/blog" style={{
            display: 'grid', gridTemplateColumns: '100px 1fr auto', gap: 32,
            padding: '28px 0', borderTop: '1px solid var(--rule)', alignItems: 'flex-start',
            cursor: 'pointer', color: 'inherit',
          }} className="blog-row"
          onMouseEnter={e => { e.currentTarget.style.background = 'var(--paper-2)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
          >
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.05em' }}>{p.d}</div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--accent)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>{p.cat}</div>
              <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 8, textWrap: 'balance' }}>{p.t}</div>
              <div style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-3)', maxWidth: 540, textWrap: 'pretty' }}>{p.excerpt}</div>
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)' }}>{p.read}</div>
          </a>
        ))}
      </Block>
      <style>{`@media(max-width:720px){.blog-row{grid-template-columns:1fr !important;} .blog-row > :last-child{display:none;}}`}</style>
    </SideRailLayout>
  );
}

window.BlogPage = BlogPage;