// 03 · VSL / Long-form sales page — 5 mobile sections.
// hero | mech | proof | offer | faq

function VSLChrome({ children, dark = false }) {
  return (
    <div style={{
      width: 420, height: 900,
      background: TP.c.paper,
      padding: 12,
      fontFamily: 'var(--font-body)',
    }}>
      <PhoneShell dark={dark}>
        <div style={{
          background: dark ? '#0a0a0a' : '#fff',
          color: dark ? '#fff' : TP.c.ink,
          height: '100%', position: 'relative',
        }}>
          {/* Top nav bar */}
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '14px 20px 10px',
            borderBottom: `1px solid ${dark ? '#222' : TP.c.line}`,
          }}>
            <Wordmark size={11} dark={dark} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <Mono style={{ fontSize: 9, color: dark ? '#888' : TP.c.ink3 }}>
                tested-peptides.com
              </Mono>
            </div>
          </div>
          {children}
        </div>
      </PhoneShell>
    </div>
  );
}

// ── HERO ──────────────────────────────────────────────
function VslHero({ t }) {
  return (
    <VSLChrome>
      <div style={{ padding: '18px 18px 0' }}>
        {/* Live announcement bar */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          padding: '6px 10px', background: '#fff8e6',
          border: `1px solid ${TP.c.warn}55`, marginBottom: 14,
          fontSize: 10, color: TP.c.ink,
        }}>
          <LiveDot color={TP.c.warn} />
          <Mono style={{ fontSize: 9 }}>LOT #BPC-2026-04 · in stock · ships today</Mono>
        </div>

        <Eyebrow style={{ marginBottom: 8, color: TP.c.cta }}>For active men 30–55</Eyebrow>

        <h1 style={{
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 32, lineHeight: 0.95, letterSpacing: '-0.035em',
          margin: 0, marginBottom: 12,
        }}>
          The 30-day protocol<br />
          the <Serif style={{ fontWeight: 600, fontStyle: 'italic' }}>"just rest"</Serif> crowd<br />
          doesn't want you to find.
        </h1>

        <p style={{ fontSize: 13, color: TP.c.ink2, lineHeight: 1.5, margin: 0, marginBottom: 14 }}>
          BPC-157 is the body-protective peptide elite athletes have used quietly for 20+ years to cut recovery time roughly in half. We tested 14 brands. Ours was the only one with a clean 3rd-party COA. Here's the protocol — and the proof.
        </p>

        {/* Product hero */}
        <div style={{ position: 'relative', marginBottom: 14 }}>
          <ImgPlaceholder label="hero · vial + box on stone" h={180} />
          <Stamp size={66} rotate={-10} style={{ position: 'absolute', top: -10, right: -6 }}>
            60 DAY MBG
          </Stamp>
        </div>

        {/* CTA */}
        <CTA size="lg">Get my protocol — ${t.price}</CTA>

        {/* Quick trust */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6,
          marginTop: 14, marginBottom: 8,
        }}>
          {[
            { l: 'Tested', s: '3rd-party COA' },
            { l: 'Stock', s: 'Ships < 24h' },
            { l: 'MBG', s: t.guarantee + ' day' },
          ].map((b, i) => (
            <div key={i} style={{
              padding: '8px 6px', background: TP.c.paper,
              border: `1px solid ${TP.c.line2}`, textAlign: 'center',
            }}>
              <Mono style={{ fontSize: 8, color: TP.c.ink3, display: 'block' }}>{b.l}</Mono>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700 }}>{b.s}</div>
            </div>
          ))}
        </div>

        {/* Stars row */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          fontSize: 11, color: TP.c.ink2, marginBottom: 8,
        }}>
          <Stars size={11} />
          <span><b>4.9</b> from <b>1,840</b> verified buyers</span>
        </div>
        <Mono style={{ fontSize: 9, color: TP.c.ink3 }}>↓ scroll · 8 min read</Mono>
      </div>
    </VSLChrome>
  );
}

