"use client";

import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { ChevronDown, ChevronUp, Check, HelpCircle, ShieldCheck, Zap, Smartphone, Globe } from 'lucide-react';
import Navbar from '@/components/Navbar/navbar';
import Footer from '@/components/footer';

const PricingCard = ({ title, description, features }) => {
    return (
        <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="group relative border border-gray-800 rounded-xl p-8 bg-gray-900/20 transition-all duration-500 overflow-hidden hover:scale-105"
        >
            <div className="relative z-10">
                <h3 className="text-2xl font-semibold text-white mb-4">{title}</h3>
                <p className="text-gray-400 mb-6">{description}</p>
                <div className="w-full h-[1px] bg-gray-800 my-4" /> {/* Separator Line */}
                <div className="space-y-4">
                    {features.map((feature, index) => (
                        <div key={index} className="flex items-center gap-5">
                            <Check className="w-5 h-5 text-purple-500" />
                            <span className="text-gray-300">{feature}</span>
                        </div>
                    ))}
                </div>
                <div className="w-full h-[1px] bg-gray-800 my-4" /> {/* Separator Line */}
                <div className="w-full py-4 flex items-center justify-between">
                    <p className="text-gray-300">For Price : </p>
                    <motion.button
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.98 }}
                        className="px-6 py-3 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500 w-fit"
                    >
                        Contact Us
                    </motion.button>
                </div>
            </div>

            <motion.div
                className="absolute inset-0 rounded-2xl transition-opacity duration-500
      bg-gradient-to-br from-pink-500/50 to-purple-500/50
      opacity-0 blur-3xl scale-125
      group-hover:opacity-20"
            />
        </motion.div>
    );
};

const FAQ = ({ question, answer }) => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <motion.div
            className="border-b border-gray-800 py-4"
            initial={false}
        >
            <button
                onClick={() => setIsOpen(!isOpen)}
                className="flex justify-between items-center w-full text-left"
            >
                <span className="text-white text-lg">{question}</span>
                {isOpen ? (
                    <ChevronUp className="w-5 h-5 text-purple-500" />
                ) : (
                    <ChevronDown className="w-5 h-5 text-purple-500" />
                )}
            </button>
            <motion.div
                initial={{ height: 0, opacity: 0 }}
                animate={{ height: isOpen ? "auto" : 0, opacity: isOpen ? 1 : 0 }}
                transition={{ duration: 0.3 }}
                className="overflow-hidden"
            >
                <p className="text-gray-400 pt-4">{answer}</p>
            </motion.div>
        </motion.div>
    );
};

