frontend/src/components/architecture/GraphControls.jsx

const LEGEND = [
  ['Frontend', '#3B82F6'],
  ['Backend', '#8B5CF6'],
  ['Database', '#10B981'],
  ['API', '#F59E0B'],
  ['Auth', '#EF4444'],
  ['Utility', '#64748B'],
];

export default function GraphControls() {
  return (
    <div className="glass rounded-lg p-3">
      <p className="mb-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Legend</p>
      <div className="grid grid-cols-2 gap-x-4 gap-y-2">
        {LEGEND.map(([label, color]) => (
          <div key={label} className="flex items-center gap-2 text-xs text-slate-300">
            <span className="h-2.5 w-2.5 rounded-full" style={{ background: color }} />
            {label}
          </div>
        ))}
      </div>
    </div>
  );
}