{%- if section.settings.enable_popup -%}
<style>
  /* Dynamic CSS Variables from Schema */
  .holiday-popup-section {
    --popup-bg: {{ section.settings.bg_color }};
    --popup-bg-secondary: {{ section.settings.bg_color_secondary }};
    --popup-accent: {{ section.settings.accent_color }};
    --popup-text: {{ section.settings.text_color }};
    --button-color: {{ section.settings.button_color }};
    --button-hover-color: {{ section.settings.button_hover_color }};
    --border-color: {{ section.settings.border_color }};
  }

  /* Popup Container */
  .holiday-popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    font-family: var(--font-body-family);
  }

  .holiday-popup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
  }

  .holiday-popup-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    background: linear-gradient(135deg, var(--popup-bg), var(--popup-bg-secondary));
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 2px solid var(--border-color);
    overflow: hidden;
    animation: popupSlideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  @keyframes popupSlideUp {
    from { opacity: 0; transform: translate(-50%, 100%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }

  .holiday-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--popup-text);
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
  }

  .holiday-popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
  }

  .holiday-popup-content {
    padding: 40px 30px 30px;
    color: var(--popup-text);
    text-align: center;
  }

  /* Header Styles */
  .holiday-popup-header {
    margin-bottom: 25px;
  }

  .holiday-icons {
    margin-bottom: 15px;
  }

  .holiday-icons .icon {
    font-size: 24px;
    margin: 0 8px;
    animation: float 3s ease-in-out infinite;
    display: inline-block;
  }

  .holiday-icons .icon:nth-child(2) { animation-delay: 0.5s; }
  .holiday-icons .icon:nth-child(3) { animation-delay: 1s; }

  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }

  .holiday-popup-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--popup-accent);
  }

  .holiday-popup-subtitle {
    font-size: 16px;
    opacity: 0.9;
    margin: 0;
  }

  /* Offer Section */
  .holiday-offer-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
  }

  .holiday-discount-badge {
    text-align: center;
    padding: 15px;
    background: linear-gradient(45deg, var(--button-color), var(--button-hover-color));
    border-radius: 12px;
    min-width: 80px;
  }

  .holiday-discount-amount {
    display: block;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
  }

  .holiday-discount-text {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.9;
  }

  .holiday-offer-details h3 {
    margin: 0 0 5px;
    font-size: 20px;
    font-weight: 600;
  }

  .holiday-offer-details p {
    margin: 0;
    opacity: 0.8;
    font-size: 14px;
  }

  /* Countdown Timer */
  .holiday-countdown-section {
    text-align: center;
    margin: 25px 0;
  }

  .holiday-countdown-label {
    margin: 0 0 15px;
    font-weight: 600;
  }

  .holiday-countdown-timer {
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .holiday-countdown-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 10px;
    min-width: 60px;
    backdrop-filter: blur(10px);
  }

  .holiday-countdown-number {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--popup-accent);
  }

  .holiday-countdown-item .countdown-label {
    font-size: 12px;
    opacity: 0.8;
    margin: 5px 0 0;
    font-weight: 500;
  }

  /* Email Form */
  .holiday-email-form {
    margin: 30px 0 20px;
  }

  .holiday-form-group {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }

  .holiday-form-input {
    flex: 1;
    padding: 15px 20px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--popup-text);
    font-size: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .holiday-form-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }

  .holiday-form-input:focus {
    outline: none;
    border-color: var(--popup-accent);
    background: rgba(255, 255, 255, 0.15);
  }

  .holiday-submit-btn {
    padding: 15px 25px;
    background: linear-gradient(45deg, var(--button-color), var(--button-hover-color));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  .holiday-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  }

  .holiday-submit-btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
  }

  .holiday-form-note {
    font-size: 13px;
    opacity: 0.7;
    margin: 0;
  }

  /* Trust Badges */
  .holiday-trust-badges {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
    flex-wrap: wrap;
  }

  .holiday-trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    opacity: 0.8;
  }

  /* Footer */
  .holiday-popup-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .holiday-footer-text {
    font-size: 12px;
    opacity: 0.6;
    margin: 0;
  }

  /* Success State */
  .holiday-success-state {
    display: none;
    text-align: center;
    padding: 40px 30px;
  }

  .holiday-success-icon {
    font-size: 60px;
    margin-bottom: 20px;
    animation: bounce 1s ease;
  }

  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
  }

  .holiday-success-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 15px;
    color: var(--popup-accent);
  }

  .holiday-success-message {
    font-size: 18px;
    margin: 0 0 10px;
  }

  .holiday-discount-code {
    color: var(--popup-accent);
    font-size: 20px;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 15px;
    border-radius: 8px;
    display: inline-block;
    margin: 5px 0;
  }

  .holiday-success-note {
    font-size: 14px;
    opacity: 0.8;
    margin: 0 0 25px;
  }

  .holiday-success-btn {
    padding: 15px 30px;
    background: linear-gradient(45deg, var(--button-color), var(--button-hover-color));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .holiday-success-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  }

  /* Error State */
  .holiday-form-error {
    color: #ff6b6b;
    font-size: 14px;
    margin-top: 10px;
    padding: 10px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 8px;
    border-left: 3px solid #ff6b6b;
    display: none;
  }

  /* Mobile Responsive */
  @media (max-width: 768px) {
    .holiday-popup-main {
      width: 95%;
      max-width: none;
      margin: 20px;
    }
    
    .holiday-popup-content {
      padding: 30px 20px 20px;
    }
    
    .holiday-form-group {
      flex-direction: column;
    }
    
    .holiday-offer-section {
      flex-direction: column;
      text-align: center;
      gap: 15px;
    }
    
    .holiday-trust-badges {
      gap: 15px;
    }
    
    .holiday-countdown-timer {
      gap: 5px;
    }
    
    .holiday-countdown-item {
      min-width: 50px;
      padding: 8px;
    }
    
    .holiday-countdown-number {
      font-size: 20px;
    }
  }

  /* Hide on mobile if disabled */
  {% unless section.settings.show_mobile %}
  @media (max-width: 768px) {
    .holiday-popup-container {
      display: none !important;
    }
  }
  {% endunless %}
