import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { CheckCircle, MessageCircle, Clock, ArrowLeft } from 'lucide-react';
import SEO from '../components/SEO';
import { useApp } from '../context/AppContext';

export default function ThankYou() {
  const { t } = useApp();

  return (
    <>
      <SEO
        title="Thank You for Your Order | MFA Tools Net"
        description="Your order request has been sent successfully. We will contact you on WhatsApp within 10 minutes."
      />
      <section className="min-h-[80vh] flex items-center justify-center pt-16">
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.6 }}
          className="bg-bg-secondary border border-bg-border rounded-3xl p-8 lg:p-12 max-w-md w-full mx-4 text-center"
        >
          <div className="w-20 h-20 bg-success/15 rounded-full flex items-center justify-center mx-auto mb-6">
            <CheckCircle size={40} className="text-success" />
          </div>
          <h1 className="text-2xl sm:text-3xl font-bold text-white mb-3">{t('thankYouTitle')}</h1>
          <p className="text-text-secondary mb-2">{t('thankYouSubtitle')}</p>
          <div className="flex items-center justify-center gap-2 text-success text-sm mb-8">
            <Clock size={16} />
            <span>Average response time: 5 minutes</span>
          </div>
          <div className="flex flex-col gap-3">
            <a
              href="https://wa.me/917035146526?text=Hello%20MFA%20Tools%20Net%2C%20I%20just%20placed%20an%20order.%20Please%20confirm."
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-center gap-2 bg-whatsapp text-white font-semibold py-3 rounded-xl hover:bg-[#128C7E] transition-colors"
            >
              <MessageCircle size={18} />
              Open WhatsApp
            </a>
            <Link
              to="/shop"
              className="flex items-center justify-center gap-2 bg-bg-tertiary border border-bg-border text-white font-semibold py-3 rounded-xl hover:bg-bg-border transition-colors"
            >
              <ArrowLeft size={18} />
              {t('backToShop')}
            </Link>
          </div>
        </motion.div>
      </section>
    </>
  );
}