const { useState, useEffect } = window.React || React;
const motion = (window.Motion && window.Motion.motion) || (window.FramerMotion && window.FramerMotion.motion) || { div: "div", button: "button" };

window.ReactApp.Components.Skeleton = ({ className }) => (
    <div className={`animate-pulse bg-slate-200 rounded-md ${className}`}></div>
);

window.ReactApp.Components.PremiumCard = ({ children, className = "", onClick }) => (
    <motion.div 
        whileHover={{ y: -5, boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" }}
        transition={{ duration: 0.2 }}
        className={`bg-white bg-opacity-80 backdrop-blur-md border border-slate-200 shadow-lg rounded-2xl overflow-hidden cursor-pointer ${className}`}
        onClick={onClick}
    >
        {children}
    </motion.div>
);

window.ReactApp.Components.Button = ({ children, onClick, variant = "primary", className = "", icon: Icon }) => {
    const baseClass = "flex items-center justify-center gap-2 px-6 py-3 rounded-full font-bold transition-all duration-300 shadow-md hover:shadow-lg";
    const variants = {
        primary: "bg-gradient-to-r from-blue-600 to-blue-800 text-white hover:from-blue-700 hover:to-blue-900",
        secondary: "bg-white text-blue-700 border border-blue-200 hover:bg-blue-50",
        gold: "bg-gradient-to-r from-amber-500 to-amber-600 text-white hover:from-amber-600 hover:to-amber-700"
    };

    return (
        <motion.button 
            whileTap={{ scale: 0.95 }}
            onClick={onClick}
            className={`${baseClass} ${variants[variant]} ${className}`}
        >
            {Icon && <i data-lucide={Icon} className="w-5 h-5"></i>}
            {children}
        </motion.button>
    );
};