// 04 · Offer + checkout — mobile cart, order bump, payment.

function CheckoutChrome({ children }) {
  return (
    <div style={{ width: 420, height: 1080, background: TP.c.paper, padding: 12 }}>
      <div style={{
        width: 396, height: 1056, borderRadius: 46,
        background: '#000', padding: 8,
        boxShadow: '0 30px 60px -30px rgba(0,0,0,0.4), 0 6px 0 #d4d0c8',
        position: 'relative', margin: '0 auto',
      }}>
        <div style={{
          width: '100%', height: '100%', borderRadius: 38,
          background: '#fff', overflow: 'hidden', position: 'relative',
          color: TP.c.ink, fontFamily: 'var(--font-body)',
        }}>
          <div style={{
            position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
            width: 110, height: 32, borderRadius: 16, background: '#000', zIndex: 50,
          }} />
          <div style={{
            height: 52, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '14px 28px 0', fontSize: 13, fontWeight: 700,
          }}>
            <span>9:41</span>
            <Mono style={{ fontSize: 11 }}>●●●● 5G ▮</Mono>
          </div>
          <div style={{ position: 'absolute', top: 52, left: 0, right: 0, bottom: 0, overflow: 'hidden' }}>
            {/* Browser top */}
            <div style={{
              padding: '8px 14px', display: 'flex', alignItems: 'center', gap: 8,
              borderBottom: `1px solid ${TP.c.line}`, background: '#fafaf7',
              fontSize: 11,
            }}>
              <span style={{ fontFamily: 'var(--font-mono)', color: TP.c.trust, fontSize: 9 }}>🔒</span>
              <Mono style={{ fontSize: 10, color: TP.c.ink2 }}>tested-peptides.com/checkout</Mono>
            </div>
            {children}
          </div>
          <div style={{
            position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)',
            width: 130, height: 4, borderRadius: 2, background: '#0a0a0a', opacity: 0.6, zIndex: 50,
          }} />
        </div>
      </div>
    </div>
  );
}

