// BuildPage.jsx — /build — For new entrants who want to launch a compliant telehealth brand
const BuildPage = () => {
  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 */}
      <section style={{ paddingTop: isMobile ? 48 : 96, paddingBottom: isMobile ? 48 : 96 }}>
        <div className="container">
          <div style={{ textAlign: 'center', maxWidth: 860, margin: '0 auto' }}>
            <div className="eyebrow" style={{ marginBottom: 20, ...fadeUp(60) }}>Build from scratch</div>
            <h1 style={{
              fontSize: isMobile ? 'clamp(28px, 8vw, 40px)' : 'clamp(40px, 5vw, 68px)',
              lineHeight: 1.05, letterSpacing: '-0.04em', fontWeight: 800,
              marginBottom: isMobile ? 20 : 28, ...fadeUp(120)
            }}>
              The demand for GLP-1s, peptides, and men's health is the biggest gold rush in modern healthcare.
            </h1>
            <p className="body-l" style={{ color: 'var(--fg-2)', maxWidth: 640, margin: '0 auto', marginBottom: isMobile ? 32 : 48, ...fadeUp(240) }}>
              Most people trying to enter this market are doing it wrong. RUO websites. Overseas product. "Not For Human Consumption" stickers. That isn't a business. We build you the real thing.
            </p>
            <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 12, justifyContent: 'center', alignItems: isMobile ? 'stretch' : 'center', ...fadeUp(360) }}>
              <a href="/apply" className="btn btn-primary" style={{ textDecoration: 'none' }}>Apply to build</a>
              <a href="/convert" className="btn btn-ghost" style={{ textDecoration: 'none' }}>Already have a brand? See the Convert path</a>
            </div>
          </div>
        </div>
      </section>

      {/* The problem with the gray market entry */}
      <section className="section" style={{ background: 'var(--bg-alt)' }}>
        <div className="container">
          <div style={{ maxWidth: 720 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>The wrong way in</div>
            <h2 style={{ marginBottom: isMobile ? 20 : 32 }}>Ninety percent of people entering this market are building federal liabilities, not companies.</h2>
            <p className="body-l" style={{ color: 'var(--fg-2)', marginBottom: 20 }}>
              The gray market looks easy from the outside. Buy product overseas, slap a disclaimer on it, run ads. Some people make real money doing it. But you cannot sell that company. No private equity firm, no strategic buyer, no investor will acquire a business carrying federal criminal liability.
            </p>
            <p style={{ color: 'var(--fg-2)', fontSize: 15 }}>
              And the enforcement window is closing. The FDA is actively pursuing RUO operators. People in this exact space have had personal bank accounts frozen, assets seized, and federal charges filed. The "Not For Human Consumption" disclaimer does not hold up in court.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: isMobile ? 32 : 48, maxWidth: 720 }}>
            {[
              ['No legitimate processing', 'High-risk processors demand $100K rolling reserves, charge 15-20% in fees, and freeze your funds when you start to scale. You spend more managing your processor than running your business.'],
              ['No ad account stability', 'RUO advertisers get shut down on Google and Meta constantly. Every dollar you spend is at risk of disappearing with no recourse.'],
              ['No exit', 'You cannot sell a gray market business. Cash flow is not an asset. You are building a job, not a company.'],
              ['Actual federal exposure', 'Distributing unapproved new drugs is a federal crime. The disclaimer on your site is not a legal defense.'],
            ].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, color: 'var(--fg-2)' }}>{desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Authority */}
      <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 built the infrastructure. Now I hand you the keys.</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, sold prohormones, and watched brands get raided and shut down overnight. I pivoted every time 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. Then I built a fully compliant telehealth infrastructure on the backend — real prescribers, real pharmacy relationships, real patient portals.
              </p>
              <p className="body-l" style={{ color: 'var(--fg-2)' }}>
                When the GLP-1 wave hit in 2024, my competitors were scrambling. 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. My current operations run $10-15M a month in gross revenue.
              </p>
              <p style={{ color: 'var(--fg-2)', fontSize: 15 }}>
                Building a compliant telehealth company from scratch takes years of trial and error, hundreds of thousands in legal fees, and relationships you don't have. The 503 Protocol is everything I built, packaged so you can skip all of that.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* What we build */}
      <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 Done-For-You build</div>
            <h2 style={{ marginBottom: isMobile ? 16 : 24 }}>We build the entire company. You get the keys.</h2>
            <p className="body-l" style={{ color: 'var(--fg-2)' }}>
              We don't give you advice and send you off to figure it out. We build the whole thing. Licensing, prescribers, pharmacy contracts, patient portal, compliant marketing funnels, and direct access to our invite-only payment processor.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: isMobile ? 12 : 24 }}>
            {[
              ['01', 'State licensing', 'We handle every telehealth license filing across the states you want to operate in. You don\'t need a healthcare attorney on retainer.'],
              ['02', 'Prescriber network', 'Licensed physicians in 47 states. Async and synchronous visit flows. Your customers become patients with real prescriptions from day one.'],
              ['03', 'Pharmacy integration', '503A and 503B compounding partners. Cold-chain shipping. One contract that covers every jurisdiction you sell into.'],
              ['04', 'Patient portal', 'HIPAA-compliant intake, consent, and patient management. Built and configured. You don\'t touch the compliance layer.'],
              ['05', 'Compliant marketing funnels', 'Ad-compliant landing pages and intake flows that run on Google and Meta without triggering bans. Built for volume.'],
              ['06', 'Invite-only processing', 'Direct access to the processor that handles our own current volume. No $100K deposit. No predatory fees. No surprise shutdowns.'],
            ].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 : 20 }}>{title}</h4>
                <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.6 }}>{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DWY option */}
      <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 }}>Prefer to build it yourself?</div>
              <h2 style={{ marginBottom: isMobile ? 16 : 24 }}>The Done-With-You Blueprint.</h2>
              <p className="body-l" style={{ color: 'var(--fg-2)', marginBottom: isMobile ? 16 : 24 }}>
                You maintain total control over your build. We hand you the exact blueprints, frameworks, and introductions used to build a $110M operation. You execute it yourself, with direct support and access to our private network of pharmacies and processors.
              </p>
              <p style={{ color: 'var(--fg-2)', fontSize: 15 }}>
                You don't need to spend years figuring out the legal structure. You don't need to guess which pharmacies are legitimate. You don't need to cold-call processors who will demand a $100K deposit. The blueprint is already built.
              </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 }}>
                <div style={{ fontWeight: 700, fontSize: isMobile ? 16 : 18, marginBottom: 4 }}>What you get</div>
                {[
                  'The exact compliance frameworks used to build a $110M company',
                  'Direct introductions to our pharmacy partners',
                  'Access to our invite-only payment processor',
                  'State licensing playbooks for every jurisdiction',
                  'Ad-compliant funnel templates',
                  'Direct support throughout your build',
                ].map((item, i, arr) => (
                  <div key={item} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', paddingBottom: i < arr.length - 1 ? 20 : 0, borderBottom: i < arr.length - 1 ? '1px solid var(--border)' : 'none' }}>
                    <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>
                    <span style={{ fontSize: 14, color: 'var(--fg-2)' }}>{item}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Processing advantage */}
      <section className="section" style={{ background: 'var(--bg-alt)' }}>
        <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 when you start to scale.</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. You spend more managing your processor than running your business.
              </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 is included in both the DFY build and the DWY blueprint.
              </p>
            </div>
            <div style={{ background: 'var(--bg)', 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'],
                  ['Ad account stability', 'Full Google & Meta access'],
                ].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>

      {/* Final CTA */}
      <section className="section">
        <div className="container">
          <div style={{
            display: isMobile ? 'flex' : 'grid',
            flexDirection: 'column',
            gridTemplateColumns: '7fr 5fr',
            gap: isMobile ? 32 : 96,
            alignItems: 'start'
          }}>
            <div>
              <h2>The window is open. It won't stay that way.</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 real and it's growing. The operators who build compliant infrastructure now will own this market. The ones who stay in the gray market will get caught, get shut down, or get left behind.
              </p>
              <p style={{ marginTop: 16, color: 'var(--fg-2)', fontSize: 15 }}>
                We take on a small number of builds at a time. Financing is available. Capital is not a barrier if you are serious about entering this space the right way.
              </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 to build
              </a>
              <a href="/convert" className="btn btn-ghost" style={{ textDecoration: 'none', textAlign: 'center' }}>
                Already have a brand? Convert path
              </a>
              <div className="meta" style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 4 }}>
                We will look at your goals, your capital, and your timeline. If you are a fit, we will show you exactly how we build your company.
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};
window.BuildPage = BuildPage;
