const PROJECTS = [
  {
    tag: 'open source',
    title: 'claude-to-figma',
    role: 'Solo builder · open source',
    blurb:
      'Converts Claude Design HTML exports into fully editable Figma files. Semantic frames, auto-layout, component detection, and design tokens. 6k lines, 176 tests, built in one day from a single kickstart prompt.',
    metric: '1 prompt',
    metricLabel: '→ working tool',
    stack: ['TypeScript', 'Figma API', 'Claude Code'],
    year: '2026',
    href: 'https://github.com/brianleach/claude-to-figma',
  },
  {
    tag: 'rugiet',
    title: 'AI Conversational Intake Agent',
    role: 'Principal AI Lead · architect + builder',
    blurb:
      'Designed & built an AI-powered intake agent that scores clinical assessments across multiple health domains and returns personalized product recommendations.',
    metric: 'clinical-grade',
    metricLabel: 'HIPAA · production',
    stack: ['Claude', 'Agents', 'Tool use', 'React', 'Node'],
    year: '2025–now',
  },
  {
    tag: 'open source',
    title: 'claude-analytics',
    role: 'Solo builder · open source',
    blurb:
      'CLI that analyzes your local Claude Code sessions, scores your proficiency with a "Yegge Level" system, and gives AI-powered recommendations. Found real inefficiencies in my own usage.',
    metric: 'proficiency',
    metricLabel: 'scored + ranked',
    stack: ['TypeScript', 'Claude API', 'CLI'],
    year: '2026',
    href: 'https://github.com/brianleach/claude-analytics',
  },
  {
    tag: 'rugiet',
    title: 'Company-Wide AI Adoption',
    role: 'Principal AI Lead',
    blurb:
      'Rolled out Cursor, Claude Code and agentic workflows org-wide. Established AI adoption metrics + DORA program targeting 48-hr cycles at 95% success.',
    metric: '95%',
    metricLabel: 'shipping success · 48h',
    stack: ['Claude Code', 'Cursor', 'DORA', 'HIPAA'],
    year: '2025–now',
  },
  {
    tag: 'open source',
    title: 'openclaw-migrate',
    role: 'Solo builder · open source',
    blurb:
      'Claude Code skill that migrates OpenClaw cron jobs into Claude Code routines. Solved seven technical obstacles from environment config to OAuth.',
    metric: '6 crons',
    metricLabel: 'migrated',
    stack: ['Claude Code', 'Skills', 'TypeScript'],
    year: '2026',
    href: 'https://github.com/brianleach/openclaw-migrate',
  },
  {
    tag: 'rugiet',
    title: 'Rebrand + React Native App',
    role: 'Principal AI Lead · delivery lead',
    blurb:
      'Led Rugiet\'s full visual rebrand and shipped a new React Native mobile app in 24 days. Built with agentic dev workflows end-to-end.',
    metric: '24 days',
    metricLabel: 'concept → app store',
    stack: ['React Native', 'Claude Code', 'Cursor'],
    year: '2026',
  },
  {
    tag: 'hellofresh',
    title: 'Unified Meal Kit',
    role: 'Eng Manager · Frontend unification',
    blurb:
      'Unified 40+ features across multiple brands and codebases, reusing 13 core web pages across 11 markets.',
    metric: '$300M+',
    metricLabel: 'customer value',
    stack: ['React', 'Next.js', 'GraphQL', 'Go'],
    year: '2022–now',
  },
  {
    tag: 'factor',
    title: 'Factor 75 Rebuild',
    role: 'Sole React engineer → Sr. Engineer',
    blurb:
      'Rebuilt the consumer web on React/Redux/Node. Scaled from 3k to 300k meals/week through hypergrowth.',
    metric: '100×',
    metricLabel: 'weekly volume',
    stack: ['React', 'Redux', 'Node', 'Go'],
    year: '2019–2022',
  },
  {
    tag: 'orbitz',
    title: 'Orbitz iOS & iPad',
    role: 'Co-author, original native apps',
    blurb:
      'Co-built Orbitz\'s first native iOS and iPad apps. Inducted into Apple\'s App Store "Hall of Fame," 2010.',
    metric: 'Hall of Fame',
    metricLabel: 'App Store Essentials',
    stack: ['Objective-C', 'iOS SDK'],
    year: '2010',
  },
  {
    tag: 'hellofresh',
    title: 'Standalone Wallet',
    role: 'Technical lead',
    blurb:
      'Designed expirable, stacking, combo vouchers across 11 markets. Shipped seamless downgrade for retention.',
    metric: '$42M',
    metricLabel: 'CVA, incl. Cyber Week',
    stack: ['Go', 'Node', 'React'],
    year: '2023',
  },
  {
    tag: 'factor',
    title: 'Rails → Go + GraphQL',
    role: 'Initiator · architect',
    blurb:
      'Led migration off Rails to Go services behind a GraphQL gateway. Fixed persistent scalability pain.',
    metric: 'p95 ↓',
    metricLabel: 'latency & incidents',
    stack: ['Go', 'GraphQL', 'Apollo'],
    year: '2021',
  },
  {
    tag: 'hellofresh',
    title: 'B2B Bulk Platform',
    role: 'Technical lead',
    blurb:
      'New B2B ordering on Shopify with custom automations + logistics integration for enterprise customers.',
    metric: 'new channel',
    metricLabel: '7-Eleven, gyms, Starbucks',
    stack: ['Shopify', 'Node', 'Go'],
    year: '2024',
  },
];

function ProjectCard({ p, i }) {
  return (
    <article className="proj" style={{ '--i': i }}>
      <header className="proj-head">
        <span className="proj-tag">{p.tag}</span>
        <span className="proj-year mono small muted">{p.year}</span>
      </header>
      <h3 className="proj-title">{p.title}</h3>
      <div className="proj-role mono small muted">{p.role}</div>
      <p className="proj-blurb">{p.blurb}</p>
      <div className="proj-metric">
        <span className="metric-num">{p.metric}</span>
        <span className="metric-label">{p.metricLabel}</span>
      </div>
      <div className="proj-reveal">
        <div className="proj-stack">
          {p.stack.map((s) => (
            <span key={s} className="chip">{s}</span>
          ))}
        </div>
      </div>
    </article>
  );
}

function Projects() {
  return (
    <section id="work" className="section" data-screen-label="03 Work">
      <div className="section-head">
        <span className="section-num">03</span>
        <h2 className="section-title">Selected work</h2>
        <span className="section-rule" />
        <span className="section-aside mono small muted">hover for stack</span>
      </div>
      <div className="proj-grid">
        {PROJECTS.map((p, i) => <ProjectCard key={p.title} p={p} i={i} />)}
      </div>
    </section>
  );
}

window.Projects = Projects;
window.PROJECTS = PROJECTS;