<section data-component-type="Content" data-component-slug="ss-education-template-explore_categories">
  <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="https://res.cloudinary.com/duukclzsd/image/upload/v1766750761/seltrix/templates/ss-education-template/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="https://res.cloudinary.com/duukclzsd/image/upload/v1766750761/seltrix/templates/ss-education-template/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="https://res.cloudinary.com/duukclzsd/image/upload/v1766750761/seltrix/templates/ss-education-template/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="https://res.cloudinary.com/duukclzsd/image/upload/v1766750761/seltrix/templates/ss-education-template/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="https://res.cloudinary.com/duukclzsd/image/upload/v1766750761/seltrix/templates/ss-education-template/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>