const DG_SOURCES = ['Warehouse', 'Documents', 'CRM', 'Internal APIs'];

const SystemDiagram = () => (
  <div className="diagram-rail">
  <svg className="diagram" viewBox="0 0 620 408" role="img" aria-label="Diagram: systems of record feed a working loop of retrieve, reason and act, which returns completed work and an audit trail.">
    <g className="dg-label">
      <text x="0" y="14">Systems of record</text>
      <text x="238" y="14">Working loop</text>
      <text x="490" y="14">Outcome</text>
    </g>
    {DG_SOURCES.map((label, i) => {
      const y = 70 + i * 80;
      return (
        <g key={label}>
          <rect x="0" y={y} width="130" height="46" className="dg-box" />
          <rect x="14" y={y + 19} width="8" height="8" className={i === 1 ? 'dg-accent' : 'dg-fill'} />
          <text x="34" y={y + 28} className="dg-key">{label}</text>
          <path d={'M130 ' + (y + 23) + ' H184 V213 H238'} className="dg-line" />
        </g>
      );
    })}
    <path d="M130 173 H184 V213 H238" className="dg-flow" />
    <path d="M130 333 H184 V213 H238" className="dg-flow dg-flow--b" />
    <rect x="238" y="96" width="150" height="234" className="dg-box" />
    <line x1="238" y1="158" x2="388" y2="158" className="dg-line" />
    <line x1="238" y1="220" x2="388" y2="220" className="dg-line" />
    <line x1="238" y1="282" x2="388" y2="282" className="dg-line" />
    <text x="256" y="132" className="dg-key">Retrieve</text>
    <text x="256" y="194" className="dg-key">Reason</text>
    <text x="256" y="256" className="dg-key">Act</text>
    <text x="256" y="312" className="dg-key">Check</text>
    <g className="dg-scan"><line x1="238" y1="158" x2="388" y2="158" /></g>
    <rect x="366" y="123" width="8" height="8" className="dg-accent dg-pulse" />
    <path d="M388 213 H448" className="dg-line" />
    <path d="M388 213 H448" className="dg-flow dg-flow--c" />
    <path d="M448 213 V150 H490" className="dg-line" />
    <path d="M448 213 V276 H490" className="dg-line" />
    <rect x="490" y="127" width="130" height="46" className="dg-box" />
    <text x="504" y="155" className="dg-key">Work done</text>
    <rect x="490" y="253" width="130" height="46" className="dg-box" />
    <text x="504" y="281" className="dg-key">Audit trail</text>
    <path d="M555 299 V368 H313 V330" className="dg-line" strokeDasharray="2 6" />
    <text x="238" y="392" className="dg-label">Every run feeds the next one</text>
  </svg>
  </div>
);

const LANES = [
  ['Your client', 'Buys the outcome. Signs with you.'],
  ['Your agency', 'Owns the relationship, the scope and the invoice.'],
  ['Aterra', 'Builds the system and hands it over.'],
];

const EngagementDiagram = () => (
  <div className="diagram-rail">
  <svg className="diagram" viewBox="0 0 620 250" role="img" aria-label="Diagram: the client contracts your agency, your agency contracts Aterra, and the finished system is handed back up the same line.">
    {LANES.map(([name, note], i) => {
      const y = 16 + i * 84;
      return (
        <g key={name}>
          <rect x="0" y={y} width="560" height="60" className="dg-box" />
          <rect x="20" y={y + 26} width="8" height="8" className={i === 2 ? 'dg-accent' : 'dg-fill'} />
          <text x="40" y={y + 34} className="dg-key">{name}</text>
          <text x="170" y={y + 34} className="dg-note">{note}</text>
        </g>
      );
    })}
    <path d="M560 214 H592 V46 H560" className="dg-line" />
    <path d="M560 214 H592 V46 H560" className="dg-flow" />
  </svg>
  <p className="dia-cap">Scope goes down the line. The working system comes back up it.</p>
  </div>
);

Object.assign(window, { SystemDiagram, EngagementDiagram });