{mod.name}

{(mod.tags||[]).map(t => )}

{mod.blurb}

{open && ( Notes

{ const v={...notes, [modId]: e.target.value}; setNotes(v); saveJSON(NOTE_KEY, v); }}
                />
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </div>
    </motion.div>
  );
};

const Section = ({ title, icon, children, id }) => (
  <section id={id} className="scroll-mt-24">
    <div className="mb-3 flex items-center gap-2">
      {icon}
      <h2 className="text-xl font-bold">{title}</h2>
    </div>
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {children}
    </div>
  </section>
);

export default function App() {
  const [query, setQuery] = useState("");
  const [showInfra, setShowInfra] = useState(false);
  const [selectedTags, setSelectedTags] = useState([]);
  const [density, setDensity] = useState(loadJSON(UI_KEY, { density: 'cozy' }).density || 'cozy');
  const [images, setImages] = useState(loadJSON(IMG_KEY, {}));
  const [notes, setNotes] = useState(loadJSON(NOTE_KEY, {}));
  const searchRef = useRef(null);

useEffect(()=>{ saveJSON(UI_KEY, { density }); }, [density]);

useEffect(()=>{
    const onKey = (e) => {
      if (e.key === '/' && document.activeElement !== searchRef.current) {
        e.preventDefault(); searchRef.current?.focus();
      } else if (e.key === 'Escape') {
        setQuery(""); searchRef.current?.blur();
      }
    };
    window.addEventListener('keydown', onKey); return ()=>window.removeEventListener('keydown', onKey);
  },[]);

const modsFiltered = useMemo(()=>{
    const q = query.trim().toLowerCase();
    return MODS.filter(m => {
      const hidden = !showInfra && HIDDEN_INFRA.has(m.name) && !KEPT.has(m.name);
      if (hidden) return false;
      const matchesQuery = !q || [m.name, m.blurb, ...(m.tags||[])].join(" ").toLowerCase().includes(q);
      const matchesTags = selectedTags.length === 0 || (m.tags||[]).some(t => selectedTags.includes(t));
      return matchesQuery && matchesTags;
    });
  }, [query, showInfra, selectedTags]);

const sections = useMemo(()=>{
    const groups = new Map();
    modsFiltered.forEach(m => {
      const k = m.section || 'Other';
      if (!groups.has(k)) groups.set(k, []);
      groups.get(k).push(m);
    });
    return groups;
  }, [modsFiltered]);

const sectionIcons = {
    "Aether": <Sparkles className="w-5 h-5"/>,
    "World Generation": <Trees className="w-5 h-5"/>,
    "Dungeons": <Tent className="w-5 h-5"/>,
    "Mobs & Combat": <Shield className="w-5 h-5"/>,
    "Magic & Gear": <Wand2 className="w-5 h-5"/>,
    "Farming & Food": <CookingPot className="w-5 h-5"/>,
    "Building & Decor": <Home className="w-5 h-5"/>,
    "Travel & Utility": <Compass className="w-5 h-5"/>,
    "UI & QoL": <Map className="w-5 h-5"/>,
    "Visual & Feel": <Feather className="w-5 h-5"/>,
    "Other": <Info className="w-5 h-5"/>,
  };

const sectionOrder = [
    "Aether","World Generation","Dungeons","Mobs & Combat","Magic & Gear","Farming & Food","Building & Decor","Travel & Utility","UI & QoL","Visual & Feel","Other"
  ];

const orderedSections = [...sections.keys()].sort((a,b)=>{
    const ia = sectionOrder.indexOf(a), ib = sectionOrder.indexOf(b);
    if (ia === -1 && ib === -1) return a.localeCompare(b);
    if (ia === -1) return 1; if (ib === -1) return -1; return ia - ib;
  });

return (
    <div className="min-h-screen bg-gradient-to-b from-white to-slate-50 text-slate-900 dark:from-slate-950 dark:to-slate-900 dark:text-slate-100">
      {/* Header */}
      <header className="sticky top-0 z-40 backdrop-blur bg-white/70 dark:bg-slate-950/60 border-b dark:border-slate-800">
        <div className="mx-auto max-w-7xl px-4 py-3 flex items-center gap-3">
          <Sparkles className="w-5 h-5"/>
          <h1 className="font-bold text-lg">Modpack Atlas</h1>
          <span className="opacity-60 text-sm">Interactive guide to your pack</span>
          <div className="ml-auto flex items-center gap-2">
            <div className="hidden md:flex items-center gap-1">
              {Object.keys(TAGS).map(t => (
                <button key={t} onClick={()=> setSelectedTags(s => s.includes(t) ? s.filter(x=>x!==t) : [...s, t]) }
                  className={classNames("rounded-full px-3 py-1 text-xs border dark:border-slate-700", selectedTags.includes(t) ? "bg-slate-900 text-white dark:bg-white dark:text-slate-900" : "")}
                >{t}</button>
              ))}
            </div>
            <div className="relative">
              <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 opacity-60"/>
              <input ref={searchRef} value={query} onChange={e=>setQuery(e.target.value)} placeholder="Search mods (press /)"
                className="pl-9 pr-10 py-2 rounded-xl border dark:border-slate-700 bg-white/70 dark:bg-slate-900/60"/>
              {query && (
                <button onClick={()=>setQuery("")} className="absolute right-2 top-1/2 -translate-y-1/2 opacity-60"><X className="w-4 h-4"/></button>
              )}
            </div>
            <div className="flex items-center gap-2">
              <button onClick={()=>setDensity(density==='cozy'?'compact':'cozy')} className="rounded-xl border px-3 py-2 text-xs dark:border-slate-700" title="Toggle density">{density==='cozy'? 'Compact' : 'Cozy'}</button>
              <button onClick={()=>setShowInfra(s=>!s)} className="rounded-xl border px-3 py-2 text-xs dark:border-slate-700" title="Show API/infra mods">{showInfra? 'Hide Infra' : 'Show Infra'}</button>
            </div>
          </div>
        </div>
      </header>

{/* Subnav */}
      <nav className="sticky top-12 z-30 border-b bg-white/60 backdrop-blur dark:bg-slate-950/40 dark:border-slate-800">
        <div className="mx-auto max-w-7xl px-4 py-2 flex gap-2 overflow-x-auto">
          {sectionOrder.map(s => (
            <a key={s} href={`#${slug(s)}`} className="text-xs rounded-full border px-3 py-1 whitespace-nowrap dark:border-slate-700">{s}</a>
          ))}
        </div>
      </nav>

{/* Content */}
      <main className="mx-auto max-w-7xl px-4 py-6 space-y-10">
        {orderedSections.map(sec => (
          <Section key={sec} title={sec} id={slug(sec)} icon={sectionIcons[sec] || <Info className="w-5 h-5"/>}>
            {sections.get(sec)?.map(m => (
              <Card key={m.name} mod={m} images={images} setImages={setImages} notes={notes} setNotes={setNotes} density={density} />
            ))}
          </Section>
        ))}

{/* Footer actions */}
        <div className="flex items-center justify-between border-t pt-6 dark:border-slate-800">
          <div className="text-sm opacity-60">Drag & drop screenshots into any card. Notes & images save in your browser.</div>
          <div className="flex items-center gap-2">
            <button onClick={()=>{ if(confirm('Clear ALL saved images & notes?')) { localStorage.removeItem(IMG_KEY); localStorage.removeItem(NOTE_KEY); location.reload(); } }}
              className="inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-sm dark:border-slate-700">
              <RefreshCcw className="w-4 h-4"/> Reset Saved Data
            </button>
            <a href="#top" className="text-sm underline">Back to top</a>
          </div>
        </div>
      </main>
    </div>
  );
}