frontend/src/components/ocr/UpgradeModal.jsx

import React from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";
import { 
    X, 
    Sparkles, 
    Zap, 
    Shield, 
    Cloud, 
    BarChart3, 
    Bot,
    Globe,
    Lock,
    Rocket,
    Users,
    CheckCircle2,
    ArrowRight
} from "lucide-react";
import { Button } from "@/components/ui/button";

const features = [
    {
        icon: Zap,
        title: "Production-Scale Processing",
        description: "Remove trial limits and run live AP and operations workflows",
        color: "amber",
        cta: "Explore with a demo",
        gradient: "from-amber-500 to-orange-500"
    },
    {
        icon: Bot,
        title: "Advanced Agentic Processing",
        description: "You can customize your own agentic pipeline with your own data",
        color: "indigo",
        cta: "Talk to Sales",
        gradient: "from-indigo-500 to-violet-500"
    },
    {
        icon: Cloud,
        title: "API Access",
        description: "Integrate EZOFIS into your workflow with our REST API",
        color: "blue",
        cta: "Talk to a Techie!",
        gradient: "from-blue-500 to-cyan-500"
    }
];

export default function UpgradeModal({ open, onClose }) {
    if (!open) return null;

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center">
            {/* Backdrop */}
            <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                className="absolute inset-0 bg-black/50 backdrop-blur-sm"
                onClick={onClose}
            />

            {/* Modal */}
            <motion.div
                initial={{ opacity: 0, scale: 0.95, y: 20 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.95, y: 20 }}
                className="relative z-10 w-full max-w-6xl max-h-[90vh] mx-4 bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col"
                onClick={(e) => e.stopPropagation()}
            >
                {/* Header */}
                <div className="sticky top-0 bg-gradient-to-r from-indigo-600 via-violet-600 to-purple-600 text-white px-8 py-6 z-10">
                    <button 
                        onClick={onClose}
                        className="absolute right-6 top-6 h-8 w-8 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors"
                    >
                        <X className="h-4 w-4" />
                    </button>
                    
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        className="text-center"
                    >
                        <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-sm mb-4">
                            <Sparkles className="h-4 w-4" />
                            <span className="text-sm font-medium">Trial Limit Reached</span>
                        </div>
                        <h2 className="text-3xl font-bold mb-2">You've processed 5 documents</h2>
                        <p className="text-white/80 text-lg">Continue with production-ready document intelligence</p>
                    </motion.div>
                </div>

                {/* Stats Bar */}
                <div className="grid grid-cols-3 gap-6 px-8 py-6 bg-slate-50 border-b border-slate-200">
                    {[
                        { label: "Accuracy Rate", value: "99.8%", icon: CheckCircle2 },
                        { label: "Processing Speed", value: "< 10s", icon: Zap },
                        { label: "Operational Users", value: "10,000+", icon: Users }
                    ].map((stat, i) => (
                        <motion.div
                            key={stat.label}
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: i * 0.1 }}
                            className="text-center"
                        >
                            <div className="flex items-center justify-center gap-2 mb-1">
                                <stat.icon className="h-4 w-4 text-indigo-600" />
                                <span className="text-2xl font-bold text-slate-900">{stat.value}</span>
                            </div>
                            <p className="text-sm text-slate-500">{stat.label}</p>
                        </motion.div>
                    ))}
                </div>

                {/* Features Grid - Scrollable */}
                <div className="flex-1 overflow-auto px-8 py-8">
                    <div className="text-center mb-8">
                        <h3 className="text-2xl font-bold text-slate-900 mb-2">
                        Continue to Production Use
                        </h3>

                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {features.map((feature, index) => (
                            <motion.div
                                key={feature.title}
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ delay: 0.2 + index * 0.1 }}
                                className="group relative bg-white rounded-2xl border border-slate-200 p-6 hover:shadow-xl hover:shadow-slate-200/50 transition-all duration-300 hover:-translate-y-1 overflow-hidden"
                            >
                                {/* Gradient Background on Hover */}
                                <div className={`absolute inset-0 bg-gradient-to-br ${feature.gradient} opacity-0 group-hover:opacity-5 transition-opacity duration-300`} />
                                
                                <div className="relative">
                                    <div className={cn(
                                        "h-12 w-12 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300",
                                        feature.color === "amber" && "bg-amber-50",
                                        feature.color === "indigo" && "bg-indigo-50",
                                        feature.color === "blue" && "bg-blue-50",
                                        feature.color === "emerald" && "bg-emerald-50",
                                        feature.color === "slate" && "bg-slate-50",
                                        feature.color === "purple" && "bg-purple-50"
                                    )}>
                                        <feature.icon className={cn(
                                            "h-6 w-6",
                                            feature.color === "amber" && "text-amber-600",
                                            feature.color === "indigo" && "text-indigo-600",
                                            feature.color === "blue" && "text-blue-600",
                                            feature.color === "emerald" && "text-emerald-600",
                                            feature.color === "slate" && "text-slate-600",
                                            feature.color === "purple" && "text-purple-600"
                                        )} />
                                    </div>
                                    <h4 className="font-semibold text-slate-900 mb-2">{feature.title}</h4>
                                    <p className="text-sm text-slate-600 mb-4 leading-relaxed">{feature.description}</p>
                                    
                                    <Button
                                        variant="ghost"
                                        size="sm"
                                        className={cn(
                                            "w-full h-9 border transition-all group-hover:shadow-md",
                                            feature.color === "amber" && "text-amber-600 hover:bg-amber-50 border-amber-200 hover:border-amber-300",
                                            feature.color === "indigo" && "text-indigo-600 hover:bg-indigo-50 border-indigo-200 hover:border-indigo-300",
                                            feature.color === "blue" && "text-blue-600 hover:bg-blue-50 border-blue-200 hover:border-blue-300",
                                            feature.color === "emerald" && "text-emerald-600 hover:bg-emerald-50 border-emerald-200 hover:border-emerald-300",
                                            feature.color === "slate" && "text-slate-600 hover:bg-slate-50 border-slate-200 hover:border-slate-300",
                                            feature.color === "purple" && "text-purple-600 hover:bg-purple-50 border-purple-200 hover:border-purple-300"
                                        )}
                                        onClick={() => window.open("https://calendar.app.google/UTx9ZiBXhpMqCVyaA", "_blank", "noopener,noreferrer")}
                                    >
                                        {feature.cta}
                                        <ArrowRight className="h-3.5 w-3.5 ml-2 group-hover:translate-x-1 transition-transform" />
                                    </Button>
                                </div>
                            </motion.div>
                        ))}
                    </div>
                </div>

                {/* CTA Footer */}
                <div className="sticky bottom-0 bg-white border-t border-slate-200 px-8 py-6">
                    <div className="flex items-center justify-between gap-6">
                        <div className="flex-1">
                            <h4 className="font-semibold text-slate-900 mb-1">Ready to scale?</h4>
                            <p className="text-sm text-slate-600">No commitment. We'll tailor the demo to your documents and workflows.</p>
                        </div>
                        <div className="flex items-center gap-3">
                            <Button
                                variant="outline"
                                size="lg"
                                className="h-11 border-slate-300"
                                onClick={() => window.open("https://calendar.app.google/UTx9ZiBXhpMqCVyaA", "_blank", "noopener,noreferrer")}
                            >
                                <Users className="h-4 w-4 mr-2" />
                                Talk to Sales
                            </Button>
                            <Button
                                size="lg"
                                className="h-11 bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 shadow-lg shadow-indigo-500/25 hover:shadow-xl hover:shadow-indigo-500/30"
                                onClick={() => window.open("https://calendar.app.google/UTx9ZiBXhpMqCVyaA", "_blank", "noopener,noreferrer")}
                            >
                                <Rocket className="h-4 w-4 mr-2" />
                                Start a production evaluation
                                <Sparkles className="h-4 w-4 ml-2" />
                            </Button>
                        </div>
                    </div>
                </div>
            </motion.div>
        </div>
    );
}