// calc-gate-upsell.jsx — the lightweight signup gate (the only friction, exists so
// the upsell can recognise a returning buyer), the Stripe checkout note (VAT added
// here), and the signature post-purchase upsell comparison.

function SignupGate({ sel, onClose, onSignup, margin }) {
  const q = window.quotePrice(sel, margin);
  return (
    <div className="calc-modal-ov" onClick={onClose}>
      <div className="calc-root calc-modal calc-gate" onClick={(e) => e.stopPropagation()}>
        <div className="calc-modal-glow"></div>
        <button className="calc-modal-close" onClick={onClose}><i className="ti ti-x"></i></button>
        <div className="badge"><i className="ti ti-gift"></i></div>
        <h3>Create a free account to make it</h3>
        <p className="gsub">Quick and free — it's the only step. We just need to know it's you so your video lands in your account.</p>
        <div className="gprice"><span className="a">{window.fmt(q.total)}</span><span className="b">+ VAT · charged at checkout</span></div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
          <input className="calc-input" type="email" placeholder="you@email.com" />
          <button className="calc-btn calc-btn-primary calc-btn-lg" style={{ width: '100%' }} onClick={onSignup}>
            <i className="ti ti-arrow-right"></i>Continue to checkout
          </button>
        </div>

        <div className="calc-gate-why">
          <i className="ti ti-info"></i>
          <span>Why an account? So we can save your videos and, if you come back, show you when subscribing would cost you less than buying one-by-one.</span>
        </div>
        <div className="calc-gate-fine">No subscription is created. By continuing you agree to the <a href="#">Terms</a> and <a href="#">Privacy Policy</a>.</div>
      </div>
    </div>
  );
}

function Checkout({ sel, onClose, onPaid, margin }) {
  const q = window.quotePrice(sel, margin);
  const vatRate = 0.25; // buyer location: Denmark · 25% — applied at payment
  const vat = Math.round(q.total * vatRate * 100) / 100;
  const total = Math.round((q.total + vat) * 100) / 100;
  return (
    <div className="calc-modal-ov" onClick={onClose}>
      <div className="calc-root calc-modal" style={{ maxWidth: 460 }} onClick={(e) => e.stopPropagation()}>
        <div className="calc-modal-glow"></div>
        <button className="calc-modal-close" onClick={onClose}><i className="ti ti-x"></i></button>
        <div style={{ padding: '34px 36px 30px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
            <span style={{ width: 40, height: 40, borderRadius: 11, background: 'rgba(141,198,63,.12)', border: '1px solid var(--line)', color: 'var(--lime)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.2rem' }}><i className="ti ti-credit-card"></i></span>
            <div><h3 style={{ fontSize: '1.3rem' }}>Checkout</h3><div style={{ fontSize: '0.84rem', color: 'var(--faint)' }}>Secure payment · powered by Stripe</div></div>
          </div>

          <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line-soft)', borderRadius: 12, padding: '16px 18px', marginBottom: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.94rem', color: 'var(--muted)', padding: '5px 0' }}><span>{window.PRICE.length[sel.length].label} {sel.style === 'cinematic' ? 'cinematic' : 'talking-head'} video</span><span style={{ color: 'var(--text)' }}>{window.fmt(q.render)}</span></div>
            {q.oneTime > 0 ? <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.94rem', color: 'var(--muted)', padding: '5px 0' }}><span>Digital twin setup (one-time)</span><span style={{ color: 'var(--text)' }}>{window.fmt(q.oneTime)}</span></div> : null}
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.94rem', color: 'var(--muted)', padding: '5px 0', borderTop: '1px solid var(--line-soft)', marginTop: 5, paddingTop: 10 }}><span>VAT (Denmark · 25%)</span><span style={{ color: 'var(--text)' }}>€{vat.toFixed(2)}</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '1.1rem', fontWeight: 900, color: '#fff', padding: '10px 0 2px', borderTop: '1px solid var(--line)', marginTop: 8 }}><span>Total today</span><span>€{total.toFixed(2)}</span></div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <input className="calc-input" placeholder="Card number" defaultValue="4242 4242 4242 4242" />
            <div style={{ display: 'flex', gap: 10 }}>
              <input className="calc-input" placeholder="MM / YY" defaultValue="12 / 28" />
              <input className="calc-input" placeholder="CVC" defaultValue="123" />
            </div>
          </div>
          <button className="calc-btn calc-btn-primary calc-btn-lg" style={{ width: '100%', marginTop: 16 }} onClick={onPaid}>
            <i className="ti ti-lock"></i>Pay €{total.toFixed(2)} &amp; make my video
          </button>
          <div style={{ marginTop: 13, fontSize: '0.78rem', color: 'var(--faint)', textAlign: 'center', lineHeight: 1.5 }}>
            VAT is calculated for your country at payment. You're paying once for this video — no subscription.
          </div>
        </div>
      </div>
    </div>
  );
}

