// DiagramBoundary — Holdpoint homepage diagram 2
// 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 DiagramBoundary({ logoBase = 'logos', bare = false }) {
  const log = [
    { time: '14:02:11', event: 'Request received', detail: 'mandate check' },
    { time: '14:02:11', event: 'Access checked', detail: 'sees own clients only' },
    { time: '14:02:12', event: '3 values replaced', detail: 'tokenised' },
    { time: '14:02:12', event: 'Sent to model', detail: 'tokens only' },
    { time: '14:02:15', event: 'Values restored', detail: 'inside your environment' }
  ];
  // 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)"}}>The same question, sent to a model</div>
      </div>
)}
      
      <div style={{"display": "flex", "flexWrap": "wrap", "gap": "10px", "alignItems": "stretch"}}>
      
      <div style={{"flex": "1 1 200px", "display": "flex", "flexDirection": "column", "gap": "12px", "minWidth": "0"}}>
      <div style={{"display": "flex", "alignItems": "center", "gap": "8px"}}>
      <span style={{"width": "22px", "height": "22px", "borderRadius": "50%", "background": "#F1EBE5", "display": "flex", "alignItems": "center", "justifyContent": "center"}}>
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#54585f" 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={{"fontSize": "11.5px", "color": "#54585f"}}>Adviser</span>
      </div>
      <div style={{"display": "flex", "alignItems": "center", "gap": "8px"}}>
      <div style={{"flex": "1", "minWidth": "0", "background": "#FAF7F4", "border": "1px solid #EFE7E0", "borderRadius": "8px", "borderTopLeftRadius": "2px", "padding": "13px 14px", "fontSize": "13px", "lineHeight": "1.5"}}>Is <span style={{"color": "#E05F31"}}>Thandi Mokoena</span>'s portfolio <span style={{"color": "#E05F31"}}>SWP-OFF-035</span> still within its mandate?</div>
      <svg width="24" height="10" viewBox="0 0 24 10" fill="none" stroke="#8a8d94" strokeWidth="1.4" style={{"flex": "none"}}><path d="M0 5h20M16.5 1.5 20 5l-3.5 3.5" /></svg>
      </div>
      <div style={{"display": "flex", "alignItems": "center", "gap": "8px"}}>
      <div style={{"flex": "1", "minWidth": "0", "background": "#ffffff", "border": "1px solid #E0D9D2", "borderRadius": "8px", "borderTopLeftRadius": "2px", "padding": "13px 14px", "fontSize": "13px", "lineHeight": "1.5"}}><span style={{"color": "#E05F31"}}>SWP-OFF-035</span> is within its mandate</div>
      <svg width="24" height="10" viewBox="0 0 24 10" fill="none" stroke="#8a8d94" strokeWidth="1.4" style={{"flex": "none"}}><path d="M24 5H4M7.5 1.5 4 5l3.5 3.5" /></svg>
      </div>
      <div style={{"display": "flex", "gap": "6px", "flexWrap": "wrap"}}>
      <span style={{"display": "inline-flex", "alignItems": "center", "gap": "5px", "background": "#EAF2EF", "border": "1px solid #C7DED6", "borderRadius": "4px", "padding": "3px 7px", "fontSize": "11px", "color": "#2F6356"}}>values restored</span>
      </div>
      </div>
      
      
      <div style={{"flex": "1.4 1 240px", "border": "1px solid #E0D9D2", "borderRadius": "8px", "overflow": "hidden", "minWidth": "0", "display": "flex", "flexDirection": "column"}}>
      <div style={{"background": "#17181C", "padding": "11px 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"}}>GATEWAY</span>
      </div>
      <div style={{"background": "#FBF8F5", "padding": "14px", "display": "flex", "flexDirection": "column", "gap": "12px", "flex": "1"}}>
      <div style={{"display": "flex", "flexDirection": "column", "gap": "7px"}}>
      <div style={{"fontSize": "11px", "letterSpacing": "0.14em", "color": "#8a8d94"}}>VALUES REPLACED BEFORE SENDING</div>
      <div style={{"display": "flex", "alignItems": "center", "gap": "8px", "background": "#ffffff", "border": "1px solid #EFE7E0", "borderRadius": "4px", "padding": "7px 9px"}}><span style={{"fontFamily": "'Inter',sans-serif", "fontSize": "11.5px", "color": "#E05F31", "flex": "1", "minWidth": "0"}}>Thandi Mokoena</span><svg width="14" height="10" 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><span style={{"fontFamily": "'Inter',sans-serif", "fontSize": "11.5px", "color": "#2F6356", "background": "#EAF2EF", "border": "1px solid #C7DED6", "borderRadius": "3px", "padding": "1px 5px"}}>Client_07</span></div>
      <div style={{"display": "flex", "alignItems": "center", "gap": "8px", "background": "#ffffff", "border": "1px solid #EFE7E0", "borderRadius": "4px", "padding": "7px 9px"}}><span style={{"fontFamily": "'Inter',sans-serif", "fontSize": "11.5px", "color": "#E05F31", "flex": "1", "minWidth": "0"}}>J. Naidoo</span><svg width="14" height="10" 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><span style={{"fontFamily": "'Inter',sans-serif", "fontSize": "11.5px", "color": "#2F6356", "background": "#EAF2EF", "border": "1px solid #C7DED6", "borderRadius": "3px", "padding": "1px 5px"}}>Adviser_02</span></div>
      <div style={{"display": "flex", "alignItems": "center", "gap": "8px", "background": "#ffffff", "border": "1px solid #EFE7E0", "borderRadius": "4px", "padding": "7px 9px"}}><span style={{"fontFamily": "'Inter',sans-serif", "fontSize": "11.5px", "color": "#E05F31", "flex": "1", "minWidth": "0"}}>SWP-OFF-035</span><svg width="14" height="10" 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><span style={{"fontFamily": "'Inter',sans-serif", "fontSize": "11.5px", "color": "#2F6356", "background": "#EAF2EF", "border": "1px solid #C7DED6", "borderRadius": "3px", "padding": "1px 5px"}}>Portfolio_12</span></div>
      </div>
      <div style={{"height": "1px", "background": "#EFE7E0"}}></div>
      <div style={{"display": "flex", "flexDirection": "column", "gap": "7px"}}>
      <div style={{"fontSize": "11px", "letterSpacing": "0.14em", "color": "#8a8d94"}}>VALUES RESTORED ON RETURN</div>
      <div style={{"display": "flex", "alignItems": "center", "gap": "8px", "background": "#ffffff", "border": "1px solid #EFE7E0", "borderRadius": "4px", "padding": "7px 9px"}}><span style={{"fontFamily": "'Inter',sans-serif", "fontSize": "11.5px", "color": "#2F6356", "background": "#EAF2EF", "border": "1px solid #C7DED6", "borderRadius": "3px", "padding": "1px 5px"}}>Portfolio_12</span><svg width="14" height="10" 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><span style={{"fontFamily": "'Inter',sans-serif", "fontSize": "11.5px", "color": "#E05F31"}}>SWP-OFF-035</span></div>
      </div>
      </div>
      </div>
      
      <div style={{"flex": "0 0 66px", "display": "flex", "flexDirection": "column", "alignItems": "center", "justifyContent": "center", "gap": "10px", "position": "relative", "padding": "6px 0"}}>
      <span style={{"position": "absolute", "top": "0", "bottom": "0", "left": "50%", "borderLeft": "1.5px dashed #17181C"}}></span>
      <span style={{"position": "relative", "background": "#ffffff", "padding": "5px 0"}}><svg width="30" height="10" viewBox="0 0 30 10" fill="none" stroke="#17181C" strokeWidth="1.5"><path d="M0 5h26M22.5 1.5 26 5l-3.5 3.5" /></svg></span>
      <span style={{"position": "relative", "width": "26px", "height": "26px", "borderRadius": "50%", "background": "#17181C", "display": "flex", "alignItems": "center", "justifyContent": "center", "flex": "none"}}><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#ffffff" strokeWidth="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></span>
      <span style={{"position": "relative", "background": "#ffffff", "writingMode": "vertical-rl", "fontSize": "11px", "letterSpacing": "0.16em", "color": "#17181C", "padding": "8px 0"}}>MODEL BOUNDARY</span>
      <span style={{"position": "relative", "background": "#ffffff", "padding": "5px 0"}}><svg width="30" height="10" viewBox="0 0 30 10" fill="none" stroke="#17181C" strokeWidth="1.5"><path d="M30 5H4M7.5 1.5 4 5l3.5 3.5" /></svg></span>
      </div>
      
      <div style={{"flex": "1.3 1 200px", "display": "flex", "flexDirection": "column", "gap": "12px", "minWidth": "0"}}>
      <span style={{"fontSize": "11.5px", "color": "#54585f"}}>Identifying values are replaced before this line.</span>
      <div style={{"background": "#FAF7F4", "border": "1px solid #EFE7E0", "borderRadius": "8px", "padding": "13px 14px", "fontFamily": "'Inter',sans-serif", "fontSize": "12px", "lineHeight": "1.5", "color": "#111111"}}>Is Client_07's portfolio Portfolio_12 still within its mandate?</div>
      <div style={{"display": "flex", "flexDirection": "column", "gap": "8px", "border": "1px solid #EFE7E0", "borderRadius": "8px", "padding": "13px 14px"}}>
      <div style={{"fontSize": "11px", "letterSpacing": "0.14em", "color": "#8a8d94"}}>MODEL PROVIDER</div>
      <div style={{"display": "flex", "flexWrap": "wrap", "gap": "6px"}}>
      <div style={{"display": "flex", "alignItems": "center", "gap": "7px", "border": "1px solid #E9E2DB", "borderRadius": "4px", "padding": "5px 8px", "fontSize": "11.5px"}}><img src={logoBase + "/openai.jpg"} alt="" style={{"width": "15px", "height": "15px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} />OpenAI</div>
      <div style={{"display": "flex", "alignItems": "center", "gap": "7px", "border": "1px solid #E9E2DB", "borderRadius": "4px", "padding": "5px 8px", "fontSize": "11.5px"}}><img src={logoBase + "/anthropic.jpg"} alt="" style={{"width": "15px", "height": "15px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} />Anthropic</div>
      <div style={{"display": "flex", "alignItems": "center", "gap": "7px", "border": "1px solid #E9E2DB", "borderRadius": "4px", "padding": "5px 8px", "fontSize": "11.5px"}}><img src={logoBase + "/gemini.jpg"} alt="" style={{"width": "15px", "height": "15px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} />Google Gemini</div>
      <div style={{"display": "flex", "alignItems": "center", "gap": "7px", "border": "1px solid #E9E2DB", "borderRadius": "4px", "padding": "5px 8px", "fontSize": "11.5px"}}><img src={logoBase + "/mistral.jpg"} alt="" style={{"width": "15px", "height": "15px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} />Mistral</div>
      <div style={{"display": "flex", "alignItems": "center", "gap": "7px", "border": "1px solid #E9E2DB", "borderRadius": "4px", "padding": "5px 8px", "fontSize": "11.5px"}}><img src={logoBase + "/meta.webp"} alt="" style={{"width": "15px", "height": "15px", "objectFit": "contain", "borderRadius": "2px", "flex": "none"}} />Meta Llama</div>
      </div>
      <span style={{"display": "inline-flex", "alignSelf": "flex-start", "alignItems": "center", "gap": "5px", "background": "#EAF2EF", "border": "1px solid #C7DED6", "borderRadius": "4px", "padding": "3px 7px", "fontSize": "11px", "color": "#2F6356"}}>reasons over tokens only</span>
      </div>
      <div style={{"background": "#FAF7F4", "border": "1px solid #EFE7E0", "borderRadius": "8px", "padding": "13px 14px", "fontFamily": "'Inter',sans-serif", "fontSize": "12px", "lineHeight": "1.5", "color": "#111111"}}>Portfolio_12 is within its mandate</div>
      </div>
      </div>
      
      <div style={{"border": "1px solid #E4DED8", "borderRadius": "8px", "overflow": "hidden"}}>
      <div style={{"background": "#F6F4F2", "borderBottom": "1px solid #E4DED8", "padding": "7px 14px", "display": "flex", "gap": "14px", "alignItems": "center"}}>
      <span style={{"fontSize": "11px", "letterSpacing": "0.14em", "color": "#8a8d94", "width": "64px"}}>TIME</span>
      <span style={{"fontSize": "11px", "letterSpacing": "0.14em", "color": "#8a8d94", "flex": "1"}}>EVENT</span>
      <span style={{"fontSize": "11px", "letterSpacing": "0.14em", "color": "#8a8d94"}}>DETAIL</span>
      </div>
      {log.map((row, _i) => (
      <div key={_i} style={{"display": "flex", "gap": "14px", "alignItems": "center", "padding": "6px 14px", "borderBottom": "1px solid #F2EDE8", "flexWrap": "wrap"}}>
      <span style={{"fontFamily": "'Inter',sans-serif", "fontVariantNumeric": "tabular-nums", "fontSize": "11.5px", "color": "#54585f", "width": "64px"}}>{row.time}</span>
      <span style={{"fontSize": "12.5px", "flex": "1", "minWidth": "120px"}}>{row.event}</span>
      <span style={{"fontSize": "11.5px", "color": "#8a8d94"}}>{row.detail}</span>
      </div>
      ))}
      <div style={{"display": "flex", "gap": "12px", "alignItems": "center", "padding": "8px 14px", "background": "#FDF6F2", "borderTop": "1px dashed #F0CDBB", "flexWrap": "wrap"}}>
      <span style={{"fontFamily": "'Inter',sans-serif", "fontVariantNumeric": "tabular-nums", "fontSize": "11.5px", "color": "#C4491F", "width": "64px"}}>14:06:48</span>
      <span style={{"width": "22px", "height": "22px", "borderRadius": "50%", "background": "#FDEDE6", "border": "1px solid #F4C3AE", "display": "flex", "alignItems": "center", "justifyContent": "center", "flex": "none"}}><svg width="12" height="12" 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={{"fontSize": "12.5px", "flex": "1", "minWidth": "120px"}}>Approved by reviewer</span>
      <span style={{"fontSize": "11.5px", "color": "#C4491F"}}>a person, 4 minutes later</span>
      </div>
      </div>
      </div>
    </div>
  );
}

window.DiagramBoundary = DiagramBoundary;