// CaseStudies.jsx — scroll-pinned case study panels (responsive)
const cases = [
  {
    co: 'Operator A',
    headline: 'RUO brand doing $800K/mo. Converted in 6 weeks. Scaled to $3.2M/mo within 5 months.',
    body: 'This operator was running a peptide brand on RUO copy with a high-risk processor charging 18% and holding $100K in reserve. We rebuilt the prescribing flow on our MD network, moved fulfillment to a 503A partner, and plugged them into our processor. Their margins doubled overnight because processing fees dropped from 18% to under 5%.',
    statValue: 3.2,
    statPrefix: '$',
    statSuffix: 'M',
    statDecimals: 1,
    statLabel: 'monthly revenue after conversion',
    sub: '4x growth in 5 months',
  },
  {
    co: 'Operator B',
    headline: 'Two FDA warning letters in 18 months. Zero since the migration.',
    body: 'This brand had already received two FDA warning letters and was one more away from an injunction. We replaced their marketing claims, restructured their supply chain through compliant pharmacies, and now run quarterly compliance review on every campaign they publish. Six quarters operating with zero regulatory contact.',
    statValue: 0,
    statPrefix: '',
    statSuffix: '',
    statLabel: 'FDA letters since conversion',
    sub: '6 quarters clean',
  },
  {
    co: 'Operator C',
    headline: 'Built from scratch. First prescription shipped in 4 weeks. Acquired 14 months later.',
    body: 'This operator had capital and wanted to enter the peptide telehealth space the right way. We built the entire company for them through our Done-For-You program: licensing, prescribers, pharmacy contracts, patient portal, processing. They shipped their first prescription 28 days after signing. A PE firm acquired them 14 months later.',
    statValue: 14,
    statPrefix: '',
    statSuffix: ' mo',
    statDecimals: 0,
    statLabel: 'from launch to acquisition',
    sub: 'DFY build, PE exit',
  },
];

const CasePanel = ({ data, active, isMobile }) => {
  const [ref, animatedVal] = useCounter(data.statValue, { duration: 1600, decimals: data.statDecimals || 0 });
  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column',
      justifyContent: 'center',
      opacity: active ? 1 : 0,
      transform: active ? 'translateY(0)' : 'translateY(20px)',
      transition: 'opacity 500ms cubic-bezier(0.2,0,0,1), transform 500ms cubic-bezier(0.2,0,0,1)',
      pointerEvents: active ? 'auto' : 'none',
      gap: isMobile ? 24 : 48
    }}>
      <div style={{ display: isMobile ? 'flex' : 'grid', flexDirection: 'column', gridTemplateColumns: '1fr 1fr', gap: isMobile ? 24 : 96, alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 12 : 24, minWidth: 0 }}>
          <div className="eyebrow" style={{ color: 'var(--navy)' }}>{data.co}</div>
          <h2 style={{ fontSize: isMobile ? 'clamp(20px, 5vw, 28px)' : 'clamp(24px, 2.6vw, 40px)', lineHeight: 1.1, letterSpacing: '-0.03em', fontWeight: 700 }}>
            {data.headline}
          </h2>
          {!isMobile && (
            <p className="body-l" style={{ color: 'var(--fg-2)', maxWidth: 520, lineHeight: 1.65 }}>
              {data.body}
            </p>
          )}
        </div>
        <div ref={ref} style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 16, minWidth: 0 }}>
          <div style={{
            fontSize: isMobile ? 'clamp(48px, 14vw, 80px)' : 'clamp(64px, 11vw, 200px)',
            lineHeight: 0.9,
            letterSpacing: '-0.055em',
            fontWeight: 800,
            color: 'var(--fg)',
            fontFeatureSettings: '"tnum" 1, "lnum" 1'
          }}>
            {data.statPrefix || ''}{animatedVal}{data.statSuffix || ''}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, paddingTop: 8, borderTop: '1px solid var(--border)', alignSelf: 'stretch' }}>
            <div className="eyebrow" style={{ color: 'var(--fg-2)' }}>{data.statLabel}</div>
            <div style={{ fontSize: 13, color: 'var(--fg-3)' }}>{data.sub}</div>
          </div>
        </div>
      </div>
      {isMobile && (
        <p style={{ color: 'var(--fg-2)', fontSize: 14, lineHeight: 1.6 }}>
          {data.body}
        </p>
      )}
    </div>
  );
};

const CaseStudies = () => {
  const containerRef = React.useRef(null);
  const [idx, setIdx] = React.useState(0);
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);
  const progress = useScrollProgress(containerRef);

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

  React.useEffect(() => {
    const n = cases.length;
    let i = Math.floor(progress * n);
    if (i >= n) i = n - 1;
    if (i < 0) i = 0;
    setIdx(i);
  }, [progress]);

  return (
    <section ref={containerRef} style={{ position: 'relative', height: `${cases.length * 100}vh`, background: 'var(--bg)' }}>
      <div style={{ position: 'sticky', top: 0, height: '100vh', display: 'flex', flexDirection: 'column' }}>
        <div className="container" style={{ paddingTop: isMobile ? 48 : 96, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div className="eyebrow">Operator outcomes</div>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
            {cases.map((_, i) => (
              <div key={i} style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 12,
                color: idx === i ? 'var(--fg)' : 'var(--fg-3)',
                fontWeight: idx === i ? 600 : 400,
                transition: 'color 240ms cubic-bezier(0.2,0,0,1)'
              }}>
                {String(i + 1).padStart(2, '0')}
              </div>
            ))}
          </div>
        </div>
        <div className="container" style={{ flex: 1, position: 'relative', display: 'flex', alignItems: 'center', width: '100%', boxSizing: 'border-box', paddingTop: isMobile ? 32 : 64, paddingBottom: isMobile ? 32 : 64 }}>
          <div style={{ position: 'relative', width: '100%', height: isMobile ? 480 : 560, flexShrink: 0 }}>
            {cases.map((c, i) => (
              <CasePanel key={i} data={c} active={idx === i} isMobile={isMobile} />
            ))}
          </div>
        </div>
        <div className="container" style={{ paddingBottom: isMobile ? 24 : 48 }}>
          <div style={{ height: 1, background: 'var(--border)', position: 'relative' }}>
            <div style={{
              position: 'absolute', left: 0, top: 0, bottom: 0,
              background: 'var(--navy)',
              width: `${(progress) * 100}%`,
              transition: 'width 80ms linear'
            }}></div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.CaseStudies = CaseStudies;