const { isSyntaxSpriteEnabled, fezcodexTheme } = useVisualSettings();

const location = useLocation();

const [position, setPosition] = useState({ x: 100, direction: -1 }); // Spawn right, walk left

const [state, setState] = useState('walking'); // idle, walking, thinking

const [thought, setThought] = useState('');

// Walking Logic

useEffect(() => {

if (!isSyntaxSpriteEnabled || state === 'thinking') return;

const moveInterval = setInterval(() => {

setPosition((prev) => {

const step = 0.3; // Slower, smoother step

const nextX = prev.x + step * prev.direction;

// Boundary checks (percent of screen)

if (nextX >= 100) return { x: 100, direction: -1 };

if (nextX <= 0) return { x: 0, direction: 1 };

return { ...prev, x: nextX };

});

// Randomly switch to idle

if (Math.random() > 0.98) setState('idle');

else if (state === 'idle' && Math.random() > 0.9) setState('walking');

}, 50);

return () => clearInterval(moveInterval);

}, [isSyntaxSpriteEnabled, state]);

// Thinking Logic - MORE FREQUENT

useEffect(() => {

if (!isSyntaxSpriteEnabled) return;

const thoughtInterval = setInterval(() => {

// 40% chance every 8 seconds if not already thinking

if (Math.random() > 0.6 && !thought) {

setThought(QUOTES[Math.floor(Math.random() * QUOTES.length)]);

setState('thinking');

setTimeout(() => {

setState('idle');

setThought('');

}, 10000);

}

}, 8000);

return () => clearInterval(thoughtInterval);

}, [isSyntaxSpriteEnabled, thought]);

// Feed on Knowledge (Location Change)

useEffect(() => {

if (location.pathname.startsWith('/blog/')) {

setThought("Analyzing data structures... Delicious.");

setState('thinking');

setTimeout(() => {

setState('idle');

setThought('');

}, 3000);

}

}, [location.pathname]);

const handleSpriteClick = () => {

setThought("I am Syntax, the Codex Companion. You can stow me in Settings anytime!");

setState('thinking');

setTimeout(() => {

setState('idle');

setThought('');

}, 8000);

};

const getIcon = () => {

if (state === 'thinking') return <BrainIcon size={24} weight="duotone" />;

const path = location.pathname;

if (path.startsWith('/apps')) return <CodeIcon size={24} weight="duotone" />;

if (path.startsWith('/blog')) return <LightbulbIcon size={24} weight="duotone" />;

if (path.startsWith('/projects')) return <BriefcaseIcon size={24} weight="duotone" />;

if (path.startsWith('/logs')) return <ScrollIcon size={24} weight="duotone" />;

if (path.startsWith('/about')) return <UserIcon size={24} weight="duotone" />;

if (path.startsWith('/achievements')) return <TrophyIcon size={24} weight="duotone" />;

if (path.startsWith('/settings')) return <GearIcon size={24} weight="duotone" />;

if (path.startsWith('/vocab')) return <BookIcon size={24} weight="duotone" />;

return <TerminalIcon size={24} weight="duotone" />;

};

if (!isSyntaxSpriteEnabled) return null;

const spriteColor = fezcodexTheme === 'luxe' ? '#8D4004' : '#10B981';

return (

<div className="fixed bottom-0 left-0 w-full h-32 pointer-events-none z-[9999]">

<motion.div

animate={{

x: `${position.x}vw`,

}}

transition={{ type: 'spring', stiffness: 100, damping: 20, mass: 0.1 }}

className="absolute bottom-2 flex flex-col items-center pointer-events-auto cursor-help"

style={{ width: '60px' }}

onClick={handleSpriteClick}

>

{/* Thought Bubble */}

<AnimatePresence>

{thought && (

<motion.div

initial={{ opacity: 0, y: 10, scale: 0.8 }}

animate={{ opacity: 1, y: 0, scale: 1 }}

exit={{ opacity: 0, y: 10, scale: 0.8 }}

className={`absolute bottom-full mb-4 px-4 py-2 rounded-xl text-[10px] font-mono uppercase tracking-tighter whitespace-nowrap border ${

>

<div className="flex items-center gap-2">

<ChatCircleDotsIcon size={14} weight="fill" />

{thought}

</div>

<div className={`absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-t-[6px] ${

}`} />

</motion.div>

)}

</AnimatePresence>

{/* The Sprite Body */}

<motion.div

animate={{ scaleX: position.direction }}

transition={{ type: 'spring', stiffness: 300, damping: 20 }}

className="relative"

>

<motion.div

animate={state === 'walking' ? {

y: [0, -4, 0],

rotate: [0, 5, -5, 0]

} : {

scale: [1, 1.05, 1]

}}

transition={{

repeat: Infinity,

duration: state === 'walking' ? 0.4 : 2

}}

className={`w-10 h-10 flex items-center justify-center rounded-lg border-2 ${

>

{getIcon()}

{/* Eyes */}

<div className="absolute top-2 left-2 flex gap-3">

<div className="w-1.5 h-1.5 rounded-full bg-current animate-pulse" />

<div className="w-1.5 h-1.5 rounded-full bg-current animate-pulse" />

</div>

</motion.div>

{/* Little Feet */}

<div className="flex justify-around mt-[-4px]">

<motion.div

animate={state === 'walking' ? { y: [0, -2, 0] } : {}}

transition={{ repeat: Infinity, duration: 0.2 }}

className="w-3 h-2 rounded-full bg-current opacity-50"

style={{ color: spriteColor }}

/>

<motion.div

animate={state === 'walking' ? { y: [0, -2, 0] } : {}}

transition={{ repeat: Infinity, duration: 0.2, delay: 0.1 }}

className="w-3 h-2 rounded-full bg-current opacity-50"

style={{ color: spriteColor }}

/>

</div>

</motion.div>

</motion.div>

</div>

);