/* global React */

/* ---- Line-art illustrations (hairline, white on dark, one keyed accent) ---- */

// Foundation: a secure enabling layer — a bounded environment holding the
// agents, wired to the systems the firm already runs.
function ArtLayer() {
  return (
    <svg className="wwb-art wwb-art--wide" viewBox="0 0 280 170" fill="none" aria-hidden="true">
      {/* the environment boundary — keyed, catches the accent on hover */}
      <rect className="wwb-key" x="14" y="26" width="252" height="118" strokeDasharray="4 5" />
      {/* agents inside it */}
      <line x1="80" y1="66" x2="200" y2="66" />
      <circle cx="80" cy="66" r="6" fill="currentColor" stroke="none" />
      <circle cx="140" cy="66" r="7" />
      <circle cx="200" cy="66" r="6" fill="currentColor" stroke="none" />
      {/* wired down to the systems already in use */}
      <line x1="80" y1="72" x2="80" y2="102" strokeDasharray="3 4" />
      <line x1="140" y1="73" x2="140" y2="102" />
      <line x1="200" y1="72" x2="200" y2="102" strokeDasharray="3 4" />
      <rect x="68" y="102" width="24" height="18" />
      <rect x="128" y="102" width="24" height="18" />
      <rect x="188" y="102" width="24" height="18" />
    </svg>
  );
}

// Agents around workflows: task rows, one running to completion.
function ArtWorkflows() {
  return (
    <svg className="wwb-art" viewBox="0 0 120 90" fill="none" aria-hidden="true">
      <rect x="18" y="18" width="10" height="10" />
      <line x1="38" y1="23" x2="102" y2="23" />
      <rect x="18" y="40" width="10" height="10" />
      <line x1="38" y1="45" x2="102" y2="45" />
      <rect className="wwb-key" x="18" y="62" width="10" height="10" />
      <line className="wwb-key" x1="38" y1="67" x2="78" y2="67" />
      <line x1="86" y1="67" x2="102" y2="67" strokeDasharray="3 4" />
    </svg>
  );
}

// Governance: agents inside a boundary, every action passing an approval gate.
function ArtGovern() {
  return (
    <svg className="wwb-art" viewBox="0 0 120 90" fill="none" aria-hidden="true">
      {/* the boundary every agent operates within */}
      <rect x="14" y="16" width="60" height="58" strokeDasharray="3 4" />
      {/* three agents inside it */}
      <circle cx="31" cy="34" r="4" fill="currentColor" stroke="none" />
      <circle cx="31" cy="56" r="4" fill="currentColor" stroke="none" />
      <circle cx="53" cy="45" r="4.5" />
      {/* the path out: every action routes through one gate */}
      <line x1="57" y1="45" x2="86" y2="45" />
      <line x1="35" y1="34" x2="49" y2="43" strokeDasharray="3 4" />
      <line x1="35" y1="56" x2="49" y2="47" strokeDasharray="3 4" />
      {/* the approval gate — keyed, catches the accent on hover */}
      <rect className="wwb-key" x="86" y="35" width="20" height="20" />
      <line className="wwb-key" x1="91" y1="45" x2="95" y2="50" />
      <line className="wwb-key" x1="95" y1="50" x2="101" y2="40" />
    </svg>
  );
}

/* ---- Section ---- */

function WhatWeBuild() {
  const capabilities = [
    {
      title: 'Implementation of AI agents',
      Art: ArtWorkflows,
      paras: [
        'We build and integrate agents for your specific workflows.',
        'Each is built for a specific workflow and tested against real cases.',
      ],
    },
    {
      title: 'Agentic governance',
      Art: ArtGovern,
      paras: [
        'We provide runtime control and continuous governance across your agent estate.',
      ],
    },
  ];

  return (
    <section className="section" id="what-we-build">
      <div className="wwb-panel">
        <div className="page">

          {/* Section header — centered */}
          <div className="wwb__head">
            <p className="eyebrow">What we offer</p>
            <h2 className="h2 wwb__title">
              One foundation. Two capabilities built on it.
            </h2>
          </div>

          {/* Foundation — full-width card */}
          <div className="wwb__foundation">
            <div className="wwb__foundation-text">
              <h3 className="wwb__foundation-title">A secure, enabling layer</h3>
              <p className="wwb__body">
                We provide an environment where your agents can operate securely and
                deliver meaningful value.
              </p>
            </div>
            <div className="wwb__foundation-art">
              <ArtLayer />
            </div>
          </div>

          {/* Connector stems: the three capabilities grow from the foundation */}
          <div className="wwb-stems" aria-hidden="true">
            <span></span><span></span>
          </div>

          {/* Three capability cards */}
          <div className="wwb-grid">
            {capabilities.map(({ title, Art, paras }) => (
              <div key={title} className="wwb-card">
                <div className="wwb-card__art"><Art /></div>
                <h3 className="wwb-card__label">{title}</h3>
                {paras.map((text, i) => (
                  <p key={i} className="p wwb-card__body">{text}</p>
                ))}
              </div>
            ))}
          </div>

          {/* Closing line */}
          <p className="wwb__close">
            A secure layer, the agents that run on it, and governance over both.
            Built to work together, and built for how financial firms actually operate.
          </p>

          {/* Bottom right: through to the detailed page */}
          <div className="wwb__more">
            <a href="/what-we-offer" className="wwb__more-link">
              Learn more
              <span className="wwb__more-arrow" aria-hidden="true">
                <svg viewBox="0 0 24 12" fill="none" width="26" height="13">
                  <line x1="0" y1="6" x2="20" y2="6" stroke="currentColor" strokeWidth="1.4" />
                  <path d="M15 1.5 L20 6 L15 10.5" stroke="currentColor" strokeWidth="1.4" fill="none" />
                </svg>
              </span>
            </a>
          </div>

        </div>
      </div>
    </section>
  );
}

window.WhatWeBuild = WhatWeBuild;