// Modules.jsx — What you get: the four pillars of the 503 conversion (responsive)
const Check = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 2 }}>
    <polyline points="20 6 9 17 4 12"></polyline>
  </svg>
);

const ModuleCard = ({ num, title, body, points, delay = 0 }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <Reveal delay={delay} y={16}>
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          padding: 'clamp(24px, 4vw, 36px)',
          background: 'var(--bg)',
          border: '1px solid',
          borderColor: hover ? 'var(--fg)' : 'var(--border)',
          borderRadius: 12,
          display: 'flex',
          flexDirection: 'column',
          gap: 16,
          transition: 'border-color 220ms cubic-bezier(0.2,0,0,1)',
          cursor: 'default',
          height: '100%',
          boxSizing: 'border-box'
        }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
          <div className="mono" style={{
            color: 'var(--fg-3)',
            transform: hover ? 'translateX(4px)' : 'translateX(0)',
            transition: 'transform 220ms cubic-bezier(0.2,0,0,1)'
          }}>{num}</div>
          <div className="eyebrow">Module</div>
        </div>
        <h3 style={{ fontSize: 'clamp(22px, 3vw, 28px)', lineHeight: 1.15, fontWeight: 700, letterSpacing: '-0.025em' }}>{title}</h3>
        <p style={{ color: 'var(--fg-2)', fontSize: 15 }}>{body}</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 4 }}>
          {points.map(p => (
            <div key={p} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'var(--fg)' }}>
              <Check /><span>{p}</span>
            </div>
          ))}
        </div>
      </div>
    </Reveal>
  );
};

const Modules = () => {
  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 section-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}>What we build for you</Reveal>
          <Reveal as="h2" y={14} delay={120} style={{ maxWidth: 720 }}>The same infrastructure behind a $60M exit.</Reveal>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
          gap: isMobile ? 16 : 24
        }}>
          <ModuleCard delay={0} num="01" title="Prescriber network" body="Your customers become patients with real prescriptions from licensed physicians. We set up your MD network across 47 states with both async and synchronous visit flows." points={['Licensed MDs in 47 states', 'Async + synchronous consultations', 'Clinical protocols reviewed quarterly']} />
          <ModuleCard delay={80} num="02" title="Pharmacy & fulfillment" body="We connect you with 503A and 503B compounding partners. Cold-chain shipping, audited inventory, one contract that covers every jurisdiction you sell into." points={['503A + 503B compounding partners', 'Cold-chain logistics nationwide', 'Single contract, all jurisdictions']} />
          <ModuleCard delay={160} num="03" title="Processing & payments" body="Our invite-only processor handles our own $10-15M/month volume. No $100K rolling reserve. No 15-20% fees. No surprise shutdowns when you scale past your first million." points={['No rolling reserve requirement', 'Low fees (not 15-20%)', 'Zero fund freezes in 3+ years of operation']} />
          <ModuleCard delay={240} num="04" title="Compliance & exit readiness" body="State-by-state telehealth licensing, HIPAA-aligned patient data, SOC 2 Type II. Audit-grade books and clean cap table built for the diligence room from day one." points={['State telehealth filings handled', 'HIPAA + SOC 2 Type II', 'Acquisition-ready financial structure']} />
        </div>
      </div>
    </section>
  );
};
window.Modules = Modules;