// Demo proof — what you get in a 30-min founder demo.
function DemoProof() {
  const items = [
    'Your best-fit buyer criteria',
    'Example target companies',
    'The signals that make them relevant',
    'Sample email and LinkedIn outreach',
    'How replies flow into pipeline',
  ];
  return (
    <section className="bp-section" id="demo">
      <div className="container">
        <SectionEyebrow num="06" label="The demo" />
        <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: '15ch', marginBottom: 24 }}>
              Bring your website. Leave with{' '}
              <span className="t-italic" style={{ color: 'var(--signal)' }}>your first campaign map.</span>
            </h2>
            <p className="t-lede" style={{ color: 'var(--fg-mute)', maxWidth: '46ch', marginBottom: 28 }}>
              We'll use your actual website to build a working campaign map — target companies, signals, outreach, and pipeline — live, in 30 minutes.
            </p>
            <a href="#book" className="btn btn-primary">
              Book a founder demo
              <ArrowRight />
            </a>
          </Reveal>

          <Reveal delay={120} className="card" style={{ padding: 32 }}>
            <div className="upper-mono" style={{ marginBottom: 18, color: 'var(--signal)' }}>In 30 minutes you'll see</div>
            <div className="stack-16">
              {items.map((it, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: '14px 0',
                  borderBottom: i < items.length - 1 ? '1px solid var(--rule)' : 'none',
                }}>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
                    color: 'var(--signal)', minWidth: 24,
                  }}>0{i + 1}</span>
                  <span style={{ flex: 1, fontSize: 16, color: 'var(--fg)' }}>{it}</span>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--fg-mute)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                </div>
              ))}
            </div>
            <div style={{
              marginTop: 24, padding: '14px 16px', borderRadius: 10,
              background: 'var(--bg)', border: '1px dashed var(--rule-strong)',
              fontSize: 13, color: 'var(--fg-mute)', lineHeight: 1.55,
            }}>
              Founder-led. No sales loop. We either build something useful in the call, or you don't book.
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.DemoProof = DemoProof;