<h2>{{settings.title}}</h2>
<p>{{settings.subtitle}}</p>
<a href="{{settings.buttonLink}}">{{settings.buttonText}}</a>

<div class="content">
  {{{settings.richContent}}}
</div>

{
  "fields": [
    {
      "key": "title",
      "label": "כותרת",
      "type": "text",
      "default": "ברוכים הבאים"
    },
    {
      "key": "backgroundColor",
      "label": "צבע רקע",
      "type": "color",
      "default": "#ffffff"
    },
    {
      "key": "showButton",
      "label": "הצג כפתור",
      "type": "boolean",
      "default": true
    },
    {
      "key": "imageUrl",
      "label": "תמונה ראשית",
      "type": "image"
    }
  ]
}

{
  "key": "textAlign",
  "label": "יישור טקסט",
  "type": "select",
  "default": "center",
  "options": [
    { "value": "right", "label": "ימין" },
    { "value": "center", "label": "מרכז" },
    { "value": "left", "label": "שמאל" }
  ]
}

{
  "key": "columns",
  "label": "מספר עמודות",
  "type": "range",
  "min": 1,
  "max": 6,
  "step": 1,
  "default": 3
}

.promo-banner {
  padding: 60px 20px;
  text-align: center;
  background-color: {{settings.backgroundColor}};
}

.promo-banner h2 {
  font-size: 36px;
  color: {{settings.titleColor}};
}

.promo-banner .btn {
  background: {{settings.buttonColor}};
  color: #fff;
  padding: 12px 32px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
}

@media (max-width: 768px) {
  .promo-banner h2 {
    font-size: 24px;
  }
}

