feat: anchor header/footer, editable header buttons, campaign management, image uploads, badge font customization, and brevo export fix

src/app/api/brevo/export/route.ts

@@ -12,7 +12,7 @@ export async function POST(req: NextRequest) {
     }
 
     const apiKey = process.env.BREVO_API_KEY;
-    const senderName = process.env.BREVO_SENDER_NAME || 'Jandl';
+    const senderName = process.env.BREVO_SENDER_NAME || 'Jakub Hostačný (COOP Newsletter)';
     const senderEmail = process.env.BREVO_SENDER_EMAIL || 'tomas.rafay@jandl.sk';
 
     if (!apiKey) {
@@ -58,11 +58,12 @@ export async function POST(req: NextRequest) {
       );
     }
 
-    // Úspech - vrátime campaignId a URL na správu v Brevo
+    // Úspech - vrátime campaignId a priame URL na editáciu a prehľad kampaní v novom Brevo dashboarde
     return NextResponse.json({
       success: true,
       campaignId: data.id,
-      brevoUrl: `https://app.brevo.com/camp/detail/email/${data.id}`,
+      brevoUrl: `https://app.brevo.com/campaigns/email/edit/${data.id}`,
+      brevoListingUrl: 'https://app.brevo.com/campaigns/listing',
       message: 'Kampaň bola úspešne vytvorená v Brevo!'
     });
   } catch (error: any) {

src/app/api/upload/route.ts

@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getSupabaseAdmin } from '@/lib/supabase';
+
+export async function POST(req: NextRequest) {
+  try {
+    const formData = await req.formData();
+    const file = formData.get('file') as File | null;
+
+    if (!file) {
+      return NextResponse.json({ error: 'Súbor nebol poskytnutý.' }, { status: 400 });
+    }
+
+    const admin = getSupabaseAdmin();
+    const safeName = file.name.replace(/[^a-zA-Z0-9._-]/g, '_');
+    const path = `uploads/${Date.now()}-${safeName}`;
+
+    const arrayBuffer = await file.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+
+    const { error: uploadError } = await admin.storage
+      .from('newsletter-assets')
+      .upload(path, buffer, {
+        contentType: file.type || 'image/png',
+        upsert: true
+      });
+
+    if (uploadError) {
+      console.error('Upload to Supabase Storage error:', uploadError);
+      return NextResponse.json({ error: uploadError.message }, { status: 500 });
+    }
+
+    const { data: pubData } = admin.storage
+      .from('newsletter-assets')
+      .getPublicUrl(path);
+
+    return NextResponse.json({
+      success: true,
+      url: pubData.publicUrl
+    });
+  } catch (err: any) {
+    console.error('API /upload error:', err);
+    return NextResponse.json({ error: err.message || 'Chyba servera pri nahrávaní súboru' }, { status: 500 });
+  }
+}

src/app/page.tsx

@@ -9,9 +9,10 @@ import { TopBar } from '@/components/editor/TopBar';
 import { ConfigPanel } from '@/components/editor/ConfigPanel';
 import { ProductImportModal } from '@/components/editor/ProductImportModal';
 import { BadgeEditorModal } from '@/components/editor/BadgeEditorModal';
+import { SavedCampaignsModal } from '@/components/editor/SavedCampaignsModal';
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
-import { ChevronUp, ChevronDown, Copy, Trash2, Edit3 } from 'lucide-react';
+import { ChevronUp, ChevronDown, Copy, Trash2, Anchor, Lock } from 'lucide-react';
 
 export default function Home() {
   const [campaign, setCampaign] = useState<NewsletterCampaign>(DEFAULT_CAMPAIGN);
@@ -23,9 +24,30 @@ export default function Home() {
   // Modály
   const [isImportOpen, setIsImportOpen] = useState(false);
   const [isBadgeEditorOpen, setIsBadgeEditorOpen] = useState(false);
+  const [isSavedCampaignsOpen, setIsSavedCampaignsOpen] = useState(false);
   const [targetProductIdForBadge, setTargetProductIdForBadge] = useState<string | null>(null);
 
-  // Načítanie existujúceho draftu z databázy
+  // Pomocné funkcie pre fixné ukotvenie hlavičky a pätičky
+  const isTopModule = (type: string) => type === 'header' || type === 'announcement';
+  const isBottomModule = (type: string) => type === 'footer';
+  const isAnchoredModule = (type: string) => isTopModule(type) || isBottomModule(type);
+
+  const enforceAnchors = (mods: NewsletterModule[]): NewsletterModule[] => {
+    const topMods = mods.filter((m) => isTopModule(m.type));
+    const bottomMods = mods.filter((m) => isBottomModule(m.type));
+    const middleMods = mods.filter((m) => !isAnchoredModule(m.type));
+
+    // announcement je pred headerom, ak existujú oba
+    topMods.sort((a, b) => {
+      if (a.type === 'announcement' && b.type === 'header') return -1;
+      if (a.type === 'header' && b.type === 'announcement') return 1;
+      return 0;
+    });
+
+    return [...topMods, ...middleMods, ...bottomMods];
+  };
+
+  // Načítanie existujúceho draftu z databázy pri štarte
   useEffect(() => {
     async function loadInitial() {
       try {
@@ -44,10 +66,10 @@ export default function Home() {
               preheader: dbItem.data.preheader || DEFAULT_CAMPAIGN.preheader,
               status: dbItem.status,
               brevoCampaignId: dbItem.brevo_campaign_id,
-              modules: dbItem.data.modules
+              modules: enforceAnchors(dbItem.data.modules)
             });
             if (dbItem.brevo_campaign_id) {
-              setBrevoUrl(`https://app.brevo.com/camp/detail/email/${dbItem.brevo_campaign_id}`);
+              setBrevoUrl(`https://app.brevo.com/campaigns/email/edit/${dbItem.brevo_campaign_id}`);
             }
           }
         }
@@ -102,7 +124,7 @@ export default function Home() {
     }, 1000);
 
     return () => clearTimeout(timer);
-  }, [campaign.title, campaign.preheader, campaign.modules]);
+  }, [campaign.title, campaign.preheader, campaign.modules, campaign.id]);
 
   const selectedModule = campaign.modules.find((m) => m.id === selectedModuleId) || null;
 
@@ -113,39 +135,56 @@ export default function Home() {
     }));
   };
 
+  // Posun modulu: Hlavička a pätička sú ukotvené a bežné moduly sa nemôžu dostať pred hlavičku ani za pätičku
   const moveModule = (index: number, direction: 'up' | 'down') => {
-    const newModules = [...campaign.modules];
+    const currentMod = campaign.modules[index];
-    const targetIndex = direction === 'up' ? index - 1 : index + 1;
+    if (!currentMod || isAnchoredModule(currentMod.type)) return;
-    if (targetIndex < 0 || targetIndex >= newModules.length) return;
 
+    const topCount = campaign.modules.filter((m) => isTopModule(m.type)).length;
+    const footerIndex = campaign.modules.findIndex((m) => isBottomModule(m.type));
+    const maxAllowedIndex = footerIndex !== -1 ? footerIndex - 1 : campaign.modules.length - 1;
+
+    const targetIndex = direction === 'up' ? index - 1 : index + 1;
+    if (targetIndex < topCount || targetIndex > maxAllowedIndex) return;
+
+    const newModules = [...campaign.modules];
     const temp = newModules[index];
     newModules[index] = newModules[targetIndex];
     newModules[targetIndex] = temp;
 
-    setCampaign((prev) => ({ ...prev, modules: newModules }));
+    setCampaign((prev) => ({ ...prev, modules: enforceAnchors(newModules) }));
   };
 
+  // Duplikácia: Hlavička a pätička sa nedajú duplikovať
   const duplicateModule = (index: number) => {
     const original = campaign.modules[index];
+    if (isAnchoredModule(original.type)) return;
+
     const clone: NewsletterModule = {
       ...original,
       id: `mod-${Date.now()}`,
       title: `${original.title} (kópia)`,
       data: JSON.parse(JSON.stringify(original.data))
     };
+
     const newModules = [...campaign.modules];
     newModules.splice(index + 1, 0, clone);
-    setCampaign((prev) => ({ ...prev, modules: newModules }));
+    setCampaign((prev) => ({ ...prev, modules: enforceAnchors(newModules) }));
     setSelectedModuleId(clone.id);
   };
 
+  // Zmazanie: Hlavička a pätička sa nedajú vymazať
   const deleteModule = (index: number) => {
+    const mod = campaign.modules[index];
+    if (isAnchoredModule(mod.type)) return;
     if (campaign.modules.length <= 1) return;
+
     const newModules = campaign.modules.filter((_, i) => i !== index);
-    setCampaign((prev) => ({ ...prev, modules: newModules }));
+    setCampaign((prev) => ({ ...prev, modules: enforceAnchors(newModules) }));
     setSelectedModuleId(newModules[0]?.id || null);
   };
 
+  // Pridanie modulu: Vloží sa vždy PRED pätičku (pätička ostáva pevne na spodku)
   const handleAddModule = (type: any) => {
     let newMod: NewsletterModule;
     if (type === 'banner') {
@@ -196,10 +235,16 @@ export default function Home() {
       };
     }
 
-    setCampaign((prev) => ({
+    setCampaign((prev) => {
-      ...prev,
+      const footerIdx = prev.modules.findIndex((m) => isBottomModule(m.type));
-      modules: [...prev.modules, newMod]
+      const newModules = [...prev.modules];
-    }));
+      if (footerIdx !== -1) {
+        newModules.splice(footerIdx, 0, newMod);
+      } else {
+        newModules.push(newMod);
+      }
+      return { ...prev, modules: enforceAnchors(newModules) };
+    });
     setSelectedModuleId(newMod.id);
   };
 
@@ -221,6 +266,89 @@ export default function Home() {
     handleUpdateModule(updated);
   };
 
