// Load header and footer includes
document.addEventListener('DOMContentLoaded', function() {
    // Load header
    const headerPlaceholder = document.getElementById('header-placeholder');
    if (headerPlaceholder) {
        fetch('includes/header.html')
            .then(response => response.text())
            .then(html => {
                headerPlaceholder.innerHTML = html;
            })
            .catch(error => console.error('Error loading header:', error));
    }

    // Load footer
    const footerPlaceholder = document.getElementById('footer-placeholder');
    if (footerPlaceholder) {
        fetch('includes/footer.html')
            .then(response => response.text())
            .then(html => {
                footerPlaceholder.innerHTML = html;
            })
            .catch(error => console.error('Error loading footer:', error));
    }

    // Newsletter subscription via Beehiiv API proxy
    const SUBSCRIBE_API = 'https://9uqse4bt6c.execute-api.us-west-2.amazonaws.com/prod/api/public/subscribe';

    function showSubscribeModal(type, message) {
        // Remove any existing modal
        var existing = document.querySelector('.subscribe-modal-overlay');
        if (existing) existing.remove();

        var iconSvg = type === 'success'
            ? '<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#28ca42" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/></svg>'
            : type === 'error'
            ? '<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></svg>'
            : '<div class="subscribe-spinner"></div>';

        var overlay = document.createElement('div');
        overlay.className = 'subscribe-modal-overlay';
        overlay.innerHTML =
            '<div class="subscribe-modal subscribe-modal-' + type + '">' +
                '<button class="subscribe-modal-close" aria-label="Close">&times;</button>' +
                '<div class="subscribe-modal-icon">' + iconSvg + '</div>' +
                '<p class="subscribe-modal-message">' + message + '</p>' +
            '</div>';

        document.body.appendChild(overlay);

        // Close on backdrop click or close button
        overlay.addEventListener('click', function(e) {
            if (e.target === overlay || e.target.closest('.subscribe-modal-close')) {
                overlay.remove();
            }
        });
    }

    function initNewsletterForm(form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            var emailInput = form.querySelector('#email') || form.querySelector('input[type="email"]');
            var email = emailInput ? emailInput.value.trim() : '';
            if (!email) return;

            showSubscribeModal('loading', 'Subscribing...');

            fetch(SUBSCRIBE_API, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email: email })
            })
            .then(function(response) { return response.json().then(function(data) { return { ok: response.ok, data: data }; }); })
            .then(function(result) {
                if (result.ok) {
                    showSubscribeModal('success', 'Welcome! Please check your email to confirm your subscription.');
                    form.reset();
                } else {
                    showSubscribeModal('error', result.data.error || 'Subscription failed. Please try again.');
                }
            })
            .catch(function() {
                showSubscribeModal('error', 'Something went wrong. Please try again later.');
            });
        });
    }

    // Attach to all newsletter forms on the page
    document.querySelectorAll('.newsletter-form').forEach(initNewsletterForm);
});