{% set title = title | default(value="") %}
{% set title_part_1 = title_part_1 | default(value="") %}
{% set title_part_2 = title_part_2 | default(value="") %}
{% set title_part_3 = title_part_3 | default(value="") %}
{% set title_part_4 = title_part_4 | default(value="") %}
{% set title_part_5 = title_part_5 | default(value="") %}
{% set image_src = image_src | default(value="") %}
{% set image_alt = image_alt | default(value="") %}
{% set button_text = button_text | default(value="") %}
{% set button_link = button_link | default(value="") %}

<div class="fade-in relative isolate overflow-hidden py-12 lg:py-24 lg:h-screen">
    <div class="mx-auto max-w-7xl lg:col-span-2 px-4 lg:flex lg:gap-x-2 lg:px-8">
      <div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
        <h1 class="mt-10 font-medium tracking-tight text-pretty text-black leading-tight lg:text-[7.37rem] text-[3.5rem]">
          {{ title }} 
          <span id="slides" class="slides"></span>
        </h1>
        <div id="learn-more" class="lg:mt-10 mt-4 flex items-center gap-x-6"> 
          <a href="{{ button_link }}" target="_blank" class="text-xl font-semibold text-black hover:text-gray-500">
            {{ button_text }} <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>
      <div class="mx-auto flex max-w-5xl lg:mt-12 mt-0 lg:mr-0 lg:ml-5 lg:max-w-none lg:flex-none">
        <div class="max-w-3xl flex-none lg:max-w-5xl">
          <img src="{{ image_src }}" alt="{{ image_alt }}" width="2432" height="1442" class="lg:w-[66rem] w-[25rem]">
        </div>
      </div>
    </div>
  </div>
  
  <script>
  document.addEventListener("DOMContentLoaded", function () {
      const phrases = [
          "{{ title_part_1 }}",
          "{{ title_part_2 }}",
          "{{ title_part_3 }}",
          "{{ title_part_4 }}",
          "{{ title_part_5 }}" // Final phrase
      ];
  
      let index = 0;
      const slideElement = document.getElementById("slides");
      const learnMoreElement = document.getElementById("learn-more");
  
      function typeText(text, i, callback) {
          if (i < text.length) {
              slideElement.textContent += text.charAt(i);
              setTimeout(() => typeText(text, i + 1, callback), 100);
          } else {
              setTimeout(callback, 500);
          }
      }
  
      function deleteText(callback) {
          let text = slideElement.textContent;
          if (text.length > 0) {
              slideElement.textContent = text.substring(0, text.length - 1);
              setTimeout(() => deleteText(callback), 50);
          } else {
              setTimeout(callback, 500);
          }
      }
  
      function cyclePhrases() {
          if (index < phrases.length - 1) {
              typeText(phrases[index], 0, () => {
                  deleteText(() => {
                      index++;
                      cyclePhrases();
                  });
              });
          } else {
              typeText(phrases[index], 0, () => {
                  learnMoreElement.classList.remove("hidden"); // Show "Learn more"
              });
          }
      }
  
      cyclePhrases(); // Start the loop
  });
  </script>