{{#if settings.showButton}}
  <a href="{{settings.buttonLink}}" class="btn">
    {{settings.buttonText}}
  </a>
{{/if}}

{{#unless settings.imageUrl}}
  <div class="placeholder">אין תמונה</div>
{{/unless}}

{{#if settings.showHero}}
  <div class="hero">
    <h1>{{settings.title}}</h1>
    {{#if settings.showSubtitle}}
      <p>{{settings.subtitle}}</p>
    {{/if}}
  </div>
{{/if}}

<div class="promo-banner">
  {{#if settings.imageUrl}}
    <img src="{{settings.imageUrl}}" alt="{{settings.title}}" />
  {{/if}}
  <div class="promo-content">
    <h2>{{settings.title}}</h2>
    {{#if settings.subtitle}}
      <p class="subtitle">{{settings.subtitle}}</p>
    {{/if}}
    {{#if settings.showButton}}
      <a href="{{settings.buttonLink}}" class="btn">
        {{settings.buttonText}}
      </a>
    {{/if}}
  </div>
</div>

.promo-banner {
  position: relative;
  padding: 80px 20px;
  text-align: center;
  background-color: {{settings.bgColor}};
  overflow: hidden;
}
.promo-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.promo-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
}
.promo-banner h2 {
  font-size: 42px;
  font-weight: 800;
  color: {{settings.titleColor}};
  margin-bottom: 12px;
}
.subtitle {
  font-size: 18px;
  color: {{settings.subtitleColor}};
  margin-bottom: 32px;
}
.btn {
  display: inline-block;
  padding: 14px 40px;
  background: {{settings.buttonColor}};
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  transition: transform 0.2s, opacity 0.2s;
}
.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
@media (max-width: 768px) {
  .promo-banner { padding: 50px 16px; }
  .promo-banner h2 { font-size: 28px; }
}

{
  "fields": [
    { "key": "title", "label": "כותרת", "type": "text", "default": "מבצע מיוחד!" },
    { "key": "subtitle", "label": "תת כותרת", "type": "text", "default": "הנחות של עד 50%" },
    { "key": "imageUrl", "label": "תמונת רקע", "type": "image" },
    { "key": "bgColor", "label": "צבע רקע", "type": "color", "default": "#1a1a2e" },
    { "key": "titleColor", "label": "צבע כותרת", "type": "color", "default": "#ffffff" },
    { "key": "subtitleColor", "label": "צבע תת כותרת", "type": "color", "default": "#cccccc" },
    { "key": "showButton", "label": "הצג כפתור", "type": "boolean", "default": true },
    { "key": "buttonText", "label": "טקסט כפתור", "type": "text", "default": "לצפייה" },
    { "key": "buttonLink", "label": "קישור כפתור", "type": "link", "default": "/products" },
    { "key": "buttonColor", "label": "צבע כפתור", "type": "color", "default": "#e94560" }
  ]
}

<div class="features-grid">
  <h2>{{settings.title}}</h2>
  <div class="grid">
    <div class="card">
      <div class="icon">{{settings.icon1}}</div>
      <h3>{{settings.card1Title}}</h3>
      <p>{{settings.card1Desc}}</p>
    </div>
    <div class="card">
      <div class="icon">{{settings.icon2}}</div>
      <h3>{{settings.card2Title}}</h3>
      <p>{{settings.card2Desc}}</p>
    </div>
    <div class="card">
      <div class="icon">{{settings.icon3}}</div>
      <h3>{{settings.card3Title}}</h3>
      <p>{{settings.card3Desc}}</p>
    </div>
  </div>
</div>

.features-grid {
  padding: 60px 20px;
  text-align: center;
}
.features-grid h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 40px;
  color: {{settings.titleColor}};
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.card {
  padding: 32px 24px;
  border-radius: 16px;
  background: {{settings.cardBg}};
  border: 1px solid #eee;
}
.icon { font-size: 32px; margin-bottom: 16px; }
.card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.card p { font-size: 14px; color: #666; line-height: 1.6; }
@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; }
}

{
  "fields": [
    { "key": "title", "label": "כותרת ראשית", "type": "text", "default": "למה לבחור בנו?" },
    { "key": "titleColor", "label": "צבע כותרת", "type": "color", "default": "#111" },
    { "key": "cardBg", "label": "צבע רקע כרטיס", "type": "color", "default": "#fafafa" },
    { "key": "icon1", "label": "אייקון 1 (Emoji)", "type": "text", "default": "🚚" },
    { "key": "card1Title", "label": "כותרת כרטיס 1", "type": "text", "default": "משלוח חינם" },
    { "key": "card1Desc", "label": "תיאור כרטיס 1", "type": "textarea", "default": "משלוח חינם בהזמנה מעל 200 ₪" },
    { "key": "icon2", "label": "אייקון 2 (Emoji)", "type": "text", "default": "🔄" },
    { "key": "card2Title", "label": "כותרת כרטיס 2", "type": "text", "default": "החזרה קלה" },
    { "key": "card2Desc", "label": "תיאור כרטיס 2", "type": "textarea", "default": "החזרה חינם תוך 30 יום" },
    { "key": "icon3", "label": "אייקון 3 (Emoji)", "type": "text", "default": "💬" },
    { "key": "card3Title", "label": "כותרת כרטיס 3", "type": "text", "default": "תמיכה 24/7" },
    { "key": "card3Desc", "label": "תיאור כרטיס 3", "type": "textarea", "default": "צוות שלנו זמין תמיד לעזור" }
  ]
}

<div class="countdown-banner">
  <h2>{{settings.title}}</h2>
  <div id="countdown-timer" class="timer"></div>
  <p>{{settings.subtitle}}</p>
</div>

<script>
  (function() {
    const end = new Date('{{settings.endDate}}').getTime();
    const el = document.getElementById('countdown-timer');
    if (!el) return;
    const tick = () => {
      const now = Date.now();
      const diff = Math.max(0, end - now);
      const d = Math.floor(diff / 86400000);
      const h = Math.floor((diff % 86400000) / 3600000);
      const m = Math.floor((diff % 3600000) / 60000);
      const s = Math.floor((diff % 60000) / 1000);
      el.textContent = d+'d '+h+'h '+m+'m '+s+'s';
      if (diff > 0) requestAnimationFrame(tick);
    };
    tick();
  })();
</script>