'use client';

interface BlurOverlayProps {
  onUnlock: () => void;
  loading?: boolean;
}

export default function BlurOverlay({ onUnlock, loading }: BlurOverlayProps) {
  return (
    <div className="absolute inset-0 z-10 flex items-center justify-center backdrop-blur-md bg-white/60 rounded-lg">
      <div className="text-center p-8 max-w-md">
        <div className="text-4xl mb-4">🔒</div>
        <h3 className="text-xl font-bold text-dark mb-2">Unlock Full Output</h3>
        <p className="text-gray-600 mb-6">
          Your complete, professional-quality output is ready. Unlock it to access the full document, improvements, validation, and exports.
        </p>
        <button
          onClick={onUnlock}
          disabled={loading}
          className="bg-accent hover:bg-accent/90 text-white px-8 py-3 rounded-lg font-semibold transition-colors disabled:opacity-50"
        >
          {loading ? 'Processing...' : 'Unlock Now — Pay Once'}
        </button>
        <p className="text-xs text-gray-400 mt-3">Secure payment via LemonSqueezy</p>
      </div>
    </div>
  );
}