// The Engine — Built on OpenClaw. Hardened by NemoClaw.
// 4-column stat grid with watermark icons behind numbers.

function EngineIcon({ kind }) {
  // Watermark icons — rendered at low opacity behind the stat
  const common = { width: 120, height: 120, viewBox: "0 0 120 120", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round" };
  if (kind === "clock") {
    return (
      <svg {...common} aria-hidden="true">
        <circle cx="60" cy="60" r="44" />
        <circle cx="60" cy="60" r="38" strokeDasharray="2 6" />
        <line x1="60" y1="60" x2="60" y2="28" strokeWidth="1.5" />
        <line x1="60" y1="60" x2="86" y2="60" strokeWidth="1.2" />
        <circle cx="60" cy="60" r="2" fill="currentColor" stroke="none" />
        {/* hour ticks */}
        {Array.from({ length: 12 }).map((_, i) => {
          const a = i * 30 * Math.PI / 180;
          const x1 = 60 + Math.cos(a - Math.PI / 2) * 40;
          const y1 = 60 + Math.sin(a - Math.PI / 2) * 40;
          const x2 = 60 + Math.cos(a - Math.PI / 2) * 44;
          const y2 = 60 + Math.sin(a - Math.PI / 2) * 44;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} />;
        })}
      </svg>);

  }
  if (kind === "container") {
    return (
      <svg {...common} aria-hidden="true">
        {/* Shipping-container / sandbox */}
        <rect x="20" y="38" width="80" height="54" rx="2" />
        <line x1="32" y1="38" x2="32" y2="92" />
        <line x1="44" y1="38" x2="44" y2="92" />
        <line x1="56" y1="38" x2="56" y2="92" />
        <line x1="68" y1="38" x2="68" y2="92" />
        <line x1="80" y1="38" x2="80" y2="92" />
        <line x1="92" y1="38" x2="92" y2="92" />
        <rect x="20" y="34" width="80" height="6" />
        <rect x="20" y="90" width="80" height="6" />
        {/* Terminal overlay */}
        <rect x="48" y="24" width="46" height="30" fill="var(--paper)" stroke="currentColor" />
        <line x1="48" y1="30" x2="94" y2="30" />
        <circle cx="52" cy="27" r="0.8" fill="currentColor" />
        <circle cx="55" cy="27" r="0.8" fill="currentColor" />
        <circle cx="58" cy="27" r="0.8" fill="currentColor" />
        <path d="M 52 38 L 56 42 L 52 46" />
        <line x1="60" y1="46" x2="72" y2="46" />
      </svg>);

  }
  if (kind === "shield") {
    return (
      <svg {...common} aria-hidden="true">
        <path d="M 60 18 L 96 30 L 96 58 Q 96 86 60 102 Q 24 86 24 58 L 24 30 Z" />
        <path d="M 60 28 L 86 37 L 86 58 Q 86 80 60 92 Q 34 80 34 58 L 34 37 Z" strokeDasharray="2 4" />
        {/* Lock */}
        <rect x="50" y="52" width="20" height="18" rx="2" />
        <path d="M 54 52 L 54 46 Q 54 40 60 40 Q 66 40 66 46 L 66 52" />
        <circle cx="60" cy="61" r="2" fill="currentColor" stroke="none" />
      </svg>);

  }
  if (kind === "policy") {
    return (
      <svg {...common} aria-hidden="true">
        {/* Document with checkmarks */}
        <path d="M 32 22 L 76 22 L 92 38 L 92 100 L 32 100 Z" />
        <path d="M 76 22 L 76 38 L 92 38" />
        {[48, 60, 72, 84].map((y, i) =>
        <React.Fragment key={i}>
            <path d={`M 40 ${y} l 4 4 l 8 -8`} />
            <line x1="58" y1={y} x2={i % 2 ? 80 : 84} y2={y} />
          </React.Fragment>
        )}
      </svg>);

  }
  return null;
}

const ENGINE_CARDS = [
{
  big: "24/7",
  eyebrow: "proactive\nagent",
  body: "Runs on a schedule — always working in the background, not waiting to be asked.",
  icon: "clock"
},
{
  big: "Full",
  eyebrow: "sandboxed\ncompute",
  body: "Dedicated sandboxed compute per employee — Docker-isolated browser, terminal, filesystem.",
  icon: "container"
},
{
  big: "Private",
  eyebrow: "by default",
  body: "NemoClaw privacy router keeps workloads on local NVIDIA hardware when data residency matters.",
  icon: "shield"
},
{
  big: "Gated",
  eyebrow: "by policy\nat runtime",
  body: "Every agent action is checked against your access policies at the system layer.",
  icon: "policy"
}];


