class CustomCta extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .cta-section {
          background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
          padding: 6rem 0;
          color: white;
        }
        .cta-button {
          background: white;
          color: #3b82f6;
          transition: all 0.3s ease;
        }
        .cta-button:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.3);
        }
      </style>
      <section class="cta-section">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to transform your content creation?</h2>
          <p class="text-xl mb-8 max-w-3xl mx-auto">Join thousands of creators who save time and produce better content with Short AI</p>
          <a href="/signup" class="cta-button inline-block px-8 py-3 rounded-full text-lg font-medium shadow-md hover-scale">Get Started - Free Forever</a>
        </div>
      </section>
    `;
  }
}
customElements.define('custom-cta', CustomCta);