<!-- 
  Hero Section Component
  Landing page hero with badge, heading, subheading, CTA and image
-->
<section data-component-type="Hero" class="flex justify-center">
  <section
    class="section1 bg-[#ffffff] md:bg-[radial-gradient(circle,rgba(255,_255,_255,_1)_57%,_rgba(91,_72,_224,_1)_100%)] bg-cover bg-center max-w-[97%] mt-[1%] rounded-[20px] lg:h-auto w-[100%]"
  >
    <div
      class="lg:max-w-[90%] max-w-full flex justify-center mx-auto px-5 pt-[80px] md:pt-[100px] lg:pt-[100px] items-center gap-5"
    >
      <div>
        <!-- Badge -->
        {{#if show_hero_badge}}
        <div class="p-2 flex justify-center gap-3">
          <div class="bg-[#d8d3f8] flex gap-3 px-6 py-2 items-center rounded-[10px]">
            <img
              data-node="hero_badge_icon"
              data-node-type="file"
              data-node-label="Hero Badge Icon"
              data-node-default="../assets/landing-hero/El.png"
              src="{{hero_badge_icon}}"
              class="w-[15px] h-[15px]"
              alt="Badge Icon"
            />
            <span
              data-node="hero_badge_text"
              data-node-type="text"
              data-node-label="Hero Badge Text"
              data-node-default="For Agencies"
              class="text-[#5F4BE2] text-center text-[16px] rounded-md font-bold"
            >
              {{hero_badge_text}}
            </span>
          </div>
        </div>
        {{/if}}

        <!-- Main Heading -->
        <h1
          data-node="hero_heading"
          data-node-type="text"
          data-node-label="Hero Main Heading"
          data-node-default="Transform CMR Workflows Into Real Measurable Results"
          class="text-[#151515] text-[20px] lg:text-[50px] text-center font-bold rounded-md mt-4"
        >
          {{hero_heading}}
        </h1>

        <!-- Subheading -->
        <p
          data-node="hero_subheading"
          data-node-type="textarea"
          data-node-label="Hero Subheading"
          data-node-default="A unified platform that eliminates manual tasks, streamlines collaboration, and turns everyday workflows into performance-driven results."
          class="text-[#4A6673] mt-0 pt-0 text-[16px] text-center lg:text-[22px] font-bold rounded-md"
        >
          {{hero_subheading}}
        </p>

        <!-- CTA Button -->
        <div class="p-2 flex justify-center gap-3">
          <a
            data-node="hero_cta_link"
            data-node-type="page_links"
            data-node-label="Hero CTA Link"
            data-node-default="#"
            href="{{hero_cta_link}}"
            class="mt-5 bg-[#5F4BE2] text-[#FFFFFF] font-semibold px-6 py-3 border rounded-[10px] border-transparent hover:bg-[#5F4BE2] hover:text-white hover:border-[#5F4BE2] transition-all duration-300 shadow-md hover:shadow-lg flex items-center gap-2"
          >
            <span
              data-node="hero_cta_text"
              data-node-type="text"
              data-node-label="Hero CTA Button Text"
              data-node-default="Start for Free!"
              >{{hero_cta_text}}</span
            >
          </a>
        </div>

        <!-- Hero Image -->
        <div class="flex justify-center mt-[30px]">
          <img
            data-node="hero_image"
            data-node-type="file"
            data-node-label="Hero Main Image"
            data-node-default="../assets/landing-hero/secondimg.png"
            src="{{hero_image}}"
            class="w-[100%]"
            alt="Hero Image"
          />
        </div>
      </div>
    </div>
  </section>
</section>
