/* global React, ProblemGraph */

function Problem() {
  return (
    <section className="section" id="the-problem">
      <div className="page problem">
        <div className="problem__grid">
          <div className="problem__left">
            <p className="eyebrow">The problem</p>

            <h2 className="h2 problem__heading">
              Safe or capable. Most firms are told to pick one.
            </h2>

            <div className="problem__media">
              <ProblemGraph />
            </div>
            <p className="problem__caption">
              Data without structure. Tools without context. Outputs without
              accountability.
            </p>
          </div>

          <div className="problem__prose">
            <p>
              Financial services firms face a false choice with AI.
            </p>
            <p>
              Use the capable tools, and you take on real risk: client data leaving your environment, outputs no one can trace to source, no record of what the AI did or why. 
              When a client disputes advice or a regulator asks how a decision was reached, there is nothing to show. 
              That is not a workflow improvement, it is a transfer of liability with no accompanying confidence.
            </p>
            <p>
              Lock everything down, and you get the opposite problem: tools too restricted to know your clients, your products, or the rules you work under. Safe, and useless. 
              Bespoke software promises to bridge the gap, but it is expensive, rigid, and slow.
            </p>
            <p>
              Capability without governance, or governance without capability. Most firms are stuck choosing.
            </p>
            <p>
              <strong>We build the solution that removes the choice.</strong>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Problem = Problem;