function MeAI() {
  const projects = [
    {
      eyebrow: 'Web App',
      title: 'Heft',
      lede: 'No app on the market tracked my workouts the way I wanted, so I’m testing it at the moment, available soon. 💪',
      tags: ['Claude Design', 'Claude Code', 'Supabase', 'Vercel', 'GitHub'],
    },
    {
      eyebrow: 'Automation Workflow',
      title: 'Planetarium ticket alert',
      lede: 'Prague Planetarium drops new shows rarely, and the good seats go fast. I got tired of missing out, so I built a script that checks for me.',
      tags: ['Claude Code', 'GitHub'],
    },
    {
      eyebrow: 'Chrome Extension',
      title: 'YouTube Shorts blocker',
      lede: 'Shorts were quietly eating my attention span and I had better things to do. So Claude and I built a browser extension to make them disappear.',
      tags: ['Claude Code'],
    },
    {
      eyebrow: 'Website',
      title: 'This portfolio',
      lede: 'Started in Figma, designed in Claude Design, shipped with Claude Code. Meta? A little. Worth it.',
      tags: ['Figma', 'Claude Design', 'Claude Code', 'Vercel', 'GitHub'],
    },
  ];

  return (
    <div className="meai">
      <h2 className="work-title">Me &amp; AI</h2>
      <p className="meai-intro">
        I use AI to scratch my own itches — small scripts, apps or tools. Outside of work, I'm still a
        product builder. AI just means I can actually ship the things I dream up.
      </p>
      <div className="meai-grid">
        {projects.map((p, i) => (
          <div key={i} className="meai-card">
            <div className="case-eyebrow-row">
              <span className="case-eyebrow">{p.eyebrow}</span>
              <span className="case-count">{i + 1} / {projects.length}</span>
            </div>
            <h3 className="case-title" style={{ maxWidth: 'none' }}>{p.title}</h3>
            <p className="case-lede">
              {p.lede}
              {p.link && <> → <a href={p.link.href} target="_blank" rel="noopener noreferrer">{p.link.label}</a></>}
            </p>
            <div className="skill-chips">
              {p.tags.map((t, j) => (
                <span key={j} className="skill-chip">{t}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
window.MeAI = MeAI;