import { motion, AnimatePresence } from 'framer-motion';

const filteredEntries = vocabEntries.filter((entry) =>

entry.title.toLowerCase().includes(searchQuery.toLowerCase()) ||

entry.slug.toLowerCase().includes(searchQuery.toLowerCase())

);

const alphabet = Object.keys(groupedEntries).sort();

return (

<div className="min-h-screen bg-[#050505] text-[#f4f4f4] selection:bg-emerald-500/30 font-sans">

<Seo

title="Glossary | Fezcodex"

description="A dictionary of technical concepts and patterns."

keywords={['Fezcodex', 'vocabulary', 'glossary', 'definitions']}

/>

{/* Bauhaus Grid Background Pattern */}

<div className="fixed inset-0 pointer-events-none opacity-[0.02] z-0"

style={{

backgroundImage: 'linear-gradient(#ffffff 1px, transparent 1px), linear-gradient(90deg, #ffffff 1px, transparent 1px)',

backgroundSize: '40px 40px'

}}

/>

<div className="relative z-10 mx-auto max-w-7xl px-6 py-24 md:px-12">

{/* Header Section */}

<header className="mb-24 flex flex-col items-start">

<Link

to="/"

className="mb-12 inline-flex items-center gap-3 text-md font-instr-sans text-gray-500 hover:text-white transition-colors"

>

<ArrowLeftIcon size={16} />

<span>Fezcodex Index</span>

</Link>

<h1 className="text-7xl md:text-9xl font-instr-serif italic tracking-tight mb-6 text-white">

Glossary

</h1>

<p className="text-xl font-light text-gray-400 max-w-2xl font-instr-sans">

A curated collection of technical concepts, design patterns, and terminology.

</p>

</header>

{/* Sticky Search & Nav */}

<div className="sticky top-6 z-30 mb-20">

<div className="bg-[#0a0a0a]/80 backdrop-blur-xl border border-white/10 shadow-lg rounded-2xl p-2 flex flex-col md:flex-row items-center gap-4">

<div className="relative w-full md:w-96">

<MagnifyingGlassIcon size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" />

<input

type="text"

placeholder="Search terms..."

value={searchQuery}

onChange={(e) => setSearchQuery(e.target.value)}

className="w-full bg-transparent text-lg font-instr-sans placeholder-gray-600 focus:outline-none py-3 pl-12 pr-4 text-white"

/>

{searchQuery && (

<button onClick={() => setSearchQuery('')} className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-red-500">

<XCircleIcon size={18} weight="fill" />

</button>

)}

</div>

<div className="h-8 w-px bg-white/10 hidden md:block" />

<div className="flex flex-wrap gap-1 justify-center md:justify-start px-2 py-2 md:py-0 w-full overflow-x-auto no-scrollbar">

{alphabet.map(letter => (

<button

key={letter}

onClick={() => scrollToLetter(letter)}

className="w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold text-gray-500 hover:bg-white hover:text-black transition-all font-mono"

>

{letter}

))}

</div>

</div>

</div>

{/* Content */}

<div className="pb-48 space-y-20">

<AnimatePresence mode="popLayout">

{alphabet.map((letter) => (

<motion.section

key={letter}

id={`letter-${letter}`}

initial={{ opacity: 0, y: 20 }}

whileInView={{ opacity: 1, y: 0 }}

viewport={{ once: true, margin: "-100px" }}

transition={{ duration: 0.5, ease: "easeOut" }}

>

<div className="flex items-baseline gap-6 mb-10 border-b border-white/10 pb-4">

<h2 className="text-6xl font-instr-serif italic text-white/20">{letter}</h2>

</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-8">

{groupedEntries[letter].map((entry) => (

<motion.button

key={entry.slug}

layout

onClick={() => handleOpenVocab(entry)}

className="group flex flex-col text-left p-8 bg-[#0a0a0a] border border-white/5 hover:border-white/20 hover:shadow-2xl hover:shadow-emerald-900/10 hover:-translate-y-1 transition-all duration-300 rounded-xl relative overflow-hidden"

>

{/* Procedural Bauhaus Background */}

<div className="absolute inset-0 opacity-40 group-hover:opacity-100 transition-opacity duration-700">

<BauhausShapes seed={entry.slug} />

</div>

{/* Decorative Bauhaus Shape Overlay */}

<div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl from-white/5 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

<div className="flex justify-between items-start w-full mb-6 relative z-10"> <span className="font-mono text-[10px] text-gray-500 uppercase tracking-widest group-hover:text-emerald-400 transition-colors">

{entry.slug}

</span>

<ArrowUpRightIcon

size={18}

className="text-gray-600 group-hover:text-white transition-colors"

/>

</div>

<h3 className="text-2xl font-instr-serif text-white mb-3 group-hover:underline decoration-1 underline-offset-4 decoration-white/30 relative z-10">

{entry.title}

</h3>

</motion.button>

</div>

</motion.section>

))}

</AnimatePresence>

{filteredEntries.length === 0 && (

<div className="py-32 text-center">

<p className="font-instr-serif italic text-2xl text-gray-600">No definitions found for "{searchQuery}"</p>

)}

</div>

);};