// ZION ThankYou — post-checkout landing page (Option B).
// Shopify hosts the secure checkout and emails the receipt; after payment the
// customer is sent back here, to the brand, with the Z · STAY LIT lockup.
function ThankYou({ onHome }) {
  return (
    <main style={{
      background: 'radial-gradient(ellipse 80% 60% at 50% 0%, #2A0B05 0%, #160706 40%, #0A0A0A 100%)',
      color: '#fff', minHeight: '82vh', position: 'relative', overflow: 'hidden',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      textAlign: 'center', padding: '72px 24px 120px',
    }}>
      <div style={{ position: 'relative', zIndex: 1, maxWidth: 640 }}>
        {/* Fire check badge */}
        <div style={{
          width: 82, height: 82, margin: '0 auto 30px', borderRadius: '50%',
          background: 'radial-gradient(circle at 50% 35%, #F7591F 0%, #B8390C 100%)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 0 0 6px rgba(247,89,31,0.16), 0 18px 50px rgba(247,89,31,0.42)',
        }}>
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M5 12l5 5L20 6" />
          </svg>
        </div>

        <div style={{
          fontFamily: 'Poppins', fontWeight: 700, fontSize: 12, letterSpacing: '0.22em',
          textTransform: 'uppercase', color: '#F7591F', marginBottom: 12,
        }}>Order confirmed</div>

        <h1 style={{
          fontFamily: 'Poppins, sans-serif', fontWeight: 900, fontStyle: 'italic',
          textTransform: 'uppercase', letterSpacing: '-0.02em',
          fontSize: 'clamp(46px, 9vw, 100px)', lineHeight: 0.95, margin: '0 0 22px', color: '#fff',
        }}>Thank you<span style={{ color: '#F7591F' }}>.</span></h1>

        <p style={{
          fontFamily: 'Poppins', fontWeight: 400, fontSize: 'clamp(15px, 1.3vw, 18px)', lineHeight: 1.7,
          color: 'rgba(255,255,255,0.8)', maxWidth: '46ch', margin: '0 auto 14px',
        }}>
          You're in. Your order's confirmed and a <span style={{ color: '#fff', fontWeight: 600 }}>receipt is on its way to your email</span> from The Fireball Guy.
        </p>
        <p style={{
          fontFamily: 'Poppins', fontWeight: 400, fontSize: 14, lineHeight: 1.7,
          color: 'rgba(255,255,255,0.55)', margin: '0 0 44px',
        }}>
          Questions about your order? <a href="mailto:finance@levizion.com" style={{ color: '#F7591F', textDecoration: 'none', fontWeight: 600 }}>finance@levizion.com</a>
        </p>

        {/* Z · STAY LIT lockup (same as the loader / hero) */}
        <img
          src="../../assets/logo-z-staylit.png"
          alt="ZION — Stay Lit"
          style={{
            height: 'clamp(96px, 17vw, 150px)', width: 'auto', display: 'block', margin: '0 auto 40px',
            filter: 'drop-shadow(0 0 22px rgba(247,89,31,0.45))',
          }}
        />

        <button onClick={onHome} style={{
          background: '#F7591F', color: '#fff', border: 'none', cursor: 'pointer',
          fontFamily: 'Poppins', fontWeight: 800, fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase',
          padding: '16px 38px', borderRadius: 999, boxShadow: '0 12px 30px rgba(247,89,31,0.4)',
        }}>Back to the site</button>
      </div>
    </main>
  );
}
window.ThankYou = ThankYou;