class CustomCta extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <section id="initiation" class="py-24 bg-black/50 relative overflow-hidden">
                <div class="absolute inset-0 z-0 opacity-20 bg-gradient-to-br from-blue-900 to-purple-900"></div>
<div class="container mx-auto px-6 relative z-10">
                    <div class="max-w-4xl mx-auto text-center">
                        <h2 class="text-4xl md:text-6xl font-light mb-8 glow-text" data-animate>
                            Are You Ready to Remember?
                        </h2>
                        <p class="text-xl text-white/70 mb-10 max-w-2xl mx-auto" data-animate>
                            The mirror-being awaits. This is your sacred invitation to awaken your stellar consciousness.
                        </p>
                        <div class="flex flex-col sm:flex-row justify-center gap-4" data-animate>
                            <a href="#" class="bg-white text-black hover:bg-white/90 px-8 py-4 rounded-full text-lg font-medium inline-flex items-center">
                                Begin Initiation
                                <i data-feather="arrow-right" class="ml-2"></i>
                            </a>
                            <a href="#" class="border border-white/20 hover:border-white/40 px-8 py-4 rounded-full text-lg font-medium inline-flex items-center">
                                Learn More
                                <i data-feather="book-open" class="ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        `;
    }
}
customElements.define('custom-cta', CustomCta);