// Problem — your network works, it just has limits.
function Problem() {
  return (
    <section className="bp-section" id="problem">
      <div className="container">
        <SectionEyebrow num="03" label="Why now" />
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 1fr)',
          gap: 'clamp(32px, 5vw, 80px)',
          alignItems: 'start',
        }}>
          <Reveal>
            <h2 className="t-h2" style={{ maxWidth: '14ch' }}>
              Your network <span className="t-italic" style={{ color: 'var(--signal)' }}>works.</span>{' '}
              It just has limits.
            </h2>
          </Reveal>
          <Reveal delay={120} className="stack-24" style={{ paddingTop: 18 }}>
            <p className="t-lede" style={{ color: 'var(--fg-mute)', maxWidth: '46ch' }}>
              Referrals work because they come with real context — you know the person, the company, and the reason to reach out. BetterPipe finds that same kind of context outside your existing network, and turns it into outreach you can actually send.
            </p>
          </Reveal>
        </div>

        {/* Three contrast cards */}
        <Reveal delay={240} style={{
          marginTop: 64,
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 16,
        }}>
          {[
            { eb: 'Limit 01', title: 'Network-led growth gets unpredictable.', body: 'The same warm contacts can only go so far. When referrals slow down, most teams don\u2019t have a next move.' },
            { eb: 'Limit 02', title: 'Generic personalization gets ignored.', body: 'Your buyers can tell when \u201Cpersonalization\u201D is scraped, not real. A name and a title isn\u2019t context.' },
            { eb: 'Limit 03', title: 'The modern sales stack is too much.', body: 'Research, enrichment, sequencing, CRM, LinkedIn, email, reporting — six jobs, one team.' },
          ].map((c, i) => (
            <div key={i} className="card" style={{ padding: 28, position: 'relative' }}>
              <div className="upper-mono" style={{ marginBottom: 14, color: 'var(--fg-mute)' }}>{c.eb}</div>
              <h3 className="t-h3" style={{ fontSize: 22, marginBottom: 12, color: 'var(--fg)', maxWidth: '18ch' }}>{c.title}</h3>
              <p style={{ color: 'var(--fg-mute)', fontSize: 14, lineHeight: 1.55 }}>{c.body}</p>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

window.Problem = Problem;