<!-- 
  10% OFF SALES POP-UP (Weigh-in Survival Guide)
  Version: 2.0
  Created: November 2025
  
  USAGE INSTRUCTIONS FOR SQUARESPACE:
  1. Go to the sales page where you want the pop-up
  2. Add a Code Block
  3. Copy and paste this ENTIRE file into the code block
  4. Save and publish
  
  FEATURES:
  - Exit intent detection (triggers when mouse moves to leave page)
  - Once *EVER* per user (uses localStorage to create true scarcity)
  - Copies discount code 'SAVE10' to clipboard on click
  - Fully mobile responsive
  - Brand colors from Bullard Nutrition
  - Accessibility compliant
-->

<style>
  /* Pop-up Overlay */
  #discountPopupOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999999;
    animation: fadeIn 0.3s ease;
    backdrop-filter: blur(3px);
  }

  #discountPopupOverlay.show {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
  }

  /* Pop-up Container */
  #discountPopupContainer {
    position: relative;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 480px;
    width: 100%;
    overflow: hidden;
    animation: slideUp 0.4s ease;
  }

  /* Pop-up Content */
  #discountPopupContent {
    padding: 32px 28px 28px;
    text-align: center;
  }

  /* Close Button */
  #discountPopupClose {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: #6B7280;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 10;
    line-height: 1;
  }

  #discountPopupClose:hover {
    background: #f3f4f6;
    color: #251f21;
  }

  /* Icon Container */
  .discount-popup-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #006a39, #0D9488);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 106, 57, 0.3);
  }

  .discount-popup-icon svg {
    width: 32px;
    height: 32px;
    fill: white;
  }

  /* Heading */
  #discountPopupContent h3 {
    font-family: 'Inter', 'Poppins', 'Source Sans Pro', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #251f21;
    margin: 0 0 12px;
    line-height: 1.3;
  }

  /* Description */
  #discountPopupContent p {
    font-family: 'Open Sans', 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #374151;
    margin: 0 0 24px;
  }

  /* CTA Button */
  #discountPopupCTA {
    display: inline-block;
    font-family: 'Inter', 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: white;
    background: linear-gradient(135deg, #006a39, #0D9488);
    padding: 14px 32px;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 106, 57, 0.3);
    border: none;
    cursor: pointer;
    width: 100%;
    max-width: 280px;
  }

  #discountPopupCTA:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0, 106, 57, 0.4);
    background: linear-gradient(135deg, #005230, #0D9488);
  }

  #discountPopupCTA:disabled {
    background: #006a39;
    opacity: 0.8;
    cursor: default;
  }


  /* Animations */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(30px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Mobile Responsive */
  @media (max-width: 640px) {
    #discountPopupContent {
      padding: 28px 20px 24px;
    }
    
    #discountPopupContent h3 {
      font-size: 1.25rem;
    }
    
    #discountPopupContent p {
      font-size: 0.95rem;
    }
    
    #discountPopupCTA {
      font-size: 1rem;
      padding: 12px 28px;
    }
    
    .discount-popup-icon {
      width: 56px;
      height: 56px;
    }
    
    .discount-popup-icon svg {
      width: 28px;
      height: 28px;
    }
  }
</style>

<div id="discountPopupOverlay">
  <div id="discountPopupContainer">
    
    <!-- Close Button -->
    <button id="discountPopupClose" aria-label="Close popup">×</button>
    
    <!-- Content -->
    <div id="discountPopupContent">
      <!-- Icon -->
      <div class="discount-popup-icon">
        <!-- New "Discount Tag" Icon -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M21.41 11.58l-9-9A2 2 0 0011.01 2H4c-1.1 0-2 .9-2 2v7.01c0 .53.21 1.04.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.38-.38.59-.88.59-1.42 0-.53-.21-1.04-.59-1.41zM5.5 7A1.5 1.5 0 114 5.5 1.5 1.5 0 015.5 7z"/>
        </svg>
      </div>
      
      <!-- Heading -->
      <h3>Wait! Before You Go...</h3>
      
      <!-- Description -->
      <p>Get 10% OFF the Weigh-In Survival Guide. Here is a discount to help you get started.</p>
      
      <!-- CTA Button -->
      <button id="discountPopupCTA">
        Copy SAVE10 & Continue
      </button>
      
    </div>
  </div>
</div>

