// ProblemSection — Holdpoint homepage problem section
// 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.
// Replaces Problem.jsx and ProblemGraph.jsx.
// Sized to fit one screen; on shorter screens site.css scales it a step
// (see "Problem section" there).

function ProblemSection() {
  return (
    <section id="problem" style={{"background": "#202426", "padding": "44px 32px 44px", "fontFamily": "'Inter',system-ui,sans-serif", "display": "flex", "flexDirection": "column", "alignItems": "center", "gap": "32px"}}>
    
      <div style={{"maxWidth": "980px", "display": "flex", "flexDirection": "column", "alignItems": "center", "gap": "16px", "textAlign": "center"}}>
        <h2 style={{"margin": "0", "fontFamily": "'Space Grotesk',sans-serif", "fontWeight": "500", "fontSize": "clamp(28px,2.8vw,38px)", "lineHeight": "1.1", "letterSpacing": "-0.02em"}}>
          <span style={{"color": "#F2F1EE", "display": "block"}}>Safe or capable.</span>
          <span style={{"color": "#8E8B84", "display": "block"}}>Most firms are told to pick one.</span>
        </h2>
        <p style={{"margin": "0", "fontSize": "16px", "lineHeight": "1.6", "color": "#A9A69F", "textWrap": "pretty"}}>Regulated firms are under pressure to use AI, but the obvious routes fail either the compliance test or the practical one. Keep AI out, and staff do the work by hand or turn to public tools on their own, creating data risk concerns. Connect a model straight to your systems, and client data leaves the firm with outputs nobody can trace.</p>
      </div>
    
      <div style={{"width": "100%", "maxWidth": "600px", "background": "#121516", "border": "1px solid #3A3F44", "borderRadius": "14px", "padding": "16px 18px 18px", "boxSizing": "border-box"}}>
        <div style={{"display": "flex", "alignItems": "baseline", "justifyContent": "space-between", "gap": "16px", "marginBottom": "10px"}}>
          <span style={{"fontFamily": "'Space Grotesk',sans-serif", "fontSize": "11px", "letterSpacing": "0.16em", "color": "#8E8B84"}}>HOW FIRMS APPROACH AI TODAY</span>
        </div>
    
        {/* On narrow screens the chart keeps a legible size and scrolls sideways
            inside the card rather than shrinking its labels to nothing. */}
        <div style={{"overflowX": "auto", "WebkitOverflowScrolling": "touch"}}>
        <svg viewBox="0 0 770 430" style={{"width": "100%", "minWidth": "560px", "height": "auto", "display": "block", "overflow": "visible"}} role="img" aria-label="Two by two chart of how firms approach AI today">
          <g stroke="#3A3935" strokeWidth="1" strokeDasharray="4 5">
            <line x1="406" y1="24" x2="406" y2="376" />
            <line x1="64" y1="200" x2="748" y2="200" />
          </g>
    
          <rect x="408" y="26" width="338" height="172" rx="10" fill="#E05F31" fillOpacity="0.1" stroke="#E05F31" strokeWidth="1" strokeDasharray="5 5" />
          <g textAnchor="middle">
            <text x="577" y="58" style={{"fontFamily": "'Space Grotesk',sans-serif", "fontSize": "13.5px", "letterSpacing": "0.14em", "fill": "#E05F31"}}>SAFE AND CAPABLE</text>
            <circle cx="577" cy="104" r="15" fill="none" stroke="#E05F31" strokeWidth="1" strokeDasharray="4 4" />
            <circle cx="577" cy="104" r="5" fill="#E05F31" />
            <text x="577" y="152" style={{"fontFamily": "'Space Grotesk',sans-serif", "fontSize": "19px", "fill": "#E05F31"}}>Where regulated firms need to be</text>
          </g>
    
          <g style={{"fontFamily": "'Space Grotesk',sans-serif", "fontSize": "13.5px", "letterSpacing": "0.14em", "fill": "#8E8B84"}}>
            <text x="76" y="44">SAFE, NOT CAPABLE</text>
            <text x="76" y="366">NEITHER</text>
            <text x="740" y="228" textAnchor="end">CAPABLE, NOT SAFE</text>
          </g>
    
          <g stroke="#6F6C66" strokeWidth="1" fill="none">
            <line x1="64" y1="376" x2="64" y2="20" />
            <path d="M58 28 L64 18 L70 28" strokeLinejoin="round" />
            <line x1="64" y1="376" x2="752" y2="376" />
            <path d="M744 370 L754 376 L744 382" strokeLinejoin="round" />
          </g>
          <text x="44" y="198" transform="rotate(-90 44 198)" textAnchor="middle" style={{"fontFamily": "'Space Grotesk',sans-serif", "fontSize": "14.5px", "fill": "#6F6C66"}}>How safe it is with client data</text>
          <text x="752" y="400" textAnchor="end" style={{"fontFamily": "'Space Grotesk',sans-serif", "fontSize": "14.5px", "fill": "#6F6C66"}}>What AI can do for the firm</text>
    
          <g style={{"fontFamily": "'Space Grotesk',sans-serif", "fontSize": "17px", "fill": "#DEDCD6"}}>
            <circle cx="146" cy="99" r="6" fill="#F2F1EE" />
            <text x="162" y="104">AI banned outright</text>
    
            <circle cx="228" cy="170" r="5.5" fill="none" stroke="#F2F1EE" strokeWidth="1.5" />
            <text x="396" y="156" textAnchor="end">Pilots stuck in a sandbox</text>
    
            <circle cx="461" cy="284" r="5.5" fill="none" stroke="#F2F1EE" strokeWidth="1.5" />
            <text x="477" y="268">Staff using public AI tools</text>
    
            <circle cx="652" cy="327" r="6" fill="#F2F1EE" />
            <text x="744" y="309" textAnchor="end">Model wired straight into client data</text>
          </g>
        </svg>
        </div>
      </div>
    
      <div style={{"width": "100%", "maxWidth": "1100px", "display": "grid", "gridTemplateColumns": "repeat(auto-fit,minmax(240px,1fr))", "gap": "40px"}}>
        <div style={{"borderTop": "1px solid #34332F", "paddingTop": "16px", "display": "flex", "flexDirection": "column", "gap": "8px"}}>
          <h3 style={{"margin": "0", "fontFamily": "'Space Grotesk',sans-serif", "fontWeight": "500", "fontSize": "17px", "lineHeight": "1.25", "color": "#F2F1EE"}}>Data scattered across systems</h3>
          <p style={{"margin": "0", "fontSize": "14.5px", "lineHeight": "1.55", "color": "#A9A69F", "textWrap": "pretty"}}>Client information sits across many systems with no shared structure, so AI has nothing coherent to work from.</p>
        </div>
        <div style={{"borderTop": "1px solid #34332F", "paddingTop": "16px", "display": "flex", "flexDirection": "column", "gap": "8px"}}>
          <h3 style={{"margin": "0", "fontFamily": "'Space Grotesk',sans-serif", "fontWeight": "500", "fontSize": "17px", "lineHeight": "1.25", "color": "#F2F1EE"}}>Client data leaves the firm</h3>
          <p style={{"margin": "0", "fontSize": "14.5px", "lineHeight": "1.55", "color": "#A9A69F", "textWrap": "pretty"}}>Most AI tools work by sending information to an outside model, beyond the firm’s control.</p>
        </div>
        <div style={{"borderTop": "1px solid #34332F", "paddingTop": "16px", "display": "flex", "flexDirection": "column", "gap": "8px"}}>
          <h3 style={{"margin": "0", "fontFamily": "'Space Grotesk',sans-serif", "fontWeight": "500", "fontSize": "17px", "lineHeight": "1.25", "color": "#F2F1EE"}}>No one can account for the output</h3>
          <p style={{"margin": "0", "fontSize": "14.5px", "lineHeight": "1.55", "color": "#A9A69F", "textWrap": "pretty"}}>AI answers rarely show their source, who reviewed them, or a record of what happened.</p>
        </div>
      </div>
    
    </section>
  );
}

window.ProblemSection = ProblemSection;
