/* Big-numerals strip: what partners achieved per single campaign.
   Headline carries the "pro Kampagne" framing, so sub-labels stay clean.
*/
function ResultsStrip() {
  const items = [
    { num: '60', unit: 'Leads', label: 'Cognizant Mobility' },
    { num: '250', unit: 'Anmeldungen', label: 'Webinar für Exxeta' },
    { num: '1.203', unit: 'Klicks', label: 'zur Thoughtworks-Studie' },
  ];
  return (
    <section style={{ padding: '88px 0', background: 'var(--bg-page)', borderTop: '1px solid var(--border-default)', borderBottom: '1px solid var(--border-default)' }}>
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 56, flexWrap: 'wrap', gap: 20 }}>
          <h2 className="section-title" style={{ fontSize: 'clamp(32px, 4vw, 44px)' }}>
            Was meine Partner <em style={{ color: 'var(--ap-blue)', fontWeight: 500 }}>mit einer Kampagne</em> erreicht haben.
          </h2>
          <a href="#cases" style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--ap-blue)', textDecoration: 'none', fontWeight: 500 }}>Alle Cases ansehen</a>
        </div>

        <div className="results-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--border-default)' }}>
          {items.map((it, i) => (
            <div key={i} style={{ padding: '40px 32px 40px 0', borderRight: i < 2 ? '1px solid var(--border-default)' : 0, paddingLeft: i > 0 ? 40 : 0 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 12 }}>
                <span className="stat-num" style={{ fontSize: 88 }}>{it.num}</span>
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 18, color: 'var(--ap-blue)', fontWeight: 500 }}>{it.unit}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 20, color: 'var(--fg-1)', fontWeight: 500, lineHeight: 1.3 }}>
                {it.label}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.ResultsStrip = ResultsStrip;