| 'use client' |
|
|
| import { motion } from 'framer-motion' |
| import { useAppStore } from '@/store/useAppStore' |
| const useGodMode = () => ({ godModeActive: true }) |
|
|
| export default function GodModeCard() { |
| const godModeActive = true |
|
|
| return ( |
| <div className="relative overflow-hidden rounded-2xl p-5" |
| style={{ background: 'linear-gradient(135deg, rgba(124,58,237,0.15) 0%, rgba(59,130,246,0.1) 50%, rgba(20,24,40,0.8) 100%)', border: '1px solid rgba(124,58,237,0.25)' }}> |
| |
| {/* Cosmic Orb */} |
| <div className="flex justify-center mb-4"> |
| <div className="cosmic-orb" style={{ width: 80, height: 80 }} /> |
| </div> |
| |
| {/* Status */} |
| <div className="text-center"> |
| <div className="text-xs font-semibold uppercase tracking-widest mb-1" style={{ color: 'var(--text-secondary)' }}>GOD MODE</div> |
| <div className={`text-xl font-black tracking-wide mb-2 ${godModeActive ? 'gradient-text' : 'text-slate-500'}`}> |
| {godModeActive ? 'ACTIVE' : 'STANDBY'} |
| </div> |
| <p className="text-xs" style={{ color: 'var(--text-secondary)' }}> |
| {godModeActive ? 'All systems operational. You are the Architect.' : 'Enable God Mode for full autonomy.'} |
| </p> |
| </div> |
| |
| {/* Glow overlay */} |
| {godModeActive && ( |
| <motion.div |
| className="absolute inset-0 pointer-events-none rounded-2xl" |
| animate={{ opacity: [0.3, 0.6, 0.3] }} |
| transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }} |
| style={{ background: 'radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.15) 0%, transparent 70%)' }} |
| /> |
| )} |
| |
| {/* Status dot */} |
| <div className="absolute top-3 right-3 flex items-center gap-1.5"> |
| <div className={`w-2 h-2 rounded-full ${godModeActive ? 'bg-green-400 animate-pulse-glow' : 'bg-slate-600'}`} /> |
| <span className="text-xs font-medium" style={{ color: godModeActive ? '#4ade80' : 'var(--text-muted)' }}> |
| {godModeActive ? 'Live' : 'Off'} |
| </span> |
| </div> |
| </div> |
| ) |
| } |
|
|