// ── MECHANISM ─────────────────────────────────────────
function VslMech({ t }) {
  return (
    <VSLChrome>
      <div style={{ padding: '18px 18px 0' }}>
        <Eyebrow style={{ marginBottom: 8 }}>03 · The mechanism</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 26, lineHeight: 1, letterSpacing: '-0.03em',
          margin: 0, marginBottom: 14,
        }}>How a 15-amino-acid chain rebuilds tissue in days, not months.</h2>

        <p style={{ fontSize: 12, color: TP.c.ink2, lineHeight: 1.55, marginBottom: 14 }}>
          BPC-157 is a fragment of a protein your stomach already produces. In peer-reviewed studies it accelerates angiogenesis — your body's wound-healing wiring — by an order of magnitude.
        </p>

        {/* Diagram placeholder */}
        <div style={{
          padding: 14, background: TP.c.paper,
          border: `1px solid ${TP.c.line2}`, marginBottom: 14,
        }}>
          <Eyebrow style={{ marginBottom: 10 }}>The 3-step cascade</Eyebrow>
          {[
            { n: '01', t: 'Binds VEGFR-2 receptors', s: 'signals "build new capillaries here"' },
            { n: '02', t: 'Triggers angiogenesis', s: 'blood flow to damaged tissue × 4' },
            { n: '03', t: 'Accelerates collagen turnover', s: 'tendons and ligaments rebuild faster' },
          ].map((x, i, arr) => (
            <div key={i}>
              <div style={{ display: 'flex', gap: 10, padding: '6px 0' }}>
                <Mono style={{ fontSize: 10, color: TP.c.cta, paddingTop: 2 }}>{x.n}</Mono>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12 }}>{x.t}</div>
                  <div style={{ fontSize: 11, color: TP.c.ink2, marginTop: 1 }}>{x.s}</div>
                </div>
              </div>
              {i < arr.length - 1 && (
                <div style={{ marginLeft: 12, height: 8, borderLeft: `1px dashed ${TP.c.line2}` }} />
              )}
            </div>
          ))}
        </div>

        {/* Citations strip */}
        <div style={{
          display: 'flex', gap: 6, marginBottom: 14, flexWrap: 'wrap',
        }}>
          {['Sikiric · 2018', 'Chang · 2014', 'Gwyer · 2019', 'Cerovecki · 2010'].map((c, i) => (
            <div key={i} style={{
              padding: '4px 8px', background: '#fff',
              border: `1px solid ${TP.c.line2}`,
              fontFamily: 'var(--font-mono)', fontSize: 9, color: TP.c.ink2,
            }}>{c}</div>
          ))}
        </div>

        <CTA size="md">Show me the protocol — ${t.price}</CTA>
        <Mono style={{ fontSize: 9, color: TP.c.ink3, marginTop: 10, display: 'block', textAlign: 'center' }}>
          ↓ next: real customers
        </Mono>
      </div>
    </VSLChrome>
  );
}

