<section data-component-type="Hero" class="w-[90%] py-20 mx-auto mt-[80px]" data-component-slug="saas-template-powerup">
  <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="https://res.cloudinary.com/duukclzsd/image/upload/v1765868977/seltrix/templates/saas-template/pricinghero/Ellipse%2023.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="https://res.cloudinary.com/duukclzsd/image/upload/v1765868975/seltrix/templates/saas-template/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>