/* eslint-disable */
const CaseStudy = () =>
<section id="cases" style={{
  background: 'var(--bone-2)',
  borderTop: '1px solid var(--rule)',
  borderBottom: '1px solid var(--rule)',
  padding: 'var(--s-9) 0'
}}>
    <div style={{
    maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)'
  }}>
      <div style={{
      display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'var(--s-8)',
      alignItems: 'start', marginBottom: 'var(--s-7)'
    }}>
        <div>
          <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em',
          textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 'var(--s-5)'
        }}>
            <span style={{ width: 24, height: 2, background: 'var(--ink)' }} />
            <span>CASE · BAUUNTERNEHMEN</span>
          </div>
          <h2 style={{
          fontSize: 'clamp(32px, 3.2vw, 48px)', lineHeight: 1.05,
          letterSpacing: '-0.02em', fontWeight: 600,
          maxWidth: '14ch', margin: '0 0 var(--s-5) 0'
        }}>
            Offerten gehen <span style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic',
            fontWeight: 400, color: 'var(--ocher)'
          }}>40%</span> schneller raus.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: '40ch' }}>
            Drei Champions im Team, ein Werkzeug auf Mass gebaut, gemessen über drei Monate.
            Die Geschäftsleitung versteht jetzt, was KI im Tagesgeschäft heisst.
          </p>
        </div>

        <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
        border: '1px solid var(--rule)', background: 'var(--bone)'
      }}>
          {[
        { k: 'Offerten / Woche', after: '23', delta: '+64%' },
        { k: 'Stunden je Offerte', after: '2.1', delta: '−53%' },
        { k: 'Champions im Team', after: '3', delta: 'neu' },
        { k: 'Time to ROI', after: '11 Wo.', delta: '✓' }].
        map((m, i) =>
        <div key={m.k} style={{
          padding: 'var(--s-6) var(--s-5)',
          borderRight: i % 2 === 0 ? '1px solid var(--rule)' : 'none',
          borderBottom: i < 2 ? '1px solid var(--rule)' : 'none'
        }}>
              <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em',
            textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 12
          }}>{m.k}</div>
              <div style={{
            fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 36,
            letterSpacing: '-0.022em', color: 'var(--ink)', lineHeight: 1
          }}>
                {m.after}
              </div>
              <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ocher)',
            marginTop: 8, letterSpacing: '0.04em'
          }}>{m.delta}</div>
            </div>
        )}
        </div>
      </div>
    </div>
  </section>;

window.CaseStudy = CaseStudy;