<section data-component-type="Content">
  <section class="bg-[#F6F6F6] px-4 sm:px-6 lg:px-16 py-12 lg:py-20">
    <div class="max-w-[90%] mx-auto">
      <div class="flex flex-col lg:flex-row lg:justify-between gap-6 mb-10">
        <h2
          class="text-3xl sm:text-4xl font-bold max-w-xl"
          data-node="categories_heading"
          data-node-type="text"
          data-node-label="Categories Main Heading"
          data-node-default="Explore Categories Built For Your Career"
        >
          {{categories_heading}}
        </h2>

        <p
          class="text-[#6C6C6C] max-w-md"
          data-node="categories_description"
          data-node-type="text"
          data-node-label="Categories Description"
          data-node-default="Browse courses tailored to different fields and skill paths. Pick your direction and start advancing with purpose."
        >
          {{categories_description}}
        </p>
      </div>

      <div class="flex flex-wrap gap-6 border-b pb-6 mb-12" id="tabs">
        <button class="tab active" data-tab="marketing">
          <h4
            class="font-semibold"
            data-node="tab_marketing_title"
            data-node-type="text"
            data-node-label="Marketing Tab Title"
            data-node-default="Marketing"
          >
            {{tab_marketing_title}}
          </h4>

          <p
            class="text-sm text-[#6C6C6C]"
            data-node="tab_marketing_desc"
            data-node-type="text"
            data-node-label="Marketing Tab Description"
            data-node-default="Learn how brands grow"
          >
            {{tab_marketing_desc}}
          </p>
        </button>

        <button class="tab" data-tab="design">
          <h4
            class="font-semibold"
            data-node="tab_design_title"
            data-node-type="text"
            data-node-label="Design Tab Title"
            data-node-default="Design"
          >
            {{tab_design_title}}
          </h4>

          <p
            class="text-sm text-[#6C6C6C]"
            data-node="tab_design_desc"
            data-node-type="text"
            data-node-label="Design Tab Description"
            data-node-default="Create visuals that convert"
          >
            {{tab_design_desc}}
          </p>
        </button>

        <button class="tab" data-tab="tech">
          <h4
            class="font-semibold"
            data-node="tab_tech_title"
            data-node-type="text"
            data-node-label="Tech Tab Title"
            data-node-default="Tech Skills"
          >
            {{tab_tech_title}}
          </h4>

          <p
            class="text-sm text-[#6C6C6C]"
            data-node="tab_tech_desc"
            data-node-type="text"
            data-node-label="Tech Tab Description"
            data-node-default="Build digital confidence fast"
          >
            {{tab_tech_desc}}
          </p>
        </button>

        <button class="tab" data-tab="productivity">
          <h4
            class="font-semibold"
            data-node="tab_productivity_title"
            data-node-type="text"
            data-node-label="Productivity Tab Title"
            data-node-default="Productivity"
          >
            {{tab_productivity_title}}
          </h4>

          <p
            class="text-sm text-[#6C6C6C]"
            data-node="tab_productivity_desc"
            data-node-type="text"
            data-node-label="Productivity Tab Description"
            data-node-default="Work smarter every day"
          >
            {{tab_productivity_desc}}
          </p>
        </button>

        <button class="tab" data-tab="career">
          <h4
            class="font-semibold"
            data-node="tab_career_title"
            data-node-type="text"
            data-node-label="Career Tab Title"
            data-node-default="Career Growth"
          >
            {{tab_career_title}}
          </h4>

          <p
            class="text-sm text-[#6C6C6C]"
            data-node="tab_career_desc"
            data-node-type="text"
            data-node-label="Career Tab Description"
            data-node-default="Level up your future"
          >
            {{tab_career_desc}}
          </p>
        </button>
      </div>

      <div class="relative">
        <div class="tab-content grid grid-cols-1 lg:grid-cols-2 gap-10 items-start" data-content="marketing">
          <img
            src="{{marketing_image}}"
            data-node="marketing_image"
            data-node-type="file"
            data-node-label="Marketing Image"
            data-node-default="../assets/explore.png"
            class="rounded-xl w-full object-cover"
          />

          <div>
            <h3
              class="text-2xl sm:text-3xl font-bold mb-4"
              data-node="marketing_heading"
              data-node-type="text"
              data-node-label="Marketing Heading"
              data-node-default="Master Skills That Create Lasting Momentum"
            >
              {{marketing_heading}}
            </h3>

            <p
              class="text-[#6C6C6C] mb-8"
              data-node="marketing_description"
              data-node-type="text"
              data-node-label="Marketing Description"
              data-node-default="Small steps stack into big wins, start building the foundation today."
            >
              {{marketing_description}}
            </p>

            <h4
              class="text-[21px] font-bold mb-2"
              data-node="marketing_point_1_title"
              data-node-type="text"
              data-node-label="Marketing Point 1 Title"
              data-node-default="Step-By-Step Learning"
            >
              {{marketing_point_1_title}}
            </h4>
            <p
              class="text-[#6C6C6C] mb-6"
              data-node="marketing_point_1_desc"
              data-node-type="text"
              data-node-label="Marketing Point 1 Description"
              data-node-default="Follow a thoughtfully designed sequence of lessons."
            >
              {{marketing_point_1_desc}}
            </p>

            <!-- POINT 2 -->
            <h4
              class="text-[21px] font-bold mb-2"
              data-node="marketing_point_2_title"
              data-node-type="text"
              data-node-label="Marketing Point 2 Title"
              data-node-default="Real Examples"
            >
              {{marketing_point_2_title}}
            </h4>
            <p
              class="text-[#6C6C6C] mb-6"
              data-node="marketing_point_2_desc"
              data-node-type="text"
              data-node-label="Marketing Point 2 Description"
              data-node-default="Every lesson is paired with real-world scenarios."
            >
              {{marketing_point_2_desc}}
            </p>

            <!-- POINT 3 -->
            <h4
              class="text-[21px] font-bold mb-2"
              data-node="marketing_point_3_title"
              data-node-type="text"
              data-node-label="Marketing Point 3 Title"
              data-node-default="Actionable Insights"
            >
              {{marketing_point_3_title}}
            </h4>
            <p
              class="text-[#6C6C6C]"
              data-node="marketing_point_3_desc"
              data-node-type="text"
              data-node-label="Marketing Point 3 Description"
              data-node-default="Walk away with insights you can implement immediately."
            >
              {{marketing_point_3_desc}}
            </p>
          </div>
        </div>

        <!-- DESIGN -->
        <div class="tab-content hidden grid grid-cols-1 lg:grid-cols-2 gap-10 items-start" data-content="design">
          <img
            src="{{design_image}}"
            data-node="design_image"
            data-node-type="file"
            data-node-label="Design Image"
            data-node-default="../assets/explore.png"
            class="rounded-xl w-full object-cover"
          />

          <div>
            <h3
              data-node="design_heading"
              data-node-type="text"
              data-node-label="Design Heading"
              data-node-default="Design Skills That Create Lasting Momentum"
              class="text-2xl sm:text-3xl font-bold mb-4"
            >
              {{design_heading}}
            </h3>

            <p
              data-node="design_description"
              data-node-type="text"
              data-node-label="Design Description"
              data-node-default="Build strong visual foundations with guided practice."
              class="text-[#6C6C6C] mb-8"
            >
              {{design_description}}
            </p>

            <h4
              data-node="design_point_1_title"
              data-node-type="text"
              data-node-label="Design Point 1 Title"
              data-node-default="Creative Foundations"
              class="text-[21px] font-bold mb-2"
            >
              {{design_point_1_title}}
            </h4>
            <p
              data-node="design_point_1_desc"
              data-node-type="text"
              data-node-label="Design Point 1 Description"
              data-node-default="Follow a thoughtfully designed sequence of lessons."
              class="text-[#6C6C6C] mb-6"
            >
              {{design_point_1_desc}}
            </p>

            <h4
              data-node="design_point_2_title"
              data-node-type="text"
              data-node-label="Design Point 2 Title"
              data-node-default="Real Examples"
              class="text-[21px] font-bold mb-2"
            >
              {{design_point_2_title}}
            </h4>
            <p
              data-node="design_point_2_desc"
              data-node-type="text"
              data-node-label="Design Point 2 Description"
              data-node-default="Follow a thoughtfully designed sequence of lessons."
              class="text-[#6C6C6C] mb-6"
            >
              {{design_point_2_desc}}
            </p>

            <h4
              data-node="design_point_3_title"
              data-node-type="text"
              data-node-label="Design Point 3 Title"
              data-node-default="Actionable Insights"
              class="text-[21px] font-bold mb-2"
            >
              {{design_point_3_title}}
            </h4>
            <p
              data-node="design_point_3_desc"
              data-node-type="text"
              data-node-label="Design Point 3 Description"
              data-node-default="Follow a thoughtfully designed sequence of lessons."
              class="text-[#6C6C6C]"
            >
              {{design_point_3_desc}}
            </p>
          </div>
        </div>

        <!-- TECH -->
        <div class="tab-content hidden grid grid-cols-1 lg:grid-cols-2 gap-10 items-start" data-content="tech">
          <div>
            <img
              src="{{tech_image}}"
              data-node="tech_image"
              data-node-type="file"
              data-node-label="tech Image"
              data-node-default="../assets/explore.png"
              class="rounded-xl w-full object-cover"
            />
          </div>
          <div>
            <h3
              class="text-2xl sm:text-3xl font-bold mb-4"
              data-node="tech_heading"
              data-node-type="text"
              data-node-label="Tech Heading"
              data-node-default=" Tech Skills That Create Lasting Momentum"
            >
              {{tech_heading}}
            </h3>

            <p
              class="text-[#6C6C6C] mb-8"
              data-node="tech_description"
              data-node-type="text"
              data-node-label="Tech Description"
              data-node-default="    Small steps stack into big wins, start building the foundation today. Structured guidance and practical exercises help you apply everything instantly."
            >
              {{tech_description}}
            </p>

            <!-- POINT 1 -->
            <h4
              class="text-[21px] font-bold mb-2"
              data-node="tech_point_1_title"
              data-node-type="text"
              data-node-label="Tech Point 1 Title"
              data-node-default="Step-By-Step Learning"
            >
              {{tech_point_1_title}}
            </h4>
            <p
              class="text-[#6C6C6C] mb-6"
              data-node="tech_point_1_desc"
              data-node-type="text"
              data-node-label="Tech Point 1 Description"
              data-node-default="Follow a thoughtfully designed sequence of lessons."
            >
              {{tech_point_1_desc}}
            </p>

            <!-- POINT 2 -->
            <h4
              class="text-[21px] font-bold mb-2"
              data-node="tech_point_2_title"
              data-node-type="text"
              data-node-label="Tech Point 2 Title"
              data-node-default="Real Examples"
            >
              {{tech_point_2_title}}
            </h4>
            <p
              class="text-[#6C6C6C] mb-6"
              data-node="tech_point_2_desc"
              data-node-type="text"
              data-node-label="Tech Point 2 Description"
              data-node-default="Every lesson is paired with real-world scenarios."
            >
              {{tech_point_2_desc}}
            </p>

            <!-- POINT 3 -->
            <h4
              class="text-[21px] font-bold mb-2"
              data-node="tech_point_3_title"
              data-node-type="text"
              data-node-label="Tech Point 3 Title"
              data-node-default="Actionable Insights"
            >
              {{tech_point_3_title}}
            </h4>
            <p
              class="text-[#6C6C6C]"
              data-node="tech_point_3_desc"
              data-node-type="text"
              data-node-label="Tech Point 3 Description"
              data-node-default="Walk away with insights you can implement immediately."
            >
              {{tech_point_3_desc}}
            </p>
          </div>
        </div>

        <!-- Productivity -->
        <div class="tab-content hidden grid grid-cols-1 lg:grid-cols-2 gap-10 items-start" data-content="productivity">
          <img
            src="{{productivity_image}}"
            data-node="productivity_image"
            data-node-type="file"
            data-node-label="Productivity Image"
            data-node-default="../assets/explore.png"
            class="rounded-xl w-full object-cover"
          />

          <div>
            <h3
              class="text-2xl sm:text-3xl font-bold mb-4"
              data-node="productivity_heading"
              data-node-type="text"
              data-node-label="Productivity Heading"
              data-node-default="Productivity Skills That Create Lasting Momentum"
            >
              {{productivity_heading}}
            </h3>

            <p
              class="text-[#6C6C6C] mb-8"
              data-node="productivity_description"
              data-node-type="text"
              data-node-label="Productivity Description"
              data-node-default="Small steps stack into big wins, start building the foundation today."
            >
              {{productivity_description}}
            </p>

            <h4
              class="text-[21px] font-bold mb-2"
              data-node="productivity_point_1_title"
              data-node-type="text"
              data-node-label="Productivity Point 1 Title"
              data-node-default="Step-By-Step Learning"
            >
              {{productivity_point_1_title}}
            </h4>
            <p
              class="text-[#6C6C6C] mb-6"
              data-node="productivity_point_1_desc"
              data-node-type="text"
              data-node-label="Productivity Point 1 Description"
              data-node-default="Follow a thoughtfully designed sequence of lessons that guide you from basics to advanced."
            >
              {{productivity_point_1_desc}}
            </p>

            <h4
              class="text-[21px] font-bold mb-2"
              data-node="productivity_point_2_title"
              data-node-type="text"
              data-node-label="Productivity Point 2 Title"
              data-node-default="Real Examples"
            >
              {{productivity_point_2_title}}
            </h4>
            <p
              class="text-[#6C6C6C] mb-6"
              data-node="productivity_point_2_desc"
              data-node-type="text"
              data-node-label="Productivity Point 2 Description"
              data-node-default="Every lesson includes real-world productivity scenarios."
            >
              {{productivity_point_2_desc}}
            </p>

            <h4
              class="text-[21px] font-bold mb-2"
              data-node="productivity_point_3_title"
              data-node-type="text"
              data-node-label="Productivity Point 3 Title"
              data-node-default="Actionable Outcomes"
            >
              {{productivity_point_3_title}}
            </h4>
            <p
              class="text-[#6C6C6C]"
              data-node="productivity_point_3_desc"
              data-node-type="text"
              data-node-label="Productivity Point 3 Description"
              data-node-default="Apply proven techniques immediately to improve focus and output."
            >
              {{productivity_point_3_desc}}
            </p>
          </div>
        </div>

        <!-- Career -->
        <div class="tab-content hidden grid grid-cols-1 lg:grid-cols-2 gap-10 items-start" data-content="career">
          <img
            src="{{career_image}}"
            data-node="career_image"
            data-node-type="file"
            data-node-label="Career Image"
            data-node-default="../assets/explore.png"
            class="rounded-xl w-full object-cover"
          />

          <div>
            <h3
              class="text-2xl sm:text-3xl font-bold mb-4"
              data-node="career_heading"
              data-node-type="text"
              data-node-label="Career Heading"
              data-node-default="Career Skills That Create Lasting Momentum"
            >
              {{career_heading}}
            </h3>

            <p
              class="text-[#6C6C6C] mb-8"
              data-node="career_description"
              data-node-type="text"
              data-node-label="Career Description"
              data-node-default="Build confidence and clarity with skills that accelerate your career growth."
            >
              {{career_description}}
            </p>

            <h4
              class="text-[21px] font-bold mb-2"
              data-node="career_point_1_title"
              data-node-type="text"
              data-node-label="Career Point 1 Title"
              data-node-default="Structured Career Growth"
            >
              {{career_point_1_title}}
            </h4>
            <p
              class="text-[#6C6C6C] mb-6"
              data-node="career_point_1_desc"
              data-node-type="text"
              data-node-label="Career Point 1 Description"
              data-node-default="Clear progression paths to move forward with confidence."
            >
              {{career_point_1_desc}}
            </p>

            <h4
              class="text-[21px] font-bold mb-2"
              data-node="career_point_2_title"
              data-node-type="text"
              data-node-label="Career Point 2 Title"
              data-node-default="Industry-Relevant Examples"
            >
              {{career_point_2_title}}
            </h4>
            <p
              class="text-[#6C6C6C] mb-6"
              data-node="career_point_2_desc"
              data-node-type="text"
              data-node-label="Career Point 2 Description"
              data-node-default="Real-world career situations to sharpen decision-making."
            >
              {{career_point_2_desc}}
            </p>

            <h4
              class="text-[21px] font-bold mb-2"
              data-node="career_point_3_title"
              data-node-type="text"
              data-node-label="Career Point 3 Title"
              data-node-default="Practical Career Wins"
            >
              {{career_point_3_title}}
            </h4>
            <p
              class="text-[#6C6C6C]"
              data-node="career_point_3_desc"
              data-node-type="text"
              data-node-label="Career Point 3 Description"
              data-node-default="Leave every session with skills you can apply immediately."
            >
              {{career_point_3_desc}}
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
</section>

<style>
  .tab {
    text-align: left;
    padding-top: 15px;
    border-top: 3px solid transparent;
  }

  .tab.active {
    border-color: #019d76;
    /* green-500 */
  }
</style>

<script>
  const tabs = document.querySelectorAll(".tab");
  const contents = document.querySelectorAll(".tab-content");

  tabs.forEach((tab) => {
    tab.addEventListener("click", () => {
      // active tab
      tabs.forEach((t) => t.classList.remove("active"));
      tab.classList.add("active");

      // show content
      contents.forEach((c) => c.classList.add("hidden"));
      document.querySelector(`[data-content="${tab.dataset.tab}"]`).classList.remove("hidden");
    });
  });
</script>
