function WorkHero() {
  return (
    <header className="pf-wp-hero" data-screen-label="work-hero">
      <div className="pf-wp-num">work</div>
      <div className="pf-wp-head">
        <span className="pf-wp-kicker">products · automations</span>
        <h1 className="pf-wp-title">the work<span className="pf-hero-dot">.</span></h1>
        <p className="pf-wp-lede">
          Two shelves. Products are the long-form ventures I&rsquo;m building.
          Automations are shorter, scoped pieces shipped for clients. Real
          systems in production, not demos.
        </p>
      </div>
    </header>
  );
}

function WorkEntry({ num, name, kind, role, stack, status, body }) {
  return (
    <article className="pf-entry">
      <div className="pf-entry-head">
        <span className="pf-entry-num">{num}</span>
        <div>
          <h3 className="pf-entry-name">{name}</h3>
          <div className="pf-entry-meta">
            {role && <><span>{role}</span><span>·</span></>}
            {stack && <><span>{stack}</span><span>·</span></>}
            {kind && <><span>{kind}</span><span>·</span></>}
            <span className="pf-entry-status">{status}</span>
          </div>
        </div>
        <span className="pf-entry-open" style={{ color: 'var(--stone)', borderBottomColor: 'var(--stone)', cursor: 'default' }}>
          writeup pending
        </span>
      </div>
      <p className="pf-entry-body">{body}</p>
    </article>
  );
}

function Products() {
  const products = [
    {
      num: '01', name: 'Forge / Vibe2Prod',
      role: 'design, engineering',
      stack: 'Python, FastAPI, Claude Code',
      status: 'in progress',
      body: '[PLACEHOLDER] A local CLI for code quality + security scanning. Runs offline. Config in YAML. Flags actionable findings first. Full writeup coming. Copy pending.',
    },
    {
      num: '02', name: 'Verstand AI',
      role: 'product, design',
      stack: 'Next.js, Supabase, Pydantic v2',
      status: 'private beta',
      body: '[PLACEHOLDER] AI workflow automation for small ops teams. Three concrete loops, not an agent marketplace. Full writeup coming. Copy pending.',
    },
    {
      num: '03', name: 'Multiskills',
      role: 'founding engineer',
      stack: 'Next.js, Postgres',
      status: 'shipping',
      body: '[PLACEHOLDER] B2B SaaS for a niche I can\'t name publicly yet. Simple product, real customers, real revenue. Full writeup coming. Copy pending.',
    },
  ];
  return (
    <section className="pf-worklist" data-screen-label="work-products">
      <p className="pf-work-intro" style={{ paddingBottom: 16 }}>
        Ventures I&rsquo;m building as principal. Longer narratives, fact
        sheets, decisions, and status. Writeups pending real copy.
      </p>
      {products.map(p => <WorkEntry key={p.num} {...p} />)}
    </section>
  );
}

function Automations() {
  const items = [
    {
      num: '01',
      name: 'Microsoft CSP — hybrid license automation',
      client: 'Multiskills IT',
      stack: 'Microsoft Power Automate, n8n, Partner Center API',
      status: 'shipped · 2025',
      body: '[PLACEHOLDER · CLIENT: Multiskills IT] Hybrid automation architecture spanning Power Automate and n8n, managing Microsoft CSP licenses through Partner Center. Eliminated manual tracking and prevented revenue leakage. [OUTCOME: hours saved weekly].',
    },
    {
      num: '02',
      name: 'Real estate — WhatsApp ↔ CMS ecosystem',
      client: '[CLIENT: real estate firm]',
      stack: 'WhatsApp Business API, custom CMS, website sync',
      status: 'shipped · 2025',
      body: '[PLACEHOLDER] Full lifecycle ecosystem integrating WhatsApp into a custom CMS. Listings captured by agents via WhatsApp flow directly into the CMS and synchronize out to the public website. Single source of truth.',
    },
    {
      num: '03',
      name: 'Flow Lab — AI content ops ecosystem',
      client: 'Flow Lab Systems',
      stack: 'Airtable, Softr, n8n, LLM chain',
      status: 'shipped · 2025-26',
      body: '[PLACEHOLDER] AI content ops ecosystem integrating Airtable and Softr. Research workflow that reads client onboarding data and generates brand-aligned content. [OUTCOME: 100+ pieces generated in minutes].',
    },
    {
      num: '04',
      name: 'HIPAA-compliant voice agents — Retell + GHL',
      client: 'Verstand AI',
      stack: 'Retell, GoHighLevel, custom latency tuning',
      status: 'shipped · 2025',
      body: '[PLACEHOLDER] Architected HIPAA-compliant autonomous voice agents on Retell, connected to GoHighLevel, tuned to the latency tolerances of natural patient conversations. Managed human-in-the-loop handoff and partner-team training.',
    },
    {
      num: '05',
      name: 'RevGeni AI — rapid prototyping to production',
      client: 'RevGeni AI',
      stack: 'n8n, Claude Code, production handoff',
      status: 'shipped · 2025',
      body: '[PLACEHOLDER] Used Claude Code to refactor n8n prototypes into code-based production features. Drastically shortened the idea-to-product feedback loop. Bridged product logic and the senior dev team for scalable builds.',
    },
    {
      num: '06',
      name: 'Home Assistant — offline-first IoT automation',
      client: 'Multiskills IT',
      stack: 'Home Assistant, YAML, Raspberry Pi',
      status: 'shipped · 2023',
      body: '[PLACEHOLDER] Complex automation logic in YAML within Home Assistant, custom triggers against sensor data. Deployed local Raspberry Pi servers for secure, offline-first automation networks.',
    },
  ];
  return (
    <section className="pf-worklist" data-screen-label="work-automations">
      <p className="pf-work-intro" style={{ paddingBottom: 16 }}>
        Scoped client work. Named where I have permission; described where I
        don&rsquo;t. Role, stack, what shipped, what was learned. Writeups
        pending real copy; placeholders marked below.
      </p>
      {items.map(it => (
        <WorkEntry
          key={it.num}
          num={it.num}
          name={it.name}
          kind={it.client}
          stack={it.stack}
          status={it.status}
          body={it.body}
        />
      ))}
    </section>
  );
}

function WorkPage() {
  const [tab, setTab] = React.useState(() => localStorage.getItem('pf_work_tab') || 'products');
  const setAndSave = (t) => { setTab(t); localStorage.setItem('pf_work_tab', t); };
  return (
    <>
      <WorkHero />
      <div className="pf-work-tabs">
        <button
          className={'pf-work-tab' + (tab === 'products' ? ' is-active' : '')}
          onClick={() => setAndSave('products')}>
          products<span className="pf-work-tab-count">03</span>
        </button>
        <button
          className={'pf-work-tab' + (tab === 'automations' ? ' is-active' : '')}
          onClick={() => setAndSave('automations')}>
          automations<span className="pf-work-tab-count">06</span>
        </button>
      </div>
      {tab === 'products' ? <Products /> : <Automations />}
    </>
  );
}

Object.assign(window, { WorkPage });