// VSL.jsx — Convert & Exit Protocol page, exit mentioned once in authority section (responsive)
const VSL = () => {
  const [show, setShow] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);
  React.useEffect(() => { const t = setTimeout(() => setShow(true), 60); return () => clearTimeout(t); }, []);
  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const fadeUp = (delay) => ({
    opacity: show ? 1 : 0,
    transform: show ? 'translate3d(0,0,0)' : 'translate3d(0,16px,0)',
    transition: `opacity 700ms cubic-bezier(0.2,0,0,1) ${delay}ms, transform 700ms cubic-bezier(0.2,0,0,1) ${delay}ms`
  });

  return (
    <div>
      {/* Hero / Video Section */}
      <section style={{ paddingTop: isMobile ? 48 : 96, paddingBottom: isMobile ? 48 : 96 }}>
        <div className="container">
          <div style={{ textAlign: 'center', maxWidth: 800, margin: '0 auto' }}>

            <h1 style={{ fontSize: isMobile ? 'clamp(24px, 7vw, 36px)' : 'clamp(36px, 5vw, 64px)', lineHeight: 1.05, letterSpacing: '-0.04em', fontWeight: 800, marginBottom: isMobile ? 16 : 24, ...fadeUp(100) }}>
              Convert your RUO brand into a licensed telehealth company.
            </h1>
            <p className="body-l" style={{ color: 'var(--fg-2)', maxWidth: 600, margin: '0 auto', marginBottom: isMobile ? 32 : 48, ...fadeUp(220) }}>
              Watch how existing RUO operators are going fully compliant, scaling without the constant fear of shutdowns, and building companies they can actually sell.
            </p>
          </div>

          {/* Video Embed Placeholder */}
          <div style={{ maxWidth: 900, margin: '0 auto', ...fadeUp(340) }}>
            <div style={{
              position: 'relative', paddingBottom: '56.25%',
              background: '#0a0a0a', borderRadius: isMobile ? 8 : 12,
              overflow: 'hidden', border: '1px solid var(--border)'
            }}>
              <div style={{
                position: 'absolute', inset: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexDirection: 'column', gap: 12
              }}>
                <div style={{
                  width: isMobile ? 56 : 72, height: isMobile ? 56 : 72, borderRadius: '50%',
                  background: 'var(--navy)', display: 'flex',
                  alignItems: 'center', justifyContent: 'center',
                  cursor: 'pointer', boxShadow: '0 4px 24px rgba(30,58,138,0.3)'
                }}>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="white"><polygon points="8,5 20,12 8,19" /></svg>
                </div>
                <span style={{ color: 'rgba(255,255,255,0.6)', fontSize: 13, fontWeight: 500 }}>Watch the full breakdown</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* The Problem */}
      <section className="section" style={{ background: 'var(--bg-alt)' }}>
        <div className="container">
          <div style={{ maxWidth: 720 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>The reality</div>
            <h2 style={{ marginBottom: isMobile ? 20 : 32 }}>You are making money. You are also running an illegal business.</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              <p className="body-l" style={{ color: 'var(--fg-2)' }}>
                Every morning before you check your sales dashboard, you check your email to see if your processor dropped you. You check your ad accounts to see if you caught a ban. You check your mailbox hoping there isn't a letter from the FDA or a state Attorney General.
              </p>
              <p className="body-l" style={{ color: 'var(--fg-2)' }}>
                You are making money, but you are living in constant anxiety. Because you know the truth. A "Not For Human Consumption" sticker wouldn't hold up for five seconds in a federal courtroom.
              </p>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: isMobile ? 32 : 48, maxWidth: 720 }}>
            {[
              ['Processor drops you overnight', 'High-risk processors demand $100K reserves, charge 15-20% in fees, and freeze your funds the second you scale.'],
              ['FDA enforcement is accelerating', 'Warning letters, asset freezes, federal charges. People in this exact space are currently sitting in federal prison because they thought a disclaimer protected them.'],
              ['You can never sell the company', 'No private equity firm, no strategic buyer, no sane investor will acquire a business that carries federal criminal liability. You don\'t own an asset. You own a high-paying, high-stress job that could disappear tomorrow.'],
              ['Ad accounts get banned constantly', 'Google and Meta shut down RUO advertisers daily. Every dollar you spend on ads is at risk of disappearing with no recourse.'],
            ].map(([title, desc], i) => (
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <div style={{ width: 28, height: 28, borderRadius: 6, background: '#FEE2E2', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </div>
                <div>
                  <div style={{ fontWeight: 600, marginBottom: 4, fontSize: 15 }}>{title}</div>
                  <p style={{ fontSize: 14, lineHeight: 1.6 }}>{desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Authority — exit mentioned once, quietly */}
      <section className="section">
        <div className="container">
          <div style={{
            display: isMobile ? 'flex' : 'grid',
            flexDirection: 'column',
            gridTemplateColumns: '5fr 7fr',
            gap: isMobile ? 24 : 80,
            alignItems: 'start'
          }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Who built this</div>
              <h2 style={{ fontSize: isMobile ? 'clamp(22px, 6vw, 28px)' : 'clamp(28px, 3.5vw, 44px)', maxWidth: 400 }}>I know exactly what that anxiety feels like. I lived it.</h2>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              <p className="body-l" style={{ color: 'var(--fg-2)' }}>
                My name is Caleb Canales. I started in the gray market in 2018. I sold SARMs. I sold prohormones. I watched brands get raided and shut down overnight. I saw the regulatory heat coming every single time and pivoted before the hammer dropped.
              </p>
              <p className="body-l" style={{ color: 'var(--fg-2)' }}>
                I moved into legitimate supplements, learned manufacturing, and launched my own brand in 2021. But I realized that operating in the gray area meant building a sandcastle. I wanted an exit. I wanted real wealth, not just cash flow.
              </p>
              <p className="body-l" style={{ color: 'var(--fg-2)' }}>
                So I went fully compliant. I built a legitimate telehealth infrastructure — real prescribers, real pharmacy relationships, real patient portals. When the GLP-1 wave hit in 2024, my competitors were scrambling. I was already set up. We did $33M that year, $110M in 2025. And because the infrastructure was completely clean and legal, I had something acquirers actually wanted to buy.
              </p>
              <p style={{ color: 'var(--fg-2)', fontSize: 15 }}>
                The 503 Protocol is the exact infrastructure I built, packaged for operators who want the same outcome.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* The Solution */}
      <section className="section" style={{ background: 'var(--bg-alt)' }}>
        <div className="container">
          <div style={{ maxWidth: 720, marginBottom: isMobile ? 32 : 56 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>The 503 Protocol</div>
            <h2 style={{ marginBottom: isMobile ? 16 : 24 }}>We convert your brand. You keep the revenue.</h2>
            <p className="body-l" style={{ color: 'var(--fg-2)' }}>
              We take your existing RUO brand and rebuild the infrastructure underneath it. Your customers become patients. Your products become prescriptions. Your liability becomes a moat.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: isMobile ? 12 : 24 }}>
            {[
              ['01', 'Prescriber network', 'Licensed physicians in 47 states. Async and synchronous visits. Your customers get real prescriptions from real doctors.'],
              ['02', 'Pharmacy integration', '503A and 503B compounding partners. Cold-chain shipping. One contract covers every jurisdiction you operate in.'],
              ['03', 'Invite-only processing', 'No $100K deposit. No predatory fees. No surprise shutdowns when you scale. Access to the processor that handles our own current volume.'],
              ['04', 'Exit positioning', 'Audit-grade books, defensible IP, clean cap table. Built for the diligence room from day one.'],
            ].map(([num, title, desc]) => (
              <div key={num} className="card" style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: isMobile ? 20 : 32 }}>
                <div className="mono" style={{ color: 'var(--fg-3)', fontSize: 12 }}>{num}</div>
                <h4 style={{ fontSize: isMobile ? 16 : 22 }}>{title}</h4>
                <p style={{ fontSize: 14 }}>{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Processing Advantage */}
      <section className="section">
        <div className="container">
          <div style={{
            display: isMobile ? 'flex' : 'grid',
            flexDirection: 'column',
            gridTemplateColumns: '1fr 1fr',
            gap: isMobile ? 32 : 80,
            alignItems: 'center'
          }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>The processing advantage</div>
              <h2 style={{ marginBottom: isMobile ? 16 : 24 }}>The processor that won't shut you down.</h2>
              <p className="body-l" style={{ color: 'var(--fg-2)', marginBottom: isMobile ? 16 : 24 }}>
                Most operators in this space lose more money to processing problems than to ad spend. Frozen funds, rolling reserves, surprise terminations.
              </p>
              <p style={{ color: 'var(--fg-2)', fontSize: 15 }}>
                Because of the compliant infrastructure we built, we secured an invite-only processing partnership. No massive deposits. No predatory fees. No surprise shutdowns when you scale. Access to this processor alone is the difference between a business that survives and a business that dies.
              </p>
            </div>
            <div style={{ background: 'var(--bg-alt)', borderRadius: 12, padding: isMobile ? 24 : 40, border: '1px solid var(--border)', width: '100%', boxSizing: 'border-box' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                {[
                  ['Rolling reserve', 'None'],
                  ['Processing fees', 'Industry-low'],
                  ['Fund freezes', 'Zero in 3+ years'],
                  ['Volume capacity', '$10M+/month proven'],
                ].map(([label, value], i, arr) => (
                  <div key={label} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: i < arr.length - 1 ? 20 : 0, borderBottom: i < arr.length - 1 ? '1px solid var(--border)' : 'none' }}>
                    <span style={{ fontSize: 14, color: 'var(--fg-2)' }}>{label}</span>
                    <span style={{ fontSize: 14, fontWeight: 600 }}>{value}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Offer Stack */}
      <section className="section" style={{ background: 'var(--bg-alt)' }}>
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: isMobile ? 32 : 64 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>What you get</div>
            <h2>The full conversion, handled.</h2>
          </div>
          <div style={{ maxWidth: 680, margin: '0 auto' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
              {[
                'Prescriber network setup (47 states, async + sync)',
                '503A/503B pharmacy integration and contracts',
                'State-by-state telehealth licensing and registration',
                'Patient portal and compliant intake flow',
                'Marketing compliance review and funnel rebuild',
                'Invite-only payment processor access',
                'Customer base migration (buyers to patients)',
                'Acquisition-ready financial structure',
                'Ongoing compliance monitoring',
                '12-24 month exit positioning strategy',
              ].map((item, i) => (
                <div key={i} style={{
                  display: 'flex', gap: 14, alignItems: 'center',
                  padding: isMobile ? '14px 0' : '18px 0',
                  borderBottom: '1px solid var(--border)'
                }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--green)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                  <span style={{ fontSize: isMobile ? 14 : 16, fontWeight: 500 }}>{item}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="section">
        <div className="container">
          <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto' }}>
            <h2 style={{ marginBottom: isMobile ? 16 : 24 }}>You have a choice.</h2>
            <p className="body-l" style={{ color: 'var(--fg-2)', marginBottom: 16 }}>
              You can keep waking up every morning wondering if today is the day your processor drops you, or the day the FDA knocks on your door. You can keep building a company you will never be able to sell.
            </p>
            <p style={{ color: 'var(--fg-2)', fontSize: 15, marginBottom: isMobile ? 28 : 40 }}>
              Or you can go legit. Build a moat of compliance. Scale without fear. We only take on a very small number of partners at a time.
            </p>
            <a href="/apply" className="btn btn-primary" style={{ fontSize: 16, padding: '16px 32px', textDecoration: 'none' }}>
              Book a discovery call
            </a>
            <div className="meta" style={{ marginTop: 16, fontSize: 13 }}>
              We will look at your current revenue, your operations, and your risk profile. If you are a fit, we will show you exactly how we can convert your brand.
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};
window.VSL = VSL;
