diff --git a/components/ui/glossary-term.tsx b/components/ui/glossary-term.tsx
new file mode 100644
index 00000000..505feb00
--- /dev/null
+++ b/components/ui/glossary-term.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { usePathname } from "next/navigation";
+import { getDefinition, type GlossaryLocale } from "@/lib/glossary";
+
+interface GlossaryTermProps {
+ term: string;
+ children: React.ReactNode;
+ locale?: GlossaryLocale;
+}
+
+export function GlossaryTerm({ term, children, locale }: GlossaryTermProps) {
+ const pathname = usePathname();
+ const [isVisible, setIsVisible] = useState(false);
+ const timerRef = useRef
| null>(null);
+
+ const detectedLocale: GlossaryLocale =
+ locale ?? (pathname.startsWith("/es") ? "es" : "en");
+ const definition = getDefinition(term, detectedLocale);
+
+ if (!definition) return <>{children};
+
+ const show = () => {
+ if (timerRef.current) clearTimeout(timerRef.current);
+ setIsVisible(true);
+ };
+
+ const hide = () => {
+ timerRef.current = setTimeout(() => setIsVisible(false), 100);
+ };
+
+ const tooltipId = `glossary-${term.replace(/\s+/g, "-")}`;
+
+ return (
+
+
+ {children}
+
+ {isVisible && (
+
+ {term}
+ {definition}
+
+
+ )}
+
+ );
+}
diff --git a/components/ui/language-selector.tsx b/components/ui/language-selector.tsx
new file mode 100644
index 00000000..83bcd34a
--- /dev/null
+++ b/components/ui/language-selector.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { usePathname, useRouter } from "next/navigation";
+
+const languages = [
+ { code: "en", name: "English", flag: "🇬🇧" },
+ { code: "es", name: "Español", flag: "🇪🇸" },
+] as const;
+
+type LanguageCode = (typeof languages)[number]["code"];
+
+export function LanguageSelector() {
+ const [isOpen, setIsOpen] = useState(false);
+ const pathname = usePathname();
+ const router = useRouter();
+ const ref = useRef(null);
+
+ const currentLocale: LanguageCode = pathname.startsWith("/es") ? "es" : "en";
+ const current = languages.find((l) => l.code === currentLocale) ?? languages[0];
+
+ useEffect(() => {
+ const saved = localStorage.getItem("preferred-locale") as LanguageCode | null;
+ if (saved && saved !== currentLocale && pathname === "/") {
+ router.push(saved === "es" ? "/es" : "/");
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ useEffect(() => {
+ function handleClickOutside(event: MouseEvent) {
+ if (ref.current && !ref.current.contains(event.target as Node)) {
+ setIsOpen(false);
+ }
+ }
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, []);
+
+ const handleSelect = (code: LanguageCode) => {
+ localStorage.setItem("preferred-locale", code);
+ router.push(code === "es" ? "/es" : "/");
+ setIsOpen(false);
+ };
+
+ return (
+
+
+
+ {isOpen && (
+
+ {languages.map((lang) => (
+ - handleSelect(lang.code)}
+ className="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer text-dark-400 hover:text-white hover:bg-white/5 transition-colors"
+ >
+ {lang.flag}
+ {lang.name}
+ {lang.code === currentLocale && (
+
+ )}
+
+ ))}
+
+ )}
+