<!-- 
  Power Up Section Component
  Dashboard showcase with stats
-->
<section data-component-type="Hero" class="w-[90%] py-20 mx-auto">
  <div class="grid lg:grid-cols-2 gap-12 items-center">
    <!-- LEFT CONTENT -->
    <div>
      <div class="bg-[#d8d3f8] flex gap-3 px-6 py-2 items-center rounded-[10px] w-[150px]">
        <img
          data-node="powerup_tag_icon"
          data-node-type="file"
          data-node-label="Tag Icon"
          data-node-default="../assets/pricinghero/Ellipse 23.png"
          src="{{powerup_tag_icon}}"
          class="w-[15px] h-[15px]"
          alt="Logo"
        />
        <span
          data-node="powerup_tag"
          data-node-type="text"
          data-node-label="Tag Label"
          data-node-default="Power Up"
          class="text-[#5F4BE2] text-center text-[16px] rounded-md font-bold"
          >{{powerup_tag}}</span
        >
      </div>

      <h1
        data-node="powerup_heading"
        data-node-type="text"
        data-node-label="Main Heading"
        data-node-default="Boost productivity with tools built for real momentum"
        class="text-4xl lg:text-6xl font-bold mt-5 leading-tight text-black"
      >
        {{powerup_heading}}
      </h1>

      <p
        data-node="powerup_subtext"
        data-node-type="textarea"
        data-node-label="Subtext"
        data-node-default="Streamline your workflow with features designed to remove friction. Automate tasks, simplify decisions, and keep everything moving forward."
        class="text-gray-600 text-lg mt-4 max-w-xl"
      >
        {{powerup_subtext}}
      </p>

      <div class="flex flex-wrap gap-4 mt-8">
        <a
          data-node="powerup_cta_1_link"
          data-node-type="page_links"
          data-node-label="Start for Free Link"
          data-node-default="#"
          href="{{powerup_cta_1_link}}"
          class="bg-[#6A4DF5] text-white px-6 py-3 rounded-lg font-semibold"
        >
          <span
            data-node="powerup_cta_1_text"
            data-node-type="text"
            data-node-label="Start for Free Text"
            data-node-default="Start for Free!"
            >{{powerup_cta_1_text}}</span
          >
        </a>

        <a
          data-node="powerup_cta_2_link"
          data-node-type="page_links"
          data-node-label="Compare Prices Link"
          data-node-default="#"
          href="{{powerup_cta_2_link}}"
          class="border border-gray-300 text-gray-800 px-6 py-3 rounded-lg font-semibold"
        >
          <span
            data-node="powerup_cta_2_text"
            data-node-type="text"
            data-node-label="Compare Prices Text"
            data-node-default="Compare Prices"
            >{{powerup_cta_2_text}}</span
          >
        </a>
      </div>
    </div>

    <!-- RIGHT CARD VISUAL -->
    <div class="relative flex justify-center">
      <!-- Chart card -->
      <div class="w-[330px] sm:w-[400px] md:w-[100%]">
        <div class="flex justify-center items-center my-6">
          <img
            data-node="powerup_chart_image"
            data-node-type="file"
            data-node-label="Chart Image"
            data-node-default="../assets/powerup/Pie.png"
            src="{{powerup_chart_image}}"
            alt="Income Chart"
            class="w-[80%] object-contain"
          />
        </div>
      </div>
    </div>
  </div>

  <!-- BOTTOM TEXT + BARS -->
  <div class="grid md:grid-cols-2 gap-10 mt-20 items-start">
    <!-- Bottom text -->
    <div>
      <h2
        data-node="powerup_bottom_heading"
        data-node-type="text"
        data-node-label="Bottom Heading"
        data-node-default="Project Control Dashboard"
        class="text-2xl font-semibold text-black"
      >
        {{powerup_bottom_heading}}
      </h2>
      <p
        data-node="powerup_bottom_subtext"
        data-node-type="textarea"
        data-node-label="Bottom Subtext"
        data-node-default="Plan, assign, and manage tasks effortlessly across teams and clients. Every project. Every deadline. All in one view."
        class="text-gray-600 text-lg mt-2 max-w-md"
      >
        {{powerup_bottom_subtext}}
      </p>
    </div>

    <!-- Bars -->
    <div class="space-y-6">
      <div class="border p-5 rounded-[10px]">
        <div class="flex justify-between text-sm font-medium text-dark mb-1">
          <span
            data-node="bar_sales_label"
            data-node-type="text"
            data-node-label="Sales Label"
            data-node-default="Sales"
            class="font-bold"
            >{{bar_sales_label}}</span
          >
          <span
            data-node="bar_sales_value"
            data-node-type="text"
            data-node-label="Sales Value"
            data-node-default="1.345"
            class="font-bold"
            >{{bar_sales_value}}</span
          >
        </div>
        <div class="flex justify-between text-[12px] font-medium text-[#8181A5] mb-1">
          <span
            data-node="bar_sales_subtext"
            data-node-type="text"
            data-node-label="Sales Subtext"
            data-node-default="Week comparison"
            >{{bar_sales_subtext}}</span
          >
        </div>
        <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
          <div class="h-full w-[68%] bg-[#48E5B4] rounded-full"></div>
        </div>
      </div>

      <div class="border p-5 rounded-[10px]">
        <div class="flex justify-between text-sm font-medium text-dark mb-1">
          <span
            data-node="bar_leads_label"
            data-node-type="text"
            data-node-label="Leads Label"
            data-node-default="Leads"
            class="font-bold"
            >{{bar_leads_label}}</span
          >
          <span
            data-node="bar_leads_value"
            data-node-type="text"
            data-node-label="Leads Value"
            data-node-default="3.820"
            class="font-bold"
            >{{bar_leads_value}}</span
          >
        </div>
        <div class="flex justify-between text-[12px] font-medium text-[#8181A5] mb-1">
          <span
            data-node="bar_leads_subtext"
            data-node-type="text"
            data-node-label="Leads Subtext"
            data-node-default="Month comparison"
            >{{bar_leads_subtext}}</span
          >
        </div>
        <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
          <div class="h-full w-[82%] bg-[#6A4DF5] rounded-full"></div>
        </div>
      </div>
    </div>
  </div>
</section>