// ── PROOF ──────────────────────────────────────────────
function VslProof({ t }) {
  const reviews = [
    { n: 'Marcus T.', age: '42', verified: true, stars: 5, q: 'Tore my rotator cuff in March. By day 21 of the protocol I was back overhead pressing. My PT was speechless.', tag: 'Recovery' },
    { n: 'David K.', age: '38', verified: true, stars: 5, q: 'Knee crackle going down stairs — gone in 3 weeks. I thought I was just getting old.', tag: 'Joint' },
    { n: 'Sam R.', age: '51', verified: true, stars: 5, q: 'Tried 2 other brands before this. The labs don\'t lie. This is the real stuff.', tag: 'Quality' },
  ];
  return (
    <VSLChrome>
      <div style={{ padding: '18px 18px 0' }}>
        <Eyebrow style={{ marginBottom: 8 }}>04 · The receipts</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 24, lineHeight: 1, letterSpacing: '-0.03em', margin: 0, marginBottom: 14,
        }}>1,840 reviews. Average 4.9.<br/>Zero paid placements.</h2>

        {/* Aggregate strip */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginBottom: 14,
        }}>
          {[
            { v: '4.9', l: 'avg stars' },
            { v: '94%', l: '"felt it in 14d"' },
            { v: '< 2%', l: 'refund rate' },
          ].map((s, i) => (
            <div key={i} style={{ padding: '10px 8px', background: '#0a0a0a', color: '#fff', textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 900, letterSpacing: '-0.02em' }}>{s.v}</div>
              <Mono style={{ fontSize: 8, opacity: 0.7 }}>{s.l}</Mono>
            </div>
          ))}
        </div>

        {/* Reviews */}
        <div style={{ display: 'grid', gap: 8, marginBottom: 14 }}>
          {reviews.map((r, i) => (
            <div key={i} style={{
              padding: 12, background: '#fff', border: `1px solid ${TP.c.line2}`,
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                marginBottom: 6,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{
                    width: 24, height: 24, borderRadius: 999,
                    background: TP.c.paper, border: `1px solid ${TP.c.line2}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 700,
                  }}>{r.n[0]}</div>
                  <div>
                    <div style={{ fontSize: 11, fontWeight: 700 }}>{r.n} <Mono style={{ fontSize: 9, color: TP.c.ink3 }}>· age {r.age}</Mono></div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 1 }}>
                      <Stars n={r.stars} size={8} />
                      {r.verified && <Mono style={{ fontSize: 7, color: TP.c.trust }}>✓ verified</Mono>}
                    </div>
                  </div>
                </div>
                <Pill color={TP.c.ink2} style={{ fontSize: 8 }}>{r.tag}</Pill>
              </div>
              <div style={{ fontSize: 11, color: TP.c.ink, lineHeight: 1.5 }}>"{r.q}"</div>
            </div>
          ))}
        </div>

        <CTA size="md">Read 1,840 more — buy at ${t.price}</CTA>
        <Mono style={{ fontSize: 9, color: TP.c.ink3, marginTop: 10, display: 'block', textAlign: 'center' }}>
          ↓ next: the full offer
        </Mono>
      </div>
    </VSLChrome>
  );
}

// ── OFFER ──────────────────────────────────────────────
function VslOffer({ t }) {
  const stack = [
    { n: 'BPC-157 5mg vial · 30-day supply', v: '$197' },
    { n: 'Protocol card + dosing calculator', v: '$47' },
    { n: 'Bonus: Recovery Mobility eBook (37pp)', v: '$27' },
    { n: 'Bonus: Sleep stack micro-course', v: '$47' },
    { n: 'Bonus: 1-on-1 onboarding call', v: '$97' },
    { n: 'Bonus: COA / lot lookup tool', v: '$19' },
  ];
  const total = 197 + 47 + 27 + 47 + 97 + 19;
  return (
    <VSLChrome dark>
      <div style={{ padding: '18px 18px 0' }}>
        <Eyebrow style={{ marginBottom: 8, color: TP.c.warn }}>05 · Here's everything you get</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 28, lineHeight: 1, letterSpacing: '-0.03em',
          margin: 0, marginBottom: 16, color: '#fff',
        }}>
          ${total} worth of protocol.<br />
          <span style={{ color: TP.c.cta }}>Yours for ${t.price} today.</span>
        </h2>

        {/* Stack */}
        <div style={{ marginBottom: 14 }}>
          {stack.map((s, i) => (
            <div key={i} style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
              gap: 10, padding: '10px 0',
              borderBottom: i < stack.length - 1 ? '1px solid #222' : 'none',
            }}>
              <div style={{ display: 'flex', gap: 8, flex: 1 }}>
                <Check size={12} color={TP.c.warn} />
                <div style={{ fontSize: 12, lineHeight: 1.4 }}>{s.n}</div>
              </div>
              <Mono style={{ fontSize: 11, color: '#888' }}>
                <s>{s.v}</s>
              </Mono>
            </div>
          ))}
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            padding: '12px 0', borderTop: '2px solid #fff', marginTop: 4,
          }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13 }}>Total real value</div>
            <Mono style={{ fontSize: 13 }}><s>${total}</s></Mono>
          </div>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            padding: '8px 12px', background: TP.c.cta, color: '#fff',
            margin: '8px 0 0',
          }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 16 }}>Today only</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 28, letterSpacing: '-0.03em' }}>${t.price}</div>
          </div>
        </div>

        {/* Urgency */}
        {t.urgencyTimer && (
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4, marginBottom: 14,
          }}>
            {[
              { v: '00', l: 'days' },
              { v: '04', l: 'hrs' },
              { v: '17', l: 'min' },
              { v: '42', l: 'sec' },
            ].map((u, i) => (
              <div key={i} style={{ textAlign: 'center', background: '#161616', padding: '8px 4px' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 700, color: TP.c.warn }}>{u.v}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 8, color: '#666' }}>{u.l}</div>
              </div>
            ))}
          </div>
        )}

        <CTA size="lg">Yes — send my starter kit</CTA>
        <div style={{ textAlign: 'center', marginTop: 10, fontSize: 10, color: '#888', lineHeight: 1.5 }}>
          🔒 Secure checkout · Apple Pay, Shop Pay, card<br />
          {t.guarantee}-day money-back guarantee
        </div>
      </div>
    </VSLChrome>
  );
}

// ── FAQ ──────────────────────────────────────────────
function VslFaq({ t }) {
  const faqs = [
    { q: 'Is BPC-157 legal?', a: 'Sold as a research compound. We don\'t make medical claims. WADA-banned for in-competition athletes — check your federation.' },
    { q: 'How quickly will I feel it?', a: 'Users typically report noticeable changes in 7–14 days. Full tissue remodeling continues for 60–90 days post-protocol.' },
    { q: 'How is it taken?', a: 'Subcutaneous injection with insulin syringes (included). Your protocol card walks you through it step-by-step.' },
    { q: 'Side effects?', a: 'Reported side effects are minimal. Common: mild flush at injection site for 24h. Discontinue if you experience anything unusual.' },
    { q: 'What if it doesn\'t work for me?', a: 'Use the full protocol. If you don\'t feel a difference within ' + t.guarantee + ' days, reply to any email — we refund 100%, no questions, keep the kit.' },
    { q: 'Why is yours $97 when others charge $200+?', a: 'We cut middlemen. Direct from a US compounding partner. Same product, half the markup.' },
  ];
  return (
    <VSLChrome>
      <div style={{ padding: '18px 18px 0' }}>
        <Eyebrow style={{ marginBottom: 8 }}>06 · What you're thinking</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 26, lineHeight: 1, letterSpacing: '-0.03em', margin: 0, marginBottom: 14,
        }}>The 6 questions everyone asks.</h2>

        <div style={{ marginBottom: 14 }}>
          {faqs.map((f, i) => (
            <div key={i} style={{ borderBottom: `1px solid ${TP.c.line}`, padding: '12px 0' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, flex: 1 }}>{f.q}</div>
                <Mono style={{ fontSize: 14, color: TP.c.ink3 }}>{i === 0 ? '−' : '+'}</Mono>
              </div>
              {i === 0 && (
                <div style={{ fontSize: 11, color: TP.c.ink2, marginTop: 6, lineHeight: 1.55 }}>{f.a}</div>
              )}
            </div>
          ))}
        </div>

        {/* Final guarantee block */}
        <div style={{
          padding: 14, background: '#fff8e6',
          border: `1.5px solid ${TP.c.warn}`,
          marginBottom: 14, position: 'relative',
        }}>
          <Stamp size={56} rotate={8} style={{ position: 'absolute', top: -14, right: -10 }}>
            {t.guarantee}-DAY GUARANTEE
          </Stamp>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14, marginBottom: 6 }}>
            You can't lose.
          </div>
          <div style={{ fontSize: 11, color: TP.c.ink2, lineHeight: 1.5 }}>
            Run the protocol. If you don't feel meaningfully better, email us. We refund every cent — and you keep the kit + bonuses. The risk is on us.
          </div>
        </div>

        <CTA size="lg">Start my protocol — ${t.price}</CTA>
        <div style={{ textAlign: 'center', marginTop: 10, fontSize: 9, color: TP.c.ink3 }}>
          Research compound · Not evaluated by the FDA
        </div>
      </div>
    </VSLChrome>
  );
}

function VSL({ section = 'hero', t }) {
  if (section === 'mech')  return <VslMech t={t} />;
  if (section === 'proof') return <VslProof t={t} />;
  if (section === 'offer') return <VslOffer t={t} />;
  if (section === 'faq')   return <VslFaq t={t} />;
  return <VslHero t={t} />;
}

window.VSL = VSL;