/* CASE STUDY — proof beat right below The System. Open editorial layout
   (no cards): eyebrow → display heading → Aleevia logo → three stat columns
   with counting values. Per the approved sketch, the three stat values are
   the highlighter moment of this viewport — lime, nothing else. */
function CaseSection() {
  const eyebrowStyle = {
    color: 'var(--cam-text-inactive)', fontSize: 'var(--fs-eyebrow)',
    fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase',
    letterSpacing: 'var(--track-eyebrow)', marginBottom: 'var(--space-4)',
  };
  const stats = [
    {
      label: 'Efficiency', end: 120, suffix: ' hour/week', duration: 1400,
      body: 'savings per operation, the equivalent of 4 full-time marketing people, excluding payroll.',
    },
    {
      label: 'Pipeline', end: 2, prefix: '≈', suffix: ' months', duration: 900,
      body: 'Until the pipeline becomes predictable: the design partners are already generating qualified leads.',
    },
    {
      label: 'Autonomy', end: 1, suffix: ' tool', duration: 700,
      body: 'Instead of the entire stack, it creates, distributes, assigns to the CRM, and manages the cycle without any other tool.',
    },
  ];
  return (
    <section id="case" data-screen-label="Case Study" style={{ background: 'var(--cam-surface-base)', borderTop: '1px solid var(--cam-border-subtle)' }}>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: 'var(--section-pad) var(--page-gutter)' }}>
        <div className="lp-reveal">
          <div style={eyebrowStyle}>Case study from one of our design partners</div>
          <h2 style={{
            margin: 0, fontSize: 'min(var(--fs-h1), calc(min(72rem, 100vw - 2 * var(--page-gutter)) / 19))', fontWeight: 'var(--fw-black)',
            letterSpacing: 'var(--track-display)', lineHeight: 'var(--lh-snug)',
            color: 'var(--cam-text-primary)', whiteSpace: 'nowrap',
          }}>Proof that the loop is already working.</h2>
          <img src="assets/aleevia.png" alt="Aleevia" draggable={false} style={{
            display: 'block', height: 30, width: 'auto', marginTop: 'var(--space-7)',
          }} />
        </div>

        <div className="lp-group" style={{
          marginTop: 'var(--space-8)', display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 'var(--space-8)',
        }}>
          {stats.map((s, i) => (
            <div key={s.label} className="lp-item" style={{
              '--d': (i * 0.15) + 's',
              borderTop: '1px solid var(--cam-border-strong)', paddingTop: 'var(--space-5)',
            }}>
              <div style={{
                color: 'var(--cam-text-primary)', fontSize: 'var(--fs-eyebrow)',
                fontWeight: 'var(--fw-bold)', textTransform: 'uppercase',
                letterSpacing: 'var(--track-eyebrow)',
              }}>{s.label}</div>
              <div style={{
                marginTop: 'var(--space-3)', color: 'var(--cam-accent-lime)',
                fontSize: 'clamp(1.7rem, 2.4vw, 2.3rem)', fontWeight: 'var(--fw-black)',
                letterSpacing: 'var(--track-display)', lineHeight: 1.1,
              }}>
                <CountUp end={s.end} prefix={s.prefix || ''} suffix={s.suffix} duration={s.duration} delay={i * 150} />
              </div>
              <p style={{
                margin: 'var(--space-4) 0 0', color: 'var(--cam-text-auxiliary)',
                fontSize: 'var(--fs-small)', lineHeight: 1.55, letterSpacing: 'var(--track-text)',
                maxWidth: '38ch',
              }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.CaseSection = CaseSection;