<!-- 
  Scale Effortlessly Section Component
  Feature cards grid
-->
<section data-component-type="Content" class="max-w-[90%] mx-auto py-20">
  <!-- Badge -->
  <span
    data-node="scale_badge"
    data-node-type="text"
    data-node-label="Badge Text"
    data-node-default="Scale Effortlessly"
    class="text-sm font-medium bg-[#5F4BE233] text-[#5F4BE2] px-4 py-2 rounded-[10px]"
  >
    {{scale_badge}}
  </span>

  <!-- Heading + Subtext -->
  <div class="flex flex-col lg:flex-row lg:justify-between lg:items-start gap-6 mt-6">
    <div class="max-w-xl">
      <h2
        data-node="scale_heading"
        data-node-type="text"
        data-node-label="Main Heading"
        data-node-default="Grow your operations with features built for expansion"
        class="text-3xl md:text-4xl font-semibold text-[#0A0A0A] leading-snug"
      >
        {{scale_heading}}
      </h2>
    </div>

    <p
      data-node="scale_subtext"
      data-node-type="textarea"
      data-node-label="Subtext"
      data-node-default="Add users, upgrade processes, and expand your workload instantly. The system adapts to growth without slowing you down."
      class="max-w-lg text-[#4A6673] text-base leading-relaxed"
    >
      {{scale_subtext}}
    </p>
  </div>

  <!-- Feature Cards Grid -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 mt-12">
    <!-- Card 1 -->
    <div class="p-6 border rounded-xl hover:shadow-lg transition bg-[#F8FAFB]">
      <img
        data-node="scale_card_1_icon"
        data-node-type="file"
        data-node-label="Card 1 Icon"
        data-node-default="../assets/Scale-Effortless/verify.png"
        src="{{scale_card_1_icon}}"
        alt="Feature Icon"
        class="w-10 h-10 p-2 bg-[#E8EFF3] rounded-lg mb-4"
      />
      <h3
        data-node="scale_card_1_title"
        data-node-type="text"
        data-node-label="Card 1 Title"
        data-node-default="Advanced Permissions"
        class="font-semibold text-lg mb-2"
      >
        {{scale_card_1_title}}
      </h3>
      <p
        data-node="scale_card_1_desc"
        data-node-type="textarea"
        data-node-label="Card 1 Description"
        data-node-default="Control access with custom roles that keep your data secure."
        class="text-[#4A5A63] text-sm leading-relaxed"
      >
        {{scale_card_1_desc}}
      </p>
    </div>

    <!-- Card 2 -->
    <div class="p-6 border rounded-xl hover:shadow-lg transition bg-[#F8FAFB]">
      <img
        data-node="scale_card_2_icon"
        data-node-type="file"
        data-node-label="Card 2 Icon"
        data-node-default="../assets/Scale-Effortless/hierarchy.png"
        src="{{scale_card_2_icon}}"
        alt="Feature Icon"
        class="w-10 h-10 p-2 bg-[#EAEFF5] rounded-lg mb-4"
      />
      <h3
        data-node="scale_card_2_title"
        data-node-type="text"
        data-node-label="Card 2 Title"
        data-node-default="Multi-Workspace Setup"
        class="font-semibold text-lg mb-2"
      >
        {{scale_card_2_title}}
      </h3>
      <p
        data-node="scale_card_2_desc"
        data-node-type="textarea"
        data-node-label="Card 2 Description"
        data-node-default="Switch between teams or projects without losing flow or structure."
        class="text-[#4A5A63] text-sm leading-relaxed"
      >
        {{scale_card_2_desc}}
      </p>
    </div>

    <!-- Card 3 -->
    <div class="p-6 border rounded-xl hover:shadow-lg transition bg-[#F8FAFB]">
      <img
        data-node="scale_card_3_icon"
        data-node-type="file"
        data-node-label="Card 3 Icon"
        data-node-default="../assets/Scale-Effortless/flash.png"
        src="{{scale_card_3_icon}}"
        alt="Feature Icon"
        class="w-10 h-10 p-2 bg-[#EAEFF5] rounded-lg mb-4"
      />
      <h3
        data-node="scale_card_3_title"
        data-node-type="text"
        data-node-label="Card 3 Title"
        data-node-default="Performance Insights"
        class="font-semibold text-lg mb-2"
      >
        {{scale_card_3_title}}
      </h3>
      <p
        data-node="scale_card_3_desc"
        data-node-type="textarea"
        data-node-label="Card 3 Description"
        data-node-default="Track usage, speed, and engagement with real-time analytics."
        class="text-[#4A5A63] text-sm leading-relaxed"
      >
        {{scale_card_3_desc}}
      </p>
    </div>

    <!-- Card 4 -->
    <div class="p-6 border rounded-xl hover:shadow-lg transition bg-[#F8FAFB]">
      <img
        data-node="scale_card_4_icon"
        data-node-type="file"
        data-node-label="Card 4 Icon"
        data-node-default="../assets/Scale-Effortless/simcard.png"
        src="{{scale_card_4_icon}}"
        alt="Feature Icon"
        class="w-10 h-10 p-2 bg-[#EAEFF5] rounded-lg mb-4"
      />
      <h3
        data-node="scale_card_4_title"
        data-node-type="text"
        data-node-label="Card 4 Title"
        data-node-default="API Extensions"
        class="font-semibold text-lg mb-2"
      >
        {{scale_card_4_title}}
      </h3>
      <p
        data-node="scale_card_4_desc"
        data-node-type="textarea"
        data-node-label="Card 4 Description"
        data-node-default="Integrate tools, build automations, and shape your custom ecosystem."
        class="text-[#4A5A63] text-sm leading-relaxed"
      >
        {{scale_card_4_desc}}
      </p>
    </div>
  </div>
</section>
