aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/advanced/GlassTrophyCase.js

@@ -0,0 +1,827 @@
+'use client';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Trophy, Search, Grid, List, Unlock, Lock, Gift, BookOpen, Heart, Share2, Eye, Clock, Sparkles, Zap, Flame, Calendar, Target, TrendingUp, Crown, Diamond } from 'lucide-react';
+import { useState, useMemo, useEffect } from 'react';
+import { cn } from '../../lib/utilsComprehensive.js';
+
+const tierColors = {
+  bronze: {
+    primary: "var(--glass-border-default)",
+    secondary: "var(--glass-border-subtle)",
+    glow: "var(--glass-bg-hover)"
+  },
+  silver: {
+    primary: "var(--glass-border-hover)",
+    secondary: "var(--glass-border-default)",
+    glow: "var(--glass-bg-active)"
+  },
+  gold: {
+    primary: "var(--glass-border-strong)",
+    secondary: "var(--glass-border-default)",
+    glow: "var(--glass-bg-strong)"
+  },
+  platinum: {
+    primary: "var(--glass-text-secondary)",
+    secondary: "var(--glass-text-secondary)",
+    glow: "var(--glass-bg-default)"
+  },
+  diamond: {
+    primary: "var(--glass-text-primary)",
+    secondary: "var(--glass-text-secondary)",
+    glow: "var(--glass-bg-default)"
+  }
+};
+const categoryIcons = {
+  reading: BookOpen,
+  engagement: Heart,
+  social: Share2,
+  exploration: Eye,
+  time: Clock,
+  special: Sparkles
+};
+const defaultAchievements = [{
+  id: "first-article",
+  title: "First Steps",
+  description: "Read your first article",
+  icon: BookOpen,
+  tier: "bronze",
+  category: "reading",
+  progress: 1,
+  maxProgress: 1,
+  unlocked: true,
+  unlockedAt: new Date("2024-01-15"),
+  rarity: 95,
+  points: 10,
+  glowColor: "#FFD700"
+}, {
+  id: "speed-reader",
+  title: "Speed Reader",
+  description: "Read 50 articles",
+  icon: Zap,
+  tier: "silver",
+  category: "reading",
+  progress: 47,
+  maxProgress: 50,
+  unlocked: false,
+  rarity: 60,
+  points: 50,
+  glowColor: "#E6E6FA"
+}, {
+  id: "bookworm",
+  title: "Bookworm",
+  description: "Read 500 articles",
+  icon: BookOpen,
+  tier: "gold",
+  category: "reading",
+  progress: 347,
+  maxProgress: 500,
+  unlocked: false,
+  rarity: 15,
+  points: 200,
+  glowColor: "#FFFF99"
+}, {
+  id: "streak-master",
+  title: "Streak Master",
+  description: "Maintain a 30-day reading streak",
+  icon: Flame,
+  tier: "gold",
+  category: "time",
+  progress: 15,
+  maxProgress: 30,
+  unlocked: false,
+  rarity: 20,
+  points: 150,
+  glowColor: "#FF6347"
+}, {
+  id: "early-bird",
+  title: "Early Bird",
+  description: "Read 10 articles before 8 AM",
+  icon: Calendar,
+  tier: "bronze",
+  category: "time",
+  progress: 3,
+  maxProgress: 10,
+  unlocked: false,
+  rarity: 40,
+  points: 30,
+  glowColor: "#87CEEB"
+}, {
+  id: "social-butterfly",
+  title: "Social Butterfly",
+  description: "Share 25 articles",
+  icon: Share2,
+  tier: "silver",
+  category: "social",
+  progress: 12,
+  maxProgress: 25,
+  unlocked: false,
+  rarity: 35,
+  points: 75,
+  glowColor: "#FFB6C1"
+}, {
+  id: "curator",
+  title: "Curator",
+  description: "Bookmark 100 articles",
+  icon: Target,
+  tier: "silver",
+  category: "engagement",
+  progress: 67,
+  maxProgress: 100,
+  unlocked: false,
+  rarity: 45,
+  points: 60,
+  glowColor: "#98FB98"
+}, {
+  id: "explorer",
+  title: "Explorer",
+  description: "Read articles from 10 different categories",
+  icon: Eye,
+  tier: "gold",
+  category: "exploration",
+  progress: 7,
+  maxProgress: 10,
+  unlocked: false,
+  rarity: 25,
+  points: 120,
+  glowColor: "#DDA0DD"
+}, {
+  id: "trendsetter",
+  title: "Trendsetter",
+  description: "Be among first 10 to read 5 trending articles",
+  icon: TrendingUp,
+  tier: "platinum",
+  category: "special",
+  progress: 2,
+  maxProgress: 5,
+  unlocked: false,
+  rarity: 5,
+  points: 300,
+  glowColor: "#F0F8FF"
+}, {
+  id: "perfectionist",
+  title: "Perfectionist",
+  description: "Complete 50 article quizzes with 100% score",
+  icon: Crown,
+  tier: "diamond",
+  category: "engagement",
+  progress: 12,
+  maxProgress: 50,
+  unlocked: false,
+  rarity: 2,
+  points: 500,
+  glowColor: "#00FFFF"
+}, {
+  id: "night-owl",
+  title: "Night Owl",
+  description: "Read 20 articles after midnight",
+  icon: Calendar,
+  tier: "bronze",
+  category: "time",
+  progress: 8,
+  maxProgress: 20,
+  unlocked: false,
+  rarity: 30,
+  points: 40,
+  glowColor: "#191970"
+}, {
+  id: "glass-master",
+  title: "Glass Master",
+  description: "Discover the rainbow glass mode",
+  icon: Diamond,
+  tier: "diamond",
+  category: "special",
+  progress: 0,
+  maxProgress: 1,
+  unlocked: false,
+  secret: true,
+  rarity: 1,
+  points: 1000,
+  glowColor: "#FF1493",
+  reward: {
+    type: "theme",
+    value: "rainbow-exclusive"
+  }
+}];
+function GlassTrophyCase({
+  achievements = defaultAchievements,
+  userStats = {},
+  onAchievementUnlock,
+  showProgress = true,
+  enableSound = true,
+  className = ""
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const [selectedCategory, setSelectedCategory] = useState("all");
+  const [selectedTier, setSelectedTier] = useState("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [viewMode, setViewMode] = useState("grid");
+  const [sortBy, setSortBy] = useState("recent");
+  const [showLocked, setShowLocked] = useState(true);
+  const [selectedAchievement, setSelectedAchievement] = useState(null);
+  // Filter and sort achievements
+  const filteredAchievements = useMemo(() => {
+    return achievements.filter(achievement => {
+      // Category filter
+      if (selectedCategory !== "all" && achievement.category !== selectedCategory) {
+        return false;
+      }
+      // Tier filter
+      if (selectedTier !== "all" && achievement.tier !== selectedTier) {
+        return false;
+      }
+      // Show locked filter
+      if (!showLocked && !achievement.unlocked) {
+        return false;
+      }
+      // Search filter
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        return achievement.title.toLowerCase().includes(query) || achievement.description.toLowerCase().includes(query);
+      }
+      // Secret achievements
+      if (achievement.secret && !achievement.unlocked) {
+        return false;
+      }
+      return true;
+    }).sort((a, b) => {
+      switch (sortBy) {
+        case "recent":
+          if (a.unlockedAt && b.unlockedAt) {
+            return b.unlockedAt.getTime() - a.unlockedAt.getTime();
+          }
+          return a.unlocked === b.unlocked ? 0 : a.unlocked ? -1 : 1;
+        case "progress":
+          const aProgress = a.progress / a.maxProgress;
+          const bProgress = b.progress / b.maxProgress;
+          return bProgress - aProgress;
+        case "rarity":
+          return a.rarity - b.rarity;
+        case "points":
+          return b.points - a.points;
+        default:
+          return 0;
+      }
+    });
+  }, [achievements, selectedCategory, selectedTier, searchQuery, showLocked, sortBy]);
+  // Calculate stats
+  const stats = useMemo(() => {
+    const unlocked = achievements.filter(a => a.unlocked).length;
+    const total = achievements.filter(a => !a.secret || a.unlocked).length;
+    const totalPoints = achievements.filter(a => a.unlocked).reduce((sum, a) => sum + a.points, 0);
+    const tierCounts = achievements.reduce((counts, achievement) => {
+      if (achievement.unlocked) {
+        counts[achievement.tier] = (counts[achievement.tier] || 0) + 1;
+      }
+      return counts;
+    }, {});
+    return {
+      unlocked,
+      total,
+      totalPoints,
+      tierCounts,
+      completionRate: Math.round(unlocked / total * 100)
+    };
+  }, [achievements]);
+  // Categories with counts
+  const categories = useMemo(() => {
+    const categoryCounts = achievements.reduce((counts, achievement) => {
+      counts[achievement.category] = (counts[achievement.category] || 0) + 1;
+      return counts;
+    }, {});
+    return Object.entries(categoryCounts).map(([category, count]) => ({
+      id: category,
+      name: category.charAt(0).toUpperCase() + category.slice(1),
+      count,
+      icon: categoryIcons[category]
+    }));
+  }, [achievements]);
+  // Play unlock sound
+  const playUnlockSound = () => {
+    if (!enableSound) return;
+    try {
+      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      const oscillator = audioContext.createOscillator();
+      const gainNode = audioContext.createGain();
+      oscillator.connect(gainNode);
+      gainNode.connect(audioContext.destination);
+      // Victory fanfare
+      const notes = [523.25, 659.25, 783.99, 1046.5]; // C, E, G, C
+      notes.forEach((freq, index) => {
+        const osc = audioContext.createOscillator();
+        const gain = audioContext.createGain();
+        osc.connect(gain);
+        gain.connect(audioContext.destination);
+        osc.frequency.value = freq;
+        osc.type = "sine";
+        gain.gain.setValueAtTime(0.1, audioContext.currentTime + index * 0.1);
+        gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5 + index * 0.1);
+        osc.start(audioContext.currentTime + index * 0.1);
+        osc.stop(audioContext.currentTime + 0.5 + index * 0.1);
+      });
+    } catch (error) {
+      console.warn("Unable to play unlock sound:", error);
+    }
+  };
+  // Check for newly unlocked achievements
+  useEffect(() => {
+    achievements.forEach(achievement => {
+      if (!achievement.unlocked && achievement.progress >= achievement.maxProgress) {
+        const updatedAchievement = {
+          ...achievement,
+          unlocked: true,
+          unlockedAt: new Date()
+        };
+        playUnlockSound();
+        onAchievementUnlock?.(updatedAchievement);
+      }
+    });
+  }, [achievements, onAchievementUnlock]);
+  const AchievementCard = ({
+    achievement
+  }) => {
+    const tierColor = tierColors[achievement.tier];
+    const progressPercentage = achievement.progress / achievement.maxProgress * 100;
+    return jsxs(motion.div, {
+      className: `relative p-6 rounded-xl border-2 cursor-pointer transition-all ${achievement.unlocked ? "border-white/40 bg-white/10 hover:bg-white/15" : "border-white/20 bg-white/5 hover:bg-white/10 opacity-70"}`,
+      style: {
+        borderColor: achievement.unlocked ? tierColor.primary : undefined,
+        boxShadow: achievement.unlocked ? `0 0 20px ${tierColor.glow}40, inset 0 0 20px ${tierColor.primary}10` : undefined
+      },
+      whileHover: {
+        scale: 1.02,
+        y: -2
+      },
+      whileTap: {
+        scale: 0.98
+      },
+      onClick: () => setSelectedAchievement(achievement),
+      initial: {
+        opacity: 0,
+        y: 20
+      },
+      animate: {
+        opacity: 1,
+        y: 0
+      },
+      layout: true,
+      children: [jsx("div", {
+        className: 'absolute -glass-top-2 -right-2 glass-px-2 glass-py-1 glass-radius-full glass-text-xs font-bold glass-border',
+        style: {
+          backgroundColor: `${tierColor.primary}20`,
+          borderColor: `${tierColor.primary}40`,
+          color: tierColor.primary
+        },
+        children: achievement.tier.toUpperCase()
+      }), achievement.unlocked && jsx(motion.div, {
+        className: 'absolute inset-0 glass-radius-xl',
+        style: {
+          background: `radial-gradient(circle at center, ${tierColor.glow}20 0%, transparent 70%)`,
+          filter: "blur(var(--glass-blur-md))"
+        },
+        animate: prefersReducedMotion ? {} : {
+          scale: [1, 1.1, 1],
+          opacity: [0.3, 0.6, 0.3]
+        },
+        transition: prefersReducedMotion ? {
+          duration: 0
+        } : {
+          duration: 2,
+          repeat: Infinity
+        }
+      }), !achievement.unlocked && jsx("div", {
+        className: 'absolute top-4 right-4',
+        children: jsx(Lock, {
+          className: 'w-5 h-5 text-primary/40'
+        })
+      }), jsx("div", {
+        className: 'glass-flex glass-items-center glass-justify-center mb-4',
+        children: jsx("div", {
+          className: `p-4 rounded-full border-2 ${achievement.unlocked ? "border-white/40" : "border-white/20"}`,
+          style: {
+            backgroundColor: `${tierColor.primary}20`,
+            borderColor: achievement.unlocked ? tierColor.primary : undefined
+          },
+          children: jsx(achievement.icon, {
+            className: `w-8 h-8 ${achievement.unlocked ? "text-white" : "text-white/50"}`
+          })
+        })
+      }), jsxs("div", {
+        className: 'text-center mb-4',
+        children: [jsx("h2", {
+          className: `text-lg font-bold mb-2 ${achievement.unlocked ? "text-white" : "text-white/60"}`,
+          children: achievement.title
+        }), jsx("p", {
+          className: `text-sm ${achievement.unlocked ? "text-white/80" : "text-white/50"}`,
+          children: achievement.description
+        })]
+      }), showProgress && !achievement.unlocked && jsxs("div", {
+        className: 'mb-4',
+        children: [jsxs("div", {
+          className: 'glass-flex glass-justify-between glass-items-center mb-2',
+          children: [jsx("span", {
+            className: 'glass-text-xs text-primary/60',
+            children: "Progress"
+          }), jsxs("span", {
+            className: 'glass-text-xs text-primary/60',
+            children: [achievement.progress, "/", achievement.maxProgress]
+          })]
+        }), jsx("div", {
+          className: 'h-2 glass-surface-subtle/10 glass-radius-full overflow-hidden',
+          children: jsx(motion.div, {
+            className: "glass-h-full glass-radius-full",
+            style: {
+              backgroundColor: tierColor.primary
+            },
+            initial: {
+              width: 0
+            },
+            animate: {
+              width: `${progressPercentage}%`
+            },
+            transition: prefersReducedMotion ? {
+              duration: 0
+            } : {
+              duration: 1,
+              ease: "easeOut"
+            }
+          })
+        })]
+      }), jsxs("div", {
+        className: "glass-flex glass-items-center glass-justify-between glass-text-xs",
+        children: [jsxs("div", {
+          className: "glass-flex glass-items-center glass-gap-2",
+          children: [jsx(Trophy, {
+            className: 'w-4 h-4 text-primary'
+          }), jsxs("span", {
+            className: 'text-primary/60',
+            children: [achievement.points, " pts"]
+          })]
+        }), jsxs("div", {
+          className: "glass-flex glass-items-center glass-gap-1",
+          children: [jsx(Diamond, {
+            className: 'w-3 h-3 text-primary/40'
+          }), jsxs("span", {
+            className: 'text-primary/40',
+            children: [achievement.rarity, "% rare"]
+          })]
+        })]
+      }), achievement.unlocked && achievement.unlockedAt && jsx("div", {
+        className: 'mt-2 text-center',
+        children: jsxs("span", {
+          className: 'glass-text-xs text-primary/50',
+          children: ["Unlocked ", achievement.unlockedAt.toLocaleDateString()]
+        })
+      })]
+    });
+  };
+  return jsxs("div", {
+    className: `w-full max-w-7xl mx-auto ${className}`,
+    children: [jsxs("div", {
+      className: 'glass-flex glass-flex-col lg:flex-row lg:items-center lg:justify-between glass-gap-6 mb-8',
+      children: [jsxs("div", {
+        children: [jsxs("h1", {
+          className: 'glass-text-3xl font-bold text-primary mb-2 glass-flex glass-items-center glass-gap-3',
+          children: [jsx(Trophy, {
+            className: 'w-8 h-8 text-primary'
+          }), "Glass Trophy Case"]
+        }), jsx("p", {
+          className: 'text-primary/60',
+          children: "Showcase your reading achievements and unlock special rewards"
+        })]
+      }), jsx("div", {
+        className: "glass-flex glass-flex-wrap glass-gap-4",
+        children: jsx("div", {
+          className: "glass-glass-glass-backdrop-blur-lg glass-contrast-guard glass-surface-subtle/10 glass-border glass-border-white/20 glass-radius-xl glass-p-4 glass-contrast-guard",
+          children: jsxs("div", {
+            className: "glass-flex glass-items-center glass-gap-4",
+            children: [jsxs("div", {
+              className: 'text-center',
+              children: [jsx("div", {
+                className: 'glass-text-2xl font-bold text-primary',
+                children: stats.unlocked
+              }), jsx("div", {
+                className: 'glass-text-xs text-primary/60',
+                children: "Unlocked"
+              })]
+            }), jsxs("div", {
+              className: 'text-center',
+              children: [jsx("div", {
+                className: 'glass-text-2xl font-bold text-primary',
+                children: stats.total
+              }), jsx("div", {
+                className: 'glass-text-xs text-primary/60',
+                children: "Total"
+              })]
+            }), jsxs("div", {
+              className: 'text-center',
+              children: [jsx("div", {
+                className: 'glass-text-2xl font-bold text-primary',
+                children: stats.totalPoints
+              }), jsx("div", {
+                className: 'glass-text-xs text-primary/60',
+                children: "Points"
+              })]
+            })]
+          })
+        })
+      })]
+    }), jsxs("div", {
+      className: 'glass-flex glass-flex-wrap glass-gap-4 mb-6',
+      children: [jsxs("div", {
+        className: 'relative glass-flex-1 min-w-64',
+        children: [jsx(Search, {
+          className: 'absolute left-3 glass-top-1/2 transform -translate-y-1/2 w-4 h-4 text-primary/60'
+        }), jsx("input", {
+          type: "text",
+          value: searchQuery,
+          onChange: e => setSearchQuery(e.target.value),
+          placeholder: "Search achievements...",
+          "aria-label": 'Search achievements',
+          className: cn("glass-foundation-complete glass-w-full glass-pl-10 glass-pr-4 glass-py-3", "glass-text-primary placeholder:glass-text-muted glass-radius-xl", "glass-border-subtle glass-focus glass-transition glass-touch-target glass-contrast-guard")
+        })]
+      }), jsxs("select", {
+        value: selectedCategory,
+        onChange: e => setSelectedCategory(e.target.value),
+        "aria-label": 'Filter achievements by category',
+        className: cn("glass-foundation-complete glass-px-4 glass-py-3 glass-radius-xl", "glass-text-primary glass-border-subtle glass-focus glass-transition glass-touch-target glass-contrast-guard"),
+        children: [jsx("option", {
+          value: "all",
+          children: "All Categories"
+        }), categories.map(category => jsxs("option", {
+          value: category.id,
+          children: [category.name, " (", category.count, ")"]
+        }, category.id))]
+      }), jsxs("select", {
+        value: selectedTier,
+        onChange: e => setSelectedTier(e.target.value),
+        "aria-label": 'Filter achievements by tier',
+        className: cn("glass-foundation-complete glass-px-4 glass-py-3 glass-radius-xl", "glass-text-primary glass-border-subtle glass-focus glass-transition glass-touch-target glass-contrast-guard"),
+        children: [jsx("option", {
+          value: "all",
+          children: "All Tiers"
+        }), jsx("option", {
+          value: "bronze",
+          children: "Bronze"
+        }), jsx("option", {
+          value: "silver",
+          children: "Silver"
+        }), jsx("option", {
+          value: "gold",
+          children: "Gold"
+        }), jsx("option", {
+          value: "platinum",
+          children: "Platinum"
+        }), jsx("option", {
+          value: "diamond",
+          children: "Diamond"
+        })]
+      }), jsxs("select", {
+        value: sortBy,
+        onChange: e => setSortBy(e.target.value),
+        "aria-label": 'Sort achievements',
+        className: cn("glass-foundation-complete glass-px-4 glass-py-3 glass-radius-xl", "glass-text-primary glass-border-subtle glass-focus glass-transition"),
+        children: [jsx("option", {
+          value: "recent",
+          children: "Recent"
+        }), jsx("option", {
+          value: "progress",
+          children: "Progress"
+        }), jsx("option", {
+          value: "rarity",
+          children: "Rarity"
+        }), jsx("option", {
+          value: "points",
+          children: "Points"
+        })]
+      }), jsxs("div", {
+        className: "glass-flex glass-surface-subtle/10 glass-radius-xl glass-p-1",
+        children: [jsxs(motion.button, {
+          type: 'button',
+          onClick: () => setViewMode("grid"),
+          className: `p-2 rounded-lg transition-all ${viewMode === "grid" ? "bg-white/20 text-white" : "text-white/60"}`,
+          "aria-pressed": viewMode === "grid",
+          "aria-label": 'Display achievements in grid view',
+          whileHover: {
+            scale: 1.05
+          },
+          whileTap: {
+            scale: 0.95
+          },
+          children: [jsx(Grid, {
+            className: 'w-4 h-4',
+            "aria-hidden": 'true'
+          }), jsx("span", {
+            className: 'sr-only',
+            children: "Grid view"
+          })]
+        }), jsxs(motion.button, {
+          type: 'button',
+          onClick: () => setViewMode("list"),
+          className: `p-2 rounded-lg transition-all ${viewMode === "list" ? "bg-white/20 text-white" : "text-white/60"}`,
+          "aria-pressed": viewMode === "list",
+          "aria-label": 'Display achievements in list view',
+          whileHover: {
+            scale: 1.05
+          },
+          whileTap: {
+            scale: 0.95
+          },
+          children: [jsx(List, {
+            className: 'w-4 h-4',
+            "aria-hidden": 'true'
+          }), jsx("span", {
+            className: 'sr-only',
+            children: "List view"
+          })]
+        })]
+      }), jsx(motion.button, {
+        type: 'button',
+        onClick: () => setShowLocked(!showLocked),
+        className: `px-4 py-3 border border-white/20 rounded-xl transition-all ${showLocked ? "bg-white/10 text-white" : "bg-white/5 text-white/60"}`,
+        "aria-pressed": showLocked,
+        "aria-label": showLocked ? "Hide locked achievements" : "Show locked achievements",
+        whileHover: {
+          scale: 1.02
+        },
+        whileTap: {
+          scale: 0.98
+        },
+        children: showLocked ? jsxs(Fragment, {
+          children: [jsx(Unlock, {
+            className: 'w-4 h-4',
+            "aria-hidden": 'true'
+          }), jsx("span", {
+            className: 'sr-only',
+            children: "Hide locked achievements"
+          })]
+        }) : jsxs(Fragment, {
+          children: [jsx(Lock, {
+            className: 'w-4 h-4',
+            "aria-hidden": 'true'
+          }), jsx("span", {
+            className: 'sr-only',
+            children: "Show locked achievements"
+          })]
+        })
+      })]
+    }), jsx(motion.div, {
+      className: viewMode === "grid" ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" : "space-y-4",
+      layout: true,
+      children: jsx(AnimatePresence, {
+        children: filteredAchievements.map(achievement => jsx(AchievementCard, {
+          achievement: achievement
+        }, achievement.id))
+      })
+    }), jsx(AnimatePresence, {
+      children: selectedAchievement && jsxs(Fragment, {
+        children: [jsx(motion.div, {
+          className: 'fixed inset-0 glass-surface-dark/50 glass-glass-glass-backdrop-blur-sm glass-contrast-guard z-50 glass-contrast-guard',
+          initial: {
+            opacity: 0
+          },
+          animate: prefersReducedMotion ? {} : {
+            opacity: 1
+          },
+          exit: {
+            opacity: 0
+          },
+          onClick: () => setSelectedAchievement(null)
+        }), jsx(motion.div, {
+          className: 'fixed inset-0 glass-flex glass-items-center glass-justify-center z-50 glass-p-4',
+          initial: {
+            opacity: 0,
+            scale: 0.9
+          },
+          animate: prefersReducedMotion ? {} : {
+            opacity: 1,
+            scale: 1
+          },
+          exit: {
+            opacity: 0,
+            scale: 0.9
+          },
+          children: jsx("div", {
+            className: 'max-w-lg glass-w-full glass-glass-glass-backdrop-blur-lg glass-contrast-guard glass-surface-subtle/10 glass-border glass-border-white/20 glass-radius-xl glass-p-8 glass-contrast-guard',
+            children: jsxs("div", {
+              className: 'text-center',
+              children: [jsx("div", {
+                className: 'glass-flex glass-items-center glass-justify-center mb-4',
+                children: jsx("div", {
+                  className: "glass-p-6 glass-radius-full glass-border-2",
+                  style: {
+                    backgroundColor: `${tierColors[selectedAchievement.tier].primary}20`,
+                    borderColor: tierColors[selectedAchievement.tier].primary
+                  },
+                  children: jsx(selectedAchievement.icon, {
+                    className: 'w-12 h-12 glass-touch-target glass-contrast-guard'
+                  })
+                })
+              }), jsx("h2", {
+                className: 'glass-text-2xl font-bold text-primary mb-2',
+                children: selectedAchievement.title
+              }), jsxs("div", {
+                className: 'glass-flex glass-items-center glass-justify-center glass-gap-2 mb-4',
+                children: [jsx("div", {
+                  className: 'glass-px-3 glass-py-1 glass-radius-full glass-text-sm font-bold glass-border',
+                  style: {
+                    backgroundColor: `${tierColors[selectedAchievement.tier].primary}20`,
+                    borderColor: `${tierColors[selectedAchievement.tier].primary}40`,
+                    color: tierColors[selectedAchievement.tier].primary
+                  },
+                  children: selectedAchievement.tier.toUpperCase()
+                }), jsxs("div", {
+                  className: 'glass-px-3 glass-py-1 glass-surface-subtle/10 glass-border glass-border-white/20 glass-radius-full glass-text-sm text-primary/80',
+                  children: [selectedAchievement.rarity, "% rare"]
+                })]
+              }), jsx("p", {
+                className: 'text-primary/70 mb-6',
+                children: selectedAchievement.description
+              }), !selectedAchievement.unlocked && jsxs("div", {
+                className: 'mb-6',
+                children: [jsxs("div", {
+                  className: 'glass-flex glass-justify-between glass-items-center mb-2',
+                  children: [jsx("span", {
+                    className: 'glass-text-sm text-primary/60',
+                    children: "Progress"
+                  }), jsxs("span", {
+                    className: 'glass-text-sm text-primary/60',
+                    children: [selectedAchievement.progress, "/", selectedAchievement.maxProgress]
+                  })]
+                }), jsx("div", {
+                  className: 'h-3 glass-surface-subtle/10 glass-radius-full overflow-hidden',
+                  children: jsx("div", {
+                    className: 'glass-h-full glass-radius-full transition-all duration-1000',
+                    style: {
+                      backgroundColor: tierColors[selectedAchievement.tier].primary,
+                      width: `${selectedAchievement.progress / selectedAchievement.maxProgress * 100}%`
+                    }
+                  })
+                })]
+              }), jsxs("div", {
+                className: 'glass-flex glass-items-center glass-justify-center glass-gap-6 mb-6',
+                children: [jsxs("div", {
+                  className: 'text-center',
+                  children: [jsx("div", {
+                    className: 'glass-text-xl font-bold text-primary',
+                    children: selectedAchievement.points
+                  }), jsx("div", {
+                    className: 'glass-text-sm text-primary/60',
+                    children: "Points"
+                  })]
+                }), jsxs("div", {
+                  className: 'text-center',
+                  children: [jsx("div", {
+                    className: 'glass-text-xl font-bold text-primary',
+                    children: selectedAchievement.category
+                  }), jsx("div", {
+                    className: 'glass-text-sm text-primary/60',
+                    children: "Category"
+                  })]
+                })]
+              }), selectedAchievement.reward && jsxs("div", {
+                className: 'glass-p-4 glass-gradient-primary glass-gradient-primary glass-gradient-primary glass-border glass-border-purple-500/30 glass-radius-xl mb-6',
+                children: [jsxs("div", {
+                  className: 'glass-flex glass-items-center glass-justify-center glass-gap-2 mb-2',
+                  children: [jsx(Gift, {
+                    className: 'w-5 h-5 text-primary'
+                  }), jsx("span", {
+                    className: 'text-primary font-medium',
+                    children: "Reward"
+                  })]
+                }), jsxs("div", {
+                  className: "glass-text-secondary glass-text-sm",
+                  children: ["Unlocks: ", selectedAchievement.reward.value]
+                })]
+              }), selectedAchievement.unlocked && selectedAchievement.unlockedAt && jsxs("div", {
+                className: 'text-primary glass-text-sm',
+                children: ["\u2713 Unlocked on", " ", selectedAchievement.unlockedAt.toLocaleDateString()]
+              })]
+            })
+          })
+        })]
+      })
+    }), filteredAchievements.length === 0 && jsxs(motion.div, {
+      className: 'text-center glass-py-16',
+      initial: {
+        opacity: 0
+      },
+      animate: prefersReducedMotion ? {} : {
+        opacity: 1
+      },
+      children: [jsx(Trophy, {
+        className: 'w-16 h-16 text-primary/30 glass-mx-auto mb-4'
+      }), jsx("h2", {
+        className: 'glass-text-xl font-semibold text-primary/60 mb-2',
+        children: "No achievements found"
+      }), jsxs("p", {
+        className: 'text-primary/40',
+        children: ["Try adjusting your filters or", " ", !showLocked ? "show locked achievements" : "start reading to unlock some!"]
+      })]
+    })]
+  });
+}
+
+export { GlassTrophyCase, GlassTrophyCase as default };
+//# sourceMappingURL=GlassTrophyCase.js.map