/* global React */
const expStyles = {
  section: { background: 'var(--bg-1)' },
  scanRow: {
    display: 'flex', flexWrap: 'wrap', gap: 'var(--s-3)',
    padding: 'var(--s-5) 0', borderTop: 'var(--border-hair)', borderBottom: 'var(--border-hair)',
    marginBottom: 'var(--s-8)',
    alignItems: 'center', justifyContent: 'space-between',
  },
  scanLabel: { fontSize: 11, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-3)' },
  scanPills: { display: 'flex', gap: 8, flexWrap: 'wrap' },
  durPill: {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '6px 12px', borderRadius: 'var(--r-pill)',
    background: 'var(--latus-light-blue)', color: 'var(--latus-dark-blue)',
    fontSize: 12, fontWeight: 500, letterSpacing: 0,
  },
  spine: {
    position: 'relative',
    paddingLeft: 32,
  },
  spineLine: {
    position: 'absolute', left: 6, top: 12, bottom: 12, width: 1,
    background: 'var(--line-1)',
  },
  role: {
    position: 'relative',
    padding: 'var(--s-6) 0',
    borderTop: 'var(--border-hair)',
  },
  roleNode: {
    position: 'absolute', left: -32, top: 'calc(var(--s-6) + 6px)',
    width: 13, height: 13,
    border: '1.5px solid var(--latus-dark-blue)',
    background: 'var(--bg-1)',
    borderRadius: 0,
  },
  roleNodeActive: {
    background: 'var(--latus-indigo)',
    borderColor: 'var(--latus-indigo)',
  },
  roleHead: {
    display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'var(--s-6)',
    alignItems: 'start',
  },
  meta: { display: 'flex', flexDirection: 'column', gap: 8 },
  company: { fontSize: 21, fontWeight: 500, color: 'var(--fg-1)', letterSpacing: '-0.01em', margin: 0 },
  title: { fontSize: 15, fontWeight: 400, color: 'var(--fg-2)', margin: 0 },
  dates: { fontSize: 13, color: 'var(--fg-3)', letterSpacing: 0 },
  metaRow: { display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center', marginTop: 6 },
  tag: {
    fontSize: 11, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase',
    color: 'var(--fg-3)',
    padding: '4px 8px', border: '1px solid var(--line-1)', borderRadius: 'var(--r-1)',
  },
  intro: {
    fontStyle: 'italic',
    fontSize: 14.5, lineHeight: 1.55,
    color: 'var(--fg-2)', fontWeight: 300,
    margin: '0 0 var(--s-4) 0',
  },
  subHead: {
    fontSize: 13, fontWeight: 500, color: 'var(--fg-1)',
    letterSpacing: 0,
    margin: 'var(--s-2) 0 var(--s-3) 0',
    paddingBottom: 6,
    borderBottom: '1px solid var(--line-1)',
    display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 'var(--s-3)',
    flexWrap: 'wrap',
  },
  subHeadSub: { fontSize: 12, color: 'var(--fg-3)', fontWeight: 400, fontStyle: 'italic' },
  bullets: { display: 'flex', flexDirection: 'column', gap: 10, listStyle: 'none', padding: 0, margin: 0 },
  bullet: { fontSize: 14.5, fontWeight: 400, color: 'var(--fg-1)', lineHeight: 1.55, paddingLeft: 18, position: 'relative' },
  bulletMark: { position: 'absolute', left: 0, top: '0.65em', width: 8, height: 1, background: 'var(--latus-dark-blue)' },
  bulletStrong: { fontWeight: 500 },
};

const ROLES = [
  {
    company: 'Latus',
    title: 'AI Engineer',
    dates: 'Jun 2024 — Present',
    duration: 'Moving into year 3',
    location: 'Amsterdam / Remote',
    contract: 'Independent',
    active: true,
    intro: 'Independent AI engineering practice: strategy, architecture, implementation. Multiple concurrent client engagements; Het Kennisinstituut (Dutch medical association) is the main one, moving into its third year.',
    groups: [
      {
        title: 'Main engagement · Het Kennisinstituut',
        sub: 'Clinical guidelines platform · ~400K monthly users · 11,000+ published documents · moving into year 3',
        bullets: [
          { lead: 'AI search (clinician-facing).', rest: 'Currently architecting and building the AI search system end-to-end (ingestion, indexing into Azure AI Search, query sanitisation, retrieval API, serving layer) for a platform that handles ~70k searches per month across 11,000+ documents.' },
          { lead: 'Self-service data warehouse (administrative & PM staff).', rest: 'End-to-end pipeline combining scraped and API sources with quality monitoring. Non-technical users now run ad-hoc queries directly; insights that previously took analysts weeks land in seconds.' },
          { lead: 'Editorial GenAI tooling (advisor-facing, internal).', rest: 'LLM-assisted workflows for the team authoring clinical guidelines, improving both quality and throughput.' },
        ],
      },
      {
        title: 'Other engagements',
        sub: '2025 – Present',
        bullets: [
          { lead: 'Financial document pipeline API (fintech client).', rest: 'OCR plus LLM classification plus cross-field validation, with structured output. Handles messy scans autonomously and flags low-confidence extractions instead of guessing.' },
          { lead: 'Text-to-SQL analytics bot (innovation consortium).', rest: 'A frontend for non-technical users on top of schema-aware query generation, with a validation pass before execution. Self-serve answers to questions that previously needed an analyst.' },
          { lead: 'Legal case-analysis system (social services organisation).', rest: 'Caseworker-facing UI on top of retrieval over contracts, with responsibility allocation cited back to source clauses.' },
        ],
      },
    ],
  },
  {
    company: 'ABN AMRO',
    title: 'Machine Learning Engineer · Chatbot Anna',
    dates: 'May 2022 — May 2024',
    duration: '2 years',
    location: 'Amsterdam',
    contract: 'Permanent',
    intro: 'Part of team ACE (Advanced Conversational Engagement), behind the customer-facing chatbot Anna.',
    bullets: [
      { rest: 'Developed ML use cases, strategies, and team roadmaps tied to where the bank was heading.' },
      { rest: 'Shipped GenAI for customer support (speech-to-text, summarisation, RAG) inside the bank\'s compliance framework. Compliance was a design constraint, not an afterthought.' },
      { rest: 'Redesigned the chatbot\'s data architecture on Databricks. Administered the platform for a team of 15+ data scientists and analysts.' },
      { rest: 'Owned ML pipelines from feature engineering through training, deployment, and monitoring. Shipped anomaly detection and recommendation models.' },
      { rest: 'Ran workshops to mature engineering practice across the data team: version control, testing, CI/CD, artefact management.' },
    ],
  },
  {
    company: 'Enjins',
    title: 'Machine Learning Engineer · Consultant',
    dates: 'Nov 2020 — May 2022',
    duration: '1 yr 7 mo',
    location: 'Amsterdam',
    contract: 'Permanent',
    intro: 'ML consultancy delivering production ML for scale-ups and SMEs.',
    bullets: [
      { rest: 'Designed cloud data architectures on AWS, Azure, and GCP, and shipped ML models to production with MLOps tooling (Feast, ClearML, Great Expectations, Deeploy).' },
      { rest: 'Set up and maintained Apache Airflow on Kubernetes for ETL scheduling, API ingestion, and periodic inference jobs.' },
      { rest: 'Audited client ML capabilities (infrastructure, data, people) and developed tailored ML strategies: data architecture, use case prioritisation, project estimation.' },
    ],
  },
  {
    company: 'IDC',
    title: 'Data Analyst',
    dates: 'Aug 2019 — Aug 2020',
    duration: '1 yr 1 mo',
    location: 'Amsterdam',
    contract: 'Internship',
    intro: 'Internship at IDC\'s Amsterdam office, working on financial reporting for the Western Europe region.',
    bullets: [
      { rest: 'Built interactive Power BI dashboards over financial data for the Western Europe team.' },
      { rest: 'Automated financial reporting with Excel VBA, cutting time spent on the recurring monthly process.' },
      { rest: 'Wrote Python scripts to clean and preprocess raw financial data before it reached the dashboards.' },
    ],
  },
];

function Bullet({ item }) {
  return (
    <li style={expStyles.bullet}>
      <span style={expStyles.bulletMark}/>
      {item.lead && <span style={expStyles.bulletStrong}>{item.lead} </span>}
      {item.rest}
    </li>
  );
}

function Experience() {
  return (
    <section id="experience" className="section-pad" style={expStyles.section}>
      <div className="container">
        <SectionHead index="02 / Experience" title="Where I've been."/>

        <div style={expStyles.scanRow} className="reveal">
          <span style={expStyles.scanLabel}>Tenure at a glance</span>
          <div style={expStyles.scanPills}>
            {ROLES.map(r => (
              <span key={r.company} style={expStyles.durPill}>
                {r.company} <span style={{ opacity: 0.55 }}>·</span> {r.duration}
              </span>
            ))}
          </div>
        </div>

        <div style={expStyles.spine} className="exp-spine">
          <div style={expStyles.spineLine}/>
          {ROLES.map((r, i) => (
            <article key={r.company} className="reveal" style={{ ...expStyles.role, '--i': i, borderTop: i === 0 ? 'none' : 'var(--border-hair)' }}>
              <div style={{ ...expStyles.roleNode, ...(r.active ? expStyles.roleNodeActive : {}) }}/>
              <div style={expStyles.roleHead} className="exp-head">
                <div style={expStyles.meta}>
                  <h3 style={expStyles.company}>{r.company}</h3>
                  <p style={expStyles.title}>{r.title}</p>
                  <span style={expStyles.dates}>{r.dates}</span>
                  <div style={expStyles.metaRow}>
                    <span style={expStyles.durPill}>{r.duration}</span>
                    <span style={expStyles.tag}>{r.contract}</span>
                    <span style={{ fontSize: 12, color: 'var(--fg-3)' }}>{r.location}</span>
                  </div>
                </div>
                <div>
                  {r.intro && <p style={expStyles.intro}>{r.intro}</p>}
                  {r.groups ? (
                    r.groups.map((g, gi) => (
                      <div key={gi} style={{ marginTop: gi === 0 ? 0 : 'var(--s-5)' }}>
                        <div style={expStyles.subHead}>
                          <span>{g.title}</span>
                          {g.sub && <span style={expStyles.subHeadSub}>{g.sub}</span>}
                        </div>
                        <ul style={expStyles.bullets}>
                          {g.bullets.map((b, k) => <Bullet key={k} item={b}/>)}
                        </ul>
                      </div>
                    ))
                  ) : (
                    <ul style={expStyles.bullets}>
                      {r.bullets.map((b, k) => <Bullet key={k} item={b}/>)}
                    </ul>
                  )}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .exp-head { grid-template-columns: 1fr !important; gap: var(--s-5) !important; }
        }
      `}</style>
    </section>
  );
}

window.Experience = Experience;