/* global React */

function WhatWeDo() {
  const items = [
    {
      head: 'Discover.',
      body: 'Every engagement starts inside your environment, mapping how your firm actually works: your clients, your products, your advice, and the rules that govern them. Nothing is built until that understanding is in place.',
      bgImg: 'components/pixel-layers-data.png',
    },
    {
      head: 'Design and build.',
      body: 'Capabilities are built against real workflows you choose, a client review, a reconciliation, a record of advice, designed around your data boundaries, your obligations, and the systems you already run.',
      bgImg: 'components/pixel-tree-data.png',
    },
    {
      head: 'Prove it works.',
      body: "Each capability is tested against your firm's own cases, and your team sees exactly what it does and signs off before anything touches live work.",
      bgImg: 'components/pixel-squares-data.png',
    },
    {
      head: 'Govern and improve.',
      body: 'We stay on after deployment, monitoring how capabilities behave and tuning as your firm changes. New ones plug into the same secure base, and the more the platform learns about your firm, the more useful it becomes.',
      bgImg: 'components/pixel-blueprint-data.png',
    },
  ];

  return (
    <section className="section" id="what-we-do">
      <div className="page">
        <p className="eyebrow">How it works</p>
        <div className="wwd-list">
          {items.map(({ head, body, bgImg }) => (
            <div key={head} className="wwd-row">
              <span className="wwd-bar" aria-hidden="true"></span>
              <div className="wwd-inner">
                <div className="wwd-text">
                  <h3 className="col-head">{head}</h3>
                  <p className="p p-muted">{body}</p>
                  {bgImg && (
                    <img
                      src={bgImg}
                      className="wwd-bg-img"
                      aria-hidden="true"
                      alt=""
                    />
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.WhatWeDo = WhatWeDo;