// 05 · Upsell + downsell — 1-click post-purchase.

function UpsellChrome({ children, dark = false }) {
  return (
    <div style={{ width: 420, height: 1000, background: TP.c.paper, padding: 12 }}>
      <div style={{
        width: 396, height: 976, 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: dark ? '#0a0a0a' : '#fff',
          color: dark ? '#fff' : TP.c.ink,
          overflow: 'hidden', position: 'relative',
          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' }}>
            {children}
          </div>
          <div style={{
            position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)',
            width: 130, height: 4, borderRadius: 2, background: dark ? '#fff' : '#0a0a0a', opacity: 0.6, zIndex: 50,
          }} />
        </div>
      </div>
    </div>
  );
}

function UpsellMain({ t }) {
  return (
    <UpsellChrome dark>
      <div style={{ padding: '18px 18px 0', color: '#fff' }}>
        {/* Confirmation flash */}
        <div style={{
          padding: '8px 12px', background: '#1f5d3a',
          display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16,
          fontSize: 11,
        }}>
          <Check size={14} color="#fff" />
          <span>Order #TP-48217 confirmed · Marcus</span>
        </div>

        <Eyebrow style={{ marginBottom: 10, color: TP.c.warn }}>
          Wait — read this before you close ↓
        </Eyebrow>

        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 28, lineHeight: 1, letterSpacing: '-0.03em',
          margin: 0, marginBottom: 14,
        }}>
          One-time offer:<br />
          <span style={{ color: TP.c.cta }}>3 more vials for half off.</span>
        </h2>

        <p style={{ fontSize: 12, color: '#aaa', lineHeight: 1.55, marginBottom: 14 }}>
          You picked the 30-day starter. Most users notice changes at day 14 and don't want to come off at day 30. We're offering the next <b style={{ color: '#fff' }}>90-day continuation pack</b> right now at the price we paid our compounder — never again at this rate.
        </p>

        <div style={{ position: 'relative', marginBottom: 14 }}>
          <ImgPlaceholder label="3 vials · 90-day continuation" h={150} dark />
          <Stamp size={70} rotate={-12} color={TP.c.warn} style={{ position: 'absolute', top: -10, right: -8 }}>
            <span style={{ color: '#0a0a0a' }}>50% OFF<br />TODAY ONLY</span>
          </Stamp>
        </div>

        {/* Value stack mini */}
        <div style={{ marginBottom: 12 }}>
          {[
            'Lock in your protocol — no re-buying every month',
            'Cycle: 4 weeks on, 2 weeks off, repeat',
            'Free express shipping on all 3 vials',
            'Auto-pause anytime, cancel in 1 tap',
          ].map((s, i) => (
            <div key={i} style={{
              display: 'flex', gap: 8, alignItems: 'flex-start',
              padding: '6px 0', fontSize: 12,
            }}>
              <Check size={12} color={TP.c.warn} />
              <span>{s}</span>
            </div>
          ))}
        </div>

        {/* Price comparison */}
        <div style={{
          padding: 14, background: '#161616', marginBottom: 14,
          border: `1px solid #2a2a2a`,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
            <span style={{ fontSize: 11, color: '#888' }}>Normal price (3 × $99)</span>
            <Mono style={{ fontSize: 13, color: '#888' }}><s>${t.upsellWas || 297}</s></Mono>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 15 }}>Your price today</span>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 28, color: TP.c.cta }}>${t.upsellPrice || 147}</span>
          </div>
          <Mono style={{ fontSize: 9, color: TP.c.warn, marginTop: 4, display: 'block' }}>
            saves ${(t.upsellWas || 297) - (t.upsellPrice || 147)} · 1-click added to your order
          </Mono>
        </div>

        <CTA size="lg">Yes — add 3 vials for ${t.upsellPrice || 147}</CTA>
        <div style={{
          textAlign: 'center', marginTop: 10, fontSize: 11,
          color: '#888', textDecoration: 'underline', cursor: 'pointer',
        }}>No thanks, just my starter</div>

        <Mono style={{
          textAlign: 'center', marginTop: 14, fontSize: 9, color: '#666',
          display: 'block', lineHeight: 1.5,
        }}>
          one click · no re-entering card · still covered by {t.guarantee}-day MBG
        </Mono>
      </div>
    </UpsellChrome>
  );
}

function UpsellDown({ t }) {
  const ds = Math.round((t.upsellPrice || 147) * 0.6);
  return (
    <UpsellChrome>
      <div style={{ padding: '18px 18px 0' }}>
        <Eyebrow style={{ marginBottom: 10 }}>06b · Last call</Eyebrow>

        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 26, lineHeight: 1, letterSpacing: '-0.03em',
          margin: 0, marginBottom: 12,
        }}>
          Okay — what if we<br />just sent <em style={{ color: TP.c.cta, fontStyle: 'normal' }}>one more vial?</em>
        </h2>

        <p style={{ fontSize: 12, color: TP.c.ink2, lineHeight: 1.55, marginBottom: 12 }}>
          We get it — $147 is a commitment. But going from 30 days to 60 days is where the real tendon remodeling kicks in. Add a second vial for the price of one shipping label.
        </p>

        <div style={{ position: 'relative', marginBottom: 14 }}>
          <ImgPlaceholder label="2 vials · 60-day pack" h={140} />
        </div>

        <div style={{
          padding: 14, background: TP.c.paper, marginBottom: 14,
          border: `1px solid ${TP.c.line2}`,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
            <span style={{ fontSize: 11, color: TP.c.ink3 }}>Normally</span>
            <Mono style={{ fontSize: 12 }}><s>$99</s></Mono>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14 }}>One more vial</span>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 26, color: TP.c.cta }}>${ds}</span>
          </div>
          <Mono style={{ fontSize: 9, color: TP.c.trust, marginTop: 4, display: 'block' }}>
            our actual cost · we make zero on this
          </Mono>
        </div>

        {/* mini value props */}
        <div style={{ marginBottom: 14, display: 'grid', gap: 4 }}>
          {[
            'Lock the protocol for 60 days total',
            'Pause or cancel from any email',
            'Free shipping · ships with your starter',
          ].map((x, i) => (
            <div key={i} style={{
              display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 11, color: TP.c.ink2,
            }}>
              <Check size={11} />
              <span>{x}</span>
            </div>
          ))}
        </div>

        <CTA size="lg">Add 1 more vial — ${ds}</CTA>
        <div style={{
          textAlign: 'center', marginTop: 10, fontSize: 11,
          color: TP.c.ink3, textDecoration: 'underline', cursor: 'pointer',
        }}>Skip — go to my confirmation</div>

        {/* Honesty footer */}
        <div style={{
          marginTop: 18, padding: 10,
          background: '#fff8e6', border: `1px solid ${TP.c.warn}66`,
          fontSize: 10, color: TP.c.ink2, lineHeight: 1.5,
        }}>
          <Mono style={{ fontSize: 9, color: TP.c.warn, marginRight: 4 }}>WHY?</Mono>
          We make our margin on the starter. The reason we offer this is honest — once you start, customers who stay 60+ days hit ~3× our refund rate of those who quit at 30. We'd rather not refund you.
        </div>
      </div>
    </UpsellChrome>
  );
}

function Upsell({ view = 'main', t }) {
  return view === 'down' ? <UpsellDown t={t} /> : <UpsellMain t={t} />;
}

window.Upsell = Upsell;