const { Badge } = window.WilliamPittsDesignSystem_a0390b;
// First post is scaffolded — William writes the prose into each section.
// Deliberately features his strongest, correct arguments; the dated/incorrect
// points from his original draft are left out on purpose.
const POSTS = [
  { id:'ai-critique', title:'My AI Critique', draft:true,
    standfirst:'Notes from building with agentic AI daily — where it’s genuinely useful, and where it’s confidently wrong.',
    sections:[
      ['Confident wrongness is invisible','The Gmail Smart Reply that invented a false “feeling better” — statistically likely, but wrong for me. Why one bad line scales to 10,000 bad lines of code, and the case for a human checkpoint.'],
      ['AI adds, never prunes','1,000+ lines for a ~150-line job. It works, but it’s unreadable — and that’s a big part of why QA work is exploding.'],
      ['The bottleneck is knowing the right question','Context engineering: the model won’t write the question for you. Judgment is the scarce part.'],
      ['The moat is what was never written down','Data cannibalization: as people ask AI instead of forums, value concentrates in the novel and the tacit.'],
    ] },
];
function BlogScreen({ onOpen }) {
  const m = window.innerWidth <= 720;
  const post = POSTS[0];
  return <main style={{padding:m?'48px 20px 64px':'48px 40px 64px',maxWidth:820,margin:'0 auto'}}>
    <div style={{display:'flex',alignItems:'baseline',gap:20,marginBottom:12}}>
      <span style={{fontFamily:'var(--font-display)',fontSize:'var(--display-lg)',lineHeight:.95}}>05</span>
      <h1 style={{fontSize:'var(--display-lg)'}}>Blog</h1>
    </div>
    <p style={{fontSize:15,color:'var(--text-muted)',margin:'0 0 40px',maxWidth:'62ch'}}>Field notes on building with — and evaluating — AI.</p>
    <article>
      <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:12,flexWrap:'wrap'}}>
        <h2 style={{fontSize:'clamp(32px, 5vw, 52px)',lineHeight:1,textTransform:'uppercase',fontFamily:'var(--font-display)'}}>{post.title}</h2>
        {post.draft && <Badge variant="outline">Draft</Badge>}
      </div>
      <p style={{fontSize:18,lineHeight:1.6,margin:'0 0 36px',maxWidth:'64ch'}}>{post.standfirst}</p>
      {post.sections.map(([h, prompt], i) => (
        <section key={i} style={{marginBottom:28,paddingBottom:28,borderBottom:'var(--border-hair) solid var(--border-subtle)'}}>
          <h3 style={{fontFamily:'var(--font-display)',fontSize:24,textTransform:'uppercase',margin:'0 0 10px',lineHeight:1.05}}>{String(i+1).padStart(2,'0')} — {h}</h3>
          <p style={{fontSize:15,lineHeight:1.7,color:'var(--text-muted)',margin:0}}>{prompt}</p>
          <p style={{fontFamily:'var(--font-mono)',fontSize:12,color:'var(--text-muted)',margin:'12px 0 0'}}>[ William: write 2–4 short paragraphs here — your real examples, kept current. ]</p>
        </section>
      ))}
    </article>
  </main>;
}
Object.assign(window, { BlogScreen });