function NvidiaMark() {
  return (
    <a
      href="https://www.nvidia.com/en-us/ai/nemoclaw/"
      target="_blank"
      rel="noopener"
      className="eng-nvidia"
      aria-label="NVIDIA NemoClaw"
    >
      <svg className="eng-nvidia-logo" viewBox="0 0 140 26" aria-hidden="true">
        <g fill="#76B900">
          <path d="M 13.5 6.8 C 8.4 6.8 4.4 10.8 3.8 15.5 C 5.9 13.4 8.6 12.5 12 12.8 L 12 14.1 C 9.2 13.9 7.2 14.9 5.4 16.8 C 6.8 18.3 9 18.8 11.3 18.1 L 11.3 19.6 C 8.6 20.4 5.6 19.6 3.8 17.4 C 4.3 21 7.6 23.8 11.6 23.8 L 17 23.8 L 17 6.8 Z M 21.5 6.8 L 21.5 19.2 C 23.6 18.7 25.6 17.1 27.1 14.9 C 25.4 12 23.3 10.3 21.5 9.6 L 21.5 8 C 26 9 29.7 12.4 30.3 14.9 C 29 18.5 25.3 21.8 21.5 22.6 L 21.5 23.8 C 29 22.3 34.8 17.2 34.8 14.9 C 34.8 12.6 29 6.8 21.5 6.8 Z" />
        </g>
        <g fill="#1a1712">
          <path d="M 43 8 L 46.2 8 L 51.5 17.1 L 51.5 8 L 54 8 L 54 22 L 50.9 22 L 45.5 12.9 L 45.5 22 L 43 22 Z" />
          <path d="M 56 8 L 58.8 8 L 62.5 18.5 L 66.2 8 L 69 8 L 63.7 22 L 61.3 22 Z" />
          <path d="M 70.5 8 L 73 8 L 73 22 L 70.5 22 Z" />
          <path d="M 75.2 8 L 80 8 C 84.2 8 86.9 10.8 86.9 15 C 86.9 19.2 84.2 22 80 22 L 75.2 22 Z M 77.7 10.2 L 77.7 19.8 L 79.8 19.8 C 82.7 19.8 84.3 18 84.3 15 C 84.3 12 82.7 10.2 79.8 10.2 Z" />
          <path d="M 88.5 8 L 91 8 L 91 22 L 88.5 22 Z" />
          <path d="M 92.5 22 L 97.6 8 L 100.4 8 L 105.5 22 L 102.8 22 L 101.7 18.8 L 96.3 18.8 L 95.2 22 Z M 97 16.8 L 101 16.8 L 99 11.2 Z" />
        </g>
      </svg>
    </a>);

}

function Engine() {
  return (
    <section id="engine" className="engine">
      <div className="container">
        <div className="eng-head">
          <div className="eng-eyebrow">
            <span className="shift-pill">
              <span className="dot" />
              THE ENGINE
            </span>
          </div>
          <h2 className="eng-headline">
            Built on OpenClaw.<br />
            Hardened by <span className="eng-italic">NemoClaw.</span>
          </h2>
          <p className="eng-sub">
            OpenClaw is the open-source agent framework that took the developer community by storm.
            NemoClaw is NVIDIA's enterprise-safe version — privacy-routed, policy-gated, and running on
            local NVIDIA Nemotron models when data residency matters. Every Ontara deployment runs on
            the combined stack.
          </p>
          <NvidiaMark />
        </div>

        <div className="eng-grid">
          {ENGINE_CARDS.map((c, i) =>
          <article key={i} className="eng-card">
              <div className="eng-card-watermark" aria-hidden="true">
                <EngineIcon kind={c.icon} />
              </div>
              <div className="eng-card-inner">
                <div className="eng-card-big" style={{ fontSize: "40px" }}>{c.big}</div>
                <div className="eng-card-eyebrow">{c.eyebrow}</div>
                <p className="eng-card-body">{c.body}</p>
              </div>
            </article>
          )}
        </div>

        <p className="eng-foot">
          No workflows to build. No triggers to configure. Talk to your team in plain English —
          in Slack, in Teams, on the phone — they figure out the rest.
        </p>
      </div>
    </section>);

}

window.Engine = Engine;