const WORK_ITEMS = [
  {
    period: '2026 - present',
    role: 'Chief Operations Officer',
    org: 'CYS Group',
    note: 'Scaling operations and strengthening impact across Customer Experience Management.',
  },
  {
    period: '2022 - present',
    role: 'Board member',
    org: 'Klantenservice Federatie',
    note: 'Dutch trade association for customer service and customer contact.',
  },
  {
    period: 'Earlier',
    role: 'Customer Experience leadership',
    org: 'Hospitality & consulting',
    note: 'A decade helping organisations become more customer-centric and value-driven.',
  },
];

function WorkSection() {
  return (
    <section className="section work" data-screen-label="03 Work">
      <div className="section__label">
        <span className="eyebrow">Work · 02</span>
      </div>
      <div className="section__body">
        <ul className="work__list">
          {WORK_ITEMS.map((w, i) => (
            <li key={i} className="work__item">
              <span className="work__period meta">{w.period}</span>
              <div className="work__main">
                <h3 className="work__role">{w.role}</h3>
                <p className="work__org">{w.org}</p>
                <p className="work__note">{w.note}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

window.WorkSection = WorkSection;