/* global React */
// What we offer, in detail — the page behind the "Learn more" link on the
// home page's offer section. Placeholder layout: a single measured prose
// column with a light sticky contents rail on wide screens. Deliberately
// plain so the design can be settled separately without rewriting content.

function OfferPage() {
  const sections = [
    { id: 'foundation', nav: 'The foundation', title: 'The foundation: it understands your business' },
    { id: 'agents', nav: 'The agents', title: 'The agents' },
    { id: 'governance', nav: 'Governance', title: 'Governance' },
    { id: 'security', nav: 'Security', title: 'How the security actually works' },
    { id: 'where', nav: 'Where it runs', title: 'Where it runs' },
  ];

  return (
    <main className="offer-page">
      <div className="page">

        <header className="offer__head">
          <p className="eyebrow">What we offer</p>
          <h1 className="h1 offer__title">What we offer, in detail.</h1>
          <p className="lead offer__lead">
            One foundation, and two capabilities that run on it. This page explains
            what each one actually is.
          </p>
        </header>

        <div className="offer__grid">

          {/* Contents rail — wide screens only */}
          <nav className="offer__toc" aria-label="On this page">
            <p className="offer__toc-label">On this page</p>
            <ul className="offer__toc-list">
              {sections.map(({ id, nav }) => (
                <li key={id}>
                  <a href={'#' + id} className="offer__toc-link">{nav}</a>
                </li>
              ))}
            </ul>
          </nav>

          <div className="offer__body">

            <section className="offer__section" id="foundation">
              <h2 className="h2 offer__h2">The foundation: it understands your business</h2>
              <p className="offer__p">
                AI is only as good as what it knows. A general-purpose model answers from
                public information. It does not know your clients, which products they
                hold, which rules apply to them, or how any of it connects.
              </p>
              <p className="offer__p">
                So before we build anything, we build a structured model of your firm: the
                things that exist in your business, how they relate to each other, and the
                rules that govern them. Clients, products, portfolios, mandates, documents,
                and the relationships between them. The industry calls this an ontology.
                What it means in practice is that the system reasons from your actual
                business rather than from guesswork.
              </p>
              <p className="offer__p">This matters for three reasons.</p>

              <div className="offer__points">
                <div className="offer__point">
                  <h3 className="offer__h3">Accuracy</h3>
                  <p className="offer__p">
                    Many of the questions that matter in a regulated firm cannot be
                    answered by looking something up, because the answer is not stored
                    anywhere. Whether a portfolio complies with its mandate is not a field
                    in a database. You work it out by starting at the client, moving to the
                    portfolio, finding the mandate that governs it, reading the
                    constraints, and comparing them against what is actually held. The
                    system does exactly that, and shows its working.
                  </p>
                </div>

                <div className="offer__point">
                  <h3 className="offer__h3">Control</h3>
                  <p className="offer__p">
                    Because the relationships are declared, the system knows which ones are
                    legitimate. A query attempting to traverse a relationship that does not
                    exist is refused before it runs, rather than returning something
                    plausible and wrong. Permissions live on the model itself, so every
                    agent built on top inherits them rather than reimplementing them.
                  </p>
                </div>

                <div className="offer__point">
                  <h3 className="offer__h3">It is what makes the security possible</h3>
                  <p className="offer__p">
                    Knowing which fields identify a person and which are the subject matter
                    is not something you can reliably work out by scanning text. It is
                    something the model tells you. More on that below.
                  </p>
                </div>
              </div>

              <p className="offer__p">
                The model is not static. It is corrected and extended as your business
                changes, and it starts narrow, around the first workflow, rather than
                requiring a complete map of your firm before anything works.
              </p>
            </section>

            <section className="offer__section" id="agents">
              <h2 className="h2 offer__h2">The agents</h2>
              <p className="offer__p">
                On that foundation we build the capability that does the work: reconciling
                figures, preparing client reviews, checking compliance positions, drafting
                records, retrieving and reviewing documents.
              </p>
              <p className="offer__p">
                Each agent is built for a specific workflow rather than as a general
                assistant. That is deliberate. A narrow agent with a defined task, defined
                inputs and defined permissions can be tested properly. A general one cannot.
              </p>
              <p className="offer__p">
                Testing is the part most people skip. Before anything touches live work, we
                run agents against realistic cases drawn from how your firm operates, and we
                measure not just whether they reach the right answer but whether they reach
                it consistently. In a regulated firm, an agent that is usually right is not
                good enough, because the exception is the one that reaches a client.
                Reliability is a gate we hold work behind, not a feature we advertise.
              </p>
            </section>

            <section className="offer__section" id="governance">
              <h2 className="h2 offer__h2">Governance</h2>
              <p className="offer__p offer__p--lead">
                Security stops the wrong thing happening. Governance is how you demonstrate
                it did not.
              </p>
              <p className="offer__p">
                Access is checked before retrieval, not filtered afterwards. If someone is
                not entitled to a client, that client never enters the process at all,
                rather than being fetched and then hidden.
              </p>
              <p className="offer__p">
                Every action is recorded in an append-only trail: who asked, what ran, what
                was decided, which model was involved. The record captures what happened
                rather than copying the data itself, so the audit trail does not become a
                second copy of the information you are protecting.
              </p>
              <p className="offer__p">
                Anything with real consequences waits for a person to approve it. The gate
                is part of how the workflow is built, not a policy asking people to be
                careful.
              </p>
            </section>

            <section className="offer__section" id="security">
              <h2 className="h2 offer__h2">How the security actually works</h2>
              <p className="offer__p">
                The problem with sensitive data and AI is usually framed as a choice between
                hiding it and using it. Hide the identifying fields and the system stops
                being useful, because it can no longer tell which client, which contract, or
                which rule applies. Leave them in and you have sensitive information sitting
                in a prompt.
              </p>
              <p className="offer__p">
                We do neither. Identifying values are replaced with stable placeholders
                before anything reaches a model, while the structure and the relationships
                stay intact. The system still knows this is a specific client, holding a
                specific portfolio, governed by a specific mandate. It simply never sees the
                name, the identity number or the account number.
              </p>
              <p className="offer__p">
                Real values are restored afterwards inside your environment, by looking them
                up rather than by asking the model to remember them. If a placeholder cannot
                be resolved, the system refuses rather than guessing.
              </p>
              <p className="offer__p">
                The result is that meaning survives the substitution. You do not lose
                accuracy in exchange for protection, which is the trade-off most firms have
                been asked to accept.
              </p>
            </section>

            <section className="offer__section" id="where">
              <h2 className="h2 offer__h2">Where it runs</h2>
              <p className="offer__p">
                Inside your environment. Your cloud, your network, your identity system,
                working with the data platform you already have.
              </p>
              <p className="offer__p">
                You choose the environment, the identity provider, the data platform and the
                models. What we do not make optional is the part that makes it trustworthy:
                entitlement checked before retrieval, identifying values substituted before
                anything reaches a model, deterministic restoration, human approval on
                consequential actions, and an audit trail on everything.
              </p>
            </section>

            <div className="offer__cta">
              <a href="/contact" className="btn-accent">Request access</a>
            </div>

          </div>
        </div>
      </div>
    </main>
  );
}

window.OfferPage = OfferPage;