Muestra fotos y notas por zona en la ficha del lead

- agruparPorZona (lib/funnel/fotos.ts): helper puro que agrupa fotos
  (antes/después) y notas por zona, con fallback al tipo del lead. 5 tests.
- getLead trae también lead_notas.
- LeadFotosGaleria: galería por zona (Antes/Después + notas) que sustituye el
  grid plano de la ficha del panel.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

mvp/b2c/src/components/panel/LeadFotosGaleria.tsx

@@ -0,0 +1,56 @@
+import type { Lead, LeadFoto, LeadNota } from '@/db/schema';
+import { TIPO_LABEL } from '@/lib/funnel';
+import { agruparPorZona } from '@/lib/funnel/fotos';
+
+function Fila({ titulo, fotos }: { titulo: string; fotos: LeadFoto[] }) {
+  if (fotos.length === 0) return null;
+  return (
+    <div className="flex flex-col gap-1.5">
+      <span className="text-xs uppercase tracking-wide font-semibold text-gray-400">{titulo}</span>
+      <div className="flex flex-wrap gap-2">
+        {fotos.map((f) => (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            key={f.id}
+            src={f.url}
+            alt=""
+            className="w-28 h-20 object-cover rounded-lg border border-gray-200"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// Galería de la ficha: fotos antes/después y notas agrupadas por zona.
+export default function LeadFotosGaleria({
+  fotos,
+  notas,
+  tipoLead,
+}: {
+  fotos: LeadFoto[];
+  notas: LeadNota[];
+  tipoLead: Lead['tipoReforma'];
+}) {
+  const grupos = agruparPorZona(fotos, notas, tipoLead ?? 'otro');
+  if (grupos.length === 0) return null;
+
+  return (
+    <div className="flex flex-col gap-5">
+      {grupos.map((g) => (
+        <div key={g.zona} className="flex flex-col gap-3 border border-gray-200 rounded-lg p-4">
+          <span className="text-sm font-bold text-black">{TIPO_LABEL[g.zona]}</span>
+          <Fila titulo="Antes" fotos={g.antes} />
+          <Fila titulo="Después" fotos={g.despues} />
+          {g.notas.length > 0 && (
+            <ul className="flex flex-col gap-1 text-sm text-gray-600">
+              {g.notas.map((n) => (
+                <li key={n.id}>• {n.texto}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}