class CustomFooter extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Add newsletter form submit handler
const form = this.shadowRoot.getElementById('newsletterForm');
if (form) {
form.addEventListener('submit', (e) => {
e.preventDefault();
const email = form.querySelector('input[type="email"]').value;
// Simulate API call
const submitBtn = form.querySelector('button[type="submit"]');
const originalText = submitBtn.innerHTML;
submitBtn.innerHTML = 'Subscribing...';
window.feather.replace();
setTimeout(() => {
submitBtn.innerHTML = originalText;
window.feather.replace();
// Show success message
const input = form.querySelector('input[type="email"]');
input.value = '';
input.placeholder = 'Successfully subscribed! 🎉';
setTimeout(() => {
input.placeholder = 'Enter your email';
}, 3000);
}, 1500);
});
}
// Replace feather icons after component is attached
if (window.feather) {
window.feather.replace();
} else {
window.addEventListener('feather-icons-loaded', () => {
window.feather.replace();
});
}
}
}
customElements.define('custom-footer', CustomFooter);