const POSTS = [
  {
    title: 'The Prompt Is the Source Code',
    excerpt:
      'I wrote a kickstart prompt one evening and handed it to Claude Code. By morning: a TypeScript monorepo, 19 commits, 176 tests, and a working Figma plugin. The prompt is checked into the repo. It\'s the most important file in the project.',
    date: 'Apr 26, 2026',
    read: '6 min',
    tag: 'AI',
    href: 'https://www.linkedin.com/pulse/draft/preview/7451393724036870144/',
    featured: true,
  },
  {
    title: 'Migrating OpenClaw Cron Jobs to Claude Code: Building openclaw-migrate',
    excerpt:
      'Documenting the migration of six OpenClaw cron jobs to Claude Code routines. Seven technical obstacles, from environment config to OAuth, and the open-source tool I built to automate it.',
    date: 'Apr 20, 2026',
    read: '10 min',
    tag: 'AI',
    href: 'https://www.linkedin.com/pulse/migrating-openclaw-cron-jobs-claude-code-building-brian-leach-6m2wc/',
  },
  {
    title: 'I Built a Tool That Tells You If You\'re Actually Good at Claude Code',
    excerpt:
      'claude-analytics is an open-source CLI that analyzes your local Claude Code sessions, scores your proficiency, and gives AI-powered recommendations on what to fix.',
    date: 'Apr 14, 2026',
    read: '8 min',
    tag: 'AI',
    href: 'https://www.linkedin.com/pulse/i-built-tool-tells-you-youre-actually-good-claude-code-brian-leach-qrggf/',
  },
  {
    title: 'I Migrated My OpenClaw Skills to Claude Managed Agents. Here\'s What I Learned.',
    excerpt:
      'Converting five transit skills into a Claude Managed Agent for real-time train info across four cities. What works, what doesn\'t, and why managed agents aren\'t ready for conversational use yet.',
    date: 'Apr 10, 2026',
    read: '7 min',
    tag: 'AI',
    href: 'https://www.linkedin.com/pulse/i-migrated-my-openclaw-skills-claude-managed-agents-heres-brian-leach-d3tic/',
  },
];

function BlogCard({ p }) {
  return (
    <a className={'post ' + (p.featured ? 'post-feat' : '')} href={p.href} target="_blank" rel="noopener">
      <div className="post-top">
        <span className="post-tag">{p.tag}</span>
        <span className="mono small muted">{p.date} · {p.read}</span>
      </div>
      <h3 className="post-title">{p.title}</h3>
      <p className="post-excerpt">{p.excerpt}</p>
      <div className="post-more mono small">read on linkedin <span className="arrow">↗</span></div>
    </a>
  );
}

function Blog() {
  return (
    <section id="writing" className="section" data-screen-label="04 Writing">
      <div className="section-head">
        <span className="section-num">04</span>
        <h2 className="section-title">Writing</h2>
        <span className="section-rule" />
        <a className="section-aside mono small link" href="https://www.linkedin.com/in/bleach/recent-activity/articles/" target="_blank" rel="noopener">all posts ↗</a>
      </div>
      <div className="post-grid">
        {POSTS.map((p, i) => <BlogCard key={i} p={p} />)}
      </div>
    </section>
  );
}

window.Blog = Blog;
window.POSTS = POSTS;