</style>

<div class="holiday-popup-container"
     data-section-type="holiday-popup"
     data-section-id="{{ section.id }}"
     data-delay="{{ section.settings.show_delay }}"
     data-exit-intent="{{ section.settings.exit_intent }}"
     data-countdown-date="{{ section.settings.countdown_date }}"
     data-discount-code="{{ section.settings.discount_code }}"
     data-enable-popup="{{ section.settings.enable_popup }}"
     data-show-countdown="{{ section.settings.show_countdown }}"
     data-show-mobile="{{ section.settings.show_mobile }}"
     data-klaviyo-enabled="{{ section.settings.enable_klaviyo }}"
     data-klaviyo-list-id="{{ section.settings.klaviyo_list_id }}">

  <div class="holiday-popup-backdrop"></div>
  
  <div class="holiday-popup-main">
    <button class="holiday-popup-close" aria-label="Close popup">
      <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
        <path d="M15.89 14.696l-4.734-4.734 4.717-4.717c.4-.4.37-1.085-.03-1.485s-1.085-.43-1.485-.03L9.69 8.447 4.974 3.73c-.4-.4-1.085-.37-1.485.03s-.43 1.085-.03 1.485l4.717 4.717-4.734 4.734c-.4.4-.37 1.085.03 1.485s1.085.43 1.485.03l4.734-4.734 4.734 4.734c.4.4 1.085.37 1.485-.03s.43-1.085.03-1.485z"/>
      </svg>
    </button>

    <!-- Popup Content -->
    <div class="holiday-popup-content">
      <div class="holiday-popup-header">
        <div class="holiday-icons">
          <span class="icon">🎄</span>
          <span class="icon">🎁</span>
          <span class="icon">❄️</span>
        </div>
        <h2 class="holiday-popup-title">{{ section.settings.title }}</h2>
        <p class="holiday-popup-subtitle">{{ section.settings.subtitle }}</p>
      </div>

      <div class="holiday-popup-body">
        <!-- Offer Section -->
        <div class="holiday-offer-section">
          <div class="holiday-discount-badge">
            <span class="holiday-discount-amount">{{ section.settings.discount_amount }}</span>
            <span class="holiday-discount-text">OFF</span>
          </div>
          <div class="holiday-offer-details">
            <h3>{{ section.settings.offer_title }}</h3>
            <p>{{ section.settings.offer_description }}</p>
          </div>
        </div>

        <!-- Countdown Timer -->
        {%- if section.settings.show_countdown -%}
        <div class="holiday-countdown-section">
          <p class="holiday-countdown-label">{{ section.settings.countdown_text }}</p>
          <div class="holiday-countdown-timer">
            <div class="holiday-countdown-item">
              <span class="holiday-countdown-number" id="days-{{ section.id }}">00</span>
              <span class="countdown-label">Days</span>
            </div>
            <div class="holiday-countdown-item">
              <span class="holiday-countdown-number" id="hours-{{ section.id }}">00</span>
              <span class="countdown-label">Hours</span>
            </div>
            <div class="holiday-countdown-item">
              <span class="holiday-countdown-number" id="minutes-{{ section.id }}">00</span>
              <span class="countdown-label">Mins</span>
            </div>
            <div class="holiday-countdown-item">
              <span class="holiday-countdown-number" id="seconds-{{ section.id }}">00</span>
              <span class="countdown-label">Secs</span>
            </div>
          </div>
        </div>
        {%- endif -%}

        <!-- Email Capture Form -->
        <form class="holiday-email-form" id="holidayEmailForm-{{ section.id }}">
          <div class="holiday-form-group">
            <input type="email" class="holiday-form-input" placeholder="{{ section.settings.email_placeholder }}" required>
            <button type="submit" class="holiday-submit-btn">
              <span class="btn-text">{{ section.settings.button_text }}</span>
              <span class="btn-icon">🎁</span>
            </button>
          </div>
          <div class="holiday-form-error" id="formError-{{ section.id }}"></div>
          <p class="holiday-form-note">{{ section.settings.form_note }}</p>
        </form>

        <!-- Trust Badges -->
        {%- if section.blocks.size > 0 -%}
        <div class="holiday-trust-badges">
          {%- for block in section.blocks -%}
          <div class="holiday-trust-item" {{ block.shopify_attributes }}>
            <span class="trust-icon">{{ block.settings.badge_icon }}</span>
            <span class="trust-text">{{ block.settings.badge_text }}</span>
          </div>
          {%- endfor -%}
        </div>
        {%- endif -%}
      </div>

      <div class="holiday-popup-footer">
        <p class="holiday-footer-text">{{ section.settings.footer_text }}</p>
      </div>
    </div>

    <!-- Success State -->
    <div class="holiday-success-state">
      <div class="holiday-success-icon">🎉</div>
      <h3 class="holiday-success-title">Congratulations!</h3>
      <p class="holiday-success-message">{{ section.settings.success_message }}</p>
      <p class="holiday-discount-code">{{ section.settings.discount_code }}</p>
      <p class="holiday-success-note">Check your email for confirmation</p>
      <button class="holiday-success-btn">Start Shopping!</button>
    </div>
  </div>
