class CustomFooter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Initialize feather icons in shadow DOM
const featherScript = document.createElement('script');
featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
this.shadowRoot.appendChild(featherScript);
featherScript.onload = () => {
feather.replace();
// Newsletter form submission
const newsletterForm = this.shadowRoot.getElementById('newsletterForm');
if (newsletterForm) {
newsletterForm.addEventListener('submit', function(e) {
e.preventDefault();
const email = this.querySelector('input[type="email"]').value;
if (email) {
// Show success message
const button = this.querySelector('button');
const originalText = button.textContent;
button.textContent = 'Subscribed!';
button.disabled = true;
setTimeout(() => {
button.textContent = originalText;
button.disabled = false;
this.reset();
}, 2000);
}
});
}
};
// Handle link clicks for smooth scrolling
const links = this.shadowRoot.querySelectorAll('a[href^="#"]');
links.forEach(link => {
link.addEventListener('click', function(e) {
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
e.preventDefault();
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
}
}
customElements.define('custom-footer', CustomFooter);