/* IMPACT STATS — big numbers + small sparklines */

function Stats() {
  const isMobile = useWindowWidth() < 768;
  const items = [
    {
      eyebrow: 'PROJECTS DELIVERED',
      value: 120, prefix: '', suffix: '+',
      title: 'Successful projects shipped',
      body: 'From DTC startups to 8-figure enterprises — we\'ve built high-performing websites, ad systems and digital experiences that drive real results.',
      spark: [4, 6, 9, 14, 22, 31, 45, 60, 78, 94, 108, 120],
    },
    {
      eyebrow: 'AD CAMPAIGNS OPTIMIZED',
      value: 5, prefix: '', suffix: 'K+',
      title: 'Ad campaigns optimized',
      body: 'We\'ve helped brands lower acquisition costs and boost ROI with data-driven paid media strategies across Meta, Google, TikTok and Klaviyo.',
      spark: [200, 500, 800, 1400, 2100, 2800, 3400, 3900, 4400, 4700, 4950, 5100],
    },
    {
      eyebrow: 'REVENUE GENERATED',
      value: 10, prefix: '$', suffix: 'M+',
      title: 'Revenue generated for clients',
      body: 'Our strategic design, marketing and conversion optimization helped businesses scale and maximize profits across 14 countries.',
      spark: [1, 1.4, 2, 2.8, 3.6, 4.5, 5.4, 6.2, 7.1, 8.0, 9.1, 10.2],
    },
  ];

  return (
    <section data-screen-label="04 Impact" id="impact" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="container">
        <SectionHeader
          eyebrow="Impact"
          title={<>Ecomlifters simplifies the process,<br /><span className="accent">and delivers results.</span></>}
          align="left"
        />

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 1,
          background: 'var(--hairline)',
          borderTop: '1px solid var(--hairline)',
          borderBottom: '1px solid var(--hairline)',
        }}>
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 100} style={{ background: 'var(--bg)', padding: '36px 32px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 18, marginBottom: 18 }}>
                <span className="mono-label">{it.eyebrow}</span>
                <Sparkline values={it.spark} width={84} height={28} color="var(--green-deep)" strokeWidth={1.4} />
              </div>
              <div className="num" style={{ fontSize: 'clamp(56px, 6vw, 92px)', fontWeight: 400, letterSpacing: '-0.04em', lineHeight: 0.95, marginBottom: 12 }}>
                <Counter to={it.value} prefix={it.prefix} suffix={it.suffix} />
              </div>
              <h3 style={{ fontSize: 16, fontWeight: 600, margin: '0 0 6px 0', color: 'var(--green-deep)' }}>{it.title}</h3>
              <p style={{ fontSize: 14, color: 'var(--ink-soft)', margin: 0, lineHeight: 1.5 }}>{it.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Stats = Stats;