// Paywall nudge toast — shown inline when Free user tries Apollo
function PaywallNudge({ open, onClose, onUpgrade }) {
  const S = window.SOL;
  if (!open) return null;
  return (
    <div style={{
      position: 'absolute', left: 12, right: 12, bottom: 110, zIndex: 15,
      background: S.ink, color: S.cream, borderRadius: 18, padding: '14px 14px 14px 16px',
      display: 'flex', alignItems: 'center', gap: 12,
      boxShadow: '0 12px 40px rgba(28,26,23,0.35)',
      animation: 'sol-slide-up 0.24s ease',
    }}>
      <SunMark size={28} variant="apollo"/>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: S.sans, fontSize: 14, fontWeight: 600, letterSpacing: -0.2 }}>
          Apollo 1 is a Plus model
        </div>
        <div style={{ fontFamily: S.sans, fontSize: 12, color: 'rgba(245,239,228,0.6)', marginTop: 2 }}>
          Tap to see what you get →
        </div>
      </div>
      <button onClick={onUpgrade} style={{
        padding: '8px 14px', borderRadius: 999, border: 'none',
        background: S.amber, color: S.ink, fontFamily: S.sans, fontSize: 12.5, fontWeight: 600,
        cursor: 'pointer',
      }}>View</button>
      <button onClick={onClose} style={{
        width: 28, height: 28, borderRadius: 8, border: 'none',
        background: 'rgba(245,239,228,0.08)', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon name="close" size={14} color={S.cream}/>
      </button>
    </div>
  );
}

// Voice overlay
function VoiceOverlay({ open, onClose }) {
  const S = window.SOL;
  if (!open) return null;
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 28,
      background: 'rgba(28,26,23,0.78)', backdropFilter: 'blur(20px)',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      justifyContent: 'flex-end', padding: '0 0 140px',
      animation: 'sol-fade-in 0.2s ease',
    }}>
      {/* breathing sun */}
      <div style={{
        width: 180, height: 180, borderRadius: '50%',
        background: `radial-gradient(circle at 35% 35%, ${S.sun}, ${S.amber} 55%, ${S.amberDeep} 100%)`,
        boxShadow: '0 0 80px rgba(232,155,60,0.55)',
        animation: 'sol-breathe 2.2s ease-in-out infinite',
        marginBottom: 40,
      }}/>
      <div style={{
        fontFamily: S.serif, fontSize: 28, color: S.cream, letterSpacing: -0.5,
      }}>I&rsquo;m listening…</div>
      <div style={{
        fontFamily: S.sans, fontSize: 13, color: 'rgba(245,239,228,0.55)',
        marginTop: 8,
      }}>Speak anytime. Tap to stop.</div>

      <button onClick={onClose} style={{
        position: 'absolute', bottom: 50, right: 28,
        width: 58, height: 58, borderRadius: 20, border: 'none', cursor: 'pointer',
        background: S.cream, display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 10px 30px rgba(0,0,0,0.25)',
      }}>
        <Icon name="close" size={22} color={S.ink} strokeWidth={2}/>
      </button>
    </div>
  );
}

window.PaywallNudge = PaywallNudge;
window.VoiceOverlay = VoiceOverlay;