How Did We Do?

{branding.fullName ? ( <>Hi, I'm Stephanie. Your experience matters. If you have a moment, I'd love to hear how I did. ) : ( <>Your experience matters to us. If you have a moment, we'd love to hear how we did. )}

{/* Card */}

{/* Star Rating — always visible */}

Rate Your Experience

setHoverRating(0)}> {[1, 2, 3, 4, 5].map((star) => ( ))}

{activeRating > 0 && ( {ratingLabels[activeRating]} )}

{/* Conditional body */} {status === 'sentLow' ? (

Thank You for Your Honest Feedback

I appreciate you taking the time to share your experience. I will personally review your feedback and reach out to make things right.

) : status === 'sentHigh' ? (

Thank You!

Your kind words mean the world. I appreciate you taking the time to share.

) : showForm ? (

Name *

Email *

Phone (optional)

What could we have done better? (optional)

</div>

<button
                  type="submit"
                  disabled={status === 'sending'}
                  className="w-full py-4 rounded-xl text-white font-display font-bold text-lg shadow-lg hover:shadow-xl transition-all hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 relative overflow-hidden"
                  style={{ backgroundColor: pc }}
                >
                  {status === 'sending' ? (
                    <span className="flex items-center justify-center gap-2">
                      <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                      Submitting...
                    </span>
                  ) : (
                    'Submit Feedback'
                  )}
                </button>

{status === 'error' && (
                  <div className="text-center animate-fade-in-up">
                    <p className="text-red-600 font-body text-sm mb-2">Something went wrong. Please try again.</p>
                    <button
                      type="button"
                      onClick={() => setStatus('idle')}
                      className="font-body text-sm font-semibold underline"
                      style={{ color: pc }}
                    >
                      Retry
                    </button>
                  </div>
                )}

<p className="text-center font-body text-xs text-gray-400 mt-4">
                  Your feedback is sent privately and will not be posted publicly.
                </p>
              </form>
            ) : formData.rating === 5 && reviewUrl ? (
              <div className="text-center py-6 animate-fade-in-up relative z-10">
                <div className="w-12 h-12 border-4 rounded-full animate-spin mx-auto mb-3" style={{ borderColor: pc + '33', borderTopColor: pc }} />
                <p className="font-body text-sm text-gray-500">Redirecting you to leave your review...</p>
              </div>
            ) : (
              <p className="text-center font-body text-sm text-gray-400 py-2 relative z-10">
                Tap a star above to get started.
              </p>
            )}
          </div>

{/* Trust Badges */}
          {(branding.nmls || branding.company) && (
            <div className="flex items-center justify-center gap-6 mt-8 opacity-60 flex-wrap">
              {branding.nmls && (
                <div className="flex items-center gap-2">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-gray-500">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                  </svg>
                  <span className="font-body text-xs text-gray-500 font-medium">NMLS #{branding.nmls}</span>
                </div>
              )}
              {branding.company && (
                <div className="flex items-center gap-2">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-gray-500">
                    <rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
                    <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
                  </svg>
                  <span className="font-body text-xs text-gray-500 font-medium">{branding.company}</span>
                </div>
              )}
            </div>
          )}
        </div>
      </main>

{/* Footer */}
      <footer className="relative z-10 border-t py-6 px-4 text-center" style={{ borderColor: pc + '1a' }}>
        {branding.disclaimer && (
          <p className="font-body text-[10px] text-gray-400 max-w-4xl mx-auto mb-2 leading-relaxed">
            {branding.disclaimer}
          </p>
        )}
        <div className="flex items-center justify-center gap-4 font-body text-xs text-gray-400 flex-wrap">
          {branding.email && <span>{branding.email}</span>}
          {branding.email && branding.nmls && <span>•</span>}
          {branding.nmls && <span>NMLS #{branding.nmls}</span>}
        </div>
      </footer>
    </div>
  );
}</article></body></html>

Stephanie Smith | NCM Lending | How Did We Do?