// DiagramAgents — Holdpoint homepage diagram 3
// No imports, no build step. Load React + Babel standalone, then this file.
// Requires Space Grotesk and Inter (Google Fonts) to be loaded by the page.
// Props: logoBase — path to the logo folder (default "logos").
//        bare     — omit the card frame and title (default false).

function DiagramAgents({ logoBase = 'logos', bare = false }) {
  const steps = [
    { n: '1', name: 'Trade settles', detail: 'trigger from the trading platform' },
    { n: '2', name: 'Read holdings', detail: 'Portfolio, Instrument' },
    { n: '3', name: 'Compare to mandate', detail: 'Mandate', branch: true },
    { n: '4', name: 'Draft finding', detail: 'for review, not sent' }
  ];
  // bare: drop the card frame and title so the diagram can sit inside a
  // page section that already supplies its own heading and panel.
  const CARD_FRAME = {"border": "1px solid #EDE7E1", "borderRadius": "10px", "background": "#ffffff", "padding": "clamp(18px,3vw,30px)", "display": "flex", "flexDirection": "column", "gap": "20px"};
  const BARE_FRAME = {"display": "flex", "flexDirection": "column", "gap": "20px"};
  return (
    <div style={{ fontFamily: "'Inter',system-ui,sans-serif", color: '#111111', background: '#ffffff', maxWidth: '1180px', margin: '0 auto' }}>
      <div style={bare ? BARE_FRAME : CARD_FRAME}>
{!bare && (
      <div style={{"display": "flex", "flexDirection": "column", "gap": "6px"}}>
      <div style={{"fontFamily": "'Space Grotesk',sans-serif", "fontSize": "clamp(17px,2vw,21px)"}}>Agents built around your workflows</div>
      </div>
)}
      
      <div style={{"border": "1px solid #DCD4CC", "borderRadius": "8px", "overflow": "hidden"}}>
      <div style={{"background": "#17181C", "padding": "10px 14px", "display": "flex", "alignItems": "center", "gap": "10px"}}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><g stroke="#ffffff" strokeWidth="1.1" strokeLinejoin="round"><path d="M12 2.6 20.1 7.3 20.1 16.7 12 21.4 3.9 16.7 3.9 7.3Z" /><path d="M12 12 12 2.6M12 12 3.9 16.7M12 12 20.1 16.7" /></g><g fill="#ffffff"><circle cx="12" cy="2.6" r="1.25" /><circle cx="20.1" cy="7.3" r="1.25" /><circle cx="20.1" cy="16.7" r="1.25" /><circle cx="12" cy="21.4" r="1.25" /><circle cx="3.9" cy="16.7" r="1.25" /><circle cx="3.9" cy="7.3" r="1.25" /><circle cx="12" cy="12" r="1.25" /></g></svg>
      <span style={{"fontFamily": "'Space Grotesk',sans-serif", "fontSize": "13.5px", "fontWeight": "600", "color": "#ffffff"}}>Holdpoint</span>
      <span style={{"marginLeft": "auto", "fontSize": "11px", "letterSpacing": "0.14em", "color": "#8a8d94"}}>AGENT REGISTRY</span>
      </div>
      <div style={{"background": "#F6F4F2", "display": "flex", "flexWrap": "wrap"}}>
      <div style={{"flex": "1 1 190px", "minWidth": "0", "background": "#EFEBE7", "borderRight": "1px solid #E4DED8", "padding": "12px", "display": "flex", "flexDirection": "column", "gap": "6px"}}>
      <span style={{"fontSize": "11px", "letterSpacing": "0.14em", "color": "#8a8d94"}}>AGENTS</span>
      <div style={{"background": "#ffffff", "border": "1px solid #DCD4CC", "borderRadius": "4px", "padding": "8px 10px", "display": "flex", "flexDirection": "column", "gap": "3px"}}>
      <span style={{"fontFamily": "'Space Grotesk',sans-serif", "fontSize": "13px", "fontWeight": "500"}}>Mandate check</span>
      </div>
      <div style={{"padding": "8px 10px", "fontSize": "12px", "color": "#54585f"}}>Annual review pack</div>
      <div style={{"padding": "8px 10px", "fontSize": "12px", "color": "#54585f"}}>Fee reconciliation</div>
      <div style={{"border": "1px dashed #DCD4CC", "borderRadius": "4px", "padding": "8px 10px", "fontSize": "12px", "color": "#8a8d94"}}>+ New agent, built to your workflow</div>
      <div style={{"marginTop": "auto", "borderTop": "1px solid #E4DED8", "paddingTop": "10px", "display": "flex", "flexDirection": "column", "gap": "7px"}}>
      <span style={{"display": "inline-flex", "alignItems": "center", "gap": "6px", "fontSize": "11px", "letterSpacing": "0.12em", "color": "#C4491F"}}><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#E05F31" strokeWidth="2.2"><rect x="4" y="10.5" width="16" height="11" rx="1.5" /><path d="M8 10.5V7a4 4 0 0 1 8 0v3.5" /></svg>NOT PERMITTED TO</span>
      <span style={{"fontSize": "11.5px", "color": "#8a8d94", "textDecoration": "line-through"}}>place a trade</span>
      <span style={{"fontSize": "11.5px", "color": "#8a8d94", "textDecoration": "line-through"}}>contact the client</span>
      </div>
      </div>
      
      <div style={{"flex": "3 1 420px", "minWidth": "0", "padding": "14px", "display": "flex", "flexDirection": "column", "gap": "10px"}}>
      <div style={{"display": "flex", "alignItems": "center", "gap": "9px", "flexWrap": "wrap"}}>
      <span style={{"fontFamily": "'Space Grotesk',sans-serif", "fontSize": "14px", "fontWeight": "500"}}>Mandate check</span>
      <span style={{"marginLeft": "auto", "display": "flex", "alignItems": "center", "gap": "7px", "fontSize": "11.5px", "color": "#54585f"}}><img src={logoBase + "/trading-platform.svg"} alt="" style={{"width": "14px", "height": "14px", "objectFit": "contain", "flex": "none"}} />Trading platform<svg width="12" height="9" viewBox="0 0 14 10" fill="none" stroke="#a6a29d" strokeWidth="1.4"><path d="M0 5h12M8.5 1.5 12 5l-3.5 3.5" /></svg>trigger</span>
      </div>
      
      <div style={{"display": "flex", "flexDirection": "column"}}>
      {steps.map((st, _i) => (
      <div key={_i} style={{"display": "flex", "gap": "11px", "alignItems": "flex-start"}}>
      <div style={{"display": "flex", "flexDirection": "column", "alignItems": "center", "flex": "none", "width": "26px"}}>
      <span style={{"width": "26px", "height": "26px", "borderRadius": "50%", "background": "#ffffff", "border": "1px solid #DCD4CC", "display": "flex", "alignItems": "center", "justifyContent": "center", "fontFamily": "'IBM Plex Mono',monospace", "fontSize": "11px", "color": "#54585f"}}>{st.n}</span>
      <span style={{"width": "1px", "flex": "1", "minHeight": "26px", "background": "#DCD4CC", "display": "block"}}></span>
      </div>
      <div style={{"flex": "1", "minWidth": "0", "paddingBottom": "12px", "display": "flex", "flexDirection": "column", "gap": "2px"}}>
      <span style={{"fontFamily": "'Space Grotesk',sans-serif", "fontSize": "13px", "fontWeight": "500"}}>{st.name}</span>
      <span style={{"fontSize": "11.5px", "color": "#8a8d94"}}>{st.detail}</span>
      {st.branch ? (<div style={{"display": "flex", "alignItems": "center", "gap": "6px", "marginTop": "7px"}}>
      <svg width="20" height="16" viewBox="0 0 20 16" fill="none" stroke="#C9C2BB" strokeWidth="1.2" strokeDasharray="3 4"><path d="M1 0v10a4 4 0 0 0 4 4h14" /></svg>
      <span style={{"display": "inline-flex", "alignItems": "center", "gap": "9px", "border": "1px dashed #D7CEC6", "borderRadius": "6px", "padding": "7px 10px", "background": "#ffffff"}}>
      <span style={{"width": "11px", "height": "11px", "border": "1.4px solid #54585f", "borderRadius": "2px", "display": "block", "flex": "none"}}></span>
      <span style={{"fontSize": "11.5px", "color": "#54585f"}}>Price missing: stops and hands back</span>
      </span>
      </div>) : null}
      </div>
      </div>
      ))}
      
      <div style={{"display": "flex", "gap": "11px", "alignItems": "flex-start"}}>
      <div style={{"display": "flex", "flexDirection": "column", "alignItems": "center", "flex": "none", "width": "26px"}}>
      <span style={{"width": "26px", "height": "26px", "borderRadius": "50%", "background": "#FDEDE6", "border": "1px solid #E05F31", "display": "flex", "alignItems": "center", "justifyContent": "center"}}><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#E05F31" strokeWidth="2"><circle cx="12" cy="8" r="3.6" /><path d="M5 20c1.4-3.6 4-5.4 7-5.4s5.6 1.8 7 5.4" /></svg></span>
      <span style={{"width": "1px", "flex": "1", "minHeight": "26px", "background": "#DCD4CC", "display": "block"}}></span>
      </div>
      <div style={{"flex": "1", "minWidth": "0", "paddingBottom": "12px", "display": "flex", "flexDirection": "column", "gap": "2px"}}>
      <span style={{"fontFamily": "'Space Grotesk',sans-serif", "fontSize": "13px", "fontWeight": "500"}}>Reviewer approves</span>
      <span style={{"fontSize": "11.5px", "color": "#C4491F"}}>a person signs off before anything leaves</span>
      </div>
      </div>
      
      <div style={{"display": "flex", "gap": "11px", "alignItems": "flex-start"}}>
      <div style={{"display": "flex", "flexDirection": "column", "alignItems": "center", "flex": "none", "width": "26px"}}>
      <span style={{"width": "26px", "height": "26px", "borderRadius": "50%", "background": "#ffffff", "border": "1px solid #DCD4CC", "display": "flex", "alignItems": "center", "justifyContent": "center", "fontFamily": "'IBM Plex Mono',monospace", "fontSize": "11px", "color": "#54585f"}}>6</span>
      </div>
      <div style={{"flex": "1", "minWidth": "0", "display": "flex", "flexDirection": "column", "gap": "5px"}}>
      <span style={{"fontFamily": "'Space Grotesk',sans-serif", "fontSize": "13px", "fontWeight": "500"}}>Task raised</span>
      <span style={{"fontSize": "11.5px", "color": "#8a8d94"}}>for the adviser</span>
      <div style={{"display": "flex", "gap": "6px", "flexWrap": "wrap", "marginTop": "2px"}}>
      <div style={{"display": "flex", "alignItems": "center", "gap": "7px", "background": "#ffffff", "border": "1px solid #E4DED8", "borderRadius": "4px", "padding": "5px 8px", "fontSize": "11.5px"}}><img src={logoBase + "/monday.jpg"} alt="" style={{"width": "14px", "height": "14px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} />monday.com</div>
      <div style={{"display": "flex", "alignItems": "center", "gap": "7px", "background": "#ffffff", "border": "1px solid #E4DED8", "borderRadius": "4px", "padding": "5px 8px", "fontSize": "11.5px"}}><img src={logoBase + "/microsoft.jpg"} alt="" style={{"width": "14px", "height": "14px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} />Microsoft 365</div>
      </div>
      </div>
      </div>
      </div>
      
      </div>
      </div>
      </div>
      
      <div style={{"fontSize": "12.5px", "color": "#54585f"}}>Tested on your past cases first. It goes live only once you are happy with the results.</div>
      </div>
    </div>
  );
}

window.DiagramAgents = DiagramAgents;