<!-- 
  Sync Section Component
  Banner with gradient background
-->
<section
  data-component-type="CTA"
  class="max-w-[90%] mx-auto py-20 rounded-3xl relative overflow-hidden bg-[#5F4BE2] flex justify-center text-center px-5 my-10"
>
  <!-- LEFT GRADIENT RING -->
  <div class="absolute top-0 left-0 hidden xl:block z-[1]">
    <img
      data-node="sync_left_img"
      data-node-type="file"
      data-node-label="Left Gradient Image"
      data-node-default="../assets/Sync/left.png"
      src="{{sync_left_img}}"
      alt="Left Gradient Curve"
    />
  </div>

  <!-- RIGHT GRADIENT RING -->
  <div class="absolute top-0 right-0 hidden xl:block z-[1]">
    <img
      data-node="sync_right_img"
      data-node-type="file"
      data-node-label="Right Gradient Image"
      data-node-default="../assets/Sync/right.png"
      src="{{sync_right_img}}"
      alt="Right Gradient Curve"
    />
  </div>

  <div class="z-10 max-w-3xl">
    <!-- BADGE -->
    <span
      data-node="sync_badge"
      data-node-type="text"
      data-node-label="Badge Text"
      data-node-default="Sync Seamlessly"
      class="bg-white text-[#5F4BE2] font-medium px-5 py-2 rounded-[10px] text-sm"
    >
      {{sync_badge}}
    </span>

    <!-- TITLE -->
    <h2
      data-node="sync_heading"
      data-node-type="text"
      data-node-label="Heading Text"
      data-node-default="Keep teams aligned with real-time syncing across every device"
      class="text-white font-bold mt-6 text-3xl md:text-4xl leading-snug"
    >
      {{sync_heading}}
    </h2>

    <!-- SUB TEXT -->
    <p
      data-node="sync_subtext"
      data-node-type="textarea"
      data-node-label="Subtext"
      data-node-default="No delays, no miscommunication—just instant updates everywhere. Your entire team stays on the same page effortlessly."
      class="text-white/90 mt-4 text-sm md:text-base leading-relaxed"
    >
      {{sync_subtext}}
    </p>
  </div>
</section>