<script>
(function() {
  'use strict';
  
  // Configuration
  const CONFIG = {
    EXIT_INTENT_THRESHOLD: 50, // pixels from top
    DISCOUNT_POPUP_SHOWN_KEY: 'bullardNutritionDiscountPopupShown_v1', // Key for localStorage
    DISCOUNT_CODE: 'SAVE10'
  };
  
  // Elements
  const overlay = document.getElementById('discountPopupOverlay');
  const closeBtn = document.getElementById('discountPopupClose');
  const ctaBtn = document.getElementById('discountPopupCTA');
  
  // State
  let hasBeenShown = false;
  const originalCtaText = ctaBtn.textContent;
  
  // Check if pop-up has already been shown *EVER*
  function hasShownEver() {
    return localStorage.getItem(CONFIG.DISCOUNT_POPUP_SHOWN_KEY) === 'true';
  }
  
  // Mark pop-up as shown *EVER*
  function markAsShown() {
    localStorage.setItem(CONFIG.DISCOUNT_POPUP_SHOWN_KEY, 'true');
  }

  // Fallback function to copy text to clipboard
  function copyToClipboard(text) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).catch(err => {
        // Fallback if clipboard API fails
        console.warn('Clipboard API failed, using fallback.');
        fallbackCopyTextToClipboard(text);
      });
    } else {
      // Fallback for older browsers or insecure contexts
      fallbackCopyTextToClipboard(text);
    }
  }

  function fallbackCopyTextToClipboard(text) {
    var textArea = document.createElement("textarea");
    textArea.value = text;
    
    // Avoid scrolling to bottom
    textArea.style.top = "0";
    textArea.style.left = "0";
    textArea.style.position = "fixed";

    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();

    try {
      document.execCommand('copy');
    } catch (err) {
      console.error('Fallback copy failed:', err);
    }

    document.body.removeChild(textArea);
  }
  
  // Show the pop-up
  function showPopup() {
    if (hasBeenShown || hasShownEver()) {
      return;
    }
    
    hasBeenShown = true;
    markAsShown();
    overlay.classList.add('show');
    
    // Prevent body scroll
    document.body.style.overflow = 'hidden';
    
    // Analytics (optional - remove if not needed)
    if (typeof gtag !== 'undefined') {
      gtag('event', 'popup_shown', {
        'event_category': 'Discount Popup',
        'event_label': 'Weigh in Survival Guide Offer'
      });
    }
  }
  
  // Hide the pop-up
  function hidePopup() {
    overlay.classList.remove('show');
    document.body.style.overflow = '';
  }
  
  // Exit intent detection
  function handleMouseLeave(e) {
    // Detect when mouse moves toward top of viewport (to close tab/window)
    if (e.clientY < CONFIG.EXIT_INTENT_THRESHOLD && e.relatedTarget == null) {
      showPopup();
    }
  }
  
  // Track CTA clicks
  function handleCTAClick() {
    // 1. Copy the code
    copyToClipboard(CONFIG.DISCOUNT_CODE);

    // 2. Disable button and show feedback
    ctaBtn.disabled = true;
    ctaBtn.textContent = 'Code Copied! 👍';

    // 3. Analytics (optional)
    if (typeof gtag !== 'undefined') {
      gtag('event', 'click', {
        'event_category': 'Discount Popup',
        'event_label': 'CTA Click - Copy Code'
      });
    }
    
    // 4. Hide popup after 2 seconds
    setTimeout(function() {
      hidePopup();
      // Reset button text and state for future (though it won't be shown again)
      ctaBtn.disabled = false;
      ctaBtn.textContent = originalCtaText;
    }, 2000);
  }
  
  // Event Listeners
  document.addEventListener('mouseout', handleMouseLeave);
  closeBtn.addEventListener('click', hidePopup);
  overlay.addEventListener('click', function(e) {
    if (e.target === overlay) {
      hidePopup();
    }
  });
  ctaBtn.addEventListener('click', handleCTAClick);
  
  // Keyboard accessibility (ESC to close)
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && overlay.classList.contains('show')) {
      hidePopup();
    }
  });
  
  // Debug mode (remove in production)
  // Uncomment the line below to test the pop-up immediately
  // Note: To re-test, you must clear your browser's localStorage
  // localStorage.removeItem(CONFIG.DISCOUNT_POPUP_SHOWN_KEY);
  // setTimeout(showPopup, 2000);
  
})();
</script>