function CheckoutMain({ t }) {
  return (
    <CheckoutChrome>
      <div style={{ padding: '14px 18px 0', overflowY: 'hidden' }}>
        {/* Header strip */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
          <Wordmark size={11} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <Mono style={{ fontSize: 9, color: TP.c.ink3 }}>secure</Mono>
            <span style={{ fontSize: 11 }}>🔒</span>
          </div>
        </div>

        {/* Step crumbs */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 4, marginBottom: 14,
          fontFamily: 'var(--font-mono)', fontSize: 9, color: TP.c.ink3,
          letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>
          <span style={{ color: TP.c.ink }}>Cart</span>
          <span>—</span>
          <span style={{ color: TP.c.ink, textDecoration: 'underline' }}>Info</span>
          <span>—</span>
          <span>Payment</span>
        </div>

        {/* Hero offer card */}
        <div style={{
          padding: 14, background: '#0a0a0a', color: '#fff', marginBottom: 12,
        }}>
          <div style={{ display: 'flex', gap: 10 }}>
            <ImgPlaceholder label="vial" w={64} h={80} radius={4} dark style={{ flexShrink: 0 }} />
            <div style={{ flex: 1 }}>
              <Mono style={{ fontSize: 9, color: TP.c.warn }}>30-DAY STARTER</Mono>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17, lineHeight: 1.05, marginTop: 2 }}>
                BPC-157 Recovery Protocol
              </div>
              <div style={{ fontSize: 10, color: '#999', marginTop: 4 }}>
                1 × 5mg vial · protocol card · syringes · 4 bonuses
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
                <Mono style={{ fontSize: 10, color: '#888' }}><s>${t.priceWas || 197}</s></Mono>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 22 }}>${t.price}</div>
                <Pill color="#fff" bg="rgba(255,255,255,0.15)" border="none" style={{ fontSize: 8 }}>50% OFF</Pill>
              </div>
            </div>
          </div>
        </div>

        {/* Contact info */}
        <div style={{ marginBottom: 12 }}>
          <Eyebrow style={{ marginBottom: 6 }}>1 · Contact</Eyebrow>
          <input value="marcus@gmail.com" readOnly style={{
            width: '100%', padding: '12px 12px',
            border: `1px solid ${TP.c.line2}`, borderRadius: 4, fontSize: 13,
            fontFamily: 'var(--font-body)',
          }} />
        </div>

        {/* Address */}
        <div style={{ marginBottom: 12 }}>
          <Eyebrow style={{ marginBottom: 6 }}>2 · Ship to</Eyebrow>
          <div style={{
            padding: 12, border: `1px solid ${TP.c.line2}`, fontSize: 11, lineHeight: 1.5,
          }}>
            Marcus Thompson<br />
            418 Lincoln Ave · Austin TX 78704<br />
            <Mono style={{ fontSize: 9, color: TP.c.trust }}>✓ verified · arrives Jun 2 – Jun 4</Mono>
          </div>
        </div>

        {/* ORDER BUMP — the moneymaker */}
        <div style={{
          marginBottom: 12, padding: 12,
          background: '#fff8e6', border: `2px dashed ${TP.c.warn}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
            <input type="checkbox" defaultChecked style={{
              width: 22, height: 22, accentColor: TP.c.cta, marginTop: 2,
            }} />
            <div style={{ flex: 1 }}>
              <div style={{
                display: 'inline-block',
                background: TP.c.warn, color: '#0a0a0a',
                fontFamily: 'var(--font-mono)', fontSize: 8,
                letterSpacing: '0.1em', padding: '2px 6px', marginBottom: 6,
                textTransform: 'uppercase', fontWeight: 700,
              }}>One-time offer · 73% off</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14, marginBottom: 4 }}>
                Add the Sleep Stack vial (+${t.bumpPrice || 27})
              </div>
              <div style={{ fontSize: 11, color: TP.c.ink2, lineHeight: 1.45 }}>
                Recovery happens in deep sleep. 87% of buyers add this. <b>Save $73</b> versus buying it separately.
              </div>
            </div>
          </div>
        </div>

        {/* Totals */}
        <div style={{ padding: '10px 0', borderTop: `1px solid ${TP.c.line2}` }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: TP.c.ink2, marginBottom: 4 }}>
            <span>Subtotal</span><span>${t.price + (t.bumpPrice || 27)}.00</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: TP.c.trust, marginBottom: 8 }}>
            <span>Shipping</span><span>FREE</span>
          </div>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            padding: '10px 0', borderTop: `1px solid ${TP.c.line2}`, borderBottom: `1px solid ${TP.c.line2}`,
            marginBottom: 12,
          }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13 }}>Total</span>
            <div>
              <Mono style={{ fontSize: 10, color: TP.c.ink3, marginRight: 6 }}>USD</Mono>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 22 }}>
                ${t.price + (t.bumpPrice || 27)}.00
              </span>
            </div>
          </div>
        </div>

        <CTA size="lg">Pay ${t.price + (t.bumpPrice || 27)} — Start protocol →</CTA>

        <div style={{
          display: 'flex', gap: 8, justifyContent: 'center', alignItems: 'center',
          marginTop: 10, fontSize: 9, color: TP.c.ink3,
        }}>
          <Check size={10} /> <span>{t.guarantee}-day MBG</span>
          <span>·</span>
          <Check size={10} /> <span>3rd-party tested</span>
          <span>·</span>
          <Check size={10} /> <span>Ships in 24h</span>
        </div>
      </div>
    </CheckoutChrome>
  );
}

function CheckoutPay({ t }) {
  return (
    <CheckoutChrome>
      <div style={{ padding: '14px 18px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
          <Wordmark size={11} />
          <Pill color={TP.c.trust} bg="#1f5d3a14">🔒 256-bit SSL</Pill>
        </div>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 4, marginBottom: 14,
          fontFamily: 'var(--font-mono)', fontSize: 9, color: TP.c.ink3,
          letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>
          <span>Cart</span><span>—</span><span>Info</span><span>—</span>
          <span style={{ color: TP.c.ink, textDecoration: 'underline' }}>Payment</span>
        </div>

        {/* Express checkout */}
        <Eyebrow style={{ marginBottom: 6 }}>Express checkout</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginBottom: 6 }}>
          {[
            { l: '🍎 Pay', bg: '#0a0a0a', fg: '#fff' },
            { l: 'shop', bg: '#5a31f4', fg: '#fff' },
            { l: 'G Pay', bg: '#fff', fg: '#0a0a0a' },
          ].map((b, i) => (
            <div key={i} style={{
              padding: '12px 0', background: b.bg, color: b.fg, border: `1px solid ${TP.c.line2}`,
              textAlign: 'center', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13,
            }}>{b.l}</div>
          ))}
        </div>
        <div style={{ textAlign: 'center', margin: '14px 0', position: 'relative' }}>
          <div style={{ height: 1, background: TP.c.line }} />
          <span style={{
            position: 'absolute', top: -7, left: '50%', transform: 'translateX(-50%)',
            background: '#fff', padding: '0 10px', fontSize: 10, color: TP.c.ink3,
          }}>or pay with card</span>
        </div>

        {/* Card */}
        <Eyebrow style={{ marginBottom: 6 }}>Card details</Eyebrow>
        <div style={{ display: 'grid', gap: 6, marginBottom: 14 }}>
          <div style={{
            padding: '12px 12px', border: `1px solid ${TP.c.line2}`, fontSize: 12,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <Mono style={{ fontSize: 13 }}>4242  4242  4242  4242</Mono>
            <span style={{ fontSize: 18 }}>💳</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
            <div style={{ padding: '12px 12px', border: `1px solid ${TP.c.line2}` }}><Mono style={{ fontSize: 12 }}>05 / 28</Mono></div>
            <div style={{ padding: '12px 12px', border: `1px solid ${TP.c.line2}` }}><Mono style={{ fontSize: 12 }}>•••</Mono></div>
          </div>
        </div>

        {/* Order summary collapsed */}
        <div style={{
          padding: 12, background: TP.c.paper, border: `1px solid ${TP.c.line2}`,
          marginBottom: 12,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
            <span style={{ fontSize: 11 }}>BPC-157 Starter</span>
            <Mono style={{ fontSize: 11 }}>${t.price}.00</Mono>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
            <span style={{ fontSize: 11 }}>Sleep Stack add-on</span>
            <Mono style={{ fontSize: 11 }}>${t.bumpPrice || 27}.00</Mono>
          </div>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            paddingTop: 8, borderTop: `1px solid ${TP.c.line2}`,
          }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13 }}>Total</span>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 18 }}>${t.price + (t.bumpPrice || 27)}.00</span>
          </div>
        </div>

        {/* Live social proof */}
        <div style={{
          padding: 10, background: '#fff', border: `1px solid ${TP.c.line2}`,
          marginBottom: 12, display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <LiveDot color={TP.c.trust} />
          <div style={{ fontSize: 11, color: TP.c.ink2, lineHeight: 1.4 }}>
            <b>James in Phoenix</b> ordered 4 min ago<br />
            <Mono style={{ fontSize: 9, color: TP.c.ink3 }}>14 people checking out right now</Mono>
          </div>
        </div>

        <CTA size="lg">Complete order · ${t.price + (t.bumpPrice || 27)}</CTA>

        <div style={{ textAlign: 'center', marginTop: 12, fontSize: 9, color: TP.c.ink3, lineHeight: 1.6 }}>
          By placing this order you agree to our T&Cs.<br />
          Research compound · for laboratory use · not for human consumption per FDA<br />
          <Mono>visa · mastercard · amex · discover</Mono>
        </div>
      </div>
    </CheckoutChrome>
  );
}

function Checkout({ view = 'main', t }) {
  return view === 'pay' ? <CheckoutPay t={t} /> : <CheckoutMain t={t} />;
}

window.Checkout = Checkout;