class CustomCta extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <div id="demo" class="bg-tick8ing-gradient">
        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
          <div class="animate-on-scroll">
            <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
              <span class="block">Prêt à transformer votre billetterie ?</span>
              <span class="block text-indigo-200">Demandez une démonstration personnalisée.</span>
            </h2>
          </div>
          <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0 animate-on-scroll">
            <div class="inline-flex rounded-md shadow">
              <a href="#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
                <i data-feather="mail" class="mr-2"></i> Contactez-nous
              </a>
            </div>
            <div class="ml-3 inline-flex rounded-md shadow">
              <a href="tel:+3221234567" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70">
                <i data-feather="phone" class="mr-2"></i> +32 2 123 45 67
              </a>
            </div>
          </div>
        </div>
      </div>
    `;
  }
}
customElements.define('custom-cta', CustomCta);