// ThankYouPage.jsx — shown after a successful Stripe pre-order checkout.
// The checkout function redirects to /?checkout=success; the router in
// index.html reads that param, routes here, and cleans the URL.
//
// No order details are passed back (success_url carries no session id), so the
// copy stays general and warm: Stripe emails the receipt, we email at launch.

const ThankYouPage = ({ onNav }) => (
  <div style={{ paddingTop: 124, background: C.parchment, minHeight: '100vh' }}>
    <div style={{ maxWidth: 680, margin: '0 auto', padding: 'clamp(40px, 7vw, 72px) clamp(20px, 5vw, 40px) 96px', textAlign: 'center' }}>

      {/* Confirmation badge */}
      <div style={{
        width: 64, height: 64, borderRadius: '50%', background: C.river,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 28, boxShadow: C.shadowCard,
      }}>
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
          <path d="M6 14.5l5 5L22 8.5" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>

      <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 700, letterSpacing: '2.4px', textTransform: 'uppercase', color: C.brass, marginBottom: 14 }}>
        Pre-order confirmed
      </div>
      <h1 style={{ fontFamily: F.display, fontStyle: 'italic', fontSize: 'clamp(30px, 5vw, 44px)', fontWeight: 400, color: C.ink, lineHeight: 1.18, margin: '0 0 18px' }}>
        Thank you for pre-ordering.
      </h1>
      <p style={{ fontFamily: F.body, fontSize: 'clamp(15px, 1.7vw, 17px)', color: C.ash, lineHeight: 1.65, margin: '0 auto 8px', maxWidth: 540 }}>
        Your payment has gone through and your pre-order is reserved. Stripe is sending your receipt by email now.
      </p>

      {/* What happens next */}
      <div style={{ textAlign: 'left', background: '#FBF7EE', border: `1px solid ${C.border}`, borderRadius: 12, padding: 'clamp(22px, 4vw, 30px)', boxShadow: C.shadowLift, margin: '36px 0 32px' }}>
        <div style={{ fontFamily: F.sans, fontSize: 11, fontWeight: 600, letterSpacing: '1.8px', textTransform: 'uppercase', color: C.brass, marginBottom: 18 }}>
          What happens next
        </div>
        {[
          { t: 'We’re finishing each course', b: 'Your courses are in production now. We hold your place the moment you pre-order.' },
          { t: 'You’ll get an email at launch', b: 'As soon as a course you’ve ordered goes live, we’ll email you a link to start it straight away.' },
          { t: 'Certificates on completion', b: 'Each pass earns a named, dated PDF certificate, ready for your records and inspections.' },
        ].map((s, i) => (
          <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', marginBottom: i < 2 ? 16 : 0 }}>
            <span style={{
              flexShrink: 0, width: 26, height: 26, borderRadius: '50%',
              background: C.brassDim, border: `1px solid rgba(107,46,46,0.22)`,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: F.mono, fontSize: 11, fontWeight: 600, color: C.brass,
            }}>{i + 1}</span>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontFamily: F.sans, fontSize: 14.5, fontWeight: 600, color: C.ink, marginBottom: 3 }}>{s.t}</div>
              <div style={{ fontFamily: F.body, fontSize: 13.5, color: C.ash, lineHeight: 1.55 }}>{s.b}</div>
            </div>
          </div>
        ))}
      </div>

      <p style={{ fontFamily: F.body, fontSize: 13, color: C.dust, lineHeight: 1.6, margin: '0 auto 30px', maxWidth: 520 }}>
        Changed your mind? Pre-orders are fully refundable any time before you start a course — just reply to your receipt or email{' '}
        <a href="mailto:accounts@tibercourse.com" style={{ color: C.brass, textDecoration: 'underline', textUnderlineOffset: 2 }}>accounts@tibercourse.com</a>.
      </p>

      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
        <BrassBtn onClick={() => onNav('courses')}>Browse the courses</BrassBtn>
        <Btn onClick={() => onNav('home')}>Back to home</Btn>
      </div>
    </div>
  </div>
);

Object.assign(window, { ThankYouPage });