const PricingPage = () => {
    const pricingPlans = [
        {
            title: "Basic",
            description: "We consider all the drivers of time & change gives the blocks.",
            features: [
                "Full Access to Copler",
                "100 GB Free Storage",
                "Unlimited Visitors",
                "10 Agents",
                "Live Chat Support"
            ]
        },
        {
            title: "Premium",
            description: "We consider all the drivers of time & change gives the blocks.",
            features: [
                "Full Access to Copler",
                "100 GB Free Storage",
                "Unlimited Visitors",
                "10 Agents",
                "Live Chat Support"
            ]
        }
    ];

    const faqs = [
        {
            question: "How many items are there in this list?",
            answer: "We consider all the drivers of change gives you the blocks & components you need to change to create a truly professional website."
        },
        {
            question: "Can you describe Newleaf in just one sentence?",
            answer: "We consider all the drivers of change gives you the blocks & components you need to change to create a truly professional website."
        },
        {
            question: "Can I use this template for my client?",
            answer: "We consider all the drivers of change gives you the blocks & components you need to change to create a truly professional website."
        },
        {
            question: "Do you offer templates in other categories?",
            answer: "We consider all the drivers of change gives you the blocks & components you need to change to create a truly professional website."
        },
        {
            question: "Do I need to credit you when I use this template?",
            answer: "We consider all the drivers of change gives you the blocks & components you need to change to create a truly professional website."
        }
    ];

    return (
        <div className="w-full p-6 bg-[#080E12] min-h-screen space-y-36">
            <Navbar />

            {/* Hero Section */}
            <motion.section
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="max-w-6xl mx-auto text-center pt-20"
            >
                <motion.h1 className="text-7xl text-white mb-6">
                    Pricing
                    <span className="bg-gradient-to-r from-[#EC4899] to-[#A855F7] text-transparent bg-clip-text">
                        {" "}Plans{" "}
                    </span>
                </motion.h1>
                <motion.p className="text-gray-400 text-xl max-w-3xl mx-auto">
                    Efficiently manage and resolve customer issues, improve satisfaction and boost your bottom line with our all-in-one customer support solution.
                </motion.p>
            </motion.section>

            {/* Pricing Cards */}
            <motion.section className="max-w-6xl mx-auto">
                <div className="grid md:grid-cols-2 gap-8">
                    {pricingPlans.map((plan, index) => (
                        <PricingCard key={index} {...plan} />
                    ))}
                </div>
            </motion.section>

            {/* Features Section */}
            <motion.section
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="max-w-6xl mx-auto"
            >
                <h2 className="text-4xl text-white mb-8">Features you don't want to miss</h2>
                <div className="grid md:grid-cols-2 gap-8">
                    {[
                        {
                            title: "Secure Payments",
                            desc: "Ensure end-to-end security for all your transactions with industry-leading encryption.",
                            icon: <ShieldCheck className="w-8 h-8 text-white" />,
                            gradient: "from-blue-500 to-cyan-500",
                        },
                        {
                            title: "Fast Transactions",
                            desc: "Process payments in seconds, reducing wait times and improving efficiency.",
                            icon: <Zap className="w-8 h-8 text-white" />,
                            gradient: "from-pink-500 to-red-500",
                        },
                        {
                            title: "User-Friendly Interface",
                            desc: "Designed with simplicity in mind, making transactions seamless for everyone.",
                            icon: <Smartphone className="w-8 h-8 text-white" />,
                            gradient: "from-green-500 to-teal-500",
                        },
                        {
                            title: "Global Accessibility",
                            desc: "Access and send payments from anywhere in the world, instantly.",
                            icon: <Globe className="w-8 h-8 text-white" />,
                            gradient: "from-yellow-500 to-orange-500",
                        },
                    ].map((feature, index) => (
                        <div
                            key={index}
                            className="relative p-6 border border-gray-800 rounded-xl bg-gray-900/20 transition-all duration-500 group overflow-hidden flex items-start gap-4"
                        >
                            {/* Icon Container */}
                            <div className={`p-3 bg-gray-900 rounded-lg ${feature.gradient}`}>{feature.icon}</div>

                            {/* Text Content */}
                            <div>
                                <h3 className={`text-xl font-medium text-transparent bg-clip-text bg-gradient-to-r ${feature.gradient}`}>
                                    {feature.title}
                                </h3>
                                <p className="text-gray-400">{feature.desc}</p>
                            </div>

                            {/* Soft Glow Effect */}
                            <div
                                className={`absolute inset-0 rounded-xl opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20 bg-gradient-to-br ${feature.gradient}`}
                            />
                        </div>
                    ))}
                </div>
            </motion.section>

            <motion.div>
                <p className="max-w-6xl mx-auto text-gray-400">
                    Efficiently manage and resolve customer issues, improve satisfaction and boost your bottom line with our all-in-one customer support solution. Get the safest way of making online payment & save countless hours of losing money.
                </p>
                        {/* <motion.button
                                whileHover={{ scale: 1.05 }}
                                whileTap={{ scale: 0.98 }}
                                className="px-6 py-3 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500 w-fit"
                            >
                                Contact Us
                        </motion.button> */}
            </motion.div>

            {/* FAQ Section */}
            <motion.section
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="max-w-6xl mx-auto"
            >
                <div className="grid md:grid-cols-2 gap-16">
                    <div>
                        <h2 className="text-4xl text-white mb-8 flex items-start gap-3">
                            <HelpCircle className="w-8 h-8 text-purple-500" />
                            Get answers to some common questions!
                        </h2>
                        <p className="text-gray-400">
                            We've curated answers to some of our most frequently asked questions to help you find the information you need quickly and easily.
                        </p>
                    </div>
                    <div className="space-y-2">
                        {faqs.map((faq, index) => (
                            <FAQ key={index} {...faq} />
                        ))}
                    </div>
                </div>
            </motion.section>

            <Footer />
        </div>
    );
};

export default PricingPage;