// CTA.jsx — Homepage closing section, two paths (Build + Convert), no pricing, all CTAs to /apply
const CTA = () => {
  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">
      <div className="container">

        {/* Two paths */}
        <div style={{ marginBottom: isMobile ? 64 : 96 }}>
          <div style={{
            display: isMobile ? 'flex' : 'grid',
            flexDirection: 'column',
            gridTemplateColumns: '5fr 7fr',
            gap: isMobile ? 12 : 64,
            marginBottom: isMobile ? 32 : 56,
            alignItems: 'end'
          }}>
            <div className="eyebrow">Two ways in</div>
            <h2 style={{ maxWidth: 720 }}>Pick the path that fits where you are right now.</h2>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
            gap: isMobile ? 16 : 24
          }}>
            {/* Build */}
            <div style={{
              padding: isMobile ? 28 : 44,
              borderRadius: 12,
              border: '2px solid var(--navy)',
              background: 'rgba(30,58,138,0.02)',
              display: 'flex', flexDirection: 'column', gap: 16,
              position: 'relative'
            }}>
              <div className="eyebrow" style={{ color: 'var(--navy)' }}>Build</div>
              <h3 style={{ fontSize: isMobile ? 22 : 28, fontWeight: 700, letterSpacing: '-0.025em' }}>Launch from scratch</h3>
              <p style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.65 }}>
                You want to enter the telehealth market the right way. We build the entire company for you — licensing, prescribers, pharmacy, patient portal, compliant funnels, and invite-only processing. Or we hand you the blueprint and you build it yourself with our direct support.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {['Done-For-You full build', 'Done-With-You blueprint + support', 'Access to invite-only processing'].map(item => (
                  <li key={item} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'var(--fg)' }}>
                    <svg width="16" height="16" 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>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 'auto', paddingTop: 8 }}>
                <a href="/build" className="btn btn-primary" style={{ textDecoration: 'none', display: 'block', textAlign: 'center', fontSize: 14 }}>See the Build path</a>
              </div>
            </div>

            {/* Convert */}
            <div style={{
              padding: isMobile ? 28 : 44,
              borderRadius: 12,
              border: '1px solid var(--border)',
              display: 'flex', flexDirection: 'column', gap: 16
            }}>
              <div className="eyebrow" style={{ color: 'var(--fg-3)' }}>Convert</div>
              <h3 style={{ fontSize: isMobile ? 22 : 28, fontWeight: 700, letterSpacing: '-0.025em' }}>Convert an existing brand</h3>
              <p style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.65 }}>
                You are already generating revenue — RUO, supplements, or gray market. We convert your brand from the inside out. Strip the liability, rebuild the infrastructure underneath it, scale it, and position it for an exit in 12 to 24 months.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {['Full infrastructure conversion', 'Customer base transitions to patients', 'Exit positioning from day one'].map(item => (
                  <li key={item} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'var(--fg)' }}>
                    <svg width="16" height="16" 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>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 'auto', paddingTop: 8 }}>
                <a href="/convert" className="btn btn-secondary" style={{ textDecoration: 'none', display: 'block', textAlign: 'center', fontSize: 14 }}>See the Convert path</a>
              </div>
            </div>
          </div>

          <div style={{ textAlign: 'center', marginTop: 20 }}>
            <span style={{ fontSize: 13, color: 'var(--fg-3)' }}>Financing available on both paths. Capital is not a barrier if you are serious.</span>
          </div>
        </div>

        {/* Final CTA */}
        <div style={{
          borderTop: '1px solid var(--border)',
          paddingTop: isMobile ? 48 : 96,
          display: isMobile ? 'flex' : 'grid',
          flexDirection: 'column',
          gridTemplateColumns: '7fr 5fr',
          gap: isMobile ? 32 : 96,
          alignItems: 'start'
        }}>
          <div>
            <h2>The operators who build compliant infrastructure now will own this market.</h2>
            <p className="body-l" style={{ marginTop: isMobile ? 16 : 32, color: 'var(--fg-2)' }}>
              The demand for GLP-1s, peptides, and men's health treatments is growing. The gray market is getting tighter. The window to build something legitimate and acquirable is open right now.
            </p>
            <p style={{ marginTop: 16, color: 'var(--fg-2)', fontSize: 15 }}>
              We take on a small number of operators at a time. Apply and we will look at your situation, your goals, and your timeline. If you are a fit, we will show you exactly how we work.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 8, width: '100%' }}>
            <a href="/apply" className="btn btn-primary" style={{ textDecoration: 'none', textAlign: 'center' }}>
              Apply now
            </a>
            <div className="meta" style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 4, lineHeight: 1.6 }}>
              Both paths require an application. The call is 30 minutes. No pitch — just a real conversation about your situation.
            </div>
          </div>
        </div>

      </div>
    </section>
  );
};
window.CTA = CTA;