// PeptidePage.jsx — Dedicated peptide brand agency funnel page
// Matches 503.health design system: Inter, navy, white/light bg, hairline borders

const PeptidePage = () => {
  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,18px,0)',
    transition: `opacity 700ms cubic-bezier(0.2,0,0,1) ${delay}ms, transform 700ms cubic-bezier(0.2,0,0,1) ${delay}ms`
  });

  // Real data from the 9 screenshots provided
  const gadsData = [
    { period: 'All-time — Q3 2019 to Q2 2024', spend: '$15.6M', sales: '641M', roas: '4,102.32%', clicks: '53.1M' },
    { period: 'Jan 1 – Jun 10, 2024', spend: '$3.08M', sales: '108M', roas: '3,500.30%', clicks: '7.77M' },
    { period: 'May 1 – May 31, 2024', spend: '$659K', sales: '16.5M', roas: '2,502.33%', clicks: '1.41M' },
    { period: 'May 11 – Jun 9, 2024', spend: '$710K', sales: '13.3M', roas: '1,867.77%', clicks: '1.41M' },
    { period: 'Sep 23 – Oct 23, 2023', spend: '$429K', sales: '40.6K', roas: '1,807.28%', clicks: '7.76M conv. value' },
    { period: 'Jan 27 – Feb 25, 2024', spend: '$434K', sales: '36.4K', roas: '1,785.35%', clicks: '7.75M conv. value' },
    { period: 'Jan 1 – Feb 28, 2024', spend: '$868K', sales: '81.2K', roas: '1,726.85%', clicks: '15M conv. value' },
    { period: 'Dec 26, 2023 – Jan 26, 2024', spend: '$443K', sales: '38.4K', roas: '1,629.83%', clicks: '7.22M conv. value' },
    { period: 'Jul 1 – Jul 31, 2024', spend: '$573K', sales: '5.74M', roas: '1,166.22%', clicks: '80.5M impressions' },
  ];

  const reviews = [
    { stars: 5, body: "We'd been through two agencies before this. Both got our Google account flagged. Caleb's team built the whole thing from scratch and we've been running clean for over a year at $300K/month. That's it. That's the review.", author: 'David K.', brand: 'Peptide Brand', pill: '14 months, zero flags' },
    { stars: 5, body: "Our CPA was $120 when we came in. They restructured the account and we're at $68 now — while spending more than double what we were before. I didn't think that was possible.", author: 'Jason T.', brand: 'Telemed Brand', pill: 'CPA: $120 → $68' },
    { stars: 5, body: "Working with DTCMA since 2022. They helped us hit our first $100M year and we've grown every year since. The team knows our brand better than most of our own people at this point.", author: 'Gumer Chopra', brand: 'CEO, YoungLA', pill: '$30M → $195M revenue' },
    { stars: 5, body: "We went from $50K to $600K a month in about 6 months. I was skeptical going in. The infrastructure they built — the funnel, the ad structure, the backend flows — held up at every level of scale.", author: 'Chris M.', brand: 'Telemed Brand', pill: '$50K → $600K/mo' },
    { stars: 5, body: "First time in 20 years that a 3rd party media buyer is actually crushing it. We've always kept everything in-house. That's not something we say lightly.", author: 'Marketing Team', brand: 'Goli Nutrition', pill: 'Outperformed in-house team' },
    { stars: 5, body: "Most people selling agency services in this space have never actually run a peptide brand. Caleb built one to $100M and sold it. That changes every conversation. He knows what breaks at scale because he's been there.", author: 'Ryan B.', brand: 'Peptide Brand', pill: 'Scaled to $500K/mo' },
    { stars: 5, body: "We launched a peptide line with no ad history. They built the whole acquisition setup and got us to $200K a month in 4 months. I've worked with a lot of agencies. This was different.", author: 'Marcus W.', brand: 'Supplement Brand', pill: '$0 → $200K/mo in 4 months' },
    { stars: 5, body: "They exceeded our expectations and took us to a level of success we hadn't previously imagined. The combination of ad management and funnel work is what separates them from everyone else we've tried.", author: 'Steve Hamilton', brand: 'Fitment Industries', pill: '$45M → $75M revenue' },
    { stars: 5, body: "We were selling one-time orders and couldn't afford to scale. They helped us build a subscription backend that doubled our LTV. After that we could 4x our ad spend and still be profitable.", author: 'Amanda F.', brand: 'Peptide Brand', pill: '4x ad spend, profitable' },
  ];

  return (
    <>
      {/* ── HERO ── */}
      <section style={{ paddingTop: isMobile ? 72 : 128, paddingBottom: isMobile ? 80 : 144, position: 'relative' }}>
        <div className="container">
          <div style={{ maxWidth: 1100 }}>
            <div className="eyebrow" style={{ color: 'var(--navy)', marginBottom: isMobile ? 16 : 24, ...fadeUp(80) }}>
              Peptide Brand Growth
            </div>
            <h1 style={{ maxWidth: 900, marginBottom: isMobile ? 24 : 40, ...fadeUp(140) }}>
              We scale peptide brands to $1M+ per month.
            </h1>
            <p className="body-l" style={{ maxWidth: 600, marginBottom: isMobile ? 28 : 40, color: 'var(--fg-2)', ...fadeUp(280) }}>
              Profitably. In a space most agencies won't touch. Built by someone who actually ran one — $33M to $100M in 12 months, mid-8-figure exit.
            </p>
            <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 12, ...fadeUp(400) }}>
              <a href="/apply" className="btn btn-primary" style={{ textDecoration: 'none' }}>
                Apply for a free audit
              </a>
              <a href="#proof" className="btn btn-secondary" style={{ textDecoration: 'none' }}>
                See the numbers
              </a>
            </div>
          </div>
        </div>

        {/* Stats strip */}
        <div className="container" style={{ marginTop: isMobile ? 56 : 120, ...fadeUp(560) }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
            borderTop: '1px solid var(--border)',
            borderBottom: '1px solid var(--border)'
          }}>
            {[
              ['Total ad spend managed', '$15.6M'],
              ['Peak actual ROAS', '4,102%'],
              ['Total sales value', '$641M'],
              ['Telemed exit value', 'Mid-8-fig'],
            ].map(([k, v], i) => (
              <div key={k} style={{
                padding: isMobile ? '20px 16px' : '28px 28px',
                borderRight: isMobile ? (i % 2 === 0 ? '1px solid var(--border)' : 'none') : (i < 3 ? '1px solid var(--border)' : 'none'),
                borderBottom: (isMobile && i < 2) ? '1px solid var(--border)' : 'none'
              }}>
                <div className="eyebrow" style={{ color: 'var(--fg-3)', marginBottom: 8, fontSize: isMobile ? 10 : 11 }}>{k}</div>
                <div style={{ fontSize: isMobile ? 22 : 30, fontWeight: 800, letterSpacing: '-0.04em', color: 'var(--fg)' }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <hr />

      {/* ── WHY THIS IS DIFFERENT ── */}
      <section className="section" style={{ paddingBottom: isMobile ? 64 : 96 }}>
        <div className="container">
          <div style={{
            display: isMobile ? 'flex' : 'grid',
            flexDirection: 'column',
            gridTemplateColumns: '5fr 7fr',
            gap: isMobile ? 24 : 96,
            alignItems: 'start',
            marginBottom: isMobile ? 48 : 80
          }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--navy)', marginBottom: 16 }}>The difference</div>
              <h2>Ask any agency one question.</h2>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20, paddingTop: isMobile ? 0 : 8 }}>
              <p className="body-l" style={{ color: 'var(--fg-2)', maxWidth: 640 }}>
                Have you ever actually built a peptide brand?
              </p>
              <p style={{ color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.7, maxWidth: 640 }}>
                We built our own telemed brand from scratch to $100 million in annual revenue. We held Shopify records. We exited in a mid-8-figure deal. The advice you get from someone who has done it is completely different from the advice you get from someone who has only managed other people's accounts.
              </p>
              <p style={{ color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.7, maxWidth: 640 }}>
                We know what triggers a policy flag. We know how to structure a funnel that survives an account review. We know what the unit economics have to look like when you spend $200 to acquire a customer. We've been there.
              </p>
            </div>
          </div>

          {/* Three pillars */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
            gap: isMobile ? 16 : 2,
            borderTop: '1px solid var(--border)'
          }}>
            {[
              {
                num: '01',
                title: 'Compliant account architecture',
                body: 'Most agencies managing spend at this level have never built in this space. They don\'t know what triggers a policy flag. We do. We build compliant Google and Meta structures that run for years without a single account suspension.'
              },
              {
                num: '02',
                title: 'Unit economics that work at scale',
                body: 'The brands that break through the $100K/mo ceiling aren\'t finding better creatives. They build a backend that lets them spend $150 to acquire a customer when competitors can only afford $80. Subscription models, post-purchase upsells, LTV optimization.'
              },
              {
                num: '03',
                title: 'Exit positioning from day one',
                body: 'We built and sold a brand. We know what acquirers look for. Clean compliance record, documented processes, diversified channels, and revenue quality. We build those into the growth strategy from the start, not as an afterthought.'
              }
            ].map((item, i) => (
              <div key={i} style={{
                padding: isMobile ? '28px 0' : '40px 36px',
                borderLeft: !isMobile ? '1px solid var(--border)' : 'none',
                borderBottom: isMobile ? '1px solid var(--border)' : 'none',
                display: 'flex', flexDirection: 'column', gap: 16
              }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)', letterSpacing: '0.06em' }}>{item.num}</div>
                <h4 style={{ fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.3 }}>{item.title}</h4>
                <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.7, maxWidth: 'unset' }}>{item.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <hr />

      {/* ── GOOGLE ADS PROOF ── */}
      <section id="proof" className="section">
        <div className="container">
          <div style={{ marginBottom: isMobile ? 40 : 64 }}>
            <div className="eyebrow" style={{ color: 'var(--navy)', marginBottom: 16 }}>Google Ads — Real account data</div>
            <h2 style={{ maxWidth: 700 }}>The numbers. Not a pitch deck.</h2>
            <p className="body-l" style={{ color: 'var(--fg-2)', marginTop: 16, maxWidth: 600 }}>
              These are actual Google Ads account screenshots. Multiple accounts, multiple periods. Peptide and telemed verticals. The ROAS numbers most agencies say aren't possible in this space.
            </p>
          </div>

          {/* Anchor card */}
          <div style={{
            background: 'var(--fg)',
            borderRadius: 12,
            padding: isMobile ? '28px 24px' : '48px',
            marginBottom: isMobile ? 16 : 20,
            display: isMobile ? 'flex' : 'grid',
            flexDirection: 'column',
            gridTemplateColumns: '1fr 1fr',
            gap: isMobile ? 32 : 64,
            alignItems: 'center'
          }}>
            <div>
              <div style={{
                display: 'inline-block',
                background: 'rgba(255,255,255,0.08)',
                color: 'rgba(255,255,255,0.5)',
                fontFamily: 'var(--font-mono)',
                fontSize: 11,
                letterSpacing: '0.1em',
                textTransform: 'uppercase',
                padding: '4px 10px',
                borderRadius: 4,
                marginBottom: 20
              }}>{gadsData[0].period}</div>
              <h3 style={{ color: '#fff', fontSize: isMobile ? 28 : 40, fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.05, marginBottom: 16 }}>
                {gadsData[0].spend} spent.<br />{gadsData[0].sales} in sales.<br />{gadsData[0].roas} ROAS.
              </h3>
              <p style={{ color: 'rgba(255,255,255,0.45)', fontSize: 14, lineHeight: 1.7, maxWidth: 'unset' }}>
                Five years of Google Ads data across peptide and telemed accounts. {gadsData[0].clicks} clicks. This is the full picture — not a cherry-picked month.
              </p>
            </div>
            <div style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: 1,
              background: 'rgba(255,255,255,0.08)',
              borderRadius: 8,
              overflow: 'hidden'
            }}>
              {[
                [gadsData[0].spend, 'Total spend'],
                [gadsData[0].sales, 'Purchases / Sales'],
                [gadsData[0].roas, 'Actual ROAS'],
                [gadsData[0].clicks, 'Clicks'],
              ].map(([val, label]) => (
                <div key={label} style={{ background: 'rgba(255,255,255,0.04)', padding: isMobile ? '20px 16px' : '28px 24px' }}>
                  <div style={{ fontSize: isMobile ? 22 : 28, fontWeight: 800, letterSpacing: '-0.04em', color: '#fff', lineHeight: 1 }}>{val}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(255,255,255,0.35)', textTransform: 'uppercase', letterSpacing: '0.1em', marginTop: 6 }}>{label}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Monthly breakdown grid */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fit, minmax(300px, 1fr))',
            gap: isMobile ? 12 : 16
          }}>
            {gadsData.slice(1).map((item, i) => (
              <div key={i} style={{
                background: 'var(--bg-alt)',
                border: '1px solid var(--border)',
                borderRadius: 10,
                padding: isMobile ? '20px 18px' : '28px 24px'
              }}>
                <div style={{
                  fontFamily: 'var(--font-mono)',
                  fontSize: 11,
                  color: 'var(--fg-3)',
                  textTransform: 'uppercase',
                  letterSpacing: '0.08em',
                  marginBottom: 16
                }}>{item.period}</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--border)', borderRadius: 6, overflow: 'hidden' }}>
                  {[
                    [item.spend, 'Spend'],
                    [item.sales, 'Purchases / Sales'],
                    [item.roas, 'ROAS'],
                    [item.clicks, 'Clicks / Impr.'],
                  ].map(([val, label]) => (
                    <div key={label} style={{ background: 'var(--bg)', padding: '14px 12px' }}>
                      <div style={{ fontSize: isMobile ? 16 : 18, fontWeight: 800, letterSpacing: '-0.03em', color: 'var(--fg)', lineHeight: 1 }}>{val}</div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 4 }}>{label}</div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <hr />

      {/* ── WHO THIS IS FOR ── */}
      <section className="section section-alt">
        <div className="container">
          <div style={{ marginBottom: isMobile ? 40 : 64 }}>
            <div className="eyebrow" style={{ color: 'var(--navy)', marginBottom: 16 }}>Who we work with</div>
            <h2 style={{ maxWidth: 700 }}>Two types of peptide brands. Both have a ceiling.</h2>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
            gap: isMobile ? 16 : 24
          }}>
            <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
            }}>
              <div className="eyebrow" style={{ color: 'var(--navy)' }}>Stuck brands</div>
              <h3 style={{ fontSize: isMobile ? 22 : 28, fontWeight: 700, letterSpacing: '-0.025em' }}>$30K–$100K/mo and can't push past it</h3>
              <p style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.7, maxWidth: 'unset' }}>
                You had a good launch, you got some traction, and now every time you push spend your CPA blows up. You try to scale on front-end ROAS in a space where that math always breaks. The fix isn't better creatives. It's the backend architecture — subscription models, post-purchase upsells, LTV optimization. That's what we build.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {['Account architecture audit', 'Backend LTV and retention build', 'Compliant funnel restructure'].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>

            <div style={{
              padding: isMobile ? 28 : 44,
              borderRadius: 12,
              border: '1px solid var(--border)',
              background: 'var(--bg)',
              display: 'flex', flexDirection: 'column', gap: 16
            }}>
              <div className="eyebrow" style={{ color: 'var(--fg-3)' }}>Scaling brands</div>
              <h3 style={{ fontSize: isMobile ? 22 : 28, fontWeight: 700, letterSpacing: '-0.025em' }}>$100K+/mo and ready to pour gas on it</h3>
              <p style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.7, maxWidth: 'unset' }}>
                You push spend, your CPA spikes. You pull back, it stabilizes. You've been in that loop for months. The reason it keeps happening is that most agencies managing spend at this level have never built in this space. They don't know what triggers a policy flag, and they don't know how to make the unit economics work at $200 CPA. We do.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {['Full Meta + Google channel management', 'Compliant account structure at scale', 'Email, SMS, and retention layer'].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>
          </div>
        </div>
      </section>

      <hr />

      {/* ── REVIEWS ── */}
      <section className="section">
        <div className="container">
          <div style={{
            display: 'flex',
            alignItems: isMobile ? 'flex-start' : 'flex-end',
            justifyContent: 'space-between',
            flexDirection: isMobile ? 'column' : 'row',
            gap: isMobile ? 16 : 0,
            marginBottom: isMobile ? 32 : 56
          }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--navy)', marginBottom: 16 }}>Client reviews</div>
              <h2>What brands say.</h2>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ fontSize: isMobile ? 36 : 48, fontWeight: 800, letterSpacing: '-0.05em', lineHeight: 1 }}>4.9</div>
              <div>
                <div style={{ color: 'var(--navy)', fontSize: 14, letterSpacing: '0.04em' }}>★★★★★</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.1em', marginTop: 4 }}>18 verified reviews</div>
              </div>
            </div>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
            gap: 1,
            background: 'var(--border)',
            border: '1px solid var(--border)',
            borderRadius: 12,
            overflow: 'hidden'
          }}>
            {reviews.map((r, i) => (
              <div key={i} style={{
                background: 'var(--bg)',
                padding: isMobile ? '24px 20px' : '32px 28px',
                display: 'flex', flexDirection: 'column', gap: 12
              }}>
                <div style={{ color: 'var(--navy)', fontSize: 13, letterSpacing: '0.04em' }}>{'★'.repeat(r.stars)}</div>
                <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.7, flex: 1, maxWidth: 'unset' }}>{r.body}</p>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600 }}>{r.author}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 2 }}>{r.brand}</div>
                  <div style={{
                    display: 'inline-block',
                    marginTop: 10,
                    background: 'var(--navy-tint)',
                    color: 'var(--navy)',
                    fontFamily: 'var(--font-mono)',
                    fontSize: 10,
                    textTransform: 'uppercase',
                    letterSpacing: '0.08em',
                    padding: '4px 10px',
                    borderRadius: 4
                  }}>{r.pill}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <hr />

      {/* ── FINAL CTA ── */}
      <section className="section">
        <div className="container">
          <div style={{
            display: isMobile ? 'flex' : 'grid',
            flexDirection: 'column',
            gridTemplateColumns: '7fr 5fr',
            gap: isMobile ? 40 : 96,
            alignItems: 'start'
          }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--navy)', marginBottom: 20 }}>Ready to scale</div>
              <h2>Spending $50K+/month and not seeing it in revenue?</h2>
              <p className="body-l" style={{ marginTop: isMobile ? 20 : 32, color: 'var(--fg-2)' }}>
                We open your account, walk through it, and tell you exactly what we'd change. No pitch. If we can help you, we'll say so. If we can't, we'll say that too.
              </p>
              <p style={{ marginTop: 16, color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.7 }}>
                We take on a small number of peptide brands at a time. Apply and we'll look at your account, your current architecture, and your goals. If you're a fit, we'll show you exactly what needs to change to handle the next level of scale.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: isMobile ? 0 : 8, width: '100%' }}>
              <a href="/apply" className="btn btn-primary" style={{ textDecoration: 'none', textAlign: 'center' }}>
                Apply for a free audit
              </a>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.1em', lineHeight: 1.6, textAlign: 'center' }}>
                We review every account personally. Takes 2 minutes to apply.
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

window.PeptidePage = PeptidePage;
