// Comparison.jsx — Before/after comparison table (responsive)
const rows = [
  ['Legal status', 'Federal criminal liability', 'Licensed telehealth company, 47 states'],
  ['Processing', '$100K reserve, 15-20% fees, random freezes', 'Invite-only processor, low fees, zero freezes'],
  ['Prescribing', 'No physician oversight', 'Licensed MDs review every order'],
  ['Pharmacy', 'Unverified gray-market labs', '503A/503B compounding partners, cold-chain'],
  ['Ad accounts', 'Constant bans on Google and Meta', 'Run high-volume campaigns as legit healthcare'],
  ['Exit potential', 'Unsellable — federal liability', 'Audit-grade books, PE-ready from day one'],
  ['Patient data', 'PHI in plain text, no compliance', 'HIPAA-aligned, SOC 2 Type II'],
];

const Comparison = () => {
  const containerRef = React.useRef(null);
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);
  const progress = useScrollProgress(containerRef);
  const visibleCount = Math.min(rows.length, Math.floor(progress / (0.7 / rows.length)));

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

  return (
    <section ref={containerRef} style={{ position: 'relative', height: `${rows.length * 60 + 100}vh`, background: 'var(--bg)' }}>
      <div style={{ position: 'sticky', top: 0, height: '100vh', display: 'flex', alignItems: 'center' }}>
        <div className="container" style={{ width: '100%' }}>
          <div style={{
            display: isMobile ? 'flex' : 'grid',
            flexDirection: 'column',
            gridTemplateColumns: '5fr 7fr',
            gap: isMobile ? 12 : 64,
            marginBottom: isMobile ? 32 : 56,
            alignItems: 'end'
          }}>
            <div className="eyebrow">Why operators convert</div>
            <h2 style={{ maxWidth: 720 }}>Gray market vs. 503 Protocol.</h2>
          </div>

          {/* Desktop: table layout */}
          {!isMobile && (
            <div style={{ borderTop: '1px solid var(--border)' }}>
              <div style={{
                display: 'grid', gridTemplateColumns: '1.2fr 2fr 2fr',
                padding: '20px 0', borderBottom: '1px solid var(--border)'
              }}>
                <div className="eyebrow"></div>
                <div className="eyebrow" style={{ color: 'var(--fg-3)' }}>Without 503</div>
                <div className="eyebrow" style={{ color: 'var(--navy)' }}>With 503</div>
              </div>
              {rows.map((r, i) => {
                const visible = i < visibleCount;
                return (
                  <div key={i} style={{
                    display: 'grid', gridTemplateColumns: '1.2fr 2fr 2fr',
                    padding: '20px 0', borderBottom: '1px solid var(--border)',
                    alignItems: 'center',
                    opacity: visible ? 1 : 0.18,
                    transform: visible ? 'translateY(0)' : 'translateY(8px)',
                    transition: 'opacity 380ms cubic-bezier(0.2,0,0,1), transform 380ms cubic-bezier(0.2,0,0,1)'
                  }}>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{r[0]}</div>
                    <div style={{ fontSize: 14, color: 'var(--fg-3)' }}>{r[1]}</div>
                    <div style={{ fontSize: 14, color: 'var(--fg)', fontWeight: 500 }}>{r[2]}</div>
                  </div>
                );
              })}
            </div>
          )}

          {/* Mobile: stacked card layout */}
          {isMobile && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {rows.map((r, i) => {
                const visible = i < visibleCount;
                return (
                  <div key={i} style={{
                    padding: '16px',
                    borderRadius: 8,
                    border: '1px solid var(--border)',
                    opacity: visible ? 1 : 0.18,
                    transform: visible ? 'translateY(0)' : 'translateY(8px)',
                    transition: 'opacity 380ms cubic-bezier(0.2,0,0,1), transform 380ms cubic-bezier(0.2,0,0,1)'
                  }}>
                    <div style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--fg-3)', marginBottom: 8 }}>{r[0]}</div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                      <div style={{ fontSize: 13, color: 'var(--fg-3)', textDecoration: 'line-through', textDecorationColor: 'rgba(220,38,38,0.4)' }}>{r[1]}</div>
                      <div style={{ fontSize: 14, color: 'var(--fg)', fontWeight: 500 }}>{r[2]}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}

          <div style={{ marginTop: isMobile ? 24 : 40, height: 1, background: 'var(--border)', position: 'relative' }}>
            <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, background: 'var(--navy)', width: `${Math.min(100, (progress / 0.7) * 100)}%` }}></div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Comparison = Comparison;