// Stats.jsx — Platform track record, exit mentioned once quietly (responsive)
const StatBlock = ({ to, prefix = '', suffix = '', decimals = 0, label, sub, delay = 0 }) => {
  const [ref, val] = useCounter(to, { duration: 1800, decimals });
  return (
    <Reveal delay={delay} y={20}>
      <div ref={ref} style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingTop: 24, borderTop: '1px solid var(--border)' }}>
        <div className="eyebrow" style={{ color: 'var(--fg-3)' }}>{label}</div>
        <div style={{
          fontSize: 'clamp(48px, 9vw, 144px)',
          lineHeight: 0.92,
          letterSpacing: '-0.055em',
          fontWeight: 800,
          color: 'var(--fg)',
          fontFeatureSettings: '"tnum" 1, "lnum" 1'
        }}>{prefix}{val}{suffix}</div>
        <div style={{ fontSize: 14, color: 'var(--fg-2)', maxWidth: 360, lineHeight: 1.55, marginTop: 4 }}>{sub}</div>
      </div>
    </Reveal>
  );
};

const Stats = () => {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);
  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  return (
    <section className="section" style={{ background: 'var(--bg-alt)' }}>
      <div className="container">
        <div style={{
          display: isMobile ? 'flex' : 'grid',
          flexDirection: 'column',
          gridTemplateColumns: '5fr 7fr',
          gap: isMobile ? 16 : 64,
          marginBottom: isMobile ? 40 : 96,
          alignItems: 'end'
        }}>
          <Reveal className="eyebrow" y={8}>The track record</Reveal>
          <Reveal as="h2" y={14} delay={120} style={{ maxWidth: 720 }}>
            The infrastructure behind the numbers.
          </Reveal>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
          gap: isMobile ? '40px' : '64px 80px'
        }}>
          <StatBlock to={33} prefix="$" suffix="M" label="2024 revenue" sub="When the GLP-1 wave hit, the compliant infrastructure was already in place. Competitors were scrambling. We were scaling." delay={0} />
          <StatBlock to={110} prefix="$" suffix="M" label="2025 revenue" sub="Scaled to nine figures because the infrastructure could handle it. Gray-market operators couldn't touch it." delay={80} />
          <StatBlock to={15} prefix="$" suffix="M/mo" label="Current monthly gross" sub="The same infrastructure you get access to is still running at scale today." delay={160} />
          <StatBlock to={0} label="FDA actions on platform" sub="Zero warning letters. Zero enforcement actions. Zero fund freezes. Across the entire operating history." delay={240} />
        </div>
      </div>
    </section>
  );
};
window.Stats = Stats;