src/features/canvas/components/PaywallModal.jsx

import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { Lock } from 'lucide-react';

const PaywallModal = ({ showPaywall, setShowPaywall }) => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  return (
    <AnimatePresence>
      {showPaywall && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="absolute inset-0 z-50 flex items-center justify-center bg-primary/20 backdrop-blur-md p-4"
        >
          <motion.div
            initial={{ scale: 0.9 }}
            animate={{ scale: 1 }}
            className="bg-surface-container-lowest p-8 rough-border shadow-2xl max-w-md text-center"
          >
            <Lock size={48} className="mx-auto mb-4 text-primary" />
            <h2 className="text-4xl font-display-lg mb-4 text-primary">
              {t('pricing.premium_feature', 'Premium Feature')}
            </h2>
            <p className="text-xl mb-6 text-on-surface-variant font-medium">
              {t('pricing.paywall_desc', 'AI Goal Adaptation is a Premium feature. Upgrade to TaskFlow Pro to generate alternative paths and unlock advanced logic.')}
            </p>
            <div className="flex flex-col gap-3">
              <button onClick={() => { setShowPaywall(false); navigate('/subscription'); }} className="w-full py-4 bg-primary text-on-primary font-bold rounded-xl shadow-lg hover:translate-y-[-2px] transition-all cursor-pointer">
                {t('pricing.upgrade_premium', 'Upgrade to Premium')}
              </button>
              <button onClick={() => setShowPaywall(false)} className="w-full py-4 font-bold text-on-surface-variant border-2 border-primary/10 rounded-xl cursor-pointer">
                {t('pricing.maybe_later', 'Maybe Later')}
              </button>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default PaywallModal;