</div>

<script>
// Klaviyo Holiday Popup JavaScript
document.addEventListener('DOMContentLoaded', function() {
  const popup = document.querySelector('.holiday-popup-container');
  if (!popup) return;

  const closeBtn = popup.querySelector('.holiday-popup-close');
  const backdrop = popup.querySelector('.holiday-popup-backdrop');
  const successBtn = popup.querySelector('.holiday-success-btn');
  const form = popup.querySelector('.holiday-email-form');
  const errorDiv = popup.querySelector('.holiday-form-error');
  
  const delay = parseInt(popup.dataset.delay) * 1000 || 3000;
  const exitIntent = popup.dataset.exitIntent === 'true';
  const countdownDate = popup.dataset.countdownDate;
  const discountCode = popup.dataset.discountCode;
  const klaviyoEnabled = popup.dataset.klaviyoEnabled === 'true';
  const klaviyoListId = popup.dataset.klaviyoListId;

  // Show popup after delay
  setTimeout(() => {
    if (!localStorage.getItem('holiday_popup_subscribed')) {
      popup.style.display = 'block';
    }
  }, delay);

  // Exit intent
  if (exitIntent) {
    document.addEventListener('mouseleave', (e) => {
      if (e.clientY < 0 && popup.style.display === 'none' && !localStorage.getItem('holiday_popup_subscribed')) {
        popup.style.display = 'block';
      }
    });
  }

  // Close events
  closeBtn.addEventListener('click', () => popup.style.display = 'none');
  backdrop.addEventListener('click', () => popup.style.display = 'none');
  successBtn.addEventListener('click', () => popup.style.display = 'none');

  // Form submission with Klaviyo integration
  if (form) {
    form.addEventListener('submit', async function(e) {
      e.preventDefault();
      const emailInput = this.querySelector('.holiday-form-input');
      const submitBtn = this.querySelector('.holiday-submit-btn');
      const email = emailInput.value.trim();
      
      // Hide any previous errors
      hideError();
      
      // Validation
      if (!isValidEmail(email)) {
        showError('Please enter a valid email address');
        return;
      }
      
      // Show loading state
      setLoadingState(true, submitBtn);
      
      try {
        // Klaviyo Integration
        if (klaviyoEnabled && klaviyoListId) {
          await subscribeToKlaviyo(email, discountCode, klaviyoListId);
        } else {
          // Fallback: Save locally
          saveEmailLocally(email, discountCode);
        }
        
        // Show success
        showSuccessState();
        
        // Remember user
        localStorage.setItem('holiday_popup_subscribed', 'true');
        
        // Track conversion
        trackConversion(email);
        
      } catch (error) {
        console.error('Subscription failed:', error);
        showError('Failed to submit. Please try again.');
        setLoadingState(false, submitBtn);
      }
    });
  }

  // Countdown timer
  if (countdownDate) {
    function updateCountdown() {
      const targetDate = new Date(countdownDate).getTime();
      const now = new Date().getTime();
      const distance = targetDate - now;
      
      if (distance < 0) {
        popup.querySelector('.holiday-countdown-section').innerHTML = '<p>Offer expired!</p>';
        return;
      }
      
      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
      
      document.getElementById(`days-{{ section.id }}`).textContent = days.toString().padStart(2, '0');
      document.getElementById(`hours-{{ section.id }}`).textContent = hours.toString().padStart(2, '0');
      document.getElementById(`minutes-{{ section.id }}`).textContent = minutes.toString().padStart(2, '0');
      document.getElementById(`seconds-{{ section.id }}`).textContent = seconds.toString().padStart(2, '0');
    }
    
    updateCountdown();
    setInterval(updateCountdown, 1000);
  }

  // Helper Functions
  function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }

  function setLoadingState(loading, button) {
    if (loading) {
      button.disabled = true;
      button.classList.add('loading');
      button.querySelector('.btn-text').textContent = 'Submitting...';
    } else {
      button.disabled = false;
      button.classList.remove('loading');
      button.querySelector('.btn-text').textContent = '{{ section.settings.button_text }}';
    }
  }

  function showError(message) {
    errorDiv.textContent = message;
    errorDiv.style.display = 'block';
  }

  function hideError() {
    errorDiv.style.display = 'none';
  }

  function showSuccessState() {
    popup.querySelector('.holiday-popup-content').style.display = 'none';
    popup.querySelector('.holiday-success-state').style.display = 'block';
  }

  // Klaviyo Integration Functions
  async function subscribeToKlaviyo(email, discountCode, listId) {
    // Method 1: Using Klaviyo's Identify API
    if (typeof _learnq !== 'undefined') {
      _learnq.push(['identify', {
        'email': email,
        'Holiday_Subscriber': true,
        'Discount_Code': discountCode,
        'Signup_Date': new Date().toISOString()
      }]);
      
      _learnq.push(['track', 'Holiday Discount Claimed', {
        'email': email,
        'discount_code': discountCode,
        'popup_section': '{{ section.id }}'
      }]);
    }
    
    // Method 2: Direct API call to Klaviyo
    try {
      const response = await fetch('https://a.klaviyo.com/api/v2/list/' + listId + '/subscribe', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          'profiles': [{
            'email': email,
            'properties': {
              'discount_code': discountCode,
              'source': 'holiday_popup',
              'signup_date': new Date().toISOString(),
              'popup_section': '{{ section.id }}'
            }
          }]
        })
      });
      
      if (!response.ok) {
        throw new Error('Klaviyo API error');
      }
      
      return await response.json();
    } catch (error) {
      // Fallback to local storage
      saveEmailLocally(email, discountCode);
      return { success: true };
    }
  }

  function saveEmailLocally(email, discountCode) {
    const subscribers = JSON.parse(localStorage.getItem('holiday_subscribers') || '[]');
    subscribers.push({
      email: email,
      discountCode: discountCode,
      date: new Date().toISOString(),
      source: 'klaviyo_fallback'
    });
    localStorage.setItem('holiday_subscribers', JSON.stringify(subscribers));
  }

  function trackConversion(email) {
    // Google Analytics
    if (typeof gtag !== 'undefined') {
      gtag('event', 'holiday_popup_conversion', {
        'event_category': 'engagement',
        'event_label': 'Klaviyo Subscription',
        'email': email
      });
    }
    
    // Facebook Pixel
    if (typeof fbq !== 'undefined') {
      fbq('track', 'Lead', {
        content_name: 'Holiday Discount',
        content_category: 'Email Signup',
        email: email
      });
    }
    
    console.log('Klaviyo conversion tracked for:', email);
  }
});
</script>
{%- endif -%}

