
import React, { useState } from 'react';
import { ArrowBackIosNew, Check, Star, AutoAwesome } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';

export default function SubscriptionPlan() {
  const navigate = useNavigate();
  const [isAnnual, setIsAnnual] = useState(true);

  const plans = [
    {
      name: "Gold Plan",
      monthlyPrice: 1800,
      annualPrice: 1299,
      color: "from-amber-400 to-yellow-600",
      button: "from-amber-500 to-orange-600",
      features: [
        "Unlimited Profile Views",
        "Send Personalized Messages",
        "Featured Profile for 30 Days",
        "Priority Customer Support",
        "Verified Badge",
        "Horoscope Matching",
        "100+ Daily Matches"
      ]
    },
    {
      name: "Diamond Plan",
      monthlyPrice: 2800,
      annualPrice: 1999,
      color: "from-purple-500 to-pink-600",
      button: "from-purple-600 to-pink-700",
      popular: true,
      features: [
        "Everything in Gold",
        "Top of Search Results",
        "Profile Highlight in Gold Border",
        "Personal Relationship Manager",
        "Video Call with Matches",
        "Astro Compatibility Report",
        "200+ Premium Matches Daily"
      ]
    },
    {
      name: "Platinum Plan",
      monthlyPrice: 4800,
      annualPrice: 3499,
      color: "from-emerald-500 to-teal-600",
      button: "from-emerald-600 to-teal-700",
      features: [
        "Everything in Diamond",
        "Guaranteed 10+ Interests/Month",
        "Exclusive VIP Events Invite",
        "Profile Boost Every Week",
        "Family Member Login Access",
        "Lifetime Profile Visibility",
        "Dedicated Matchmaking Expert"
      ]
    }
  ];

  return (
    <div className="min-h-screen mt-4 text-black overflow-hidden relative z-20">
      {/* Luxury Header */}
      <motion.header
        initial={{ y: -100 }}
        animate={{ y: 0 }}
        className="relative "
      >
        <div className="absolute inset-0 bg-[#034E08] rounded-[15px]" />
        <div className="relative flex items-center justify-between px-5 py-8 safe-area-top">
         
          <h1 className="text-2xl font-bold text-center text-white">Subscription Plan</h1>
          <div className="w-12" />
        </div>
      </motion.header>

      {/* Annual / Monthly Toggle */}
      <div className="flex justify-center -mt-6 relative z-10">
        <motion.div
          whileTap={{ scale: 0.95 }}
            className="bg-[#A70710] backdrop-blur-xl rounded-full p-2 flex gap-2 shadow-2xl"
          // style={{background:"linear-gradient(98.05deg, #FAFBFF 0%, #FCC4FF 100%)"}}
        >
          <button
            onClick={() => setIsAnnual(true)}
            className={`px-8 py-4 rounded-full font-bold text-lg transition-all ${isAnnual ? 'bg-white text-purple-900 shadow-lg' : 'text-white/80'}`}
          >
            ANNUAL PLAN
            <span className="block text-xs font-normal mt-1 text-green-300">Save up to 40%</span>
          </button>
          <button
            onClick={() => setIsAnnual(false)}
            className={`px-8 py-4 rounded-full font-bold text-lg transition-all ${!isAnnual ? 'bg-white text-purple-900 shadow-lg' : 'text-white/80'}`}
          >
            MONTHLY PLAN
          </button>
        </motion.div>
      </div>

      {/* Pricing Cards */}
      <div className="px-5 py-10 max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {plans.map((plan, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 50 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.2 }}
              className={`relative  backdrop-blur-xl rounded-3xl overflow-hidden border ${
                plan.popular ? 'border-yellow-400 shadow-2xl shadow-yellow-500/30 scale-105' : 'border-white/30'
              }`}

               style={{background:"linear-gradient(98.05deg, #FAFBFF 0%, #FCC4FF 100%)"}}
            >
              {plan.popular && (
                <div className="absolute -top-1 left-1/2 -translate-x-1/2 bg-gradient-to-r from-yellow-400 to-amber-500 text-purple-900 px-8 py-2 rounded-b-2xl font-bold text-sm flex items-center gap-2">
                  <AutoAwesome className="text-lg" /> MOST POPULAR <AutoAwesome className="text-lg" />
                </div>
              )}

              <div className="mt-6 p-8 text-center">
                <h3 className="text-3xl font-bold mb-4">{plan.name}</h3>
                <div className="text-[25px] font-bold mb-2">
                  ₹{isAnnual ? plan.annualPrice.toLocaleString() : plan.monthlyPrice.toLocaleString()}
                  <span className="text-[18px] font-normal text-black"> /{isAnnual ? 'month' : 'month'}</span>
                </div>
                {isAnnual && (
                  <p className="text-[#00903F] font-bold text-lg mb-6">
                    Billed annually @ ₹{(plan.annualPrice * 12).toLocaleString()}
                  </p>
                )}

                <motion.button
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                  className={`w-[fit-content] py-4 px-8  rounded-full text-white font-semibold text-[16px] shadow-xl bg-gradient-to-r ${plan.button} hover:shadow-2xl transition-all`}
                style={{background:"#A70710"}}
                >
                  Select Plan
                </motion.button>

                <div className="mt-8 text-left space-y-4">
                  <h4 className="text-xl font-bold text-black">Features</h4>
                  {plan.features.map((feature, i) => (
                    <div key={i} className="flex items-center gap-3">
                      <Check className="text-green-400 text-2xl" />
                      <span className="text-black">{feature}</span>
                    </div>
                  ))}
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        {/* Final CTA */}
        {/* <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.8 }}
          className="text-center mt-16"
        >
          <h2 className="text-3xl font-bold mb-4">Find Your Perfect Life Partner</h2>
          <p className="text-xl text-white/80 max-w-2xl mx-auto mb-10">
            Choose the plan that’s right for your sacred journey. Every premium member gets closer to their soulmate.
          </p>
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="bg-gradient-to-r from-red-600 to-rose-700 px-12 py-6 rounded-full text-2xl font-bold shadow-2xl hover:shadow-red-500/50 transition-all"
          >
            Choose This Plan
          </motion.button>
        </motion.div> */}
      </div>

      <div className="h-32" />
    </div>
  );
}