/* Paywall — subscription + lifetime purchase screen */

function PaywallScreen({ palette, onClose, onPurchase }) {
  const [selected, setSelected] = React.useState('annual');

  const plans = [
    { id: 'weekly', label: 'Weekly', price: '$1.99', sub: '/week', badge: null },
    { id: 'annual', label: 'Annual', price: '$19.99', sub: '/year', badge: 'BEST VALUE' },
    { id: 'lifetime', label: 'Lifetime', price: '$39.99', sub: 'one time', badge: null },
  ];

  const features = [
    { icon: '🎨', text: 'All 5 visual themes', sub: 'Deep, Paper, Neon, Mono, ASCII' },
    { icon: '☀', text: 'Seeds mode', sub: 'Hunt hidden Sun patterns' },
    { icon: '🖼', text: 'Gallery & export', sub: 'Save mosaics as wallpapers' },
    { icon: '📅', text: 'Daily Mosaic', sub: 'Unique seed every day' },
    { icon: '📖', text: 'Learn section', sub: 'Interactive math stories' },
  ];

  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 250,
      background: palette.bg1,
      color: palette.ink,
      fontFamily: "'Manrope', system-ui, sans-serif",
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
    }}>
      {/* Background animation */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.2, pointerEvents: 'none' }}>
        {window.BackgroundCanvas && <window.BackgroundCanvas palette={palette} />}
      </div>

      {/* Close button */}
      <div onClick={onClose} style={{
        position: 'absolute', top: 56, right: 16, zIndex: 10,
        width: 32, height: 32, borderRadius: 999,
        background: `${palette.dim}22`, border: `1px solid ${palette.dim}33`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer', WebkitTapHighlightColor: 'transparent',
      }}>
        <svg width="12" height="12" viewBox="0 0 14 14">
          <path d="M1 1l12 12M13 1L1 13" stroke={palette.dim} strokeWidth="1.6" strokeLinecap="round"/>
        </svg>
      </div>

      {/* Scrollable content */}
      <div style={{
        flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column',
        alignItems: 'center', padding: '72px 24px 20px',
        position: 'relative',
      }}>
        {/* Hero */}
        <div style={{ animation: 'tessera-float 3s ease-in-out infinite', marginBottom: 8 }}>
          {window.DynamicLogo && <window.DynamicLogo palette={palette} />}
        </div>

        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
          letterSpacing: '0.32em', color: palette.thick, marginBottom: 4,
        }}>UNLOCK EVERYTHING</div>

        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 28, fontWeight: 700,
          letterSpacing: '0.16em', marginBottom: 4,
        }}>Tessera Pro</div>

        <div style={{ fontSize: 13, color: palette.dim, marginBottom: 24, textAlign: 'center' }}>
          The full Penrose experience
        </div>

        {/* Features */}
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 8,
          width: '100%', maxWidth: 320, marginBottom: 24,
        }}>
          {features.map(({ icon, text, sub }, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '9px 14px', borderRadius: 12,
              background: `${palette.dim}08`,
              border: `1px solid ${palette.dim}12`,
            }}>
              <span style={{ fontSize: 18, flexShrink: 0, width: 28, textAlign: 'center' }}>{icon}</span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: palette.ink }}>{text}</div>
                <div style={{ fontSize: 11, color: palette.dim, marginTop: 1 }}>{sub}</div>
              </div>
              <svg width="14" height="14" viewBox="0 0 14 14">
                <circle cx="7" cy="7" r="6" fill={palette.thick} opacity="0.15"/>
                <path d="M4.5 7l2 2 3.5-3.5" stroke={palette.thick} strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
          ))}
        </div>

        {/* Pricing cards */}
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 8,
          width: '100%', maxWidth: 320, marginBottom: 16,
        }}>
          {plans.map(({ id, label, price, sub, badge }) => {
            const active = selected === id;
            return (
              <div key={id} onClick={() => setSelected(id)} style={{
                display: 'flex', alignItems: 'center', padding: '14px 16px',
                borderRadius: 14, cursor: 'pointer',
                background: active ? `${palette.thick}14` : `${palette.dim}06`,
                border: `1.5px solid ${active ? palette.thick : `${palette.dim}22`}`,
                transition: 'all 0.2s ease',
                WebkitTapHighlightColor: 'transparent',
                position: 'relative', overflow: 'hidden',
              }}>
                {/* Radio */}
                <div style={{
                  width: 22, height: 22, borderRadius: 11, flexShrink: 0,
                  border: `2px solid ${active ? palette.thick : palette.dim}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginRight: 12, transition: 'border-color 0.2s ease',
                }}>
                  {active && <div style={{
                    width: 12, height: 12, borderRadius: 6,
                    background: palette.thick,
                  }} />}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 14,
                    fontWeight: 700, color: palette.ink,
                  }}>{label}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 16,
                    fontWeight: 700, color: active ? palette.thick : palette.ink,
                  }}>{price}</div>
                  <div style={{
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
                    color: palette.dim,
                  }}>{sub}</div>
                </div>
                {badge && (
                  <div style={{
                    position: 'absolute', top: 0, right: 0,
                    background: palette.thick, color: palette.bg1,
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 8,
                    fontWeight: 700, letterSpacing: '0.1em',
                    padding: '3px 8px', borderRadius: '0 12px 0 8px',
                  }}>{badge}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* Bottom CTA */}
      <div style={{ padding: '12px 24px 32px', position: 'relative' }}>
        <button onClick={() => onPurchase(selected)} style={{
          width: '100%', height: 54, borderRadius: 16,
          background: `linear-gradient(135deg, ${palette.thick}, ${palette.thick}cc)`,
          color: palette.bg1, border: 'none',
          fontFamily: "'JetBrains Mono', monospace", fontSize: 14, fontWeight: 700,
          letterSpacing: '0.18em', cursor: 'pointer',
          boxShadow: `0 8px 32px ${palette.thick}44`,
          WebkitTapHighlightColor: 'transparent',
          touchAction: 'manipulation',
        }}>
          {selected === 'lifetime' ? 'BUY LIFETIME' : 'SUBSCRIBE'}
        </button>
        <div style={{
          display: 'flex', justifyContent: 'center', gap: 16, marginTop: 12,
        }}>
          <span style={{ fontSize: 11, color: palette.dim, cursor: 'pointer' }}>Restore</span>
          <span style={{ fontSize: 11, color: `${palette.dim}44` }}>·</span>
          <span style={{ fontSize: 11, color: palette.dim, cursor: 'pointer' }}>Terms</span>
          <span style={{ fontSize: 11, color: `${palette.dim}44` }}>·</span>
          <span style={{ fontSize: 11, color: palette.dim, cursor: 'pointer' }}>Privacy</span>
        </div>
      </div>
    </div>
  );
}

function UpgradeSuccessScreen({ palette, onContinue }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 260,
      background: palette.bg1,
      color: palette.ink,
      fontFamily: "'Manrope', system-ui, sans-serif",
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      gap: 24, padding: '0 32px',
    }}>
      {/* Background */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.25, pointerEvents: 'none' }}>
        {window.BackgroundCanvas && <window.BackgroundCanvas palette={palette} />}
      </div>

      {/* Radial glow */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(ellipse at 50% 40%, ${palette.thick}28, transparent 65%)`,
      }} />

      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
        {/* Confetti-like stars */}
        <div style={{
          fontSize: 48,
          filter: `drop-shadow(0 0 20px ${palette.thick})`,
          animation: 'tessera-float 2s ease-in-out infinite',
        }}>✦</div>

        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
          letterSpacing: '0.32em', color: palette.thick,
        }}>WELCOME TO</div>

        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 30, fontWeight: 700,
          letterSpacing: '0.18em',
        }}>Tessera Pro</div>

        <div style={{
          fontSize: 14, color: palette.dim, textAlign: 'center',
          lineHeight: 1.6, maxWidth: 260,
        }}>
          All themes, modes, and features are now unlocked. Enjoy the full Penrose experience.
        </div>

        {/* Quick feature preview */}
        <div style={{
          display: 'flex', gap: 14, marginTop: 8,
        }}>
          {['🎨', '☀', '🖼', '📖'].map((e, i) => (
            <div key={i} style={{
              width: 44, height: 44, borderRadius: 12,
              background: `${palette.thick}14`,
              border: `1px solid ${palette.thick}33`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 20,
            }}>{e}</div>
          ))}
        </div>
      </div>

      <button onClick={onContinue} style={{
        width: '100%', maxWidth: 300, height: 52, borderRadius: 16,
        background: palette.thick, color: palette.bg1, border: 'none',
        fontFamily: "'JetBrains Mono', monospace", fontSize: 13, fontWeight: 700,
        letterSpacing: '0.22em', cursor: 'pointer',
        boxShadow: `0 8px 28px ${palette.thick}44`,
        WebkitTapHighlightColor: 'transparent',
        touchAction: 'manipulation', position: 'relative',
      }}>LET'S GO</button>
    </div>
  );
}

window.PaywallScreen = PaywallScreen;
window.UpgradeSuccessScreen = UpgradeSuccessScreen;