// DiagramOntology — Holdpoint homepage diagram 1
// 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 DiagramOntology({ logoBase = 'logos', bare = false }) {
  // 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)"}}>No single system holds this answer</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", "display": "flex", "gap": "5px"}}><span style={{"width": "6px", "height": "6px", "borderRadius": "50%", "background": "#3A3C43", "display": "block"}}></span><span style={{"width": "6px", "height": "6px", "borderRadius": "50%", "background": "#3A3C43", "display": "block"}}></span><span style={{"width": "6px", "height": "6px", "borderRadius": "50%", "background": "#3A3C43", "display": "block"}}></span></span>
      </div>
      <div style={{"background": "#22242A", "padding": "0 10px", "display": "flex", "gap": "2px", "flexWrap": "wrap"}}>
      <span style={{"padding": "8px 12px", "fontSize": "11.5px", "color": "#111111", "background": "#F6F4F2", "borderRadius": "4px 4px 0 0", "marginTop": "4px"}}>Knowledge layer</span>
      <span style={{"padding": "8px 12px", "fontSize": "11.5px", "color": "#8a8d94", "marginTop": "4px"}}>Gateway</span>
      <span style={{"padding": "8px 12px", "fontSize": "11.5px", "color": "#8a8d94", "marginTop": "4px"}}>Agents</span>
      </div>
      <div style={{"background": "#F6F4F2", "padding": "14px", "display": "flex", "flexDirection": "column", "gap": "14px"}}>
      <div style={{"background": "#ffffff", "border": "1px solid #E4DED8", "borderRadius": "5px", "padding": "10px 12px", "display": "flex", "alignItems": "center", "gap": "9px"}}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8a8d94" strokeWidth="2"><circle cx="11" cy="11" r="7" /><path d="M16 16l5 5" /></svg>
      <span style={{"fontSize": "13px"}}>Is this portfolio still within its mandate?</span>
      </div>
      
      <div style={{"display": "flex", "flexWrap": "wrap", "gap": "14px", "alignItems": "stretch"}}>
      <div style={{"flex": "1 1 380px", "minWidth": "0", "background": "#ffffff", "border": "1px solid #E4DED8", "borderRadius": "6px", "padding": "12px", "display": "flex", "flexDirection": "column", "gap": "10px"}}>
      <div style={{"display": "flex", "alignItems": "center", "gap": "10px", "flexWrap": "wrap"}}>
      <span style={{"fontSize": "11px", "letterSpacing": "0.14em", "color": "#8a8d94"}}>CONNECTED SYSTEMS</span>
      <span style={{"display": "inline-flex", "alignItems": "center", "gap": "5px", "background": "#EAF2EF", "border": "1px solid #C7DED6", "borderRadius": "3px", "padding": "2px 6px", "fontSize": "11px", "color": "#2F6356"}}>linked</span>
      
      </div>
      <div style={{"display": "grid", "gridTemplateColumns": "repeat(auto-fit,minmax(150px,1fr))", "gap": "6px"}}>
      <div style={{"display": "flex", "flexDirection": "row", "alignItems": "center", "justifyContent": "space-between", "gap": "8px", "border": "1px solid #EDE7E1", "borderRadius": "4px", "padding": "7px 9px", "minWidth": "0", "minHeight": "34px"}}><span style={{"display": "flex", "alignItems": "center", "gap": "8px"}}><img src={logoBase + "/trading-platform.svg"} alt="" style={{"width": "16px", "height": "16px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} /><span style={{"fontSize": "11.5px", "whiteSpace": "nowrap"}}>Trading platform</span></span><span style={{"fontSize": "11px", "color": "#8a8d94", "textAlign": "right", "whiteSpace": "nowrap", "overflow": "hidden", "textOverflow": "ellipsis", "minWidth": "0"}}>trading</span></div>
      <div style={{"display": "flex", "flexDirection": "row", "alignItems": "center", "justifyContent": "space-between", "gap": "8px", "border": "1px solid #EDE7E1", "borderRadius": "4px", "padding": "7px 9px", "minWidth": "0", "minHeight": "34px"}}><span style={{"display": "flex", "alignItems": "center", "gap": "8px"}}><img src={logoBase + "/bloomberg.jpg"} alt="" style={{"width": "16px", "height": "16px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} /><span style={{"fontSize": "11.5px", "whiteSpace": "nowrap"}}>Bloomberg</span></span><span style={{"fontSize": "11px", "color": "#8a8d94", "textAlign": "right", "whiteSpace": "nowrap", "overflow": "hidden", "textOverflow": "ellipsis", "minWidth": "0"}}>market data</span></div>
      <div style={{"display": "flex", "flexDirection": "row", "alignItems": "center", "justifyContent": "space-between", "gap": "8px", "border": "1px solid #EDE7E1", "borderRadius": "4px", "padding": "7px 9px", "minWidth": "0", "minHeight": "34px"}}><span style={{"display": "flex", "alignItems": "center", "gap": "8px"}}><img src={logoBase + "/morningstar.jpg"} alt="" style={{"width": "16px", "height": "16px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} /><span style={{"fontSize": "11.5px", "whiteSpace": "nowrap"}}>Morningstar</span></span><span style={{"fontSize": "11px", "color": "#8a8d94", "textAlign": "right", "whiteSpace": "nowrap", "overflow": "hidden", "textOverflow": "ellipsis", "minWidth": "0"}}>market data</span></div>
      <div style={{"display": "flex", "flexDirection": "row", "alignItems": "center", "justifyContent": "space-between", "gap": "8px", "border": "1px solid #EDE7E1", "borderRadius": "4px", "padding": "7px 9px", "minWidth": "0", "minHeight": "34px"}}><span style={{"display": "flex", "alignItems": "center", "gap": "8px"}}><img src={logoBase + "/salesforce.jpg"} alt="" style={{"width": "16px", "height": "16px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} /><span style={{"fontSize": "11.5px", "whiteSpace": "nowrap"}}>Salesforce</span></span><span style={{"fontSize": "11px", "color": "#8a8d94", "textAlign": "right", "whiteSpace": "nowrap", "overflow": "hidden", "textOverflow": "ellipsis", "minWidth": "0"}}>clients</span></div>
      <div style={{"display": "flex", "flexDirection": "row", "alignItems": "center", "justifyContent": "space-between", "gap": "8px", "border": "1px solid #EDE7E1", "borderRadius": "4px", "padding": "7px 9px", "minWidth": "0", "minHeight": "34px"}}><span style={{"display": "flex", "alignItems": "center", "gap": "8px"}}><img src={logoBase + "/docusign.jpg"} alt="" style={{"width": "16px", "height": "16px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} /><span style={{"fontSize": "11.5px", "whiteSpace": "nowrap"}}>DocuSign</span></span><span style={{"fontSize": "11px", "color": "#8a8d94", "textAlign": "right", "whiteSpace": "nowrap", "overflow": "hidden", "textOverflow": "ellipsis", "minWidth": "0"}}>documents</span></div>
      <div style={{"display": "flex", "flexDirection": "row", "alignItems": "center", "justifyContent": "space-between", "gap": "8px", "border": "1px solid #EDE7E1", "borderRadius": "4px", "padding": "7px 9px", "minWidth": "0", "minHeight": "34px"}}><span style={{"display": "flex", "alignItems": "center", "gap": "8px"}}><img src={logoBase + "/xero.jpg"} alt="" style={{"width": "16px", "height": "16px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} /><span style={{"fontSize": "11.5px", "whiteSpace": "nowrap"}}>Xero</span></span><span style={{"fontSize": "11px", "color": "#8a8d94", "textAlign": "right", "whiteSpace": "nowrap", "overflow": "hidden", "textOverflow": "ellipsis", "minWidth": "0"}}>finance</span></div>
      <div style={{"display": "flex", "flexDirection": "row", "alignItems": "center", "justifyContent": "space-between", "gap": "8px", "border": "1px solid #EDE7E1", "borderRadius": "4px", "padding": "7px 9px", "minWidth": "0", "minHeight": "34px"}}><span style={{"display": "flex", "alignItems": "center", "gap": "8px"}}><img src={logoBase + "/microsoft.jpg"} alt="" style={{"width": "16px", "height": "16px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} /><span style={{"fontSize": "11.5px", "whiteSpace": "nowrap"}}>Microsoft 365</span></span><span style={{"fontSize": "11px", "color": "#8a8d94", "textAlign": "right", "whiteSpace": "nowrap", "overflow": "hidden", "textOverflow": "ellipsis", "minWidth": "0"}}>workspace</span></div>
      <div style={{"display": "flex", "flexDirection": "row", "alignItems": "center", "justifyContent": "space-between", "gap": "8px", "border": "1px solid #EDE7E1", "borderRadius": "4px", "padding": "7px 9px", "minWidth": "0", "minHeight": "34px"}}><span style={{"display": "flex", "alignItems": "center", "gap": "8px"}}><img src={logoBase + "/googledrive.png"} alt="" style={{"width": "16px", "height": "16px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} /><span style={{"fontSize": "11.5px", "whiteSpace": "nowrap"}}>Google Drive</span></span><span style={{"fontSize": "11px", "color": "#8a8d94", "textAlign": "right", "whiteSpace": "nowrap", "overflow": "hidden", "textOverflow": "ellipsis", "minWidth": "0"}}>documents</span></div>
      <div style={{"display": "flex", "flexDirection": "row", "alignItems": "center", "justifyContent": "space-between", "gap": "8px", "border": "1px solid #EDE7E1", "borderRadius": "4px", "padding": "7px 9px", "minWidth": "0", "minHeight": "34px"}}><span style={{"display": "flex", "alignItems": "center", "gap": "8px"}}><img src={logoBase + "/monday.jpg"} alt="" style={{"width": "16px", "height": "16px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} /><span style={{"fontSize": "11.5px", "whiteSpace": "nowrap"}}>monday.com</span></span><span style={{"fontSize": "11px", "color": "#8a8d94", "textAlign": "right", "whiteSpace": "nowrap", "overflow": "hidden", "textOverflow": "ellipsis", "minWidth": "0"}}>tasks</span></div>
      <div style={{"display": "flex", "flexDirection": "row", "alignItems": "center", "justifyContent": "space-between", "gap": "8px", "border": "1px solid #EDE7E1", "borderRadius": "4px", "padding": "7px 9px", "minWidth": "0", "minHeight": "34px"}}><span style={{"display": "flex", "alignItems": "center", "gap": "8px"}}><img src={logoBase + "/postgresql.png"} alt="" style={{"width": "16px", "height": "16px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} /><span style={{"fontSize": "11.5px", "whiteSpace": "nowrap"}}>PostgreSQL</span></span><span style={{"fontSize": "11px", "color": "#8a8d94", "textAlign": "right", "whiteSpace": "nowrap", "overflow": "hidden", "textOverflow": "ellipsis", "minWidth": "0"}}>records</span></div>
      <div style={{"display": "flex", "flexDirection": "row", "alignItems": "center", "justifyContent": "space-between", "gap": "8px", "border": "1px solid #EDE7E1", "borderRadius": "4px", "padding": "7px 9px", "minWidth": "0", "minHeight": "34px"}}><span style={{"display": "flex", "alignItems": "center", "gap": "8px"}}><img src={logoBase + "/azure.png"} alt="" style={{"width": "16px", "height": "16px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} /><span style={{"fontSize": "11.5px", "whiteSpace": "nowrap"}}>Microsoft Azure</span></span><span style={{"fontSize": "11px", "color": "#8a8d94", "textAlign": "right", "whiteSpace": "nowrap", "overflow": "hidden", "textOverflow": "ellipsis", "minWidth": "0"}}>records</span></div>
      <div style={{"display": "flex", "alignItems": "center", "gap": "8px", "border": "1px dashed #DCD4CC", "borderRadius": "4px", "padding": "7px 9px", "minHeight": "34px", "fontSize": "11.5px", "color": "#8a8d94"}}>and many more</div>
      </div>
      </div>
      
      <div style={{"flex": "1.4 1 520px", "background": "#ffffff", "border": "1px solid #E4DED8", "borderRadius": "6px", "padding": "12px", "minWidth": "0", "display": "flex", "flexDirection": "column", "gap": "10px"}}>
      <span style={{"fontSize": "11px", "letterSpacing": "0.14em", "color": "#8a8d94"}}>STRUCTURED MODEL OF YOUR FIRM</span>
      <div style={{"overflowX": "auto"}}>
      <svg viewBox="0 80 660 250" style={{"width": "100%", "maxWidth": "700px", "minWidth": "560px", "height": "auto", "display": "block", "margin": "0 auto"}} role="img" aria-label="Structured model of the firm">
      <g stroke="#C9C2BB" strokeWidth="1.2" fill="none">
      <line x1="130" y1="152" x2="196" y2="152" />
      <line x1="232" y1="169" x2="228" y2="248" />
      <line x1="276" y1="169" x2="356" y2="248" />
      </g>
      <g stroke="#E05F31" strokeWidth="2" fill="none">
      <line x1="292" y1="152" x2="374" y2="152" />
      <line x1="492" y1="144" x2="536" y2="104" />
      <line x1="492" y1="162" x2="528" y2="204" />
      </g>
      
      <g style={{"fontFamily": "'Inter',sans-serif", "fontSize": "11px", "fill": "#8a8d94", "paintOrder": "stroke", "stroke": "#FBF8F5", "strokeWidth": "3.5px", "strokeLinejoin": "round"}} textAnchor="middle">
      <text x="163" y="147">services</text>
      <text x="333" y="147">owns</text>
      <text x="494" y="118">is governed by</text>
      <text x="498" y="194" textAnchor="end">holds</text>
      <text x="212" y="212" textAnchor="end">is assessed by</text>
      <text x="346" y="204" textAnchor="start">has attached</text>
      </g>
      
      <g strokeWidth="1.3">
      <rect x="30" y="135" width="100" height="34" rx="5" fill="#ffffff" stroke="#DCD4CC" />
      <rect x="196" y="135" width="96" height="34" rx="5" fill="#FFF6F2" stroke="#E05F31" />
      <rect x="374" y="135" width="118" height="34" rx="5" fill="#FFF6F2" stroke="#E05F31" />
      <rect x="536" y="87" width="104" height="34" rx="5" fill="#ffffff" stroke="#E05F31" />
      <rect x="528" y="187" width="112" height="34" rx="5" fill="#ffffff" stroke="#E05F31" />
      <rect x="170" y="248" width="116" height="34" rx="5" fill="#ffffff" stroke="#DCD4CC" />
      <rect x="356" y="248" width="112" height="34" rx="5" fill="#ffffff" stroke="#DCD4CC" />
      </g>
      <g style={{"fontFamily": "'Space Grotesk',sans-serif", "fontSize": "12.5px", "fontWeight": "500", "fill": "#111111"}} textAnchor="middle">
      <text x="80" y="157">Adviser</text>
      <text x="244" y="157">Client</text>
      <text x="433" y="157">Portfolio</text>
      <text x="588" y="109">Mandate</text>
      <text x="584" y="209">Instrument</text>
      <text x="228" y="270">Risk Profile</text>
      <text x="412" y="270">Document</text>
      </g>
      
      <g stroke="#E05F31" strokeWidth="1.2" strokeDasharray="2 3">
      <line x1="80" y1="112" x2="80" y2="133" />
      <line x1="244" y1="112" x2="244" y2="133" />
      </g>
      <g>
      <rect x="14" y="88" width="154" height="24" rx="4" fill="#FDEDE6" stroke="#F4C3AE" strokeWidth="1" />
      <g transform="translate(24,94) scale(0.46)" fill="none" stroke="#E05F31" strokeWidth="2.4"><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" /></g>
      <text x="38" y="104" style={{"fontFamily": "'Inter',sans-serif", "fontSize": "11px", "fill": "#C4491F"}}>sees own clients only</text>
      <rect x="176" y="88" width="180" height="24" rx="4" fill="#FDEDE6" stroke="#F4C3AE" strokeWidth="1" />
      <g transform="translate(186,94) scale(0.46)" fill="none" stroke="#E05F31" strokeWidth="2.4"><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" /></g>
      <text x="200" y="104" style={{"fontFamily": "'Inter',sans-serif", "fontSize": "11px", "fill": "#C4491F"}}>identity number restricted</text>
      </g>
      
      <g>
      <rect x="30" y="300" width="610" height="1" fill="#EAE3DC" />
      <text x="30" y="324" style={{"fontFamily": "'Inter',sans-serif", "fontSize": "11px", "fill": "#8a8d94"}}>Everything Holdpoint holds stays inside your own environment.</text>
      </g>
      </svg>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
    </div>
  );
}

window.DiagramOntology = DiagramOntology;