<?php
/**
 * Newsletter Section Component
 * Displays above the header for email subscription
 */
?>
<div class="newsletter-banner" style="background: linear-gradient(135deg, #F07E2D 0%, #e06815 100%); padding: 20px 16px; text-align: center; border-bottom: 3px solid #d45f0a;">
    <div style="max-width: 800px; margin: 0 auto;">
        <h3 style="color: #ffffff; font-size: 20px; font-weight: 700; margin: 0 0 8px 0; letter-spacing: 0.5px;">
            Subscribe to Our Newsletter
        </h3>
        <p style="color: #ffffff; font-size: 14px; margin: 0 0 16px 0; opacity: 0.95;">
            Get exclusive deals, new arrivals, and special offers delivered to your inbox!
        </p>
        
        <form class="newsletter-form" method="POST" action="api_newsletter_subscribe.php" style="display: flex; gap: 8px; max-width: 500px; margin: 0 auto; flex-wrap: wrap; justify-content: center;">
            <input 
                type="email" 
                name="email" 
                placeholder="Enter your email address" 
                required
                style="flex: 1; min-width: 200px; padding: 12px 16px; border: none; border-radius: 4px; font-size: 14px; font-family: inherit;"
            >
            <button 
                type="submit" 
                style="padding: 12px 24px; background: #1a1a1a; color: #ffffff; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.3s ease;"
                onmouseover="this.style.background='#000000'; this.style.transform='scale(1.02)';"
                onmouseout="this.style.background='#1a1a1a'; this.style.transform='scale(1)';"
            >
                Subscribe
            </button>
        </form>
        
        <p style="color: #ffffff; font-size: 12px; margin: 12px 0 0 0; opacity: 0.8;">
            We respect your privacy. Unsubscribe at any time.
        </p>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.newsletter-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const email = this.querySelector('input[name="email"]').value;
            const formData = new FormData();
            formData.append('email', email);
            
            fetch('api_newsletter_subscribe.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Thank you for subscribing!');
                    this.reset();
                } else {
                    alert(data.message || 'Error subscribing. Please try again.');
                }
            })
            .catch(error => console.error('Error:', error));
        });
    }
});
</script>
