/* CASE STUDY — proof block right below Early Traction (per the one-pager):
   a single dark card, centered on screen, grouping the Aleevia logo and the
   two stat columns on one grid. The two 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)',
  };
  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.',
    },
  ];
  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</div>
          <h2 className="lp-fit-h2" style={{
            margin: 'var(--space-4) 0 0', fontSize: 'var(--fs-h1)', fontWeight: 'var(--fw-black)',
            letterSpacing: 'var(--track-display)', lineHeight: 'var(--lh-snug)',
            color: 'var(--cam-text-primary)',
          }}>Our design partners.</h2>
        </div>

        {/* The proof card — logo and stats share one grid */}
        <div className="lp-group">
        <div className="lp-pop" style={{
          '--d': '0.1s',
          marginTop: 'var(--space-7)',
          background: 'var(--cam-surface-card)', border: '1px solid var(--cam-border-subtle)',
          borderRadius: 'var(--radius-card)', padding: 'var(--space-8)',
        }}>
          <img src="assets/aleevia.png" alt="Aleevia" draggable={false} style={{
            display: 'block', height: 26, width: 'auto',
          }} />
          <div className="lp-case-grid" style={{
            marginTop: 'var(--space-7)', 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': (0.25 + 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>
        </div>
      </div>
    </section>
  );
}
window.CaseSection = CaseSection;