// Services.jsx — big bold alternating rows
function Services() {
  const pillars = [
    { num: '01', title: 'Data engineering', lead: 'From ingestion to full-scale warehouses, lakes and lakehouses — pipelines built clean and built to scale.', tags: ['Architecture design', 'ETL services', 'Warehousing', 'Quality & governance'] },
    { num: '02', title: 'Data analytics', lead: 'Turn data into action — dashboards and forecasting that give your team real-time visibility into what matters.', tags: ['Descriptive', 'Predictive', 'Prescriptive', 'Visualization'] },
    { num: '03', title: 'Artificial intelligence', lead: 'Custom AI that automates manual work and surfaces insight your team doesn\u2019t have time to find.', tags: ['Machine learning', 'NLP', 'Computer vision', 'Generative AI'] },
  ];
  return (
    <section className="w-section w-section--cream" id="services">
      <span className="w-ov w-ov-orbit w-ov-svc1" aria-hidden></span>
      <span className="w-ov w-ov-orbit w-ov-orbit--sm w-ov-svc2" aria-hidden></span>
      <div className="w-wrap">
        <div className="w-section__head" data-reveal>
          <p className="w-eyebrow w-section__eyebrow">What we do</p>
          <h2 className="w-section__title">Three <span className="w-hl">disciplines</span><br />One stack</h2>
        </div>
        <div className="w-services">
          {pillars.map((p, i) => (
            <article className={`w-svc${i % 2 ? ' w-svc--right' : ''}`} key={p.num} data-reveal-side={i % 2 ? 'right' : 'left'}>
              <div className="w-svc__num">{p.num}</div>
              <h3 className="w-svc__title">{p.title}</h3>
              <div className="w-svc__right">
                <p className="w-svc__lead">{p.lead}</p>
                <div className="w-svc__tags">
                  {p.tags.map(t => <span className="w-svc__tag" key={t}>{t}</span>)}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Services });