{% schema %}
{
  "name": "🎄 Holiday Popup + Klaviyo",
  "class": "holiday-popup-section",
  "settings": [
    {
      "type": "header",
      "content": "Popup Activation"
    },
    {
      "type": "checkbox",
      "id": "enable_popup",
      "label": "Enable Holiday Popup",
      "default": true
    },
    {
      "type": "number",
      "id": "show_delay",
      "label": "Show Delay (seconds)",
      "default": 3,
      "info": "Time before popup appears"
    },
    {
      "type": "checkbox",
      "id": "exit_intent",
      "label": "Enable Exit Intent",
      "default": true,
      "info": "Show popup when user tries to leave"
    },
    {
      "type": "checkbox",
      "id": "show_mobile",
      "label": "Show on Mobile",
      "default": true
    },
    {
      "type": "header",
      "content": "Content Settings"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Popup Title",
      "default": "Holiday Special!"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "Popup Subtitle",
      "default": "Don't miss our exclusive holiday offer"
    },
    {
      "type": "text",
      "id": "discount_amount",
      "label": "Discount Amount",
      "default": "15%",
      "info": "e.g., 15%, $10, 20OFF"
    },
    {
      "type": "text",
      "id": "offer_title",
      "label": "Offer Title",
      "default": "Plus Free Shipping!"
    },
    {
      "type": "text",
      "id": "offer_description",
      "label": "Offer Description",
      "default": "On all orders over $50"
    },
    {
      "type": "text",
      "id": "countdown_text",
      "label": "Countdown Text",
      "default": "Offer ends in:"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Claim My Discount"
    },
    {
      "type": "text",
      "id": "email_placeholder",
      "label": "Email Placeholder",
      "default": "Enter your email address"
    },
    {
      "type": "text",
      "id": "form_note",
      "label": "Form Note",
      "default": "We'll send your discount code immediately"
    },
    {
      "type": "text",
      "id": "success_message",
      "label": "Success Message",
      "default": "Your discount code"
    },
    {
      "type": "text",
      "id": "discount_code",
      "label": "Discount Code",
      "default": "HOLIDAY15"
    },
    {
      "type": "text",
      "id": "footer_text",
      "label": "Footer Text",
      "default": "Limited time offer. Terms apply."
    },
    {
      "type": "header",
      "content": "Countdown Timer"
    },
    {
      "type": "checkbox",
      "id": "show_countdown",
      "label": "Show Countdown Timer",
      "default": true
    },
    {
      "type": "text",
      "id": "countdown_date",
      "label": "Countdown End Date",
      "default": "2024-12-31",
      "info": "Format: YYYY-MM-DD"
    },
    {
      "type": "header",
      "content": "Klaviyo Integration"
    },
    {
      "type": "checkbox",
      "id": "enable_klaviyo",
      "label": "Enable Klaviyo Integration",
      "default": true,
      "info": "Send emails to Klaviyo automatically"
    },
    {
      "type": "text",
      "id": "klaviyo_list_id",
      "label": "Klaviyo List ID",
      "info": "Get this from your Klaviyo account"
    },
    {
      "type": "header",
      "content": "Design Settings"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#1a2a3a"
    },
    {
      "type": "color",
      "id": "bg_color_secondary",
      "label": "Background Secondary",
      "default": "#2d4a5c"
    },
    {
      "type": "color",
      "id": "accent_color",
      "label": "Accent Color",
      "default": "#ffd700"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button Color",
      "default": "#ff6b6b"
    },
    {
      "type": "color",
      "id": "button_hover_color",
      "label": "Button Hover Color",
      "default": "#ff8e53"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border Color",
      "default": "#ffd700"
    }
  ],
  "blocks": [
    {
      "type": "trust_badge",
      "name": "Trust Badge",
      "settings": [
        {
          "type": "text",
          "id": "badge_icon",
          "label": "Badge Icon",
          "default": "🔒",
          "info": "Use emoji or icon code"
        },
        {
          "type": "text",
          "id": "badge_text",
          "label": "Badge Text",
          "default": "Secure & Safe"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "🎄 Holiday Popup + Klaviyo",
      "category": "Promotional",
      "blocks": [
        {
          "type": "trust_badge",
          "settings": {
            "badge_icon": "🔒",
            "badge_text": "No Spam"
          }
        },
        {
          "type": "trust_badge",
          "settings": {
            "badge_icon": "⚡",
            "badge_text": "Instant Delivery"
          }
        },
        {
          "type": "trust_badge",
          "settings": {
            "badge_icon": "🎯",
            "badge_text": "Exclusive Offer"
          }
        }
      ]
    }
  ]
}
{% endschema %}

<!-- Klaviyo Tracking Code -->
<script type="text/javascript">
  var _learnq = _learnq || [];
  _learnq.push(['account', 'YOUR_KLAVIYO_COMPANY_ID']);

  (function() {
    var b = document.createElement('script');
    b.type = 'text/javascript';
    b.async = true;
    b.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + 
            '//a.klaviyo.com/media/js/analytics/analytics.js';
    var a = document.getElementsByTagName('script')[0];
    a.parentNode.insertBefore(b, a);
  })();
</script>

<!-- Holiday Popup Section -->
{% render 'holiday-popup' %}

Hi {{ first_name|default:"there" }},

Thanks for joining our holiday special! Here's your exclusive discount code:

<h2 style="text-align: center; color: #ff6b6b;">HOLIDAY15</h2>

Use this code at checkout to get 15% off your entire order + free shipping!

<a href="{{ shop.url }}/collections/all" style="background: #ff6b6b; color: white; padding: 15px 30px; text-decoration: none; border-radius: 8px; display: inline-block;">
   Start Shopping Now
</a>

Happy holidays!  
The {{ shop.name }} Team