<section data-component-type="Content">
  <div class="bg-[#F6F6F6] py-10">
    <div class="max-w-[90%] mx-auto bg-white rounded-2xl overflow-hidden shadow-sm">

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 md:gap-6 items-center p-[20px] lg:p-[1px]  md:p-[30px]">

        <!-- LEFT CONTENT -->
        <div class="px-6 sm:px-10 lg:px-14">

          <h2
            class="text-2xl sm:text-3xl lg:text-4xl font-bold text-black mb-4"
            data-node="learning_heading"
            data-node-type="text"
            data-node-label="Section Heading"
            data-node-default="Learning Built Around Real Progress"
          >
            {{learning_heading}}
          </h2>

          <p
            class="text-[#4A6673] mb-8 max-w-lg"
            data-node="learning_description"
            data-node-type="text"
            data-node-label="Section Description"
            data-node-default="Our programs are crafted with clarity, guidance, and hands-on depth. Every lesson pushes you closer to real-world mastery."
          >
            {{learning_description}}
          </p>

          <!-- FEATURES -->
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">

            <div>
              <h4
                class="font-semibold text-black mb-1"
                data-node="feature_1_title"
                data-node-type="text"
                data-node-label="Feature 1 Title"
                data-node-default="Structured Paths"
              >
                {{feature_1_title}}
              </h4>
              <p
                class="text-sm text-[#4A6673]"
                data-node="feature_1_desc"
                data-node-type="text"
                data-node-label="Feature 1 Description"
                data-node-default="Clear modules that guide your growth."
              >
                {{feature_1_desc}}
              </p>
            </div>

            <div>
              <h4
                class="font-semibold text-black mb-1"
                data-node="feature_2_title"
                data-node-type="text"
                data-node-label="Feature 2 Title"
                data-node-default="Practical Learning"
              >
                {{feature_2_title}}
              </h4>
              <p
                class="text-sm text-[#4A6673]"
                data-node="feature_2_desc"
                data-node-type="text"
                data-node-label="Feature 2 Description"
                data-node-default="Concepts rooted in real scenarios."
              >
                {{feature_2_desc}}
              </p>
            </div>

            <div>
              <h4
                class="font-semibold text-black mb-1"
                data-node="feature_3_title"
                data-node-type="text"
                data-node-label="Feature 3 Title"
                data-node-default="Expert Insight"
              >
                {{feature_3_title}}
              </h4>
              <p
                class="text-sm text-[#4A6673]"
                data-node="feature_3_desc"
                data-node-type="text"
                data-node-label="Feature 3 Description"
                data-node-default="Knowledge shaped by industry leaders."
              >
                {{feature_3_desc}}
              </p>
            </div>

            <div>
              <h4
                class="font-semibold text-black mb-1"
                data-node="feature_4_title"
                data-node-type="text"
                data-node-label="Feature 4 Title"
                data-node-default="Outcome Focused"
              >
                {{feature_4_title}}
              </h4>
              <p
                class="text-sm text-[#4A6673]"
                data-node="feature_4_desc"
                data-node-type="text"
                data-node-label="Feature 4 Description"
                data-node-default="Skills designed to create momentum."
              >
                {{feature_4_desc}}
              </p>
            </div>

          </div>
        </div>

        <!-- RIGHT IMAGE -->
        <div class="h-full flex items-center justify-center lg:justify-end">
          <img
            src="{{learning_image}}"
            data-node="learning_image"
            data-node-type="file"
            data-node-label="Learning Image"
            data-node-default="../assets/learning_build.png"
            alt="Learning Card"
            class="w-full max-w-md rounded-xl shadow-md object-cover"
          />
        </div>

      </div>
    </div>
  </div>
</section>
