// ---- Off-site payment simulation (Stripe is a real hosted page; we just
// simulate the round-trip) + return confirmation ----
const { useEffect: useCkEffect } = React;

function StripeMark() {
  return <span className="stripe-mark">stripe</span>;
}

// Acts like the user was sent to Stripe's hosted checkout and paid.
function CheckoutPage({ item, onPay }) {
  useCkEffect(() => {
    const t = setTimeout(() => onPay(item), 1700);
    return () => clearTimeout(t);
  }, []);
  return (
    <div className="redirect">
      <div className="redirect-card">
        <div className="redirect-spinner" aria-hidden="true"></div>
        <div className="redirect-title">Redirecting to secure checkout…</div>
        <div className="redirect-sub">
          Completing your {item.kind === 'plan' ? 'subscription' : 'purchase'} via <StripeMark />
        </div>
      </div>
    </div>
  );
}

function ConfirmationPage({ item, onContinue }) {
  return (
    <div className="confirm">
      <div className="confirm-card">
        <div className="confirm-check" aria-hidden="true">
          <svg viewBox="0 0 52 52" width="52" height="52"><circle cx="26" cy="26" r="25" fill="none" stroke="currentColor" strokeWidth="2" opacity="0.25"></circle><path fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" d="M14 27l8 8 16-18"></path></svg>
        </div>
        <h1 className="confirm-title">Payment successful</h1>
        <p className="confirm-text">
          {item.kind === 'plan'
            ? 'Welcome to Pro. Your brand identity tools and 1,000 monthly credits are now unlocked.'
            : item.credits + ' credits have been added to your balance.'}
        </p>
        <div className="confirm-receipt">
          <div className="cr-row"><span>{item.title}</span><span>${item.amount.toFixed(2)}</span></div>
          <div className="cr-row cr-muted"><span>Receipt sent to alex@seedlr.com</span><span></span></div>
        </div>
        <button className="btn-primary confirm-btn" onClick={onContinue}>Continue to namit</button>
        <p className="confirm-foot">Powered by <StripeMark /></p>
      </div>
    </div>
  );
}

Object.assign(window, { CheckoutPage, ConfirmationPage });