<!-- Newsletter Modal -->
<button id="phw-newsletter-btn" style="background-color: #2563eb; color: #ffffff; border: none; padding: 12px 24px; font-size: 16px; font-weight: 600; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m2 7 10 6 10-6"></path></svg>
  Subscribe to Newsletter
</button>

<div id="phw-newsletter-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; justify-content: center; align-items: center; padding: 20px;">
  <div style="position: relative; background: white; border-radius: 12px; max-width: 600px; width: 100%; max-height: 90vh; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);">
    <button id="phw-modal-close" style="position: absolute; top: 16px; right: 16px; background: white; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
    </button>
    <iframe src="https://scottish-highlands-hospitality.base44.app/NewsletterSignup" style="width: 100%; height: 90vh; border: none; display: block;"></iframe>
  </div>
</div>

<script>
(function() {
  const trigger = document.getElementById('phw-newsletter-btn');
  const modal = document.getElementById('phw-newsletter-modal');
  const closeBtn = document.getElementById('phw-modal-close');
  
  trigger.addEventListener('mouseenter', function() {
    this.style.backgroundColor = '#1d4ed8';
    this.style.transform = 'translateY(-2px)';
    this.style.boxShadow = '0 4px 6px rgba(0,0,0,0.15)';
  });
  
  trigger.addEventListener('mouseleave', function() {
    this.style.backgroundColor = '#2563eb';
    this.style.transform = 'translateY(0)';
    this.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';
  });
  
  
  trigger.addEventListener('click', function(e) {
    
    modal.style.display = 'flex';
    document.body.style.overflow = 'hidden';
  });
  
  closeBtn.addEventListener('click', function() {
    modal.style.display = 'none';
    document.body.style.overflow = 'auto';
  });
  
  modal.addEventListener('click', function(e) {
    if (e.target === modal) {
      modal.style.display = 'none';
      document.body.style.overflow = 'auto';
    }
  });
  
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && modal.style.display === 'flex') {
      modal.style.display = 'none';
      document.body.style.overflow = 'auto';
    }
  });
})();
</script>