/* Experience section — chronological career timeline (page-locked lens).
   Sourced from resume-eng.html / resume-pm.html. Roles that map to a
   Case Study link there instead of repeating the deep-dive detail. */

const EXPERIENCE = [
  {
    id: 'freelance',
    org: 'Freelancing',
    role: 'Marketing Tech, Reward Programs & Payment Security',
    date: 'Feb 2025 – Oct 2025',
    mono: 'F',
    blurb: {
      eng: 'Independent engineering on martech, rewards platforms, and payment-security integrations.',
      pm: 'Independent product & delivery work across martech, reward programs, and payment security.',
    },
  },
  {
    id: 'fynarfin',
    org: 'Fynarfin',
    role: 'Founder — Program, Product, Engineering & Marketing',
    date: 'Jan 2019 – Oct 2024',
    mono: 'Fy',
    blurb: {
      eng: 'Pioneered open-source, population-scale digital public goods & infrastructure. Scaled the venture to 1M USD revenue. Customers: GovStack, MIFOS, Grameen Foundation, One Acre Fund, Safaricom, CoDevelop.',
      pm: 'Founded and led a fintech venture to 1M USD revenue, shaping product strategy for digital public infrastructure across GovStack, Grameen Foundation, One Acre Fund, Safaricom, and CoDevelop.',
    },
    caseStudy: 'govstack',
    caseStudyLabel: 'GovStack, One Acre Fund & Grameen case studies',
  },
  {
    id: 'fineract',
    org: 'Apache Fineract',
    role: 'SDE & Solution Architect (Freelance)',
    date: 'Apr 2018 – Dec 2018',
    logo: 'assets/logos/fineract.png',
    blurb: {
      eng: 'Loan restructuring, alternative credit scoring, scalability, line of credit, and consumer-durable loans on the Apache Fineract core.',
      pm: 'Delivered lending capabilities — loan restructuring, alternative credit scoring, line of credit — on the Apache Fineract platform.',
    },
  },
  {
    id: 'trustt',
    org: 'Trustt (formerly Novopay)',
    role: 'SDE II',
    date: 'Apr 2015 – Mar 2018',
    logo: 'assets/logos/trustt.png',
    blurb: {
      eng: 'Designed and delivered microcredit, payments & analytics products. Introduced TDD, scalable architecture, and OS best practices to a 50+ engineer org while exceeding functional-delivery targets.',
      pm: 'Defined and delivered microenterprise products spanning microcredit, payments, and analytics across multiple stakeholders.',
    },
    caseStudy: 'idfc',
    caseStudyLabel: 'IDFC Bharat Bank case study',
  },
  {
    id: 'finflux',
    org: 'Finflux (acquired by M2P Fintech)',
    role: 'Software Engineer',
    date: 'Jun 2014 – Mar 2015',
    logo: 'assets/logos/finflux.png',
    blurb: {
      eng: 'Built extensible lending features on Mifos X — including the webhooks/hooks framework (openMF/mifosx#1063).',
      pm: 'Shipped lending features as a sales-engineer-aligned IC, translating customer needs into extensible product capabilities.',
    },
  },
  {
    id: 'gsoc',
    org: 'Google Summer of Code',
    role: 'Intern — Mifos',
    date: 'Jun 2013 – Sep 2013',
    logo: 'assets/logos/google.png',
    blurb: {
      eng: 'Built a Data Import Tool for microfinance institutions with the Mifos community.',
      pm: 'Delivered a microfinance Data Import Tool end-to-end during a structured open-source internship.',
    },
  },
];

function ExperienceItem({ item, caseStudyClients }) {
  const { lens } = React.useContext(LensContext);
  const blurb = item.blurb[lens] || item.blurb.eng;
  const mono = item.mono || (item.org ? item.org.slice(0, 2) : '?');
  return (
    <li className="xp-item">
      <span className="xp-item__node" aria-hidden="true"></span>
      <div className="xp-item__head">
        <span className="xp-item__logo" data-mono={mono}>
          {item.logo && (
            <img src={item.logo} alt={item.org + ' logo'}
              onError={(e) => { e.target.style.display = 'none'; }} />
          )}
        </span>
        <div className="xp-item__headtext">
          <h3 className="xp-item__org">{item.org}</h3>
          <span className="xp-item__date">{item.date}</span>
        </div>
      </div>
      <p className="xp-item__role">{item.role}</p>
      <p className="xp-item__blurb">{blurb}</p>
      {item.caseStudy && (
        <a className="xp-item__link" href="#case-studies">
          {item.caseStudyLabel || 'See case study'}
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14M12 5l7 7-7 7"></path>
          </svg>
        </a>
      )}
    </li>
  );
}

function ExperienceTimeline() {
  return (
    <section className="section" id="experience">
      <div className="container">
        <div className="section-header anim-in" data-anim>
          <p className="t-label">Career</p>
          <h2 className="t-display">Experience</h2>
          <p>A decade across fintech &mdash; from open-source intern to founder of population-scale payments infrastructure.</p>
        </div>
        <ol className="xp-timeline anim-in anim-in--stagger" data-anim>
          {EXPERIENCE.map((item) => (
            <ExperienceItem key={item.id} item={item} />
          ))}
        </ol>
      </div>
    </section>
  );
}

Object.assign(window, { ExperienceTimeline });