feat: viac fotiek v jednej produktovej karte (bundle)

- pri produkte + Pridat dalsiu fotku: obrazok, poloha X/Y, velkost a volba
  pred / za hlavnou fotkou; lubovolny pocet fotiek
- fotky su sucastou obrazka karty pri exporte

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

src/components/editor/ProductEditor.tsx

@@ -3,7 +3,7 @@
 // Editor jedného produktu (bežné aj vernostné produkty) – zbalený po produktoch, len to, čo treba:
 // texty, fotka (zoom/posun), cenovka (šablóna, veľkosť, ceny), dostupnosť a ďalšie možnosti.
 import React, { useEffect, useRef } from 'react';
-import { BadgeTemplate, CardProduct, ProductLabel } from '@/types/newsletter';
+import { BadgeTemplate, CardProduct, ProductLabel, ProductPhoto } from '@/types/newsletter';
 import { ChevronDown, Trash2, Pencil, Globe, Layers } from 'lucide-react';
 import { ImageUploadInput } from './ImageUploadInput';
 import { pickAlt } from '@/lib/altText';
@@ -105,6 +105,31 @@ const ResetLink: React.FC<{ onClick: () => void }> = ({ onClick }) => (
   </button>
 );
 
+// Ďalšia fotka v karte (bundle): obrázok, poloha, veľkosť, pred/za hlavnou fotkou
+const ExtraPhotoEditor: React.FC<{
+  index: number;
+  photo: ProductPhoto;
+  onChange: (patch: Partial<ProductPhoto>) => void;
+  onRemove: () => void;
+}> = ({ index, photo, onChange, onRemove }) => (
+  <div className="rounded-lg border border-gray-200 bg-white p-2 space-y-1.5">
+    <div className="flex items-center justify-between">
+      <span className="text-[10px] font-bold text-gray-600">Fotka {index + 2}</span>
+      <button type="button" onClick={onRemove} className="text-gray-300 hover:text-red-600 p-0.5" title="Odstrániť fotku">
+        <Trash2 className="w-3.5 h-3.5" />
+      </button>
+    </div>
+    <ImageUploadInput label="" value={photo.url} onChange={(url) => onChange({ url })} />
+    <Slider label="Vodorovne" value={photo.x} display={`${photo.x} %`} min={0} max={100} step={1} onChange={(v) => onChange({ x: v })} />
+    <Slider label="Zvisle" value={photo.y} display={`${photo.y} %`} min={0} max={100} step={1} onChange={(v) => onChange({ y: v })} />
+    <Slider label="Veľkosť" value={photo.scale} display={`${Math.round(photo.scale * 100)} %`} min={0.2} max={2} step={0.05} onChange={(v) => onChange({ scale: v })} />
+    <label className="flex items-center gap-1.5 text-[10px] text-gray-600 cursor-pointer">
+      <input type="checkbox" checked={!!photo.behind} onChange={(e) => onChange({ behind: e.target.checked })} className="w-3 h-3 accent-red-600" />
+      Za hlavnou fotkou
+    </label>
+  </div>
+);
+
 // Nastavenie jedného vlastného štítka na fotke
 const LABEL_COLORS: Array<[string, string]> = [
   ['#e2001a', 'Červená'],
@@ -322,6 +347,31 @@ export const ProductEditor: React.FC<ProductEditorProps> = ({
             <Slider label="Veľkosť" value={scale} display={`${Math.round(scale * 100)} %`} min={0.4} max={2.5} step={0.05} onChange={set('imageScale')} />
             <Slider label="Vodorovne" value={offsetX} display={`${offsetX}`} min={-150} max={150} step={1} onChange={set('imageOffsetX')} />
             <Slider label="Zvisle" value={offsetY} display={`${offsetY}`} min={-120} max={120} step={1} onChange={set('imageOffsetY')} />
+
+            {/* Ďalšie fotky (bundle) */}
+            {(p.extraPhotos || []).map((f, i) => (
+              <ExtraPhotoEditor
+                key={f.id}
+                index={i}
+                photo={f}
+                onChange={(patch) => onChange({ extraPhotos: (p.extraPhotos || []).map((x, j) => (j === i ? { ...x, ...patch } : x)) })}
+                onRemove={() => onChange({ extraPhotos: (p.extraPhotos || []).filter((_, j) => j !== i) })}
+              />
+            ))}
+            <button
+              type="button"
+              onClick={() =>
+                onChange({
+                  extraPhotos: [
+                    ...(p.extraPhotos || []),
+                    { id: `ph-${Date.now()}`, url: '', x: 62, y: 52, scale: 0.75, behind: false }
+                  ]
+                })
+              }
+              className="w-full text-[10px] font-bold text-gray-600 border border-dashed border-gray-300 hover:border-gray-400 hover:bg-white rounded-lg py-1.5"
+            >
+              + Pridať ďalšiu fotku (bundle)
+            </button>
           </Block>
 
           {/* CENOVKA */}