const EXPERIENCE = [
  {
    company: 'Multiskills IT',
    role: 'lead AI automation engineer (enterprise & full stack)',
    dates: 'feb 2025 — present',
    context: 'Enterprise automation and full-stack builds. Acting as the bridge between generative AI and operational workflows; architecting service layers that cover consulting, implementation, and enablement.',
    stack: ['Microsoft Power Automate', 'n8n', 'Partner Center', 'WhatsApp API', 'custom CMS'],
    ships: [
      'Engineered hybrid automation architecture (Power Automate + n8n) to manage Microsoft CSP licenses via Partner Center. Saved hours of manual tracking and prevented revenue leakage.',
      'Built custom end-to-end ecosystem for a real estate client integrating WhatsApp into a custom CMS, managing full lifecycle from listings to website synchronization.',
    ],
    worklinks: [{ label: 'read the automations', to: 'work' }],
  },
  {
    company: 'Flow Lab Systems',
    role: 'AI automation engineer',
    dates: 'oct 2025 — apr 2026',
    context: 'AI-powered content operations for a creative agency. Airtable and Softr as the substrate; LLM chains driving the research and generation.',
    stack: ['Airtable', 'Softr', 'n8n', 'LLM chain'],
    ships: [
      'Architected an AI content ops ecosystem capable of generating 100+ content pieces in minutes.',
      'Built deep-dive research workflows analyzing client onboarding data to generate brand-aligned content.',
      'Built internal follow-up automations for an existing client.',
    ],
    worklinks: [{ label: 'see the flow lab writeup', to: 'work' }],
  },
  {
    company: 'Verstand AI',
    role: 'AI delivery manager (healthcare operations)',
    dates: 'jan 2025 — nov 2025',
    context: 'HIPAA-compliant voice agents for healthcare operations. Responsible for architecture, delivery, and the human-in-the-loop handoff that makes the system safe to deploy.',
    stack: ['Retell', 'GoHighLevel', 'custom latency tuning'],
    ships: [
      'Architected HIPAA-compliant autonomous voice agents (Retell) connected to GoHighLevel, solving critical latency issues for natural patient conversations.',
      'Managed the human-in-the-loop handoff, verifying AI agent accuracy in CRM tagging and training partner teams on intervention protocols.',
    ],
    worklinks: [{ label: 'see the verstand writeup', to: 'work' }],
  },
  {
    company: 'RevGeni AI',
    role: 'AI product engineer (rapid prototyping)',
    dates: 'mar 2025 — sep 2025',
    context: 'Rapid prototyping-to-production pipeline. The job was to close the distance between an n8n whiteboard and a shippable feature.',
    stack: ['n8n', 'Claude Code', 'production handoff'],
    ships: [
      'Used Claude Code to rapidly refactor n8n prototypes into code-based production features. Drastically shortened idea-to-product feedback loops.',
      'Built logic for agents, workflows, and pipelines while bridging product logic and the senior dev team for scalable builds.',
    ],
    worklinks: [{ label: 'see the RevGeni writeup', to: 'work' }],
  },
  {
    company: 'Multiskills IT',
    role: 'IoT & automation engineer (Home Assistant / YAML)',
    dates: 'mar 2023 — sep 2023',
    context: 'A co-op focused on offline-first IoT automation. Complex trigger logic in YAML against physical sensor streams; local servers where cloud reliance wasn’t acceptable.',
    stack: ['Home Assistant', 'YAML', 'Raspberry Pi'],
    ships: [
      'Programmed complex automation logic using YAML within Home Assistant, building custom triggers based on sensor data.',
      'Configured and deployed local servers (Raspberry Pi) to manage secure, offline-first automation networks.',
    ],
    worklinks: [{ label: 'see the home assistant writeup', to: 'work' }],
  },
  {
    company: 'Africa Fintech Foundry',
    role: 'software engineering intern (backend focus)',
    dates: 'sep 2021 — oct 2021',
    context: 'First internship. Backend fundamentals: MVC patterns, end-to-end deployment, the unglamorous plumbing of getting a web app to respond to a request.',
    stack: ['MVC', 'web servers', 'hosting'],
    ships: [
      'Built foundational web applications using MVC architecture patterns.',
      'Handled end-to-end deployment lifecycle, configuring web servers and hosting environments.',
    ],
    worklinks: [],
  },
];

function ExperienceHero() {
  return (
    <header className="pf-exp-hero" data-screen-label="experience-hero">
      <div className="pf-wp-num">experience</div>
      <div className="pf-exp-hero-body">
        <span className="pf-wp-kicker">roles · reverse chronological</span>
        <h1 className="pf-wp-title">experience<span className="pf-hero-dot">.</span></h1>
        <p className="pf-wp-lede">
          The structured version. Professional since late 2024, internship
          2021, co-op 2023. Each role: company, dates, context, stack, what
          shipped. Where work writeups exist, links across.
        </p>
      </div>
    </header>
  );
}

function ExperienceEntry({ e, onNav }) {
  return (
    <article className="pf-exp-entry">
      <div className="pf-exp-dates">{e.dates}</div>
      <div className="pf-exp-company">
        {e.company}
        <span className="pf-exp-role">{e.role}</span>
      </div>
      <div className="pf-exp-body">
        <p className="pf-exp-context" dangerouslySetInnerHTML={{ __html: e.context }} />
        {e.stack && e.stack.length > 0 && (
          <ul className="pf-exp-stack">
            {e.stack.map((s, i) => (
              <li key={i}>{s}{i < e.stack.length - 1 ? ' · ' : ''}</li>
            ))}
          </ul>
        )}
        <ul className="pf-exp-ships">
          {e.ships.map((s, i) => <li key={i}>{s}</li>)}
        </ul>
        {e.worklinks && e.worklinks.length > 0 && (
          <div className="pf-exp-links">
            {e.worklinks.map((l, i) => (
              <a key={i} href={'#/' + l.to}
                 onClick={(ev) => { ev.preventDefault(); onNav(l.to); }}>
                {l.label} →
              </a>
            ))}
          </div>
        )}
      </div>
    </article>
  );
}

function ExperiencePage({ onNav }) {
  return (
    <>
      <ExperienceHero />
      <section className="pf-exp-list" data-screen-label="experience-list">
        {EXPERIENCE.map((e, i) => <ExperienceEntry key={i} e={e} onNav={onNav} />)}
      </section>

      <section className="pf-exp-before" data-screen-label="experience-before">
        <div className="pf-wp-section">
          <div className="pf-wp-section-label">before that · university</div>
          <div className="pf-wp-section-body">
            <h2>Covenant University — computer science.</h2>
            <p>
              BSc. computer science · jan 2021 — oct 2024 ·{' '}
              <strong>4.48 / 5.00 CGPA</strong>.
            </p>
            <ul className="pf-wp-list">
              <li><span className="idx">01</span><span>Won 2nd place and a cash prize in an Oracle-hosted data analysis hackathon.</span></li>
              <li><span className="idx">02</span><span>Part of the tutorial team, running sessions for students and contributing to peer academic success.</span></li>
              <li><span className="idx">03</span><span>Led assignment and project groups. Leadership and teamwork in academic settings.</span></li>
              <li><span className="idx">04</span><span>Sports coordinator, NACOSS (National Association of Computer Science Students), Covenant chapter.</span></li>
              <li><span className="idx">05</span><span>Coached the university soccer club to its first-ever medal (3rd place); gold medals in handball and rugby.</span></li>
            </ul>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { ExperiencePage });