/* eslint-disable */
// Offer / Checkout + One-Time-Offer Upsell + Thank-You
// Hormozi pattern: order page with bump, then OTO, then onboarding.

// ============ OFFER / CHECKOUT ============
function OfferScreen({ price, priceWas, guaranteeDays, showCountdown, onNext }) {
  const [bump, setBump] = React.useState(true);
  const [shipping] = React.useState(0);
  const bumpPrice = 47;
  const total = (price || 297) + (bump ? bumpPrice : 0) + shipping;

  return (
    <div className="tp-root tp-phone-scroll" style={{ background: 'var(--bg)', minHeight: '100%' }}>
      {showCountdown && (
        <div style={{
          background: 'var(--alert)', color: '#0a0c08',
          padding: '8px 14px',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
          letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>
          <span>YOUR CART EXPIRES IN</span>
          <Countdown mins={9} secs={47} />
        </div>
      )}

      <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-soft)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Logo />
        <span className="tp-mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em' }}>SECURE · STEP 2/3</span>
      </div>

      {/* Order summary */}
      <section style={{ padding: '22px 18px' }}>
        <Eyebrow lime>YOUR ORDER</Eyebrow>
        <h2 className="tp-display" style={{ fontSize: 26, marginTop: 8, color: 'var(--text)' }}>RECOVERY STACK · 30 DAYS</h2>

        <div className="tp-card" style={{ padding: 14, marginTop: 14, display: 'flex', gap: 12 }}>
          <div style={{ width: 72, height: 72, borderRadius: 8, overflow: 'hidden', flex: '0 0 72px' }}>
            <ProductPlaceholder variant="vial" label="VIAL" />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>BPC-157 + TB-500 Stack</div>
            <div className="tp-mono" style={{ fontSize: 10, color: 'var(--muted)', marginTop: 4, letterSpacing: '0.1em' }}>BATCH TP·24·08 · 99.4% PURITY</div>
            <div style={{ marginTop: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span className="tp-mono" style={{ fontSize: 11, color: 'var(--muted-2)', textDecoration: 'line-through' }}>${priceWas || 497}</span>
              <span className="tp-display" style={{ fontSize: 22, color: 'var(--accent)' }}>${price || 297}</span>
            </div>
          </div>
        </div>

        {/* ORDER BUMP */}
        <div onClick={() => setBump(b => !b)} style={{
          marginTop: 14,
          padding: 14,
          border: '2px dashed ' + (bump ? 'var(--accent)' : 'var(--border)'),
          borderRadius: 12,
          background: bump ? 'rgba(212,255,58,0.06)' : 'var(--surface)',
          cursor: 'pointer',
          display: 'flex', gap: 12, alignItems: 'flex-start',
        }}>
          <span style={{
            width: 22, height: 22, flex: '0 0 22px',
            borderRadius: 4,
            border: '2px solid ' + (bump ? 'var(--accent)' : 'var(--border)'),
            background: bump ? 'var(--accent)' : 'transparent',
            display: 'grid', placeItems: 'center',
            color: '#0a0c08', fontWeight: 800, fontSize: 14,
            marginTop: 2,
          }}>{bump ? '✓' : ''}</span>
          <div style={{ flex: 1 }}>
            <div className="tp-eyebrow lime" style={{ marginBottom: 6 }}>YES, ADD THIS — 80% OFF</div>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)' }}>
              Add the Sleep Optimization Kit — Glycine + Apigenin protocol, normally $97. <span style={{ color: 'var(--accent)' }}>+$47</span>
            </div>
            <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 6, lineHeight: 1.4 }}>
              Compounds the stack's recovery effect. Only available with your initial order.
            </div>
          </div>
        </div>
      </section>

      {/* Contact + payment */}
      <section style={{ padding: '0 18px 22px' }}>
        <div className="tp-rule" style={{ margin: '8px 0 18px' }}><span className="tp-rule__l">SHIPPING + PAYMENT</span></div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { p: "Email", v: "you@email.com" },
            { p: "Shipping address", v: "123 Recovery Ln" },
            { p: "ZIP", v: "10001" },
          ].map((f, i) => (
            <input key={i} placeholder={f.p} defaultValue={i === 0 ? "" : f.v} style={{
              padding: '14px 16px',
              borderRadius: 10,
              border: '1px solid var(--border)',
              background: 'var(--surface)',
              color: 'var(--text)',
              fontFamily: 'var(--font-body)',
              fontSize: 14,
              outline: 'none',
            }} />
          ))}
        </div>

        <div className="tp-card" style={{ padding: 14, marginTop: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
            <span className="tp-mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.12em' }}>CARD</span>
            <span style={{ display: 'flex', gap: 4 }}>
              {['VISA', 'MC', 'AMEX'].map(t => (
                <span key={t} className="tp-mono" style={{ fontSize: 9, padding: '2px 6px', border: '1px solid var(--border)', borderRadius: 3, color: 'var(--muted)' }}>{t}</span>
              ))}
            </span>
          </div>
          <input placeholder="1234 1234 1234 1234" style={{
            width: '100%', padding: '12px 0',
            border: 'none', background: 'transparent',
            color: 'var(--text)', fontFamily: 'var(--font-mono)',
            fontSize: 14, outline: 'none',
            borderBottom: '1px solid var(--border-soft)',
          }} />
          <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
            <input placeholder="MM/YY" style={{ flex: 1, padding: '12px 0', border: 'none', borderBottom: '1px solid var(--border-soft)', background: 'transparent', color: 'var(--text)', fontFamily: 'var(--font-mono)', fontSize: 14, outline: 'none' }} />
            <input placeholder="CVC" style={{ flex: 1, padding: '12px 0', border: 'none', borderBottom: '1px solid var(--border-soft)', background: 'transparent', color: 'var(--text)', fontFamily: 'var(--font-mono)', fontSize: 14, outline: 'none' }} />
          </div>
        </div>
      </section>

      {/* Totals */}
      <section style={{ padding: '0 18px 22px' }}>
        <div style={{ padding: 16, background: 'var(--surface-2)', borderRadius: 12 }}>
          <Row label="Recovery Stack" v={`$${price || 297}`} />
          {bump && <Row label="Sleep Kit" v={`+$${bumpPrice}`} />}
          <Row label="Shipping (cold-chain)" v="FREE" />
          <Row label="Tax" v="$0.00" />
          <div style={{ height: 1, background: 'var(--border)', margin: '12px 0' }} />
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span className="tp-mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--muted)', textTransform: 'uppercase' }}>TOTAL</span>
            <span className="tp-display" style={{ fontSize: 36, color: 'var(--accent)' }}>${total}</span>
          </div>
        </div>

        <button className="tp-btn tp-btn--primary tp-btn--block tp-btn--xl" style={{ marginTop: 16 }} onClick={() => onNext && onNext()}>
          Complete My Order →
        </button>
        <div style={{ textAlign: 'center', marginTop: 12 }}>
          <span className="tp-mono" style={{ fontSize: 9, color: 'var(--muted-2)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
            🔒 256-bit SSL · {guaranteeDays || 90}-day 2x guarantee
          </span>
        </div>
      </section>
    </div>
  );
}

function Row({ label, v }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
      <span style={{ fontSize: 13, color: 'var(--text-dim)' }}>{label}</span>
      <span className="tp-mono" style={{ fontSize: 13, color: 'var(--text)' }}>{v}</span>
    </div>
  );
}

// ============ UPSELL / OTO ============
function UpsellScreen({ onNext }) {
  const go = () => onNext && onNext();
  return (
    <div className="tp-root tp-phone-scroll" style={{ background: 'var(--bg)', minHeight: '100%' }}>
      <div style={{
        background: 'var(--accent)', color: '#0a0c08',
        padding: '8px 14px', textAlign: 'center',
        fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
        letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>
        ✓ ORDER #TP-48291 CONFIRMED
      </div>

      <section style={{ padding: '32px 22px' }}>
        <Eyebrow lime>ONE-TIME OFFER · NEVER SHOWN AGAIN</Eyebrow>
        <h1 className="tp-display" style={{ fontSize: 44, lineHeight: 0.95, marginTop: 14, color: 'var(--text)' }}>
          WAIT —<br/>BEFORE YOUR STACK SHIPS.
        </h1>
        <p style={{ fontSize: 15, color: 'var(--text-dim)', lineHeight: 1.5, marginTop: 16 }}>
          Most customers re-order at day 28 anyway. Lock in the next 90 days at <b style={{ color: 'var(--accent)' }}>$197/mo</b> (33% off) — pause or cancel anytime in 1 tap.
        </p>

        {/* Stack pricing */}
        <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {[
            { tag: "ONE-TIME", price: "$297", sub: "/mo if reordered", muted: true },
            { tag: "SUBSCRIBE", price: "$197", sub: "/mo · pause anytime", muted: false },
          ].map((c, i) => (
            <div key={i} style={{
              padding: 16,
              borderRadius: 12,
              border: '1px solid ' + (c.muted ? 'var(--border)' : 'var(--accent)'),
              background: c.muted ? 'var(--surface)' : 'rgba(212,255,58,0.06)',
              opacity: c.muted ? 0.6 : 1,
            }}>
              <div className="tp-mono" style={{ fontSize: 9, color: c.muted ? 'var(--muted)' : 'var(--accent)', letterSpacing: '0.14em' }}>
                {c.tag}
              </div>
              <div className="tp-display" style={{ fontSize: 38, color: c.muted ? 'var(--muted)' : 'var(--accent)', marginTop: 6, lineHeight: 1 }}>
                {c.price}
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 4 }}>{c.sub}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            "Auto-ship cold-chain every 30 days",
            "Lock $197/mo for life — even when we raise prices",
            "Skip any month from your account in 1 tap",
            "Priority access to new compounds + COAs",
          ].map((t, i) => (
            <div key={i} style={{ display: 'flex', gap: 10 }}>
              <span style={{ color: 'var(--accent)', fontWeight: 700 }}>✓</span>
              <span style={{ fontSize: 13, color: 'var(--text)' }}>{t}</span>
            </div>
          ))}
        </div>

        <button className="tp-btn tp-btn--primary tp-btn--block tp-btn--xl" style={{ marginTop: 22 }} onClick={go}>
          Yes — Lock In $197/mo →
        </button>
        <button onClick={go} style={{
          width: '100%', marginTop: 10,
          background: 'transparent', color: 'var(--muted)',
          border: 'none', padding: '10px',
          fontSize: 12, cursor: 'pointer',
          fontFamily: 'var(--font-body)',
          textDecoration: 'underline',
        }}>
          No thanks, just the one-time order
        </button>
      </section>
    </div>
  );
}

// ============ THANK YOU / ONBOARDING ============
function ThankYouScreen() {
  return (
    <div className="tp-root tp-phone-scroll" style={{ background: 'var(--bg)', minHeight: '100%' }}>
      <section style={{ padding: '40px 22px 24px', textAlign: 'center' }}>
        <div style={{
          width: 64, height: 64, margin: '0 auto',
          borderRadius: '50%',
          background: 'var(--accent)', color: '#0a0c08',
          display: 'grid', placeItems: 'center',
          fontSize: 28, fontWeight: 800,
        }}>✓</div>
        <Eyebrow lime>YOU'RE IN</Eyebrow>
        <h1 className="tp-display" style={{ fontSize: 42, marginTop: 8, color: 'var(--text)', lineHeight: 0.95 }}>
          ORDER CONFIRMED.<br/>
          <span style={{ color: 'var(--accent)' }}>BATCH RESERVED.</span>
        </h1>
        <p style={{ fontSize: 14, color: 'var(--text-dim)', marginTop: 14 }}>
          Order <span className="tp-mono">#TP-48291</span> ships Tuesday with batch <span className="tp-mono">TP·24·08</span>. Cold-chain tracking link inbound.
        </p>
      </section>

      {/* What happens next */}
      <section style={{ padding: '0 22px 30px' }}>
        <Eyebrow>WHAT HAPPENS NEXT</Eyebrow>
        <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 0 }}>
          {[
            { t: "TODAY", h: "Protocol PDF in your inbox", b: "Includes dosing chart + reconstitution video." },
            { t: "TUE", h: "Stack ships from Phoenix", b: "Cold-chain 48-hour. Signature required." },
            { t: "THU", h: "Day 1 dose", b: "Concierge clinician opens text-line." },
            { t: "DAY 14", h: "First check-in", b: "Track sleep, soreness, joint pain." },
            { t: "DAY 30", h: "Recovery review", b: "Lock-in for month 2 or pause — your call." },
          ].map((s, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, padding: '14px 0', borderBottom: '1px solid var(--border-soft)' }}>
              <div style={{ flex: '0 0 60px' }}>
                <span className="tp-mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.12em' }}>{s.t}</span>
              </div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>{s.h}</div>
                <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4, lineHeight: 1.45 }}>{s.b}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* COA card */}
      <section style={{ padding: '0 22px 24px' }}>
        <Eyebrow lime>YOUR BATCH</Eyebrow>
        <div className="tp-card" style={{ marginTop: 12, padding: 16 }}>
          <COABar />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 14 }}>
            <div className="tp-stat" style={{ background: 'var(--bg-warm)' }}>
              <div className="tp-stat__n">99.4%</div>
              <div className="tp-stat__l">BPC-157 PURITY</div>
            </div>
            <div className="tp-stat" style={{ background: 'var(--bg-warm)' }}>
              <div className="tp-stat__n">98.9%</div>
              <div className="tp-stat__l">TB-500 PURITY</div>
            </div>
          </div>
          <button className="tp-btn tp-btn--ghost" style={{ width: '100%', marginTop: 14 }}>
            Download Full COA (PDF) ↓
          </button>
        </div>
      </section>

      {/* Referral */}
      <section style={{ padding: '0 22px 50px' }}>
        <div style={{
          padding: 18,
          borderRadius: 12,
          background: 'radial-gradient(120% 80% at 50% 0%, #1a2010 0%, var(--bg-warm) 80%)',
          border: '1px solid var(--border)',
        }}>
          <h3 className="tp-display" style={{ fontSize: 22, margin: 0, color: 'var(--text)' }}>
            REFER A FRIEND, GET <span style={{ color: 'var(--accent)' }}>$50 BACK</span>
          </h3>
          <p style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 8, lineHeight: 1.5 }}>
            They get $50 off their first stack. You get $50 credit. Texts welcome.
          </p>
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <input value="tested.co/r/MK48291" readOnly style={{
              flex: 1, padding: '10px 12px', borderRadius: 8,
              border: '1px solid var(--border)', background: 'var(--surface)',
              color: 'var(--text)', fontFamily: 'var(--font-mono)', fontSize: 12,
              outline: 'none',
            }} />
            <button className="tp-btn tp-btn--primary" style={{ padding: '10px 16px', fontSize: 11 }}>Copy</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { OfferScreen, UpsellScreen, ThankYouScreen });