/* eslint-disable */
// VSL Landing Page — long-scroll Hormozi sales letter
// Sections: Hook → Pain → Big Promise → Mechanism → Proof → Value Stack → Price → Guarantee → FAQ → Final CTA

function VSLLanding({ hook, price, priceWas, guaranteeDays, accent, showCountdown, onNext }) {
  const ACCENT = accent || 'var(--accent)';
  const go = () => onNext && onNext();
  return (
    <div className="tp-root tp-phone-scroll" style={{ background: 'var(--bg)', minHeight: '100%' }}>

      {/* ============ STICKY TOP NAV + COUNTDOWN ============ */}
      <div style={{ position: 'sticky', top: 0, zIndex: 5, background: 'var(--bg)', borderBottom: '1px solid var(--border-soft)' }}>
        <div style={{ padding: '10px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Logo />
          <button className="tp-btn tp-btn--primary" style={{ padding: '8px 14px', fontSize: 11 }} onClick={go}>Order →</button>
        </div>
        {showCountdown && (
          <div style={{
            background: 'var(--alert)', color: '#0a0c08',
            padding: '6px 14px',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
            letterSpacing: '0.08em', textTransform: 'uppercase',
          }}>
            <span>40% OFF · AUG BATCH ENDS</span>
            <span style={{ color: '#0a0c08' }}><Countdown mins={14} secs={53} /></span>
          </div>
        )}
      </div>

      {/* ============ HOOK / HERO ============ */}
      <section style={{ padding: '32px 22px 40px', background: 'radial-gradient(120% 80% at 50% 0%, #181d12 0%, #0b0d0a 60%)' }}>
        <Eyebrow lime>FOR MEN 30+ WHO LIFT</Eyebrow>
        <h1 className="tp-display" style={{ fontSize: 56, lineHeight: 0.9, margin: '16px 0 0', color: 'var(--text)' }}>
          {hook || "HEAL THE INJURY"}
          <br/>
          <span style={{ color: ACCENT }}>YOUR BODY GAVE UP ON.</span>
        </h1>
        <p style={{ fontSize: 15, color: 'var(--text-dim)', lineHeight: 1.5, marginTop: 18 }}>
          The same lab-verified recovery compound that elite athletes use — now legally available with a Certificate of Analysis for every vial.
        </p>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 18 }}>
          <span className="tp-pill tp-pill--lime"><span className="tp-dot"/>3RD-PARTY COA</span>
          <span className="tp-pill">US-COMPOUNDED</span>
          <span className="tp-pill">SHIPS COLD</span>
        </div>

        {/* hero visual */}
        <div style={{ height: 220, marginTop: 22, borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
          <ProductPlaceholder variant="stack" label="HERO — RECOVERY STACK SHOT" accent />
        </div>

        <button className="tp-btn tp-btn--primary tp-btn--block tp-btn--xl" style={{ marginTop: 22 }} onClick={go}>
          Claim My Stack →
        </button>
        <div style={{ textAlign: 'center', marginTop: 10 }}>
          <span className="tp-mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--muted)', textTransform: 'uppercase' }}>
            {guaranteeDays || 90}-day double-your-money-back guarantee
          </span>
        </div>
      </section>

      {/* ============ PAIN ============ */}
      <section style={{ padding: '40px 22px', background: 'var(--bg-warm)', borderTop: '1px solid var(--border-soft)' }}>
        <Eyebrow>YOU KNOW THE FEELING</Eyebrow>
        <h2 className="tp-display" style={{ fontSize: 36, color: 'var(--text)', marginTop: 12 }}>
          IT'S NOT THAT YOU GOT WEAKER.
        </h2>
        <p style={{ color: 'var(--text-dim)', fontSize: 15, lineHeight: 1.55, marginTop: 14 }}>
          It's that your body stopped repairing the damage faster than you can do it. The little stuff piles up. The big stuff never leaves. And nothing OTC moves the needle.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 22 }}>
          {[
            "Tendons that ache from a 2017 injury",
            "Sleep that doesn't restore anything",
            "Workouts that need 4 days to recover",
            "Brain fog after lunch, every day",
          ].map((t, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ color: 'var(--alert)', fontSize: 22, lineHeight: 1 }}>✕</span>
              <span style={{ fontSize: 14, color: 'var(--text)' }}>{t}</span>
            </div>
          ))}
        </div>
      </section>

      {/* ============ BIG PROMISE ============ */}
      <section style={{ padding: '40px 22px' }}>
        <Eyebrow lime>30 DAYS FROM NOW</Eyebrow>
        <h2 className="tp-display" style={{ fontSize: 38, marginTop: 12, color: 'var(--text)' }}>
          PICTURE THE VERSION OF YOU <span style={{ color: ACCENT }}>WHO DOESN'T NEGOTIATE</span> WITH HIS BODY ANYMORE.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 24 }}>
          {[
            ["8h", "Deep sleep, every night"],
            ["0/10", "Joint pain by week 4"],
            ["+12%", "Avg compound lift PR"],
            ["72h", "Full recovery window cut in half"],
          ].map(([n, l], i) => (
            <div key={i} className="tp-stat">
              <div className="tp-stat__n" style={{ color: ACCENT }}>{n}</div>
              <div className="tp-stat__l">{l}</div>
            </div>
          ))}
        </div>
        <p className="tp-mono" style={{ fontSize: 10, color: 'var(--muted-2)', marginTop: 14, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
          Avg across 247 surveyed customers · 8-week mark
        </p>
      </section>

      {/* ============ MECHANISM ============ */}
      <section style={{ padding: '40px 22px', background: 'var(--bg-warm)', borderTop: '1px solid var(--border-soft)', borderBottom: '1px solid var(--border-soft)' }}>
        <Eyebrow>THE MOLECULE</Eyebrow>
        <h2 className="tp-display" style={{ fontSize: 34, marginTop: 12, color: 'var(--text)' }}>
          BPC-157 + TB-500. NOT A "BLEND". A PROTOCOL.
        </h2>
        <p style={{ color: 'var(--text-dim)', fontSize: 14, lineHeight: 1.55, marginTop: 14 }}>
          One signals new capillary growth to oxygenate damaged tissue. The other accelerates cell migration to that tissue. Stacked, you don't just feel better — you actually rebuild faster than the damage accrues.
        </p>

        <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            { tag: "01", name: "BPC-157", desc: "Body Protective Compound. Tendon, ligament, gut lining.", dose: "500 mcg / day · 30 days" },
            { tag: "02", name: "TB-500", desc: "Thymosin Beta-4 fragment. Cell migration + inflammation.", dose: "2.5 mg / week · 30 days" },
          ].map((c, i) => (
            <div key={i} className="tp-card" style={{ padding: 16 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                <span className="tp-mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{c.tag}</span>
                <span className="tp-display" style={{ fontSize: 22, color: ACCENT }}>{c.name}</span>
              </div>
              <p style={{ fontSize: 13, color: 'var(--text)', marginTop: 6, lineHeight: 1.5 }}>{c.desc}</p>
              <div className="tp-mono" style={{ fontSize: 10, color: 'var(--muted)', marginTop: 10, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                {c.dose}
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 18 }}>
          <COABar />
        </div>
      </section>

      {/* ============ PROOF ============ */}
      <section style={{ padding: '40px 22px' }}>
        <Eyebrow lime>FIELD-TESTED</Eyebrow>
        <h2 className="tp-display" style={{ fontSize: 34, marginTop: 12, color: 'var(--text)' }}>
          2,400+ MEN ARE ALREADY ON IT.
        </h2>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 20 }}>
          {[
            { n: "M.K.", who: "41 · CO · Engineer", body: "Tore my supraspinatus in 2019. Cortisone twice, didn't matter. Three weeks in, I can sleep on that shoulder again. I genuinely don't know how this is legal.", stars: 5 },
            { n: "J.R.", who: "37 · TX · Jiu-jitsu", body: "Lifelong knee tendinopathy. After 6 weeks I'm rolling 4x/week with zero brace. The COA thing is what made me try y'all — every other brand felt like a coin flip.", stars: 5 },
            { n: "D.S.", who: "44 · NY · Triathlete", body: "Bonus: my sleep tracker shows deep sleep up 38%. I wasn't even tracking that going in.", stars: 5 },
          ].map((t, i) => (
            <div key={i} className="tp-card" style={{ padding: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
                <div style={{ width: 34, height: 34, borderRadius: '50%', background: 'var(--surface-3)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-display)', fontSize: 14, color: 'var(--accent)' }}>{t.n[0]}</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)' }}>{t.n}</div>
                  <div className="tp-mono" style={{ fontSize: 9, color: 'var(--muted)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{t.who}</div>
                </div>
                <span style={{ marginLeft: 'auto' }}><Stars n={t.stars} /></span>
              </div>
              <p style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--text-dim)', margin: 0 }}>"{t.body}"</p>
            </div>
          ))}
        </div>

        {/* Press / cited */}
        <div style={{ marginTop: 24 }}>
          <div className="tp-rule"><span className="tp-rule__l">AS CITED IN</span></div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginTop: 14 }}>
            {["PUBMED", "NIH", "PMC", "JBJS"].map((p, i) => (
              <div key={i} className="tp-imgph" style={{ height: 40, borderRadius: 4, fontSize: 9 }}>{p}</div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ VALUE STACK ============ */}
      <section style={{ padding: '40px 22px', background: 'var(--bg-warm)', borderTop: '1px solid var(--border-soft)' }}>
        <Eyebrow>HERE'S EVERYTHING YOU GET</Eyebrow>
        <h2 className="tp-display" style={{ fontSize: 34, marginTop: 12, color: 'var(--text)' }}>
          THE RECOVERY STACK <span style={{ color: ACCENT }}>—</span> COMPLETE.
        </h2>

        <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            ["BPC-157 · 30-day supply (5mg vial)", "$220"],
            ["TB-500 · 30-day supply (10mg vial)", "$340"],
            ["Sterile bacteriostatic water + syringes", "$45"],
            ["Cold-chain insulated shipping", "$35"],
            ["Custom dosing protocol (PDF + video)", "$197"],
            ["Concierge text-line w/ a clinician", "$497"],
            ["BONUS: Sleep optimization protocol", "$67"],
            ["BONUS: Private member community", "INCL."],
          ].map(([n, v], i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 0', borderBottom: '1px solid var(--border-soft)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ color: ACCENT, fontSize: 16 }}>✓</span>
                <span style={{ fontSize: 13, color: 'var(--text)' }}>{n}</span>
              </div>
              <span className="tp-mono" style={{ fontSize: 12, color: 'var(--text-dim)' }}>{v}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 18, padding: 16, border: '1px solid var(--border)', borderRadius: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span className="tp-mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--muted)', textTransform: 'uppercase' }}>TOTAL VALUE</span>
          <span className="tp-display" style={{ fontSize: 34, color: 'var(--text)' }}>$1,401</span>
        </div>
      </section>

      {/* ============ PRICE REVEAL ============ */}
      <section style={{ padding: '44px 22px', background: 'var(--bg)', textAlign: 'center' }}>
        <Eyebrow lime>YOUR PRICE TODAY</Eyebrow>
        <div style={{ marginTop: 16, display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 14 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: 'var(--muted-2)', textDecoration: 'line-through' }}>
            ${priceWas || 497}
          </span>
          <span className="tp-display" style={{ fontSize: 96, color: ACCENT, lineHeight: 1 }}>
            ${price || 297}
          </span>
        </div>
        <p style={{ color: 'var(--text-dim)', fontSize: 13, marginTop: 8 }}>
          One-time. Ships in 48h. No subscription unless you want one.
        </p>
        <button className="tp-btn tp-btn--primary tp-btn--block tp-btn--xl" style={{ marginTop: 22 }} onClick={go}>
          Send Me the Stack →
        </button>
        {showCountdown && (
          <div style={{ marginTop: 14 }}>
            <span className="tp-mono" style={{ fontSize: 11, color: 'var(--alert)', letterSpacing: '0.1em' }}>
              PRICE LOCK ENDS IN <Countdown mins={14} secs={53} />
            </span>
          </div>
        )}
      </section>

      {/* ============ GUARANTEE ============ */}
      <section style={{ padding: '40px 22px', borderTop: '1px solid var(--border-soft)' }}>
        <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
          {/* Seal */}
          <div style={{
            flex: '0 0 92px',
            width: 92, height: 92,
            border: '2px solid ' + ACCENT,
            borderRadius: '50%',
            display: 'grid', placeItems: 'center',
            position: 'relative',
          }}>
            <div style={{ textAlign: 'center' }}>
              <div className="tp-display" style={{ fontSize: 30, lineHeight: 0.9, color: ACCENT }}>{guaranteeDays || 90}</div>
              <div className="tp-mono" style={{ fontSize: 8, color: ACCENT, letterSpacing: '0.16em' }}>DAY · 2X</div>
            </div>
            <div style={{ position: 'absolute', inset: -8, border: '1px dashed ' + ACCENT, borderRadius: '50%', opacity: 0.4 }} />
          </div>
          <div>
            <Eyebrow lime>OUR RISK, NOT YOURS</Eyebrow>
            <h2 className="tp-display" style={{ fontSize: 28, marginTop: 8, color: 'var(--text)' }}>
              {guaranteeDays || 90} DAYS. RESULTS OR <span style={{ color: ACCENT }}>2X YOUR MONEY BACK.</span>
            </h2>
            <p style={{ fontSize: 13, color: 'var(--text-dim)', lineHeight: 1.55, marginTop: 10 }}>
              Run the full protocol. If your sleep, joint pain, and recovery don't measurably improve, we refund you twice what you paid. Keep the vials.
            </p>
          </div>
        </div>
      </section>

      {/* ============ FAQ ============ */}
      <section style={{ padding: '40px 22px', background: 'var(--bg-warm)', borderTop: '1px solid var(--border-soft)' }}>
        <Eyebrow>FAQ</Eyebrow>
        <h2 className="tp-display" style={{ fontSize: 28, marginTop: 12, color: 'var(--text)' }}>STILL ASKING?</h2>
        <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            ["Is this legal?", "BPC-157 + TB-500 are sold for research and personal use. Every vial ships with its COA. We don't make therapeutic claims."],
            ["How fast will I notice?", "Most customers report sleep + inflammation changes in week 2. Structural healing builds through weeks 4-8."],
            ["What if I'm on TRT or other meds?", "The protocol is compatible with most. Use the included clinician text-line before stacking anything new."],
            ["Shipping?", "Free, cold-chain, 48-hour US. International on request."],
          ].map(([q, a], i) => (
            <details key={i} className="tp-card" style={{ padding: 14 }}>
              <summary style={{ cursor: 'pointer', fontSize: 14, color: 'var(--text)', fontWeight: 600, listStyle: 'none', display: 'flex', justifyContent: 'space-between' }}>
                {q} <span style={{ color: ACCENT }}>+</span>
              </summary>
              <p style={{ fontSize: 13, color: 'var(--text-dim)', marginTop: 10, lineHeight: 1.55 }}>{a}</p>
            </details>
          ))}
        </div>
      </section>

      {/* ============ FINAL CTA ============ */}
      <section style={{ padding: '50px 22px 40px', textAlign: 'center' }}>
        <h2 className="tp-display" style={{ fontSize: 40, color: 'var(--text)', lineHeight: 0.95 }}>
          STOP NEGOTIATING.<br/><span style={{ color: ACCENT }}>START REBUILDING.</span>
        </h2>
        <button className="tp-btn tp-btn--primary tp-btn--block tp-btn--xl" style={{ marginTop: 22 }} onClick={go}>
          Get The Stack — ${price || 297}
        </button>
        <p className="tp-mono" style={{ fontSize: 10, color: 'var(--muted)', marginTop: 12, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          🔒 SSL · 256-bit · {guaranteeDays || 90}-day 2x guarantee
        </p>
      </section>

      <footer style={{ padding: '20px 22px 30px', borderTop: '1px solid var(--border-soft)', background: '#070806' }}>
        <Logo />
        <p style={{ fontSize: 11, color: 'var(--muted-2)', lineHeight: 1.5, marginTop: 10 }}>
          For research and personal use. Not evaluated by the FDA. Not intended to diagnose, treat, cure or prevent any disease. © TESTED 2026.
        </p>
      </footer>
    </div>
  );
}

Object.assign(window, { VSLLanding });