<!-- 
  Marquee Banner Component
  Scrolling "Never Settle" text banner
-->
<section data-component-type="Banner" class="py-8 md:py-12 border-y border-gray-300 overflow-hidden">
  <div class="relative flex overflow-x-hidden">
    <div class="animate-marquee whitespace-nowrap flex items-center gap-8 md:gap-14">
      <div class="flex items-center gap-4 md:gap-6">
        <span class="text-2xl md:text-4xl font-semibold">
          <span
            data-node="marquee_prefix"
            data-node-type="text"
            data-node-label="Prefix Text"
            data-node-default="NEVER"
            class="text-black"
            >{{marquee_prefix}}
          </span>
          <span
            data-node="marquee_text"
            data-node-type="text"
            data-node-label="Accent Word"
            data-node-default="SETTLE"
            class="text-red-600"
            >{{marquee_text}}</span
          >
        </span>
        <svg class="w-6 h-6 md:w-8 md:h-8 text-red-600" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
        </svg>
      </div>
      <div class="flex items-center gap-4 md:gap-6">
        <span class="text-2xl md:text-4xl font-semibold">
          <span class="text-black">{{marquee_prefix}} </span>
          <span class="text-red-600">{{marquee_text}}</span>
        </span>
        <svg class="w-6 h-6 md:w-8 md:h-8 text-red-600" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
        </svg>
      </div>
      <div class="flex items-center gap-4 md:gap-6">
        <span class="text-2xl md:text-4xl font-semibold">
          <span class="text-black">{{marquee_prefix}} </span>
          <span class="text-red-600">{{marquee_text}}</span>
        </span>
        <svg class="w-6 h-6 md:w-8 md:h-8 text-red-600" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
        </svg>
      </div>
      <div class="flex items-center gap-4 md:gap-6">
        <span class="text-2xl md:text-4xl font-semibold">
          <span class="text-black">{{marquee_prefix}} </span>
          <span class="text-red-600">{{marquee_text}}</span>
        </span>
        <svg class="w-6 h-6 md:w-8 md:h-8 text-red-600" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
        </svg>
      </div>
      <div class="flex items-center gap-4 md:gap-6">
        <span class="text-2xl md:text-4xl font-semibold">
          <span class="text-black">{{marquee_prefix}} </span>
          <span class="text-red-600">{{marquee_text}}</span>
        </span>
        <svg class="w-6 h-6 md:w-8 md:h-8 text-red-600" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
        </svg>
      </div>
      <div class="flex items-center gap-4 md:gap-6">
        <span class="text-2xl md:text-4xl font-semibold">
          <span class="text-black">{{marquee_prefix}} </span>
          <span class="text-red-600">{{marquee_text}}</span>
        </span>
        <svg class="w-6 h-6 md:w-8 md:h-8 text-red-600" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
        </svg>
      </div>
    </div>

    <div class="absolute top-0 animate-marquee2 whitespace-nowrap flex items-center gap-8 md:gap-14">
      <div class="flex items-center gap-4 md:gap-6">
        <span class="text-2xl md:text-4xl font-semibold">
          <span class="text-black">{{marquee_prefix}} </span>
          <span class="text-red-600">{{marquee_text}}</span>
        </span>
        <svg class="w-6 h-6 md:w-8 md:h-8 text-red-600" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
        </svg>
      </div>
      <div class="flex items-center gap-4 md:gap-6">
        <span class="text-2xl md:text-4xl font-semibold">
          <span class="text-black">{{marquee_prefix}} </span>
          <span class="text-red-600">{{marquee_text}}</span>
        </span>
        <svg class="w-6 h-6 md:w-8 md:h-8 text-red-600" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
        </svg>
      </div>
      <div class="flex items-center gap-4 md:gap-6">
        <span class="text-2xl md:text-4xl font-semibold">
          <span class="text-black">{{marquee_prefix}} </span>
          <span class="text-red-600">{{marquee_text}}</span>
        </span>
        <svg class="w-6 h-6 md:w-8 md:h-8 text-red-600" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
        </svg>
      </div>
      <div class="flex items-center gap-4 md:gap-6">
        <span class="text-2xl md:text-4xl font-semibold">
          <span class="text-black">{{marquee_prefix}} </span>
          <span class="text-red-600">{{marquee_text}}</span>
        </span>
        <svg class="w-6 h-6 md:w-8 md:h-8 text-red-600" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
        </svg>
      </div>
      <div class="flex items-center gap-4 md:gap-6">
        <span class="text-2xl md:text-4xl font-semibold">
          <span class="text-black">{{marquee_prefix}} </span>
          <span class="text-red-600">{{marquee_text}}</span>
        </span>
        <svg class="w-6 h-6 md:w-8 md:h-8 text-red-600" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
        </svg>
      </div>
      <div class="flex items-center gap-4 md:gap-6">
        <span class="text-2xl md:text-4xl font-semibold">
          <span class="text-black">{{marquee_prefix}} </span>
          <span class="text-red-600">{{marquee_text}}</span>
        </span>
        <svg class="w-6 h-6 md:w-8 md:h-8 text-red-600" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
        </svg>
      </div>
    </div>
  </div>
</section>

<style>
  @keyframes marquee {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  @keyframes marquee2 {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0%);
    }
  }
  .animate-marquee {
    animation: marquee 25s linear infinite;
  }
  .animate-marquee2 {
    animation: marquee2 25s linear infinite;
  }
</style>
