{% set title = title | default(value="Built") %}
{% set image_src = image_src | default(value="") %}
{% set image_alt = image_alt | default(value="") %}
{% set description_1 = description_1 | default(value="") %}
{% set description_2 = description_2 | default(value="") %}
{% set video_link = video_link | default(value="") %}
{% set button1_text = button1_text | default(value="") %}
{% set button1_link = button1_link | default(value="") %}

<div class="relative flex justify-center items-center isolate overflow-hidden lg:py-2 py-12 lg:h-screen">
    <div class="mx-auto max-w-7xl text-center px-2 pt-12 lg:px-8">
        <!-- Main Heading -->
        <h1 class="fade-in">
          {{ title }}
        </h1>
        
        <!-- Subtext -->
        <p class="mx-auto mt-8 max-w-3xl fade-in fade-in-delay">
          {{ description_1 }}
        <br>
        <span class=" text-white font-semibold">{{ description_2 }}</span> 
        </p>
        
        <!-- Embed YouTube Video -->
        <div class="py-4 flex justify-center mx-auto" style="max-width: 550px; height: auto;">
            <div class="responsive-iframe" >
                <iframe src="{{ video_link }}" title="YouTube video player" 
                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
                </iframe>
            </div>
        </div>
        
        <!-- Call to Action Button -->
        <div class="mt-2 fade-in flex items-center justify-center gap-x-6">
            <a href="{{ button1_link }}" target="_blank" 
               class="rounded-2xl bg-white px-4 py-2.5 text-sm sm:text-base font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">
                {{ button1_text }}
            </a>
        </div>
    </div>
</div>

<style>
  /* Fade-in animation */
  .fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
  }

  /* Fade-in keyframe */
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  /* Responsive iframe for YouTube video */
  .responsive-iframe {
    position: relative;
    width: 100%;
    max-width: 800px; /* Max width for large screens */
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
  }
  .responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Ensure content aligns properly */
  .flex.justify-center {
    display: flex;
    justify-content: center;
  }

  /* Responsive text and spacing */
  .text-pretty {
    word-wrap: break-word;
  }
  @media (max-width: 640px) {
    .text-pretty {
      padding: 0 1rem;
    }
  }

  /* Style for the button */
  .blinking-effect {
    animation: blink 1.5s step-start infinite;
  }

  @keyframes blink {
    50% {
      opacity: 0.5;
    }
  }
</style>

<script>
  // JavaScript to add 'visible' class after loading
  window.addEventListener('DOMContentLoaded', () => {
    const fadeInElements = document.querySelectorAll('.fade-in');

    fadeInElements.forEach((element, index) => {
      // Adding a delay for each fade-in effect (increasing delay with index)
      setTimeout(() => {
        element.classList.add('visible');
      }, index * 1000); // 1000ms delay between each element
    });
  });
</script>