From 2605b6281bb8de900aec929789e42fb121ef9c3d Mon Sep 17 00:00:00 2001
From: Jandl-hostacny <jakub.hostacny@jandl.sk>
Date: Wed, 21 Oct 2026 13:01:48 +0200
Subject: [PATCH] feat: nastavitelna farba nadpisu pod bannerom

Cierna (predvolena), COOP modra, COOP cervena alebo vlastna farba.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/editor/ConfigPanel.tsx | 27 +++++++++++++++++++++++++++
 src/lib/emailRenderer.ts              |  2 +-
 src/types/newsletter.ts               |  1 +
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/editor/ConfigPanel.tsx b/src/components/editor/ConfigPanel.tsx
index 9f9a9bc..3e669c8 100644
--- a/src/components/editor/ConfigPanel.tsx
+++ b/src/components/editor/ConfigPanel.tsx
@@ -429,6 +429,33 @@ export const ConfigPanel: React.FC<ConfigPanelProps> = ({
               title="Enter = nový riadok (alebo <br>)"
               className="w-full text-sm border border-gray-300 rounded-lg p-2 resize-y"
             />
+            {/* Farba nadpisu */}
+            <div className="mt-1.5 flex items-center gap-1.5">
+              <span className="text-[10px] font-semibold text-gray-500">Farba nadpisu</span>
+              {[
+                ['#1a1a1a', 'Čierna (predvolená)'],
+                ['#003399', 'COOP modrá'],
+                ['#e2001a', 'COOP červená']
+              ].map(([c, name]) => (
+                <button
+                  key={c}
+                  type="button"
+                  title={name}
+                  onClick={() => updateData({ titleColor: c === '#1a1a1a' ? undefined : c })}
+                  className={`w-5 h-5 rounded-full border ${
+                    (module.data.titleColor || '#1a1a1a').toLowerCase() === c ? 'ring-2 ring-red-500 border-white' : 'border-black/15'
+                  }`}
+                  style={{ backgroundColor: c }}
+                />
+              ))}
+              <input
+                type="color"
+                value={module.data.titleColor || '#1a1a1a'}
+                onChange={(e) => updateData({ titleColor: e.target.value })}
+                className="w-6 h-6 rounded cursor-pointer border border-gray-300 p-0"
+                title="Vlastná farba"
+              />
+            </div>
           </div>
           <div>
             <label className="block text-xs font-semibold text-gray-700 mb-1">Popis</label>
diff --git a/src/lib/emailRenderer.ts b/src/lib/emailRenderer.ts
index 1d33415..2397bb8 100644
--- a/src/lib/emailRenderer.ts
+++ b/src/lib/emailRenderer.ts
@@ -367,7 +367,7 @@ function renderModule(m: any, campaign: NewsletterCampaign, mode: RenderMode = '
           ${m.data.title || m.data.description || m.data.buttonText ? `
           <tr>
               <td style="padding: 30px 20px; text-align: center;" class="mobile-padding">
-                  ${m.data.title ? `<h1 class="force-text-dark" style="margin: 0 0 15px 0; font-size: 24px; color: #1a1a1a; font-weight: 700;">${escapeWithBreaks(m.data.title)}</h1>` : ''}
+                  ${m.data.title ? `<h1 ${m.data.titleColor ? '' : 'class="force-text-dark" '}style="margin: 0 0 15px 0; font-size: 24px; color: ${m.data.titleColor || '#1a1a1a'}; font-weight: 700;">${escapeWithBreaks(m.data.title)}</h1>` : ''}
                   ${m.data.description ? `<p class="force-text-dark" style="margin: 0 0 25px 0; font-size: 15px; line-height: 1.5; color: #555555;">${escapeWithBreaks(m.data.description)}</p>` : ''}
                   ${m.data.buttonText ? `
                   <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;" class="btn-table">
diff --git a/src/types/newsletter.ts b/src/types/newsletter.ts
index a216637..e668475 100644
--- a/src/types/newsletter.ts
+++ b/src/types/newsletter.ts
@@ -107,6 +107,7 @@ export interface BannerModuleData {
   linkUrl: string;
   altText: string;
   title?: string;
+  titleColor?: string; // farba nadpisu pod bannerom (predvolene #1a1a1a)
   description?: string;
   buttonText?: string;
   buttonUrl?: string;