// Problem.jsx — "Why now": agents are the next super-user of your data,
// and the bottleneck is no longer reasoning — it's governed data access.
const Problem = () => {
  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      padding: '110px 32px 100px',
      background: '#060b14',
      borderTop: '1px solid rgba(125,211,252,0.06)',
    }}>
      {/* soft glow */}
      <div style={{
        position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)',
        width: 900, height: 460,
        background: 'radial-gradient(ellipse at top, rgba(26,143,224,0.12) 0%, rgba(29,168,105,0.06) 45%, transparent 72%)',
        pointerEvents: 'none', filter: 'blur(36px)',
      }} />

      <div style={{ position: 'relative', maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
          letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
          color: '#2ee89a', marginBottom: 18,
        }}>// why now</div>

        <h2 style={{
          fontFamily: 'Inter, sans-serif', fontSize: 'clamp(36px, 4.8vw, 56px)', fontWeight: 700,
          letterSpacing: '-0.025em', lineHeight: 1.05, margin: 0, marginBottom: 26,
          color: '#e6eef9', textWrap: 'balance',
        }}>
          Agents are becoming your data's{' '}
          <span style={{
            background: 'linear-gradient(90deg, #2ec47a 0%, #7ef3c4 45%, #1a8fe0 100%)',
            WebkitBackgroundClip: 'text', backgroundClip: 'text',
            WebkitTextFillColor: 'transparent', color: 'transparent', fontStyle: 'italic',
          }}>next super-user.</span>
        </h2>

        <p style={{
          fontFamily: 'Inter, sans-serif', fontSize: 18, lineHeight: 1.62,
          color: '#8ea3c0', margin: '0 auto 18px', maxWidth: 720, textWrap: 'pretty',
        }}>
          Every workflow you automate puts another agent in front of your databases — reading,
          writing, deciding. Before long they outnumber the humans querying your data many times over,
          and unlike a human they act in milliseconds, in parallel, with no second pair of eyes.
        </p>
        <p style={{
          fontFamily: 'Inter, sans-serif', fontSize: 18, lineHeight: 1.62,
          color: '#8ea3c0', margin: '0 auto 40px', maxWidth: 720, textWrap: 'pretty',
        }}>
          Hand one a production database and a single wrong call is a dropped table —{' '}
          <span style={{color:'#c4d2e2'}}>no undo, no audit, no warning.</span>
        </p>

        {/* thesis callout */}
        <div style={{
          maxWidth: 760, margin: '0 auto',
          padding: '28px 32px',
          borderRadius: 14,
          border: '1px solid rgba(46,232,154,0.18)',
          background: 'linear-gradient(180deg, rgba(29,168,105,0.07) 0%, rgba(10,18,32,0.4) 100%)',
        }}>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 'clamp(20px, 2.4vw, 26px)', lineHeight: 1.45,
            fontWeight: 500, margin: 0, color: '#e6eef9', textWrap: 'balance',
          }}>
            The bottleneck is no longer long-chain reasoning. It's{' '}
            <span style={{color:'#7ef3c4'}}>flexible <em>and</em> safe data access</span>{' '}
            — enough freedom to be useful, enough constraint to be trusted.
          </p>
        </div>
      </div>
    </section>
  );
};

window.Problem = Problem;