function UpsellCompare({ history, onClose, onSubscribe }) {
  const count = history.length;
  const spend = history.reduce((a, b) => a + b, 0);
  const plan = window.PLANS.starter;
  const oneOffRate = spend / count;
  const planRate = plan.price / plan.videos;
  const moreVideos = plan.videos - count;
  const saving = Math.max(0, Math.round((oneOffRate - planRate) * plan.videos));

  return (
    <div className="calc-modal-ov" onClick={onClose}>
      <div className="calc-root calc-modal calc-upsell" onClick={(e) => e.stopPropagation()}>
        <div className="calc-modal-glow"></div>
        <button className="calc-modal-close" onClick={onClose}><i className="ti ti-x"></i></button>

        <div className="calc-upsell-top">
          <span className="calc-upsell-receipt"><i className="ti ti-circle-check"></i>Video #{count} is rendering</span>
          <h3>You've made {count} videos for {window.fmt(spend)}. <span className="accent">There's a better deal.</span></h3>
          <p>At the rate you're buying, a subscription would give you far more video for about what you're already spending.</p>
        </div>

        <div className="calc-compare">
          <div className="calc-compare-col now">
            <div className="calc-compare-tag">What you've spent — one-off</div>
            <div className="calc-compare-big">{window.fmt(spend)}<small> so far</small></div>
            <div className="calc-compare-sub">{count} videos, bought one at a time.</div>
            <div className="calc-compare-rate">That's <b>≈{window.fmt(Math.round(oneOffRate))}</b> per video.</div>
            <ul className="calc-compare-list">
              <li><i className="ti ti-info" style={{ color: 'var(--faint)' }}></i>Pay again for every new video</li>
              <li><i className="ti ti-info" style={{ color: 'var(--faint)' }}></i>No monthly images or voiceover allowance</li>
            </ul>
          </div>
          <div className="calc-compare-col plan">
            <div className="calc-compare-crown"><i className="ti ti-crown" style={{ fontSize: '0.7rem', verticalAlign: '-1px' }}></i> Best value</div>
            <div className="calc-compare-tag">{plan.name} subscription</div>
            <div className="calc-compare-big">{window.fmt(plan.price)}<small> / month</small></div>
            <div className="calc-compare-sub">{plan.blurb} — <b style={{ color: '#fff' }}>{moreVideos > 0 ? moreVideos + ' more' : 'more'}</b> than you've made so far.</div>
            <div className="calc-compare-rate">Just <b>≈{window.fmt(Math.round(planRate))}</b> per video.</div>
            <ul className="calc-compare-list">
              <li><i className="ti ti-check"></i>{plan.blurb}</li>
              {plan.extras.map((x, i) => <li key={i}><i className="ti ti-check"></i>{x}</li>)}
            </ul>
          </div>
        </div>

        <div className="calc-upsell-gap">
          <i className="ti ti-trending"></i>
          <div className="t">For about the same monthly spend, <b>{plan.name}</b> gives you <b>{plan.videos} videos a month</b> instead of {count}{saving > 0 ? <span> — roughly <b>{window.fmt(saving)} of value</b> over buying them one-off</span> : null}.</div>
        </div>

        <div className="calc-upsell-actions">
          <button className="calc-btn calc-btn-primary calc-btn-lg" onClick={onSubscribe}><i className="ti ti-rocket"></i>Subscribe &amp; get more</button>
          <button className="calc-btn calc-btn-quiet" onClick={onClose}>Keep buying one-off</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SignupGate, Checkout, UpsellCompare });