+  // Manuálne uloženie kampane
+  const handleManualSave = async () => {
+    setIsSaving(true);
+    try {
+      if (!campaign.id) {
+        const { data, error } = await supabase
+          .from('templates')
+          .insert([
+            {
+              title: campaign.title,
+              status: campaign.status,
+              data: {
+                preheader: campaign.preheader,
+                modules: campaign.modules
+              }
+            }
+          ])
+          .select();
+
+        if (error) throw error;
+        if (data && data.length > 0) {
+          setCampaign((prev) => ({ ...prev, id: data[0].id }));
+        }
+      } else {
+        const { error } = await supabase
+          .from('templates')
+          .update({
+            title: campaign.title,
+            data: {
+              preheader: campaign.preheader,
+              modules: campaign.modules
+            },
+            updated_at: new Date().toISOString()
+          })
+          .eq('id', campaign.id);
+
+        if (error) throw error;
+      }
+      alert('Kampaň bola úspešne uložená do databázy!');
+    } catch (err: any) {
+      alert(`Chyba pri ukladaní: ${err.message}`);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // Duplikácia aktuálnej kampane v Supabase
+  const handleDuplicateCurrentCampaign = async () => {
+    setIsSaving(true);
+    try {
+      const newTitle = `${campaign.title} (kópia)`;
+      const { data, error } = await supabase
+        .from('templates')
+        .insert([
+          {
+            title: newTitle,
+            status: 'draft',
+            data: {
+              preheader: campaign.preheader,
+              modules: campaign.modules
+            }
+          }
+        ])
+        .select();
+
+      if (error) throw error;
+      if (data && data.length > 0) {
+        setCampaign({
+          id: data[0].id,
+          title: newTitle,
+          preheader: campaign.preheader,
+          status: 'draft',
+          modules: campaign.modules
+        });
+        alert(`Kampaň bola zduplikovaná ako "${newTitle}"!`);
+      }
+    } catch (err: any) {
+      alert(`Chyba pri duplikovaní: ${err.message}`);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
   const handleExportZip = async () => {
     const rawHtml = renderEmailHtml(campaign);
     let finalHtml = rawHtml;
@@ -319,17 +447,24 @@ export default function Home() {
     });
   };
 
+  const topCount = campaign.modules.filter((m) => isTopModule(m.type)).length;
+  const footerIdx = campaign.modules.findIndex((m) => isBottomModule(m.type));
+
   return (
     <div className="flex flex-col h-screen overflow-hidden bg-slate-950 font-sans">
       {/* 1. Horná lišta */}
       <TopBar
         campaign={campaign}
         isSaving={isSaving}
-        onSave={() => {}}
+        onSave={handleManualSave}
+        onUpdateTitle={(title) => setCampaign((prev) => ({ ...prev, title }))}
+        onOpenSavedCampaigns={() => setIsSavedCampaignsOpen(true)}
+        onDuplicateCampaign={handleDuplicateCurrentCampaign}
         onExportZip={handleExportZip}
         onExportBrevo={handleExportBrevo}
         isExportingBrevo={isExportingBrevo}
         brevoCampaignUrl={brevoUrl}
+        brevoListingUrl="https://app.brevo.com/campaigns/listing"
         onAddModule={handleAddModule}
       />
 
@@ -347,31 +482,46 @@ export default function Home() {
           <div className="w-full max-w-[600px] my-4">
             {campaign.modules.map((mod, idx) => {
               const isSelected = mod.id === selectedModuleId;
+              const isAnchored = isAnchoredModule(mod.type);
+              const isTop = isTopModule(mod.type);
+              const isBottom = isBottomModule(mod.type);
+
+              const canMoveUp = !isAnchored && idx > topCount;
+              const canMoveDown = !isAnchored && idx < (footerIdx !== -1 ? footerIdx - 1 : campaign.modules.length - 1);
 
               return (
                 <div
                   key={mod.id}
                   onClick={() => setSelectedModuleId(mod.id)}
-                  className={`relative cursor-pointer transition-all duration-150 ${
+                  className={`relative cursor-pointer transition-all duration-150 rounded-2xl ${
                     isSelected
-                      ? 'outline-2 outline-offset-4 outline-red-500 rounded-2xl shadow-2xl'
+                      ? 'ring-2 ring-offset-4 ring-offset-[#001a33] ring-red-500 shadow-2xl'
-                      : 'hover:outline-1 hover:outline-offset-2 hover:outline-white/30 rounded-2xl'
+                      : 'hover:ring-1 hover:ring-offset-2 hover:ring-offset-[#001a33] hover:ring-white/30'
                   }`}
                 >
                   {/* Lišta s nástrojmi pre označený modul */}
                   {isSelected && (
-                    <div className="absolute -top-3 right-4 z-40 flex items-center gap-1 bg-[#001a33] text-white px-3 py-1.5 rounded-full text-xs shadow-2xl border border-white/20 backdrop-blur-md">
+                    <div className="absolute -top-3 right-4 z-40 flex items-center gap-1.5 bg-[#001a33] text-white px-3 py-1.5 rounded-full text-xs shadow-2xl border border-white/20 backdrop-blur-md">
-                      <span className="text-[10px] font-bold text-gray-300 mr-1.5 uppercase tracking-wider">
+                      <span className="text-[10px] font-bold text-gray-300 uppercase tracking-wider">
                         {mod.title}
                       </span>
+
+                      {/* Ak je modul ukotvený (Hlavička / Pätička), nezobrazujeme tlačidlá na presun a zmazanie */}
+                      {isAnchored ? (
+                        <span className="text-[9px] font-bold bg-white/10 text-amber-300 px-2 py-0.5 rounded-full border border-white/10 uppercase flex items-center gap-1">
+                          <Lock className="w-2.5 h-2.5" />
+                          {isBottom ? 'Ukotvená pätička' : 'Ukotvená hlavička'}
+                        </span>
+                      ) : (
+                        <>
                           <button
                             onClick={(e) => {
                               e.stopPropagation();
                               moveModule(idx, 'up');
                             }}
-                        disabled={idx === 0}
+                            disabled={!canMoveUp}
                             className="hover:text-red-400 disabled:opacity-30 p-1"
-                        title="Posunúť hore"
+                            title={canMoveUp ? 'Posunúť vyššie' : 'Nemožno posunúť nad hlavičku'}
                           >
                             <ChevronUp className="w-3.5 h-3.5" />
                           </button>
@@ -380,9 +530,9 @@ export default function Home() {
                               e.stopPropagation();
                               moveModule(idx, 'down');
                             }}
-                        disabled={idx === campaign.modules.length - 1}
+                            disabled={!canMoveDown}
                             className="hover:text-red-400 disabled:opacity-30 p-1"
-                        title="Posunúť dole"
+                            title={canMoveDown ? 'Posunúť nižšie' : 'Nemožno posunúť pod pätičku'}
                           >
                             <ChevronDown className="w-3.5 h-3.5" />
                           </button>
@@ -392,7 +542,7 @@ export default function Home() {
                               duplicateModule(idx);
                             }}
                             className="hover:text-blue-400 p-1 ml-1"
-                        title="Duplikovať"
+                            title="Duplikovať sekciu"
                           >
                             <Copy className="w-3.5 h-3.5" />
                           </button>
@@ -402,20 +552,42 @@ export default function Home() {
                               deleteModule(idx);
                             }}
                             className="hover:text-red-400 p-1 ml-1"
-                        title="Zmazať"
+                            title="Zmazať sekciu"
                           >
                             <Trash2 className="w-3.5 h-3.5" />
                           </button>
+                        </>
+                      )}
                     </div>
                   )}
 
-                  {/* Vykreslenie čistého modulu bez obaľovacieho gradientu na každom bloku */}
+                  {/* Vykreslenie modulu: ak je loyalty_club vypnutý, zobrazíme prívetivý placeholder */}
+                  {mod.type === 'loyalty_club' && mod.data.enabled === false ? (
+                    <div className="p-8 my-4 border-2 border-dashed border-red-500/40 bg-red-950/30 rounded-2xl text-center">
+                      <p className="text-xs font-bold text-red-300 uppercase tracking-wider">
+                        Sekcia Vernostné zľavy (Vypnutá)
+                      </p>
+                      <p className="text-[11px] text-gray-300 mt-1">
+                        Táto sekcia je v odosielanom e-maile skrytá. Kliknutím sem ju môžete aktivovať.
+                      </p>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleUpdateModule({ ...mod, data: { ...mod.data, enabled: true } });
+                        }}
+                        className="mt-3 px-4 py-1.5 bg-red-600 hover:bg-red-700 text-white text-xs font-bold rounded-lg transition-colors shadow-sm"
+                      >
+                        Aktivovať vernostné zľavy
+                      </button>
+                    </div>
+                  ) : (
                     <div
                       dangerouslySetInnerHTML={{
                         __html: renderSingleModuleHtml(mod, campaign)
                       }}
                       className="pointer-events-none"
                     />
+                  )}
                 </div>
               );
             })}
@@ -453,6 +625,48 @@ export default function Home() {
         currentPriceSub={targetProduct?.priceSub || '99'}
         currentUnitPrice={targetProduct?.unitPrice || '1kg = 4,91 €'}
       />
+
+      {/* Modál Moje newslettre (Ukladanie, duplikácia, vytváranie a prepínanie) */}
+      <SavedCampaignsModal
+        isOpen={isSavedCampaignsOpen}
+        onClose={() => setIsSavedCampaignsOpen(false)}
+        currentCampaign={campaign}
+        onLoadCampaign={(selected: NewsletterCampaign) => {
+          setCampaign({ ...selected, modules: enforceAnchors(selected.modules) });
+          setSelectedModuleId(selected.modules[1]?.id || selected.modules[0]?.id || null);
+          if (selected.brevoCampaignId) {
+            setBrevoUrl(`https://app.brevo.com/campaigns/email/edit/${selected.brevoCampaignId}`);
+          } else {
+            setBrevoUrl(null);
+          }
+        }}
+        onSaveCurrentAsCopy={async (newTitle: string) => {
+          const { data, error } = await supabase
+            .from('templates')
+            .insert([
+              {
+                title: newTitle,
+                status: 'draft',
+                data: {
+                  preheader: campaign.preheader,
+                  modules: campaign.modules
+                }
+              }
+            ])
+            .select();
+
+          if (error) throw error;
+          if (data && data[0]) {
+            setCampaign({
+              id: data[0].id,
+              title: newTitle,
+              preheader: campaign.preheader,
+              status: 'draft',
+              modules: campaign.modules
+            });
+          }
+        }}
+      />
     </div>
   );
 }

src/components/editor/BadgeEditorModal.tsx

@@ -25,6 +25,46 @@ export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
   currentPriceSub = '99',
   currentUnitPrice = '1kg = 4,91 €'
 }) => {
+  const POPULAR_FONTS = [
+    { name: 'Poppins', source: 'google' as const },
+    { name: 'Montserrat', source: 'google' as const },
+    { name: 'Oswald', source: 'google' as const },
+    { name: 'Bebas Neue', source: 'google' as const },
+    { name: 'Anton', source: 'google' as const },
+    { name: 'Roboto Condensed', source: 'google' as const },
+    { name: 'Barlow Semi Condensed', source: 'google' as const },
+    { name: 'Inter', source: 'google' as const },
+    { name: 'Open Sans', source: 'google' as const },
+    { name: 'Arial Narrow', source: 'system' as const },
+    { name: 'Impact', source: 'system' as const }
+  ];
+
+  const loadFontDynamically = (fontFamily: string, source: 'system' | 'google' | 'adobe' = 'google', url?: string) => {
+    if (typeof document === 'undefined') return;
+
+    if (source === 'adobe' && url) {
+      const existing = document.querySelector(`link[data-adobe-font="${url}"]`);
+      if (!existing) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = url;
+        link.setAttribute('data-adobe-font', url);
+        document.head.appendChild(link);
+      }
+    } else if (source === 'google' && fontFamily) {
+      const clean = fontFamily.trim().replace(/\s+/g, '+');
+      const href = `https://fonts.googleapis.com/css2?family=${clean}:wght@400;600;700;800;900&display=swap`;
+      const existing = document.querySelector(`link[data-google-font="${clean}"]`);
+      if (!existing) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.setAttribute('data-google-font', clean);
+        document.head.appendChild(link);
+      }
+    }
+  };
+
   const [badges, setBadges] = useState<BadgeTemplate[]>([]);
   const [activeBadge, setActiveBadge] = useState<BadgeTemplate | null>(null);
   const [selectedLayerId, setSelectedLayerId] = useState<string | null>(null);
@@ -32,6 +72,17 @@ export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
   const [isExportingPng, setIsExportingPng] = useState(false);
   const [isSavingDb, setIsSavingDb] = useState(false);
 
+  // Načítanie písiem pre všetky vrstvy aktívnej cenovky
+  useEffect(() => {
+    if (activeBadge?.layersConfig) {
+      activeBadge.layersConfig.forEach((l) => {
+        if (l.fontFamily) {
+          loadFontDynamically(l.fontFamily, l.fontSource || 'google', l.fontUrl);
+        }
+      });
+    }
+  }, [activeBadge]);
+
   // Načítanie existujúcich šablón zo Supabase
   useEffect(() => {
     if (isOpen) {
@@ -366,9 +417,11 @@ export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
                           top: `${layer.y}px`,
                           transform: 'translate(-50%, -50%)',
                           fontSize: `${layer.fontSize}px`,
-                          fontWeight: layer.fontWeight as any,
+                          fontWeight: (layer.fontWeight || '700') as any,
                           color: layer.fill,
-                          fontFamily: 'Poppins, Arial, sans-serif',
+                          fontFamily: layer.fontFamily
+                            ? `'${layer.fontFamily}', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`
+                            : 'Poppins, Arial, sans-serif',
                           whiteSpace: 'nowrap',
                           cursor: 'pointer'
                         }}
@@ -530,6 +583,181 @@ export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
                         </div>
                       </div>
 
+                      {/* Font nastavenie */}
+                      <div className="space-y-2 pt-2 border-t border-gray-200">
+                        <label className="block text-[11px] font-semibold text-gray-700">
+                          Písmo (Font) a Hrúbka
+                        </label>
+                        
+                        {/* Zdroj písma */}
+                        <div className="grid grid-cols-3 gap-1 bg-gray-200 p-0.5 rounded-lg text-[10px] font-bold text-center">
+                          <button
+                            type="button"
+                            onClick={() => {
+                              updateActiveLayer({ fontSource: 'google' });
+                            }}
+                            className={`py-1 rounded ${
+                              (activeLayer.fontSource || 'google') === 'google'
+                                ? 'bg-white text-gray-900 shadow-sm'
+                                : 'text-gray-600 hover:text-gray-900'
+                            }`}
+                          >
+                            Google
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              updateActiveLayer({ fontSource: 'adobe' });
+                            }}
+                            className={`py-1 rounded ${
+                              activeLayer.fontSource === 'adobe'
+                                ? 'bg-white text-gray-900 shadow-sm'
+                                : 'text-gray-600 hover:text-gray-900'
+                            }`}
+                          >
+                            Adobe
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              updateActiveLayer({ fontSource: 'system' });
+                            }}
+                            className={`py-1 rounded ${
+                              activeLayer.fontSource === 'system'
+                                ? 'bg-white text-gray-900 shadow-sm'
+                                : 'text-gray-600 hover:text-gray-900'
+                            }`}
+                          >
+                            Systém
+                          </button>
+                        </div>
+
+                        {/* Google Fonts voľba */}
+                        {(activeLayer.fontSource || 'google') === 'google' && (
+                          <div className="space-y-2">
+                            <div>
+                              <label className="block text-[10px] text-gray-500 mb-0.5">Výber Google Fontu</label>
+                              <select
+                                value={
+                                  POPULAR_FONTS.some((f) => f.name === (activeLayer.fontFamily || 'Poppins'))
+                                    ? activeLayer.fontFamily || 'Poppins'
+                                    : 'custom'
+                                }
+                                onChange={(e) => {
+                                  if (e.target.value !== 'custom') {
+                                    loadFontDynamically(e.target.value, 'google');
+                                    updateActiveLayer({ fontFamily: e.target.value, fontSource: 'google' });
+                                  }
+                                }}
+                                className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white font-medium"
+                              >
+                                {POPULAR_FONTS.filter((f) => f.source === 'google').map((f) => (
+                                  <option key={f.name} value={f.name}>
+                                    {f.name}
+                                  </option>
+                                ))}
+                                <option value="custom">Iný Google Font (zadať vlastný)...</option>
+                              </select>
+                            </div>
+
+                            {(!POPULAR_FONTS.some((f) => f.name === (activeLayer.fontFamily || 'Poppins')) ||
+                              activeLayer.fontFamily === 'custom') && (
+                              <div>
+                                <label className="block text-[10px] text-gray-500 mb-0.5">Názov Google Fontu</label>
+                                <input
+                                  type="text"
+                                  placeholder="napr. Montserrat, Oswald, Syne"
+                                  value={activeLayer.fontFamily === 'custom' ? '' : activeLayer.fontFamily || ''}
+                                  onChange={(e) => {
+                                    const val = e.target.value;
+                                    loadFontDynamically(val, 'google');
+                                    updateActiveLayer({ fontFamily: val, fontSource: 'google' });
+                                  }}
+                                  className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white"
+                                />
+                              </div>
+                            )}
+                          </div>
+                        )}
+
+                        {/* Adobe Fonts voľba */}
+                        {activeLayer.fontSource === 'adobe' && (
+                          <div className="space-y-2">
+                            <div>
+                              <label className="block text-[10px] text-gray-500 mb-0.5">
+                                Adobe Typekit CSS URL
+                              </label>
+                              <input
+                                type="text"
+                                placeholder="https://use.typekit.net/xxxx.css"
+                                value={activeLayer.fontUrl || ''}
+                                onChange={(e) => {
+                                  const url = e.target.value;
+                                  if (activeLayer.fontFamily) {
+                                    loadFontDynamically(activeLayer.fontFamily, 'adobe', url);
+                                  }
+                                  updateActiveLayer({ fontUrl: url, fontSource: 'adobe' });
+                                }}
+                                className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white font-mono text-[10px]"
+                              />
+                            </div>
+                            <div>
+                              <label className="block text-[10px] text-gray-500 mb-0.5">
+                                Názov rodiny písma (Font Family)
+                              </label>
+                              <input
+                                type="text"
+                                placeholder="napr. futura-pt, omnes-pro"
+                                value={activeLayer.fontFamily || ''}
+                                onChange={(e) => {
+                                  const family = e.target.value;
+                                  if (activeLayer.fontUrl) {
+                                    loadFontDynamically(family, 'adobe', activeLayer.fontUrl);
+                                  }
+                                  updateActiveLayer({ fontFamily: family, fontSource: 'adobe' });
+                                }}
+                                className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white"
+                              />
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Systémové písma */}
+                        {activeLayer.fontSource === 'system' && (
+                          <div>
+                            <label className="block text-[10px] text-gray-500 mb-0.5">Systémový font</label>
+                            <select
+                              value={activeLayer.fontFamily || 'Arial'}
+                              onChange={(e) => updateActiveLayer({ fontFamily: e.target.value, fontSource: 'system' })}
+                              className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white"
+                            >
+                              <option value="Arial">Arial</option>
+                              <option value="Arial Narrow">Arial Narrow</option>
+                              <option value="Impact">Impact</option>
+                              <option value="Trebuchet MS">Trebuchet MS</option>
+                              <option value="Helvetica">Helvetica</option>
+                              <option value="Verdana">Verdana</option>
+                            </select>
+                          </div>
+                        )}
+
+                        {/* Hrúbka fontu */}
+                        <div>
+                          <label className="block text-[10px] text-gray-500 mb-0.5">Hrúbka písma (Weight)</label>
+                          <select
+                            value={activeLayer.fontWeight || '700'}
+                            onChange={(e) => updateActiveLayer({ fontWeight: e.target.value })}
+                            className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white font-medium"
+                          >
+                            <option value="400">400 - Normal</option>
+                            <option value="600">600 - SemiBold</option>
+                            <option value="700">700 - Bold</option>
+                            <option value="800">800 - ExtraBold</option>
+                            <option value="900">900 - Black</option>
+                          </select>
+                        </div>
+                      </div>
+
                       <div className="grid grid-cols-2 gap-2">
                         <div>
                           <label className="block text-[10px] text-gray-500 mb-0.5">Pozícia X ({activeLayer.x}px)</label>

src/components/editor/ConfigPanel.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { NewsletterModule, ProductItem } from '@/types/newsletter';
 import { Plus, Trash2, Image as ImageIcon, Tag, Store } from 'lucide-react';
 import { SUPABASE_ASSETS_BASE } from '@/lib/defaultCampaign';
+import { ImageUploadInput } from './ImageUploadInput';
 
 interface ConfigPanelProps {
   module: NewsletterModule | null;
@@ -85,17 +86,25 @@ export const ConfigPanel: React.FC<ConfigPanelProps> = ({
       )}
 
       {/* HEADER */}
-      {module.type === 'header' && (
+      {module.type === 'header' && (() => {
-        <div className="space-y-4">
+        const navLinks = module.data.navLinks || [
-          <div>
+          { label: 'Letáky', url: 'https://www.coop.sk/sk/letaky', variant: 'outline' },
-            <label className="block text-xs font-semibold text-gray-700 mb-1">URL Loga</label>
+          { label: 'COOP Klub', url: 'https://www.coopklub.sk', variant: 'filled' }
-            <input
+        ];
-              type="text"
+
+        const updateNavLink = (index: number, patch: Partial<typeof navLinks[0]>) => {
+          const updated = [...navLinks];
+          updated[index] = { ...updated[index], ...patch };
+          updateData({ navLinks: updated });
+        };
+
+        return (
+          <div className="space-y-5">
+            <ImageUploadInput
+              label="Logo COOP Jednota"
               value={module.data.logoUrl || ''}
-              onChange={(e) => updateData({ logoUrl: e.target.value })}
+              onChange={(url) => updateData({ logoUrl: url })}
-              className="w-full text-sm border border-gray-300 rounded-lg p-2 font-mono text-xs"
             />
-          </div>
             <div>
               <label className="block text-xs font-semibold text-gray-700 mb-1">Odkaz loga</label>
               <input
@@ -103,23 +112,110 @@ export const ConfigPanel: React.FC<ConfigPanelProps> = ({
                 value={module.data.logoLink || ''}
                 onChange={(e) => updateData({ logoLink: e.target.value })}
                 className="w-full text-sm border border-gray-300 rounded-lg p-2"
+                placeholder="https://www.coop.sk"
               />
             </div>
+
+            {/* Tlačidlá v hlavičke */}
+            <div className="pt-2 border-t border-gray-200 space-y-4">
+              <span className="text-xs font-bold text-gray-800 uppercase tracking-wider block">
+                Tlačidlá v hlavičke
+              </span>
+
+              {/* Tlačidlo 1 (Letáky) */}
+              <div className="bg-gray-50 p-3 rounded-xl border border-gray-200 space-y-2">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs font-bold text-gray-700">Tlačidlo 1 (Letáky)</span>
+                  <span className="text-[10px] bg-red-100 text-red-700 font-bold px-2 py-0.5 rounded">
+                    {navLinks[0]?.variant === 'filled' ? 'Plné' : 'Obrys'}
+                  </span>
                 </div>
-      )}
+                <div>
+                  <label className="block text-[11px] text-gray-500 mb-1">Text tlačidla</label>
+                  <input
+                    type="text"
+                    value={navLinks[0]?.label || ''}
+                    onChange={(e) => updateNavLink(0, { label: e.target.value })}
+                    className="w-full text-xs font-bold border border-gray-300 rounded-lg p-2 bg-white"
+                    placeholder="Letáky"
+                  />
+                </div>
+                <div>
+                  <label className="block text-[11px] text-gray-500 mb-1">Cieľový odkaz (URL)</label>
+                  <input
+                    type="text"
+                    value={navLinks[0]?.url || ''}
+                    onChange={(e) => updateNavLink(0, { url: e.target.value })}
+                    className="w-full text-xs border border-gray-300 rounded-lg p-2 bg-white"
+                    placeholder="https://www.coop.sk/sk/letaky"
+                  />
+                </div>
+                <div>
+                  <label className="block text-[11px] text-gray-500 mb-1">Štýl zobrazenia</label>
+                  <select
+                    value={navLinks[0]?.variant || 'outline'}
+                    onChange={(e) => updateNavLink(0, { variant: e.target.value as any })}
+                    className="w-full text-xs border border-gray-300 rounded-lg p-2 bg-white font-medium"
+                  >
+                    <option value="outline">Červený obrys (Biele pozadie, červený text)</option>
+                    <option value="filled">Modré plné tlačidlo (Biele písmo)</option>
+                  </select>
+                </div>
+              </div>
+
+              {/* Tlačidlo 2 (COOP Klub) */}
+              <div className="bg-gray-50 p-3 rounded-xl border border-gray-200 space-y-2">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs font-bold text-gray-700">Tlačidlo 2 (COOP Klub)</span>
+                  <span className="text-[10px] bg-blue-100 text-blue-700 font-bold px-2 py-0.5 rounded">
+                    {navLinks[1]?.variant === 'filled' ? 'Plné modré' : 'Obrys'}
+                  </span>
+                </div>
+                <div>
+                  <label className="block text-[11px] text-gray-500 mb-1">Text tlačidla</label>
+                  <input
+                    type="text"
+                    value={navLinks[1]?.label || ''}
+                    onChange={(e) => updateNavLink(1, { label: e.target.value })}
+                    className="w-full text-xs font-bold border border-gray-300 rounded-lg p-2 bg-white"
+                    placeholder="COOP Klub"
+                  />
+                </div>
+                <div>
+                  <label className="block text-[11px] text-gray-500 mb-1">Cieľový odkaz (URL)</label>
+                  <input
+                    type="text"
+                    value={navLinks[1]?.url || ''}
+                    onChange={(e) => updateNavLink(1, { url: e.target.value })}
+                    className="w-full text-xs border border-gray-300 rounded-lg p-2 bg-white"
+                    placeholder="https://www.coopklub.sk"
+                  />
+                </div>
+                <div>
+                  <label className="block text-[11px] text-gray-500 mb-1">Štýl zobrazenia</label>
+                  <select
+                    value={navLinks[1]?.variant || 'filled'}
+                    onChange={(e) => updateNavLink(1, { variant: e.target.value as any })}
+                    className="w-full text-xs border border-gray-300 rounded-lg p-2 bg-white font-medium"
+                  >
+                    <option value="filled">Modré plné tlačidlo (Biele písmo)</option>
+                    <option value="outline">Červený obrys (Biele pozadie, červený text)</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })()}
 
       {/* BANNER */}
       {module.type === 'banner' && (
         <div className="space-y-4">
-          <div>
+          <ImageUploadInput
-            <label className="block text-xs font-semibold text-gray-700 mb-1">URL Obrázka bannera</label>
+            label="Obrázok bannera"
-            <input
-              type="text"
             value={module.data.imageUrl || ''}
-              onChange={(e) => updateData({ imageUrl: e.target.value })}
+            onChange={(url) => updateData({ imageUrl: url })}
-              className="w-full text-sm border border-gray-300 rounded-lg p-2 font-mono text-xs"
           />
-          </div>
           <div>
             <label className="block text-xs font-semibold text-gray-700 mb-1">Odkaz bannera</label>
             <input
@@ -269,6 +365,32 @@ export const ConfigPanel: React.FC<ConfigPanelProps> = ({
                   />
                 </div>
 
+                <ImageUploadInput
+                  label="Obrázok produktu"
+                  value={p.imageUrl || ''}
+                  onChange={(url) => {
+                    const products = [...module.data.products];
+                    products[pIdx].imageUrl = url;
+                    updateData({ products });
+                  }}
+                  placeholder="https://...produkt.png alebo nahrajte súbor"
+                />
+
+                <div>
+                  <label className="text-[10px] text-gray-500 font-semibold block mb-0.5">Platnosť akcie pre tento produkt (override)</label>
+                  <input
+                    type="text"
+                    value={p.validityOverride || ''}
+                    onChange={(e) => {
+                      const products = [...module.data.products];
+                      products[pIdx].validityOverride = e.target.value;
+                      updateData({ products });
+                    }}
+                    placeholder={`Predvolená: ${module.data.globalValidity || '2. 5. – 15. 5. 2026'}`}
+                    className="w-full text-xs border border-gray-300 rounded p-1.5 bg-white placeholder:text-gray-400"
+                  />
+                </div>
+
                 <div className="grid grid-cols-2 gap-2">
                   <div>
                     <label className="text-[10px] text-gray-500">Cena (€)</label>
@@ -407,6 +529,450 @@ export const ConfigPanel: React.FC<ConfigPanelProps> = ({
         </div>
       )}
 
+      {/* LOYALTY CLUB (VERNOSTNÉ ZĽAVY) */}
+      {module.type === 'loyalty_club' && (
+        <div className="space-y-5">
+          {/* Toggle zapnuté / vypnuté */}
+          <div className="bg-red-50/60 p-3.5 rounded-xl border border-red-200 flex items-center justify-between">
+            <div>
+              <span className="text-xs font-bold text-gray-900 block">Zobraziť v e-maile</span>
+              <span className="text-[11px] text-gray-500">Sekcia Vernostné zľavy</span>
+            </div>
+            <label className="relative inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                checked={module.data.enabled !== false}
+                onChange={(e) => updateData({ enabled: e.target.checked })}
+                className="sr-only peer"
+              />
+              <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div>
+            </label>
+          </div>
+
+          <div>
+            <label className="block text-xs font-semibold text-gray-700 mb-1">Názov sekcie</label>
+            <input
+              type="text"
+              value={module.data.sectionTitle || ''}
+              onChange={(e) => updateData({ sectionTitle: e.target.value })}
+              className="w-full text-sm border border-gray-300 rounded-lg p-2 font-bold"
+            />
+          </div>
+
+          <ImageUploadInput
+            label="Obrázok banneru Vernostných zliav"
+            value={module.data.headerImageUrl || ''}
+            onChange={(url) => updateData({ headerImageUrl: url })}
+          />
+
+          <div>
+            <label className="block text-xs font-semibold text-gray-700 mb-1">Odkaz banneru</label>
+            <input
+              type="text"
+              value={module.data.headerLink || ''}
+              onChange={(e) => updateData({ headerLink: e.target.value })}
+              className="w-full text-sm border border-gray-300 rounded-lg p-2"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-semibold text-gray-700 mb-1">Globálna platnosť akcie</label>
+            <input
+              type="text"
+              value={module.data.globalValidity || ''}
+              onChange={(e) => updateData({ globalValidity: e.target.value })}
+              placeholder="napr. 2. 5. – 15. 5. 2026"
+              className="w-full text-sm border border-gray-300 rounded-lg p-2"
+            />
+          </div>
+
+          {/* 2 Vernostné produkty */}
+          <div className="space-y-4 pt-2">
+            <span className="text-xs font-bold text-gray-800 uppercase tracking-wider block">
+              Vernostné produkty ({module.data.products?.length || 0})
+            </span>
+
+            {(module.data.products || []).map((p: any, pIdx: number) => (
+              <div key={p.id || pIdx} className="p-3 bg-gray-50 rounded-xl border border-gray-200 space-y-3">
+                <span className="text-xs font-bold text-gray-900 block truncate">
+                  {p.title || `Vernostný produkt ${pIdx + 1}`}
+                </span>
+
+                <div>
+                  <label className="text-[10px] text-gray-500 font-semibold block mb-0.5">Názov produktu</label>
+                  <input
+                    type="text"
+                    value={p.title || ''}
+                    onChange={(e) => {
+                      const products = [...module.data.products];
+                      products[pIdx].title = e.target.value;
+                      updateData({ products });
+                    }}
+                    className="w-full text-xs border border-gray-300 rounded p-1.5 bg-white font-medium"
+                  />
+                </div>
+
+                <ImageUploadInput
+                  label="Obrázok produktu"
+                  value={p.imageUrl || ''}
+                  onChange={(url) => {
+                    const products = [...module.data.products];
+                    products[pIdx].imageUrl = url;
+                    updateData({ products });
+                  }}
+                  placeholder="https://...produkt.png alebo nahrajte súbor"
+                />
+
+                <div>
+                  <label className="text-[10px] text-gray-500 font-semibold block mb-0.5">Platnosť akcie pre tento produkt (override)</label>
+                  <input
+                    type="text"
+                    value={p.validityOverride || ''}
+                    onChange={(e) => {
+                      const products = [...module.data.products];
+                      products[pIdx].validityOverride = e.target.value;
+                      updateData({ products });
+                    }}
+                    placeholder={`Predvolená: ${module.data.globalValidity || '2. 5. – 15. 5. 2026'}`}
+                    className="w-full text-xs border border-gray-300 rounded p-1.5 bg-white placeholder:text-gray-400"
+                  />
+                </div>
+
+                {/* Sekcia Bez karty */}
+                <div className="p-2.5 bg-red-50/40 rounded-lg border border-red-100 space-y-2">
+                  <span className="text-[11px] font-bold text-red-700 block">Bez karty</span>
+                  <div className="grid grid-cols-3 gap-1.5">
+                    <div>
+                      <label className="text-[9px] text-gray-500">Zľava</label>
+                      <input
+                        type="text"
+                        value={p.noCardDiscount || ''}
+                        onChange={(e) => {
+                          const products = [...module.data.products];
+                          products[pIdx].noCardDiscount = e.target.value;
+                          updateData({ products });
+                        }}
+                        placeholder="21%"
+                        className="w-full text-xs border border-gray-300 rounded p-1 bg-white font-bold"
+                      />
+                    </div>
+                    <div>
+                      <label className="text-[9px] text-gray-500">Cena (€)</label>
+                      <input
+                        type="text"
+                        value={p.noCardPriceMain || ''}
+                        onChange={(e) => {
+                          const products = [...module.data.products];
+                          products[pIdx].noCardPriceMain = e.target.value;
+                          updateData({ products });
+                        }}
+                        placeholder="0"
+                        className="w-full text-xs border border-gray-300 rounded p-1 bg-white font-bold"
+                      />
+                    </div>
+                    <div>
+                      <label className="text-[9px] text-gray-500">Centy</label>
+                      <input
+                        type="text"
+                        value={p.noCardPriceSub || ''}
+                        onChange={(e) => {
+                          const products = [...module.data.products];
+                          products[pIdx].noCardPriceSub = e.target.value;
+                          updateData({ products });
+                        }}
+                        placeholder="79"
+                        className="w-full text-xs border border-gray-300 rounded p-1 bg-white font-bold"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <label className="text-[9px] text-gray-500">Merná cena (bez karty)</label>
+                    <input
+                      type="text"
+                      value={p.noCardUnitPrice || ''}
+                      onChange={(e) => {
+                        const products = [...module.data.products];
+                        products[pIdx].noCardUnitPrice = e.target.value;
+                        updateData({ products });
+                      }}
+                      placeholder="1kg = 9,88 €"
+                      className="w-full text-xs border border-gray-300 rounded p-1 bg-white"
+                    />
+                  </div>
+                </div>
+
+                {/* Sekcia S kartou */}
+                <div className="p-2.5 bg-amber-50/50 rounded-lg border border-amber-200 space-y-2">
+                  <span className="text-[11px] font-bold text-amber-900 block">S kartou (Klub)</span>
+                  <div className="grid grid-cols-3 gap-1.5">
+                    <div>
+                      <label className="text-[9px] text-gray-500">Zľava</label>
+                      <input
+                        type="text"
+                        value={p.cardDiscount || ''}
+                        onChange={(e) => {
+                          const products = [...module.data.products];
+                          products[pIdx].cardDiscount = e.target.value;
+                          updateData({ products });
+                        }}
+                        placeholder="38%"
+                        className="w-full text-xs border border-gray-300 rounded p-1 bg-white font-bold"
+                      />
+                    </div>
+                    <div>
+                      <label className="text-[9px] text-gray-500">Cena (€)</label>
+                      <input
+                        type="text"
+                        value={p.cardPriceMain || ''}
+                        onChange={(e) => {
+                          const products = [...module.data.products];
+                          products[pIdx].cardPriceMain = e.target.value;
+                          updateData({ products });
+                        }}
+                        placeholder="0"
+                        className="w-full text-xs border border-gray-300 rounded p-1 bg-white font-bold"
+                      />
+                    </div>
+                    <div>
+                      <label className="text-[9px] text-gray-500">Centy</label>
+                      <input
+                        type="text"
+                        value={p.cardPriceSub || ''}
+                        onChange={(e) => {
+                          const products = [...module.data.products];
+                          products[pIdx].cardPriceSub = e.target.value;
+                          updateData({ products });
+                        }}
+                        placeholder="62"
+                        className="w-full text-xs border border-gray-300 rounded p-1 bg-white font-bold"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <label className="text-[9px] text-gray-500">Merná cena (s kartou)</label>
+                    <input
+                      type="text"
+                      value={p.cardUnitPrice || ''}
+                      onChange={(e) => {
+                        const products = [...module.data.products];
+                        products[pIdx].cardUnitPrice = e.target.value;
+                        updateData({ products });
+                      }}
+                      placeholder="1kg = 7,75 €"
+                      className="w-full text-xs border border-gray-300 rounded p-1 bg-white"
+                    />
+                  </div>
+                </div>
+
+                {/* Predajne */}
+                <div>
+                  <label className="text-[10px] text-gray-500 block mb-1">Dostupnosť (Piktogramy)</label>
+                  <div className="flex gap-2 text-[10px]">
+                    <label className="flex items-center gap-1 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={p.stores?.potraviny}
+                        onChange={(e) => {
+                          const products = [...module.data.products];
+                          products[pIdx].stores.potraviny = e.target.checked;
+                          updateData({ products });
+                        }}
+                      />
+                      <span>Potraviny</span>
+                    </label>
+                    <label className="flex items-center gap-1 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={p.stores?.supermarket}
+                        onChange={(e) => {
+                          const products = [...module.data.products];
+                          products[pIdx].stores.supermarket = e.target.checked;
+                          updateData({ products });
+                        }}
+                      />
+                      <span>Supermarket</span>
+                    </label>
+                    <label className="flex items-center gap-1 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={p.stores?.tempo}
+                        onChange={(e) => {
+                          const products = [...module.data.products];
+                          products[pIdx].stores.tempo = e.target.checked;
+                          updateData({ products });
+                        }}
+                      />
+                      <span>Tempo</span>
+                    </label>
+                  </div>
+                </div>
+
+                {/* Vlajočka SR */}
+                <div className="flex items-center gap-2 pt-1">
+                  <input
+                    type="checkbox"
+                    id={`loyalty-flag-${p.id || pIdx}`}
+                    checked={p.showSlovakFlag || false}
+                    onChange={(e) => {
+                      const products = [...module.data.products];
+                      products[pIdx].showSlovakFlag = e.target.checked;
+                      updateData({ products });
+                    }}
+                    className="rounded text-red-600"
+                  />
+                  <label htmlFor={`loyalty-flag-${p.id || pIdx}`} className="text-xs text-gray-700 cursor-pointer">
+                    Zobraziť slovenskú vlajku / srdce
+                  </label>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* ARTICLES ROW (LETÁKY ALEBO ČLÁNKY) */}
+      {module.type === 'articles_row' && (
+        <div className="space-y-5">
+          {module.data.item1?.btnText ? (
+            /* AK SÚ TO LETÁKY */
+            <div className="space-y-4">
+              <div className="p-3 bg-blue-50/50 rounded-xl border border-blue-100">
+                <span className="text-xs font-bold text-blue-900 block mb-1">
+                  Leták 1: {module.data.item1?.title || 'Aktuálne letáky'}
+                </span>
+                <p className="text-[11px] text-gray-500 mb-3">Farby, texty a rozloženie sú fixne podľa šablóny. Môžete upraviť odkaz a náhľadový obrázok.</p>
+                <div className="space-y-3">
+                  <div>
+                    <label className="text-[10px] text-gray-600 font-semibold block mb-0.5">Cieľová URL (kam to smeruje)</label>
+                    <input
+                      type="text"
+                      value={module.data.item1?.linkUrl || ''}
+                      onChange={(e) => updateData({
+                        item1: { ...module.data.item1, linkUrl: e.target.value }
+                      })}
+                      className="w-full text-xs border border-gray-300 rounded p-1.5 bg-white"
+                    />
+                  </div>
+                  <ImageUploadInput
+                    label="Náhľadový obrázok letáku (PNG/JPG)"
+                    value={module.data.item1?.imageUrl || ''}
+                    onChange={(url) => updateData({
+                      item1: { ...module.data.item1, imageUrl: url }
+                    })}
+                  />
+                </div>
+              </div>
+
+              <div className="p-3 bg-amber-50/50 rounded-xl border border-amber-100">
+                <span className="text-xs font-bold text-amber-900 block mb-1">
+                  Leták 2: {module.data.item2?.title || 'Rozšírený leták'}
+                </span>
+                <p className="text-[11px] text-gray-500 mb-3">Farby, texty a rozloženie sú fixne podľa šablóny. Môžete upraviť odkaz a náhľadový obrázok.</p>
+                <div className="space-y-3">
+                  <div>
+                    <label className="text-[10px] text-gray-600 font-semibold block mb-0.5">Cieľová URL (kam to smeruje)</label>
+                    <input
+                      type="text"
+                      value={module.data.item2?.linkUrl || ''}
+                      onChange={(e) => updateData({
+                        item2: { ...module.data.item2, linkUrl: e.target.value }
+                      })}
+                      className="w-full text-xs border border-gray-300 rounded p-1.5 bg-white"
+                    />
+                  </div>
+                  <ImageUploadInput
+                    label="Náhľadový obrázok letáku (PNG/JPG)"
+                    value={module.data.item2?.imageUrl || ''}
+                    onChange={(url) => updateData({
+                      item2: { ...module.data.item2, imageUrl: url }
+                    })}
+                  />
+                </div>
+              </div>
+            </div>
+          ) : (
+            /* AK SÚ TO ČLÁNKY (VEĽKONOČNÝ BARANČEK / VAJÍČKO AMULET) */
+            <div className="space-y-4">
+              <div className="p-3 bg-orange-50/50 rounded-xl border border-orange-100">
+                <span className="text-xs font-bold text-orange-900 block mb-1">
+                  Článok 1 (Recepty)
+                </span>
+                <p className="text-[11px] text-gray-500 mb-3">Logá a gradienty sú na pevno. Môžete upraviť text, odkaz a obrázok v pozadí.</p>
+                <div className="space-y-3">
+                  <div>
+                    <label className="text-[10px] text-gray-600 font-semibold block mb-0.5">Názov / Text článku</label>
+                    <input
+                      type="text"
+                      value={module.data.item1?.title || ''}
+                      onChange={(e) => updateData({
+                        item1: { ...module.data.item1, title: e.target.value }
+                      })}
+                      className="w-full text-xs border border-gray-300 rounded p-1.5 bg-white font-bold"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-[10px] text-gray-600 font-semibold block mb-0.5">Cieľová URL (odkaz)</label>
+                    <input
+                      type="text"
+                      value={module.data.item1?.linkUrl || ''}
+                      onChange={(e) => updateData({
+                        item1: { ...module.data.item1, linkUrl: e.target.value }
+                      })}
+                      className="w-full text-xs border border-gray-300 rounded p-1.5 bg-white"
+                    />
+                  </div>
+                  <ImageUploadInput
+                    label="Obrázok v pozadí"
+                    value={module.data.item1?.imageUrl || ''}
+                    onChange={(url) => updateData({
+                      item1: { ...module.data.item1, imageUrl: url }
+                    })}
+                  />
+                </div>
+              </div>
+
+              <div className="p-3 bg-blue-50/50 rounded-xl border border-blue-100">
+                <span className="text-xs font-bold text-blue-900 block mb-1">
+                  Článok 2 (Časopis Jednota)
+                </span>
+                <p className="text-[11px] text-gray-500 mb-3">Logá a gradienty sú na pevno. Môžete upraviť text, odkaz a obrázok v pozadí.</p>
+                <div className="space-y-3">
+                  <div>
+                    <label className="text-[10px] text-gray-600 font-semibold block mb-0.5">Názov / Text článku</label>
+                    <input
+                      type="text"
+                      value={module.data.item2?.title || ''}
+                      onChange={(e) => updateData({
+                        item2: { ...module.data.item2, title: e.target.value }
+                      })}
+                      className="w-full text-xs border border-gray-300 rounded p-1.5 bg-white font-bold"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-[10px] text-gray-600 font-semibold block mb-0.5">Cieľová URL (odkaz)</label>
+                    <input
+                      type="text"
+                      value={module.data.item2?.linkUrl || ''}
+                      onChange={(e) => updateData({
+                        item2: { ...module.data.item2, linkUrl: e.target.value }
+                      })}
+                      className="w-full text-xs border border-gray-300 rounded p-1.5 bg-white"
+                    />
+                  </div>
+                  <ImageUploadInput
+                    label="Obrázok v pozadí"
+                    value={module.data.item2?.imageUrl || ''}
+                    onChange={(url) => updateData({
+                      item2: { ...module.data.item2, imageUrl: url }
+                    })}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
       {/* FOOTER */}
       {module.type === 'footer' && (
         <div className="space-y-4">
@@ -419,11 +985,29 @@ export const ConfigPanel: React.FC<ConfigPanelProps> = ({
             />
           </div>
           <div>
-            <label className="block text-xs font-semibold text-gray-700 mb-1">Text odhlásenia</label>
+            <label className="block text-xs font-semibold text-gray-700 mb-1">Odkaz pre odhlásenie (Unsubscribe URL)</label>
             <input
               type="text"
-              value={module.data.unsubscribeText || ''}
+              value={module.data.unsubscribeUrl || ''}
-              onChange={(e) => updateData({ unsubscribeText: e.target.value })}
+              onChange={(e) => updateData({ unsubscribeUrl: e.target.value })}
+              className="w-full text-sm border border-gray-300 rounded-lg p-2"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-semibold text-gray-700 mb-1">Google Play URL</label>
+            <input
+              type="text"
+              value={module.data.googlePlayUrl || ''}
+              onChange={(e) => updateData({ googlePlayUrl: e.target.value })}
+              className="w-full text-sm border border-gray-300 rounded-lg p-2"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-semibold text-gray-700 mb-1">App Store URL</label>
+            <input
+              type="text"
+              value={module.data.appStoreUrl || ''}
+              onChange={(e) => updateData({ appStoreUrl: e.target.value })}
               className="w-full text-sm border border-gray-300 rounded-lg p-2"
             />
           </div>

src/components/editor/ImageUploadInput.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+import { Upload, Loader2, Image as ImageIcon } from 'lucide-react';
+
+interface ImageUploadInputProps {
+  label?: string;
+  value: string;
+  onChange: (url: string) => void;
+  placeholder?: string;
+}
+
+export const ImageUploadInput: React.FC<ImageUploadInputProps> = ({
+  label = 'Obrázok',
+  value,
+  onChange,
+  placeholder = 'https://... alebo nahrajte súbor'
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isUploading, setIsUploading] = useState(false);
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setIsUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const res = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData
+      });
+
+      const data = await res.json();
+      if (data.success && data.url) {
+        onChange(data.url);
+      } else {
+        alert(`Chyba pri nahrávaní obrázka: ${data.error || 'Neznáma chyba'}`);
+      }
+    } catch (err: any) {
+      alert(`Chyba: ${err.message}`);
+    } finally {
+      setIsUploading(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  };
+
+  return (
+    <div className="space-y-1.5">
+      {label && <label className="block text-[11px] font-semibold text-gray-700">{label}</label>}
+
+      <div className="flex items-center gap-2">
+        {/* Náhľad miniatúry */}
+        <div className="w-10 h-10 rounded-lg bg-gray-100 border border-gray-200 flex-shrink-0 flex items-center justify-center overflow-hidden">
+          {value ? (
+            <img
+              src={value}
+              alt="Náhľad"
+              className="w-full h-full object-contain"
+              onError={(e) => {
+                (e.target as HTMLElement).style.display = 'none';
+              }}
+            />
+          ) : (
+            <ImageIcon className="w-4 h-4 text-gray-400" />
+          )}
+        </div>
+
+        {/* Textové pole s URL */}
+        <input
+          type="text"
+          value={value || ''}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          className="flex-1 text-xs font-mono border border-gray-300 rounded-lg p-2 bg-white"
+        />
+
+        {/* Tlačidlo nahrávania */}
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={handleFileChange}
+          accept="image/*"
+          className="hidden"
+        />
+        <button
+          type="button"
+          onClick={() => fileInputRef.current?.click()}
+          disabled={isUploading}
+          className="px-2.5 py-2 text-xs font-bold text-gray-700 bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-lg flex items-center gap-1 transition-colors whitespace-nowrap disabled:opacity-50"
+          title="Nahrať obrázok zo zariadenia"
+        >
+          {isUploading ? (
+            <>
+              <Loader2 className="w-3.5 h-3.5 animate-spin text-red-600" />
+              <span>Nahrávam...</span>
+            </>
+          ) : (
+            <>
+              <Upload className="w-3.5 h-3.5" />
+              <span>Nahrať</span>
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+};

src/components/editor/SavedCampaignsModal.tsx

@@ -0,0 +1,364 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { supabase } from '@/lib/supabase';
+import { NewsletterCampaign } from '@/types/newsletter';
+import { DEFAULT_CAMPAIGN } from '@/lib/defaultCampaign';
+import {
+  FolderOpen,
+  Plus,
+  Copy,
+  Trash2,
+  X,
+  ExternalLink,
+  Clock,
+  CheckCircle2,
+  Layers,
+  Search,
+  Sparkles
+} from 'lucide-react';
+
+interface SavedCampaignsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  currentCampaign: NewsletterCampaign;
+  onLoadCampaign: (campaign: NewsletterCampaign) => void;
+  onSaveCurrentAsCopy: (newTitle: string) => Promise<void>;
+}
+
+export const SavedCampaignsModal: React.FC<SavedCampaignsModalProps> = ({
+  isOpen,
+  onClose,
+  currentCampaign,
+  onLoadCampaign,
+  onSaveCurrentAsCopy
+}) => {
+  const [campaigns, setCampaigns] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [search, setSearch] = useState('');
+  const [isCreatingNew, setIsCreatingNew] = useState(false);
+  const [newTitle, setNewTitle] = useState('');
+
+  const fetchCampaigns = async () => {
+    setLoading(true);
+    try {
+      const { data, error } = await supabase
+        .from('templates')
+        .select('*')
+        .order('updated_at', { ascending: false });
+
+      if (error) throw error;
+      setCampaigns(data || []);
+    } catch (err: any) {
+      console.error('Error fetching campaigns:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchCampaigns();
+      setIsCreatingNew(false);
+      setNewTitle('');
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleDuplicate = async (camp: any) => {
+    try {
+      const clonedTitle = `Kópia - ${camp.title}`;
+      const { data, error } = await supabase
+        .from('templates')
+        .insert([
+          {
+            title: clonedTitle,
+            status: 'draft',
+            data: camp.data
+          }
+        ])
+        .select();
+
+      if (error) throw error;
+      if (data && data[0]) {
+        await fetchCampaigns();
+        onLoadCampaign({
+          id: data[0].id,
+          title: data[0].title,
+          preheader: data[0].data?.preheader || '',
+          status: 'draft',
+          modules: data[0].data?.modules || []
+        });
+        onClose();
+      }
+    } catch (err: any) {
+      alert(`Chyba pri duplikovaní: ${err.message}`);
+    }
+  };
+
+  const handleDelete = async (id: string, title: string) => {
+    if (!confirm(`Naozaj chcete vymazať newsletter "${title}"?`)) return;
+
+    try {
+      const { error } = await supabase.from('templates').delete().eq('id', id);
+      if (error) throw error;
+      setCampaigns((prev) => prev.filter((c) => c.id !== id));
+      if (currentCampaign.id === id) {
+        // Ak sme vymazali práve otvorený, resetneme ID
+        onLoadCampaign({ ...currentCampaign, id: '' });
+      }
+    } catch (err: any) {
+      alert(`Chyba pri mazaní: ${err.message}`);
+    }
+  };
+
+  const handleCreateNew = async () => {
+    const title = newTitle.trim() || `COOP Newsletter - ${new Date().toLocaleDateString('sk-SK')}`;
+    try {
+      const { data, error } = await supabase
+        .from('templates')
+        .insert([
+          {
+            title,
+            status: 'draft',
+            data: {
+              preheader: DEFAULT_CAMPAIGN.preheader,
+              modules: JSON.parse(JSON.stringify(DEFAULT_CAMPAIGN.modules))
+            }
+          }
+        ])
+        .select();
+
+      if (error) throw error;
+      if (data && data[0]) {
+        onLoadCampaign({
+          id: data[0].id,
+          title: data[0].title,
+          preheader: data[0].data?.preheader || '',
+          status: 'draft',
+          modules: data[0].data?.modules || []
+        });
+        onClose();
+      }
+    } catch (err: any) {
+      alert(`Chyba pri vytváraní: ${err.message}`);
+    }
+  };
+
+  const handleSaveCurrentCopy = async () => {
+    const title = newTitle.trim() || `Kópia - ${currentCampaign.title}`;
+    await onSaveCurrentAsCopy(title);
+    await fetchCampaigns();
+    setIsCreatingNew(false);
+    setNewTitle('');
+    onClose();
+  };
+
+  const filtered = campaigns.filter((c) =>
+    (c.title || '').toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
+      <div className="bg-white rounded-3xl shadow-2xl max-w-4xl w-full max-h-[85vh] flex flex-col overflow-hidden border border-gray-100">
+        {/* Horná lišta */}
+        <div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between bg-slate-50">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-2xl bg-red-100 flex items-center justify-center text-red-600">
+              <FolderOpen className="w-5 h-5" />
+            </div>
+            <div>
+              <h2 className="text-base font-bold text-gray-900">Moje Newslettre</h2>
+              <p className="text-xs text-gray-500">Spravujte, otvárajte a duplikujte uložené šablóny e-mailov</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setIsCreatingNew((prev) => !prev)}
+              className="px-3.5 py-2 text-xs font-bold bg-[#e2001a] hover:bg-[#b80015] text-white rounded-xl flex items-center gap-1.5 shadow-sm transition-all"
+            >
+              <Plus className="w-4 h-4" />
+              <span>Nový newsletter</span>
+            </button>
+            <button
+              onClick={onClose}
+              className="w-9 h-9 rounded-xl hover:bg-gray-200 text-gray-400 hover:text-gray-700 flex items-center justify-center transition-colors"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Panel na vytvorenie / uloženie kópie */}
+        {isCreatingNew && (
+          <div className="p-4 bg-red-50/50 border-b border-red-100 flex flex-col sm:flex-row items-center gap-3">
+            <div className="flex-1 w-full">
+              <input
+                type="text"
+                value={newTitle}
+                onChange={(e) => setNewTitle(e.target.value)}
+                placeholder="Zadajte názov nového newslettera (napr. Kampaň Veľká Noc 2026)"
+                className="w-full text-xs border border-gray-300 rounded-xl p-2.5 bg-white font-medium focus:ring-2 focus:ring-red-500 focus:outline-none"
+                autoFocus
+              />
+            </div>
+            <div className="flex items-center gap-2 w-full sm:w-auto">
+              <button
+                onClick={handleCreateNew}
+                className="flex-1 sm:flex-initial px-3.5 py-2 text-xs font-bold bg-slate-900 hover:bg-black text-white rounded-xl whitespace-nowrap"
+              >
+                Vytvoriť čistý z predlohy
+              </button>
+              <button
+                onClick={handleSaveCurrentCopy}
+                className="flex-1 sm:flex-initial px-3.5 py-2 text-xs font-bold bg-[#003399] hover:bg-blue-900 text-white rounded-xl whitespace-nowrap"
+              >
+                Uložiť aktuálny ako kópiu
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Vyhľadávanie */}
+        <div className="p-4 border-b border-gray-100 bg-white">
+          <div className="relative">
+            <Search className="w-4 h-4 text-gray-400 absolute left-3 top-3" />
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Vyhľadávať medzi uloženými newslettrami..."
+              className="w-full pl-9 pr-4 py-2 text-xs border border-gray-200 rounded-xl bg-gray-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-red-500"
+            />
+          </div>
+        </div>
+
+        {/* Zoznam kampaní */}
+        <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-slate-50/50">
+          {loading ? (
+            <div className="py-12 text-center text-sm text-gray-400">Načítavam uložené newslettre...</div>
+          ) : filtered.length === 0 ? (
+            <div className="py-12 text-center text-gray-400 space-y-2">
+              <Sparkles className="w-8 h-8 text-gray-300 mx-auto" />
+              <p className="text-sm font-semibold text-gray-600">Nenašli sa žiadne uložené newslettre</p>
+              <p className="text-xs text-gray-400">Vytvorte nový kliknutím na tlačidlo vyššie.</p>
+            </div>
+          ) : (
+            filtered.map((camp) => {
+              const isCurrent = camp.id === currentCampaign.id;
+              const moduleCount = camp.data?.modules?.length || 0;
+              const isExported = camp.status === 'exported' || !!camp.brevo_campaign_id;
+              const updatedDate = camp.updated_at
+                ? new Date(camp.updated_at).toLocaleString('sk-SK', {
+                    day: 'numeric',
+                    month: 'numeric',
+                    year: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                  })
+                : 'Neznámy dátum';
+
+              return (
+                <div
+                  key={camp.id}
+                  className={`p-4 rounded-2xl border transition-all flex flex-col sm:flex-row sm:items-center justify-between gap-3 ${
+                    isCurrent
+                      ? 'bg-red-50/50 border-red-300 ring-2 ring-red-500/10'
+                      : 'bg-white border-gray-200 hover:border-gray-300 hover:shadow-sm'
+                  }`}
+                >
+                  <div className="space-y-1">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-bold text-gray-900">{camp.title}</span>
+                      {isCurrent && (
+                        <span className="text-[10px] font-bold bg-red-600 text-white px-2 py-0.5 rounded-full uppercase tracking-wider">
+                          Práve otvorený
+                        </span>
+                      )}
+                      {isExported && (
+                        <span className="text-[10px] font-bold bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded-full flex items-center gap-1">
+                          <CheckCircle2 className="w-3 h-3 text-emerald-600" /> Vytvorené v Brevo
+                        </span>
+                      )}
+                    </div>
+
+                    <div className="flex items-center gap-4 text-xs text-gray-500">
+                      <span className="flex items-center gap-1">
+                        <Clock className="w-3.5 h-3.5 text-gray-400" /> {updatedDate}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Layers className="w-3.5 h-3.5 text-gray-400" /> {moduleCount} modulov
+                      </span>
+                      {camp.brevo_campaign_id && (
+                        <a
+                          href={`https://app.brevo.com/campaigns/email/edit/${camp.brevo_campaign_id}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-blue-600 hover:underline flex items-center gap-1 font-semibold"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <span>Brevo #{camp.brevo_campaign_id}</span>
+                          <ExternalLink className="w-3 h-3" />
+                        </a>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Akčné tlačidlá */}
+                  <div className="flex items-center gap-2 pt-2 sm:pt-0">
+                    <button
+                      onClick={() => {
+                        onLoadCampaign({
+                          id: camp.id,
+                          title: camp.title,
+                          preheader: camp.data?.preheader || '',
+                          status: camp.status || 'draft',
+                          brevoCampaignId: camp.brevo_campaign_id,
+                          modules: camp.data?.modules || []
+                        });
+                        onClose();
+                      }}
+                      className="px-3 py-1.5 text-xs font-bold bg-slate-900 hover:bg-black text-white rounded-xl transition-colors"
+                    >
+                      {isCurrent ? 'Pokračovať v úprave' : 'Otvoriť'}
+                    </button>
+
+                    <button
+                      onClick={() => handleDuplicate(camp)}
+                      className="px-3 py-1.5 text-xs font-bold bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl flex items-center gap-1 transition-colors"
+                      title="Vytvoriť kópiu"
+                    >
+                      <Copy className="w-3.5 h-3.5" />
+                      <span>Duplikovať</span>
+                    </button>
+
+                    <button
+                      onClick={() => handleDelete(camp.id, camp.title)}
+                      className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition-colors"
+                      title="Vymazať"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </div>
+
+        {/* Pätička */}
+        <div className="px-6 py-3.5 border-t border-gray-100 bg-white flex items-center justify-between text-xs text-gray-500">
+          <span>Celkovo uložených: {campaigns.length} newsletterov</span>
+          <button
+            onClick={onClose}
+            className="px-4 py-1.5 font-bold text-gray-600 hover:bg-gray-100 rounded-xl transition-colors"
+          >
+            Zatvoriť
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/editor/TopBar.tsx

@@ -1,12 +1,16 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Download,
   Send,
   ExternalLink,
   CheckCircle2,
-  Plus
+  Plus,
+  FolderOpen,
+  Save,
+  Copy,
+  Edit2
 } from 'lucide-react';
 import { NewsletterCampaign } from '@/types/newsletter';
 
@@ -14,10 +18,14 @@ interface TopBarProps {
   campaign: NewsletterCampaign;
   isSaving: boolean;
   onSave: () => void;
+  onUpdateTitle: (title: string) => void;
+  onOpenSavedCampaigns: () => void;
+  onDuplicateCampaign: () => void;
   onExportZip: () => void;
   onExportBrevo: () => void;
   isExportingBrevo: boolean;
   brevoCampaignUrl?: string | null;
+  brevoListingUrl?: string | null;
   onAddModule: (type: any) => void;
 }
 
@@ -25,81 +33,156 @@ export const TopBar: React.FC<TopBarProps> = ({
   campaign,
   isSaving,
   onSave,
+  onUpdateTitle,
+  onOpenSavedCampaigns,
+  onDuplicateCampaign,
   onExportZip,
   onExportBrevo,
   isExportingBrevo,
   brevoCampaignUrl,
+  brevoListingUrl = 'https://app.brevo.com/campaigns/listing',
   onAddModule
 }) => {
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+
   return (
-    <header className="h-16 bg-white border-b border-gray-200 px-6 flex items-center justify-between sticky top-0 z-30 shadow-xs">
+    <header className="h-16 bg-white border-b border-gray-200 px-4 md:px-6 flex items-center justify-between sticky top-0 z-30 shadow-xs">
-      {/* Ľavá časť: Logo a stav */}
+      {/* Ľavá časť: Logo, Moje newslettre, Titulok a stav */}
-      <div className="flex items-center gap-4">
       <div className="flex items-center gap-3">
-          <div className="w-9 h-9 rounded-xl bg-[#e2001a] flex items-center justify-center text-white font-black text-sm shadow-sm tracking-tighter">
+        <div className="w-9 h-9 rounded-xl bg-[#e2001a] flex items-center justify-center text-white font-black text-sm shadow-sm tracking-tighter shrink-0">
           COOP
         </div>
-          <div>
+
-            <h1 className="text-sm font-bold text-gray-900 leading-tight">
+        {/* Tlačidlo Moje newslettre */}
+        <button
+          onClick={onOpenSavedCampaigns}
+          className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-gray-100 hover:bg-gray-200 px-3 py-1.5 rounded-xl border border-gray-200 transition-colors shadow-xs"
+          title="Otvoriť, duplikovať alebo vytvoriť nový newsletter"
+        >
+          <FolderOpen className="w-3.5 h-3.5 text-blue-600" />
+          <span className="hidden sm:inline">Moje newslettre</span>
+        </button>
+
+        <div className="h-6 w-px bg-gray-200 mx-1 hidden sm:block" />
+
+        {/* Názov kampane */}
+        <div className="flex flex-col">
+          {isEditingTitle ? (
+            <input
+              type="text"
+              autoFocus
+              value={campaign.title || ''}
+              onChange={(e) => onUpdateTitle(e.target.value)}
+              onBlur={() => setIsEditingTitle(false)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') setIsEditingTitle(false);
+              }}
+              className="text-xs font-bold text-gray-900 border border-blue-400 rounded px-2 py-0.5 outline-none bg-blue-50/50 w-56"
+            />
+          ) : (
+            <div
+              onClick={() => setIsEditingTitle(true)}
+              className="group flex items-center gap-1.5 cursor-pointer"
+              title="Kliknite pre úpravu názvu"
+            >
+              <h1 className="text-xs md:text-sm font-bold text-gray-900 leading-tight max-w-[200px] md:max-w-xs truncate group-hover:text-blue-600">
                 {campaign.title || 'COOP Jednota Newsletter'}
               </h1>
+              <Edit2 className="w-3 h-3 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
+            </div>
+          )}
+
           <div className="flex items-center gap-2 mt-0.5">
-              <span className="text-[11px] text-gray-500">
+            <span className="text-[10px] text-gray-500">
               {isSaving ? (
-                  <span className="text-amber-600 font-medium animate-pulse">Ukladám do Supabase...</span>
+                <span className="text-amber-600 font-medium animate-pulse">Ukladám...</span>
               ) : (
                 <span className="text-emerald-600 font-medium flex items-center gap-1">
-                    <CheckCircle2 className="w-3.5 h-3.5" /> Uložené v databáze (Auto-save)
+                  <CheckCircle2 className="w-3 h-3" /> Uložené
                 </span>
               )}
             </span>
           </div>
         </div>
-        </div>
 
         {/* Pridanie sekcie */}
-        <div className="hidden md:flex items-center gap-2 ml-6 pl-6 border-l border-gray-200">
+        <div className="hidden lg:flex items-center gap-2 ml-4 pl-4 border-l border-gray-200">
           <button
             onClick={() => onAddModule('banner')}
-            className="text-xs font-bold text-gray-700 bg-gray-100 hover:bg-gray-200 px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition-colors"
+            className="text-[11px] font-bold text-gray-700 bg-gray-50 hover:bg-gray-100 border border-gray-200 px-2.5 py-1 rounded-lg flex items-center gap-1 transition-colors"
           >
-            <Plus className="w-3.5 h-3.5 text-gray-500" /> Nový Banner
+            <Plus className="w-3 h-3 text-gray-500" /> Nový Banner
           </button>
           <button
             onClick={() => onAddModule('products_grid')}
-            className="text-xs font-bold text-gray-700 bg-gray-100 hover:bg-gray-200 px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition-colors"
+            className="text-[11px] font-bold text-gray-700 bg-gray-50 hover:bg-gray-100 border border-gray-200 px-2.5 py-1 rounded-lg flex items-center gap-1 transition-colors"
           >
-            <Plus className="w-3.5 h-3.5 text-gray-500" /> Produktový rad
+            <Plus className="w-3 h-3 text-gray-500" /> Produktový rad
           </button>
         </div>
       </div>
 
-      {/* Pravá časť: Export do ZIP a Brevo */}
+      {/* Pravá časť: Uložiť, Duplikovať, Export do ZIP a Brevo */}
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-2">
+        {/* Tlačidlo manuálneho uloženia */}
+        <button
+          onClick={onSave}
+          disabled={isSaving}
+          className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 disabled:opacity-50 px-3 py-1.5 rounded-xl transition-all shadow-xs"
+          title="Uložiť zmeny ihneď do databázy"
+        >
+          <Save className="w-3.5 h-3.5 text-gray-600" />
+          <span className="hidden md:inline">Uložiť</span>
+        </button>
+
+        {/* Tlačidlo duplikovania celej kampane */}
+        <button
+          onClick={onDuplicateCampaign}
+          className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 px-3 py-1.5 rounded-xl transition-all shadow-xs"
+          title="Vytvoriť kópiu tohto newslettera"
+        >
+          <Copy className="w-3.5 h-3.5 text-gray-600" />
+          <span className="hidden md:inline">Duplikovať</span>
+        </button>
+
         <button
           onClick={onExportZip}
-          className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 px-4 py-2 rounded-xl transition-all shadow-xs hover:shadow-sm"
+          className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 px-3.5 py-1.5 rounded-xl transition-all shadow-xs"
         >
-          <Download className="w-4 h-4 text-gray-600" /> Export ZIP
+          <Download className="w-3.5 h-3.5 text-gray-600" />
+          <span className="hidden sm:inline">Export ZIP</span>
         </button>
 
         {brevoCampaignUrl ? (
+          <div className="flex items-center gap-1.5">
             <a
               href={brevoCampaignUrl}
               target="_blank"
               rel="noreferrer"
-            className="flex items-center gap-1.5 text-xs font-bold text-emerald-700 bg-emerald-50 border border-emerald-300 hover:bg-emerald-100 px-4 py-2 rounded-xl transition-all shadow-xs"
+              className="flex items-center gap-1.5 text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-700 px-3.5 py-1.5 rounded-xl transition-all shadow-xs"
+              title="Upraviť a odoslať kampaň priamo v Brevo"
             >
-            <ExternalLink className="w-4 h-4" /> Otvoriť v Brevo
+              <ExternalLink className="w-3.5 h-3.5" />
+              <span>Upraviť v Brevo</span>
             </a>
+            <a
+              href={brevoListingUrl || 'https://app.brevo.com/campaigns/listing'}
+              target="_blank"
+              rel="noreferrer"
+              className="hidden lg:flex items-center gap-1 text-[11px] font-bold text-emerald-800 bg-emerald-100 hover:bg-emerald-200 px-2.5 py-1.5 rounded-xl transition-all"
+              title="Prehľad všetkých e-mailových kampaní v Brevo"
+            >
+              Zoznam
+            </a>
+          </div>
         ) : (
           <button
             onClick={onExportBrevo}
             disabled={isExportingBrevo}
-            className="flex items-center gap-1.5 text-xs font-bold text-white bg-[#003399] hover:bg-blue-800 disabled:opacity-50 px-4 py-2 rounded-xl transition-all shadow-xs"
+            className="flex items-center gap-1.5 text-xs font-bold text-white bg-[#003399] hover:bg-blue-800 disabled:opacity-50 px-3.5 py-1.5 rounded-xl transition-all shadow-xs"
           >
-            <Send className="w-4 h-4" />
+            <Send className="w-3.5 h-3.5" />
-            {isExportingBrevo ? 'Odosielam...' : 'Odoslať do Brevo'}
+            <span>{isExportingBrevo ? 'Odosielam...' : 'Odoslať do Brevo'}</span>
           </button>
         )}
       </div>

src/lib/emailRenderer.ts

@@ -209,12 +209,12 @@ function renderModule(m: any, campaign: NewsletterCampaign): string {
       <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 15px 0 20px 0;">
           <tr>
               <td align="center">
-                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" class="force-bg-red" bgcolor="#e2001a" style="background-color: #e2001a; background: linear-gradient(to right, #ff3d4f, #e2001a); border-radius: 12px; box-shadow: 0 10px 25px rgba(226, 0, 26, 0.3); border: 1px solid rgba(255,255,255,0.2);">
+                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" class="force-bg-red" bgcolor="#e2001a" style="background-color: #e2001a; background: linear-gradient(to right, #ff3d4f, #e2001a); border: 0; border-radius: 12px; box-shadow: 0 10px 25px rgba(226, 0, 26, 0.3);">
                       <tr>
                           <td style="padding: 10px 20px; text-align: center;">
                               <!--[if mso]><table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600"><tr><td align="center" valign="middle"><![endif]-->
                               <div style="display: inline-block; vertical-align: middle;" class="stack-column-center">
-                                  <span class="top-tip" style="background-color: #fefefe; color: #e2001a; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; margin: 4px 5px; vertical-align: middle; display: inline-block; letter-spacing: 1px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">${escapeHtml(m.data.tipBadge || 'TIP')}</span>
+                                  <span class="top-tip" style="background-color: #fefefe; color: #e2001a; font-size: 10px; font-weight: 800; padding: 2px 8px; border: 0; border-radius: 4px; margin: 4px 5px; vertical-align: middle; display: inline-block; letter-spacing: 1px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">${escapeHtml(m.data.tipBadge || 'TIP')}</span>
                               </div>
                               <div style="display: inline-block; vertical-align: middle;" class="stack-column-center">
                                   <span class="top-msg force-text-white" style="color: #fefefe; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; vertical-align: middle; display: inline-block; padding: 5px 10px;">${escapeHtml(m.data.text || '')}</span>
@@ -232,16 +232,20 @@ function renderModule(m: any, campaign: NewsletterCampaign): string {
       </table>`;
 
     case 'header':
-      const navLinks = (m.data.navLinks || []).map((link: any) => {
+      const rawNav = m.data.navLinks && m.data.navLinks.length > 0 ? m.data.navLinks : [
+        { label: 'Letáky', url: 'https://www.coop.sk/sk/letaky', variant: 'outline' },
+        { label: 'COOP Klub', url: 'https://www.coopklub.sk', variant: 'filled' }
+      ];
+      const navLinks = rawNav.map((link: any) => {
         if (link.variant === 'filled') {
-          return `<a href="${escapeHtml(link.url)}" class="header-link force-text-white force-bg-blue" style="color: #fefefe; font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; padding: 10px 16px; background-color: #003399; border-radius: 20px; display: inline-block; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(0, 51, 153, 0.2);">${escapeHtml(link.label)}</a>`;
+          return `<a href="${escapeHtml(link.url || '#')}" class="header-link force-text-white force-bg-blue" style="color: #fefefe; font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; padding: 10px 16px; background-color: #003399; border-radius: 20px; display: inline-block; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(0, 51, 153, 0.2);">${escapeHtml(link.label || 'Odkaz')}</a>`;
         }
-        return `<a href="${escapeHtml(link.url)}" class="header-link" style="color: #e2001a; font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; padding: 8px 16px; border: 2px solid #e2001a; border-radius: 20px; margin-right: 6px; display: inline-block; letter-spacing: 0.5px;">${escapeHtml(link.label)}</a>`;
+        return `<a href="${escapeHtml(link.url || '#')}" class="header-link" style="color: #e2001a; font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; padding: 8px 16px; border: 2px solid #e2001a; border-radius: 20px; margin-right: 6px; display: inline-block; letter-spacing: 0.5px;">${escapeHtml(link.label || 'Odkaz')}</a>`;
       }).join('\n');
 
       return `
       <!-- 1. HLAVIČKA -->
-      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" class="card-white card-white-bg" bgcolor="#fefefe" style="background-color: #fefefe; border: 1px solid #fefefe; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); overflow: hidden;">
+      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" class="card-white card-white-bg" bgcolor="#fefefe" style="background-color: #fefefe; border: 0; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); overflow: hidden;">
           <tr>
               <td style="padding: 15px 20px;" class="mobile-padding">
                   <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
@@ -264,11 +268,11 @@ function renderModule(m: any, campaign: NewsletterCampaign): string {
     case 'banner':
       return `
       <!-- KAMPAŇ BANNER -->
-      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" class="card-white card-white-bg" bgcolor="#fefefe" style="background-color: #fefefe; border: 1px solid #fefefe; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); overflow: hidden;">
+      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" class="card-white card-white-bg" bgcolor="#fefefe" style="background-color: #fefefe; border: 0; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); overflow: hidden;">
           <tr>
               <td>
                   <a href="${escapeHtml(m.data.linkUrl || '#')}">
-                      <img src="${escapeHtml(m.data.imageUrl)}" width="600" alt="${escapeHtml(m.data.altText || '')}" style="display: block; border: 0; width: 100%; max-width: 100%; border-top-left-radius: 16px; border-top-right-radius: 16px;">
+                      <img src="${escapeHtml(m.data.imageUrl)}" width="600" alt="${escapeHtml(m.data.altText || '')}" style="display: block; border: 0; width: 100%; max-width: 100%; border-radius: ${m.data.title || m.data.description || m.data.buttonText ? '16px 16px 0 0' : '16px'};">
                   </a>
               </td>
           </tr>
@@ -335,6 +339,9 @@ function renderModule(m: any, campaign: NewsletterCampaign): string {
       </table>`;
 
     case 'loyalty_club':
+      if (m.data.enabled === false) {
+        return '';
+      }
       const lProducts = m.data.products || [];
       return `
       <!-- 7. VERNOSTNÉ ZĽAVY (COOP KLUB) -->
@@ -347,7 +354,7 @@ function renderModule(m: any, campaign: NewsletterCampaign): string {
           <!-- Banner karta -->
           <tr>
               <td style="padding-bottom: 20px;">
-                  <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" class="card-white card-vernostna" bgcolor="#e6e1d9" style="background-color: #e6e1d9; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); overflow: hidden;">
+                  <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" class="card-white card-vernostna" bgcolor="#e6e1d9" style="background-color: #e6e1d9; border: 0; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); overflow: hidden;">
                       <tr>
                           <td>
                               <a href="${escapeHtml(m.data.headerLink || '#')}">
@@ -386,7 +393,7 @@ function renderModule(m: any, campaign: NewsletterCampaign): string {
             <tr>
                 <!-- Leták 1 -->
                 <td width="50%" valign="top" style="padding-right: 6px;">
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="${it1.bgColor}" style="background-color: ${it1.bgColor}; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);">
+                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="${it1.bgColor}" style="background-color: ${it1.bgColor}; border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);">
                         <tr>
                             <td>
                                 <a href="${escapeHtml(it1.linkUrl || '#')}">
@@ -410,7 +417,7 @@ function renderModule(m: any, campaign: NewsletterCampaign): string {
                 </td>
                 <!-- Leták 2 -->
                 <td width="50%" valign="top" style="padding-left: 6px;">
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="${it2.bgColor}" style="background-color: ${it2.bgColor}; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);">
+                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="${it2.bgColor}" style="background-color: ${it2.bgColor}; border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);">
                         <tr>
                             <td>
                                 <a href="${escapeHtml(it2.linkUrl || '#')}">
@@ -444,7 +451,7 @@ function renderModule(m: any, campaign: NewsletterCampaign): string {
           <tr>
               <!-- Článok 1 -->
               <td width="50%" valign="top" style="padding-right: 6px; padding-bottom: 20px;">
-                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="${it1.bgColor}" style="background-color: ${it1.bgColor}; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.15);">
+                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="${it1.bgColor}" style="background-color: ${it1.bgColor}; border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.15);">
                       <tr>
                           <td background="${escapeHtml(it1.imageUrl)}" bgcolor="${it1.bgColor}" width="300" height="240" valign="bottom" style="background-image: url('${escapeHtml(it1.imageUrl)}'); background-size: cover; background-position: center;">
                               <!--[if gte mso 9]>
@@ -473,7 +480,7 @@ function renderModule(m: any, campaign: NewsletterCampaign): string {
               </td>
               <!-- Článok 2 -->
               <td width="50%" valign="top" style="padding-left: 6px; padding-bottom: 20px;">
-                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="${it2.bgColor}" style="background-color: ${it2.bgColor}; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.15);">
+                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="${it2.bgColor}" style="background-color: ${it2.bgColor}; border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.15);">
                       <tr>
                           <td background="${escapeHtml(it2.imageUrl)}" bgcolor="${it2.bgColor}" width="300" height="240" valign="bottom" style="background-image: url('${escapeHtml(it2.imageUrl)}'); background-size: cover; background-position: center;">
                               <!--[if gte mso 9]>
@@ -507,7 +514,7 @@ function renderModule(m: any, campaign: NewsletterCampaign): string {
     case 'footer':
       return `
       <!-- 9. PÄTIČKA (1:1 s originálnou šablónou) -->
-      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" class="card-white card-white-bg" bgcolor="#fefefe" style="background-color: #fefefe; border: 1px solid #fefefe; border-radius: 16px; padding: 40px 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);">
+      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" class="card-white card-white-bg" bgcolor="#fefefe" style="background-color: #fefefe; border: 0; border-radius: 16px; padding: 40px 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);">
           <tr>
               <td style="padding: 30px 10px;">
                   <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
@@ -548,7 +555,7 @@ function renderModule(m: any, campaign: NewsletterCampaign): string {
                   </table>
                   
                   <!-- Disclaimer a Unsubscribe -->
-                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-top: 15px; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 15px;">
+                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-top: 15px; border-top: 0; padding-top: 15px;">
                       <tr>
                           <td class="force-text-dark" style="text-align: center; font-size: 11px; color: #666666; line-height: 1.5;">
                               <a href="${escapeHtml(m.data.recipesUrl || 'https://recepty.coop.sk')}" style="color: #444444; text-decoration: underline;">Prihláste sa</a> aj na odber newslettera (Ne)tradičných receptov.
@@ -584,13 +591,13 @@ function renderExactProductCard(
 
   const storesHtml = `
     <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right">
-        ${p.stores?.potraviny ? `<tr><td align="right" style="line-height: 0;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right"><tr><td style="border: 1px solid #fefefe; background-color: #e2001a; padding: 0; line-height: 0;"><img src="${SUPABASE_ASSETS_BASE}stit_potraviny.png" height="10" alt="P" style="display: block; height: 10px; width: auto;"></td></tr></table></td></tr>` : ''}
+        ${p.stores?.potraviny ? `<tr><td align="right" style="line-height: 0;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right"><tr><td style="border: 0; background-color: #e2001a; padding: 0; line-height: 0;"><img src="${SUPABASE_ASSETS_BASE}stit_potraviny.png" height="10" alt="P" style="display: block; height: 10px; width: auto; border: 0;"></td></tr></table></td></tr>` : ''}
-        ${p.stores?.supermarket ? `<tr><td align="right" style="line-height: 0;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right"><tr><td style="border: 1px solid #fefefe; background-color: #f9890e; padding: 0; line-height: 0; border-top: 0;"><img src="${SUPABASE_ASSETS_BASE}stit_supermarket.png" height="10" alt="S" style="display: block; height: 10px; width: auto;"></td></tr></table></td></tr>` : ''}
+        ${p.stores?.supermarket ? `<tr><td align="right" style="line-height: 0;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right"><tr><td style="border: 0; background-color: #f9890e; padding: 0; line-height: 0;"><img src="${SUPABASE_ASSETS_BASE}stit_supermarket.png" height="10" alt="S" style="display: block; height: 10px; width: auto; border: 0;"></td></tr></table></td></tr>` : ''}
-        ${p.stores?.tempo ? `<tr><td align="right" style="line-height: 0;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right"><tr><td style="border: 1px solid #fefefe; background-color: #005239; padding: 0; line-height: 0; border-top: 0;"><img src="${SUPABASE_ASSETS_BASE}stit_tempo.png" height="10" alt="T" style="display: block; height: 10px; width: auto;"></td></tr></table></td></tr>` : ''}
+        ${p.stores?.tempo ? `<tr><td align="right" style="line-height: 0;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right"><tr><td style="border: 0; background-color: #005239; padding: 0; line-height: 0;"><img src="${SUPABASE_ASSETS_BASE}stit_tempo.png" height="10" alt="T" style="display: block; height: 10px; width: auto; border: 0;"></td></tr></table></td></tr>` : ''}
     </table>`;
 
   return `
-  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" height="100%" class="glass-product" bgcolor="${cardBg}" style="background-color: ${cardBg}; border: 1px solid ${cardBorder}; border-radius: 16px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);">
+  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" height="100%" class="glass-product" bgcolor="${cardBg}" style="background-color: ${cardBg}; border: 0; border-radius: 16px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);">
       <tr>
           <td style="padding: 15px 15px 0 15px;" valign="top">
               <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
@@ -625,7 +632,7 @@ function renderExactProductCard(
               <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 95px; margin: 0 auto;">
                   <tr>
                       <td align="center">
-                          <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="background-color: ${badgeHdrBg}; border: 2px solid #fefefe; border-radius: 12px 0 0 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.18); width: 85px; overflow: hidden;">
+                          <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="background-color: ${badgeHdrBg}; border: 0; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.18); width: 85px; overflow: hidden;">
                               ${badgeCustomTxt ? `
                               <tr>
                                   <td bgcolor="${badgeHdrBg}" style="padding: 4px 4px; text-align: center; background-color: ${badgeHdrBg};">
@@ -639,7 +646,7 @@ function renderExactProductCard(
                                   </td>
                               </tr>` : '')}
                               <tr>
-                                  <td class="force-text-white" bgcolor="${badgePrcBg}" style="background-color: ${badgePrcBg}; padding: 4px 2px 2px 2px; font-family: 'Arial Narrow', Arial, sans-serif; color: ${badgePrcColor}; font-weight: 900; line-height: 1; text-align: center; border-radius: 0 0 0 8px;">
+                                  <td class="force-text-white" bgcolor="${badgePrcBg}" style="background-color: ${badgePrcBg}; padding: 4px 2px 2px 2px; font-family: 'Arial Narrow', Arial, sans-serif; color: ${badgePrcColor}; font-weight: 900; line-height: 1; text-align: center; border-radius: 0 0 12px 12px;">
                                       <span style="font-size: 52px;">${escapeHtml(p.priceMain)}</span><sup style="font-size: 26px; vertical-align: top; line-height: 1.2;">${escapeHtml(p.priceSub)}</sup>
                                   </td>
                               </tr>
@@ -660,20 +667,21 @@ function renderExactProductCard(
 }
 
 function renderExactLoyaltyCard(p: any, validity: string): string {
+  const cardValidity = p.validityOverride || validity;
   const storesHtml = `
     <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right">
-        ${p.stores?.potraviny ? `<tr><td align="right" style="line-height: 0;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right"><tr><td style="border: 1px solid #fefefe; background-color: #e2001a; padding: 0; line-height: 0;"><img src="${SUPABASE_ASSETS_BASE}stit_potraviny.png" height="10" alt="P" style="display: block; height: 10px; width: auto;"></td></tr></table></td></tr>` : ''}
+        ${p.stores?.potraviny ? `<tr><td align="right" style="line-height: 0;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right"><tr><td style="border: 0; background-color: #e2001a; padding: 0; line-height: 0;"><img src="${SUPABASE_ASSETS_BASE}stit_potraviny.png" height="10" alt="P" style="display: block; height: 10px; width: auto; border: 0;"></td></tr></table></td></tr>` : ''}
-        ${p.stores?.supermarket ? `<tr><td align="right" style="line-height: 0;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right"><tr><td style="border: 1px solid #fefefe; background-color: #f9890e; padding: 0; line-height: 0; border-top: 0;"><img src="${SUPABASE_ASSETS_BASE}stit_supermarket.png" height="10" alt="S" style="display: block; height: 10px; width: auto;"></td></tr></table></td></tr>` : ''}
+        ${p.stores?.supermarket ? `<tr><td align="right" style="line-height: 0;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right"><tr><td style="border: 0; background-color: #f9890e; padding: 0; line-height: 0;"><img src="${SUPABASE_ASSETS_BASE}stit_supermarket.png" height="10" alt="S" style="display: block; height: 10px; width: auto; border: 0;"></td></tr></table></td></tr>` : ''}
-        ${p.stores?.tempo ? `<tr><td align="right" style="line-height: 0;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right"><tr><td style="border: 1px solid #fefefe; background-color: #005239; padding: 0; line-height: 0; border-top: 0;"><img src="${SUPABASE_ASSETS_BASE}stit_tempo.png" height="10" alt="T" style="display: block; height: 10px; width: auto;"></td></tr></table></td></tr>` : ''}
+        ${p.stores?.tempo ? `<tr><td align="right" style="line-height: 0;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right"><tr><td style="border: 0; background-color: #005239; padding: 0; line-height: 0;"><img src="${SUPABASE_ASSETS_BASE}stit_tempo.png" height="10" alt="T" style="display: block; height: 10px; width: auto; border: 0;"></td></tr></table></td></tr>` : ''}
     </table>`;
 
   return `
-  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" height="100%" class="glass-product card-vernostna" bgcolor="#e6e1d9" style="background-color: #e6e1d9; border: 1px solid #cfc8bb; border-radius: 16px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);">
+  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" height="100%" class="glass-product card-vernostna" bgcolor="#e6e1d9" style="background-color: #e6e1d9; border: 0; border-radius: 16px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);">
       <tr>
           <td style="padding: 15px 15px 0 15px;" valign="top">
               <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                   <tr>
-                      <td style="font-size: 9px; color: #666666; font-weight: 500;" valign="top">${escapeHtml(validity)}</td>
+                      <td style="font-size: 9px; color: #666666; font-weight: 500;" valign="top">${escapeHtml(cardValidity)}</td>
                       <td align="right">${storesHtml}</td>
                   </tr>
               </table>
@@ -699,7 +707,7 @@ function renderExactLoyaltyCard(p: any, validity: string): string {
                               <tr>
                                   <!-- Bez karty -->
                                   <td width="42%" valign="bottom" style="padding-right: 0;">
-                                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #fefefe; border: 2px solid #fefefe; border-radius: 10px 0 0 10px; box-shadow: -2px 4px 8px rgba(0,0,0,0.12); overflow: hidden;">
+                                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #fefefe; border: 0; border-radius: 10px 0 0 10px; box-shadow: -2px 4px 8px rgba(0,0,0,0.12); overflow: hidden;">
                                           <tr>
                                               <td class="force-bg-red" bgcolor="#e2001a" style="background-color: #e2001a; padding: 4px 2px; text-align: center;">
                                                   <div style="font-size: 6px; color: #fefefe; font-weight: 700; text-transform: uppercase; line-height: 1; margin-bottom: 1px;">Bez karty</div>
@@ -715,7 +723,7 @@ function renderExactLoyaltyCard(p: any, validity: string): string {
                                   </td>
                                   <!-- S kartou -->
                                   <td width="58%" valign="top">
-                                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #fefefe; border: 2px solid #fefefe; border-radius: 10px 0 0 0; box-shadow: 4px 4px 12px rgba(0,0,0,0.15); overflow: hidden;">
+                                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #fefefe; border: 0; border-radius: 0 10px 10px 0; box-shadow: 4px 4px 12px rgba(0,0,0,0.15); overflow: hidden;">
                                           <tr>
                                               <td style="background-color: #fefefe; padding: 5px 4px 2px 4px; text-align: right;">
                                                   <div style="font-size: 7px; color: #e2001a; font-weight: 800; text-transform: uppercase; line-height: 1; text-align: center; margin-bottom: 1px;">S kartou</div>
@@ -726,7 +734,7 @@ function renderExactLoyaltyCard(p: any, validity: string): string {
                                               </td>
                                           </tr>
                                           <tr>
-                                              <td class="force-bg-red force-text-white" bgcolor="#e2001a" style="background-color: #e2001a; padding: 3px 2px; text-align: center; color: #fefefe; font-family: 'Arial Narrow', Arial, sans-serif; font-weight: 900; line-height: 1; border-radius: 0;">
+                                              <td class="force-bg-red force-text-white" bgcolor="#e2001a" style="background-color: #e2001a; padding: 3px 2px; text-align: center; color: #fefefe; font-family: 'Arial Narrow', Arial, sans-serif; font-weight: 900; line-height: 1; border-radius: 0 0 10px 0;">
                                                   <span style="font-size: 48px;">${escapeHtml(p.cardPriceMain)}</span><sup style="font-size: 24px; vertical-align: top; line-height: 1.2;">${escapeHtml(p.cardPriceSub)}</sup>
                                               </td>
                                           </tr>

src/types/newsletter.ts

@@ -146,6 +146,9 @@ export interface BadgeLayer {
   y: number;
   fontSize?: number;
   fontWeight?: string;
+  fontFamily?: string;
+  fontSource?: 'system' | 'google' | 'adobe';
+  fontUrl?: string;
   fill: string;
   align?: 'left' | 'center' | 'right';
 }