// ProofKpis.jsx — KPI bar over navy + quote
const ProofKpis = () => {
  return (
    <section className="on-navy" style={{ background: 'var(--jet-navy)', padding: '112px 0' }} data-screen-label="Proof">
      <div className="container">
        <div className="sect__head" style={{ marginBottom: 0 }}>
          <div>
            <div className="sect__eyebrow" style={{ color: 'rgba(244,241,235,0.6)' }}>
              <span className="jet-trail" aria-hidden="true"></span>
              Em números
            </div>
            <h2 className="display-m" style={{ marginTop: 16, maxWidth: '14ch' }}>
              Onze anos. <em>Duzentos e quarenta projetos</em>.
            </h2>
          </div>
        </div>

        <div className="kpi-bar">
          <div className="metric"><div className="value">240<em>+</em></div><div className="label">Projetos entregues</div></div>
          <div className="metric"><div className="value">11</div><div className="label">Anos de operação</div></div>
          <div className="metric"><div className="value">1,1<em>s</em></div><div className="label">Tempo médio de carga</div></div>
          <div className="metric"><div className="value">60d</div><div className="label">Briefing → ar</div></div>
        </div>

        <div style={{ marginTop: 96, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <blockquote className="quote">
            "A Jetsites entrega o que <em>promete</em> — e antes do prazo. O time sai do projeto sabendo operar."
            <div className="quote__attrib">— Mariana Costa · CMO, Acme</div>
          </blockquote>
          <div style={{ display:'flex', flexDirection:'column', gap: 14 }}>
            <div className="card card--navy on-navy" style={{ padding: 24 }}>
              <div className="micro" style={{ color: 'rgba(244,241,235,0.5)', marginBottom: 8 }}>VALIDADO POR</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22 }}>Stripe Verified Partner</div>
            </div>
            <div className="card card--navy on-navy" style={{ padding: 24 }}>
              <div className="micro" style={{ color: 'rgba(244,241,235,0.5)', marginBottom: 8 }}>PERFORMANCE</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22 }}>Lighthouse 98 / 100 médio</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.ProofKpis = ProofKpis;