components/cta-banner.js

class CustomCtaBanner extends HTMLElement {
    connectedCallback() {
        const title = this.getAttribute('title') || 'Ready to get started?';
        const buttonText = this.getAttribute('button-text') || 'Contact Us';
        const link = this.getAttribute('link') || '#contact';
        
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .cta-banner {
                    background: linear-gradient(135deg, #6366f1 0%, #10b981 100%);
                }
                .cta-button {
                    transition: all 0.3s ease;
                }
                .cta-button:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
                }
            </style>
            <section class="cta-banner text-white py-16 px-6">
                <div class="max-w-7xl mx-auto text-center">
                    <h2 class="text-3xl md:text-4xl font-bold mb-8">${title}</h2>
                    <a href="${link}" class="cta-button inline-block bg-white text-primary-700 hover:bg-gray-100 font-semibold py-4 px-10 rounded-lg text-lg">
                        ${buttonText}
                    </a>
                </div>
            </section>
        `;
    }
}
customElements.define('custom-cta-banner', CustomCtaBanner);