<!-- 
  Pricing Table Section Component
  Feature comparison table
-->
  <section class="py-[10px] bg-[#F6F6F6]" data-component-type="Content">


<section  class="max-w-[85%] mx-auto px-5 py-16">
  <!-- Heading -->
  <div class="text-center lg:flex-row flex flex-col justify-between mb-12">
    <h2
      data-node="pricing_heading"
      data-node-type="text"
      data-node-label="Heading Text"
      data-node-default="Compare Plans to Find Your Fit"
      class="text-3xl text-start md:text-4xl font-semibold text-[#151515]"
    >
      {{pricing_heading}}
    </h2>
    <p
      data-node="pricing_subtext"
      data-node-type="textarea"
      data-node-label="Subtext"
      data-node-default="A quick breakdown of what each plan offers.  See which features align best with your learning goals."
      class="mt-3 text-[#4A6673] text-sm md:text-base text-end"
    >
      {{pricing_subtext}}
    </p>
  </div>

  <!-- FULL GRID BORDER TABLE -->
  <div class="overflow-x-auto rounded-2xl border border-[#DCDCDC]">
    <table class="w-full min-w-[700px] text-left border-collapse">
      <thead>
        <tr class="bg-white">
          <th class="p-5 text-sm font-medium text-gray-700 border border-[#DCDCDC]"></th>
          <th class="p-5 font-semibold text-[20px] text-[#000000] text-center align-middle border border-[#DCDCDC]">
            <div class="flex justify-between items-center gap-1">
              <span
                data-node="plan_basic_name"
                data-node-type="text"
                data-node-label="Basic Plan Name"
                data-node-default="Basic"
                >{{plan_basic_name}}</span
              >
              <span
                data-node="plan_basic_price"
                data-node-type="text"
                data-node-label="Basic Plan Price"
                data-node-default="$120/m"
                class="font-normal text-[#7E7E7E] text-sm"
                >{{plan_basic_price}}</span
              >
            </div>
          </th>
          <th class="p-5 font-semibold text-[20px] text-[#000000] text-center align-middle border border-[#DCDCDC]">
            <div class="flex justify-between items-center gap-1">
              <span
                data-node="plan_standard_name"
                data-node-type="text"
                data-node-label="Standard Plan Name"
                data-node-default="Standard"
                >{{plan_standard_name}}</span
              >
              <span
                data-node="plan_standard_price"
                data-node-type="text"
                data-node-label="Standard Plan Price"
                data-node-default="$250/m"
                class="font-normal text-[#7E7E7E] text-sm"
                >{{plan_standard_price}}</span
              >
            </div>
          </th>
          <th class="p-5 font-semibold text-[20px] text-[#000000] text-center align-middle border border-[#DCDCDC]">
            <div class="flex justify-between items-center gap-1">
              <span
                data-node="plan_pro_name"
                data-node-type="text"
                data-node-label="Pro Plan Name"
                data-node-default="Pro"
                >{{plan_pro_name}}</span
              >
              <span
                data-node="plan_pro_price"
                data-node-type="text"
                data-node-label="Pro Plan Price"
                data-node-default="$550/m"
                class="font-normal text-[#7E7E7E] text-sm"
                >{{plan_pro_price}}</span
              >
            </div>
          </th>
        </tr>
      </thead>

      <tbody class="bg-white">
        <!-- Row 1 -->
        <tr class="bg-white">
          <td class="p-5 border border-[#DCDCDC]  text-[20px] font-semibold">
            <span
              data-node="feature_custom_domain"
              data-node-type="text"
              data-node-label="Custom Domain Label"
              data-node-default="Course Access "
              >{{feature_custom_domain}}</span
            >
            <p
              data-node="feature_custom_domain_desc"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Learning scope"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_custom_domain_desc}}
            </p>
          </td>
          <td class="text-center border border-[#DCDCDC text-[#7E7E7E]  text-xl"
              data-node="r1col1"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Limited"
          >{{r1col1}}
          </td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E]  text-xl"
              data-node="r1col2"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Full Library"
          >{{r1col2}}</td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E] text-xl"
              data-node="r1col3"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="All + Exclusive "
          >{{r1col3}}</td>
        </tr>

        <!-- Row 2 -->
        <tr>
          <td class="p-5 border border-[#DCDCDC] text-[20px] font-semibold">
            <span
              data-node="feature_site_pages"
              data-node-type="text"
              data-node-label="Site Pages Label"
              data-node-default="Downloads"
              >{{feature_site_pages}}</span
            >
            <p
              data-node="feature_site_pages_desc"
              data-node-type="text"
              data-node-label="Site Pages Description"
              data-node-default="Save materials"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_site_pages_desc}}
            </p>
          </td>
           <td class="text-center border border-[#DCDCDC text-[#7E7E7E]  text-xl"
              data-node="r2col1"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Limited"
          >{{r2col1}}
          </td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E]  text-xl"
              data-node="r2col2"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Unlimited"
          >{{r2col2}}</td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E] text-xl"
              data-node="r2col3"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Unlimited"
          >{{r2col3}}</td>
        </tr>

        <!-- Row 3 -->
        <tr>
          <td class="p-5 border border-[#DCDCDC] text-[20px] font-semibold">
            <span
              data-node="feature_cms_collections"
              data-node-type="text"
              data-node-label="CMS Collections Label"
              data-node-default="Support "
              >{{feature_cms_collections}}</span
            >
            <p
              data-node="feature_cms_collections_desc"
              data-node-type="text"
              data-node-label="CMS Collections Description"
              data-node-default="Help anytime"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_cms_collections_desc}}
            </p>
          </td>
           <td class="text-center border border-[#DCDCDC text-[#7E7E7E]  text-xl"
              data-node="r3col1"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Basic queries"
          >{{r3col1}}
          </td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E]  text-xl"
              data-node="r3col2"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Fast response"
          >{{r3col2}}</td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E] text-xl"
              data-node="r3col3"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Expert guidance"
          >{{r3col3}}</td>
        </tr>

        <!-- Row 4 -->
        <tr>
          <td class="p-5 border border-[#DCDCDC] text-[20px] font-semibold">
            <span
              data-node="feature_cms_items"
              data-node-type="text"
              data-node-label="CMS Items Label"
              data-node-default="Mentorship"
              >{{feature_cms_items}}</span
            >
            <p
              data-node="feature_cms_items_desc"
              data-node-type="text"
              data-node-label="CMS Items Description"
              data-node-default="Personal support"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_cms_items_desc}}
            </p>
          </td>
           <td class="text-center border border-[#DCDCDC text-[#7E7E7E]  text-xl"
              data-node="r4col1"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="No"
          >{{r4col1}}
          </td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E]  text-xl"
              data-node="r4col2"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="No"
          >{{r4col2}}</td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E] text-xl"
              data-node="r4col3"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="1:1 Mentor "
          >{{r4col3}}</td>
        </tr>

        <!-- Row 5 -->
        <tr>
          <td class="p-5 border border-[#DCDCDC] text-[20px] font-semibold">
            <span
              data-node="feature_analytics"
              data-node-type="text"
              data-node-label="Analytics Label"
              data-node-default="Certificates "
              >{{feature_analytics}}</span
            >
            <p
              data-node="feature_analytics_desc"
              data-node-type="text"
              data-node-label="Analytics Description"
              data-node-default="Proof of skill"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_analytics_desc}}
            </p>
          </td>
          <td class="text-center border border-[#DCDCDC text-[#7E7E7E]  text-xl"
              data-node="r5col1"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="No"
          >{{r5col1}}
          </td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E]  text-xl"
              data-node="r5col2"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Yes"
          >{{r5col2}}</td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E] text-xl"
              data-node="r5col3"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Yes"
          >{{r5col3}}</td>
        </tr>

        <!-- Row 6 -->
        <tr>
          <td class="p-5 border border-[#DCDCDC] text-[20px] font-semibold">
            <span
              data-node="feature_bandwidth"
              data-node-type="text"
              data-node-label="Bandwidth Label"
              data-node-default="Community "
              >{{feature_bandwidth}}</span
            >
            <p
              data-node="feature_bandwidth_desc"
              data-node-type="text"
              data-node-label="Bandwidth Description"
              data-node-default="Learn together"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_bandwidth_desc}}
            </p>
          </td>
           <td class="text-center border border-[#DCDCDC text-[#7E7E7E]  text-xl"
              data-node="r6col1"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Open forum"
          >{{r6col1}}
          </td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E]  text-xl"
              data-node="r6col2"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Peer circles"
          >{{r6col2}}</td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E] text-xl"
              data-node="r6col3"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Elite network"
          >{{r6col3}}</td>
        </tr>

        <!-- Row 7 -->
        <tr>
          <td class="p-5 border border-[#DCDCDC] text-[20px] font-semibold">
            <span
              data-node="feature_password"
              data-node-type="text"
              data-node-label="Password Protect Label"
              data-node-default="Updates"
              >{{feature_password}}</span
            >
            <p
              data-node="feature_password_desc"
              data-node-type="text"
              data-node-label="Password Protect Description"
              data-node-default="Fresh content"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_password_desc}}
            </p>
          </td>
            <td class="text-center border border-[#DCDCDC text-[#7E7E7E]  text-xl"
              data-node="r7col1"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Regular"
          >{{r7col1}}
          </td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E]  text-xl"
              data-node="r7col2"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Extended"
          >{{r7col2}}</td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E] text-xl"
              data-node="r7col3"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Lifetime"
          >{{r7col3}}</td>
        </tr>

        <!-- Row 8 -->
        <tr>
          <td class="p-5 border border-[#DCDCDC] text-[20px] font-semibold">
            <span
              data-node="feature_cdn"
              data-node-type="text"
              data-node-label="Hosting CDN Label"
              data-node-default="Live Sessions"
              >{{feature_cdn}}</span
            >
            <p
              data-node="feature_cdn_desc"
              data-node-type="text"
              data-node-label="Hosting CDN Description"
              data-node-default="Real-time learning"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_cdn_desc}}
            </p>
          </td>
          <td class="text-center border border-[#DCDCDC text-[#7E7E7E]  text-xl"
              data-node="r8col1"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="No"
          >{{r8col1}}
          </td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E]  text-xl"
              data-node="r8col2"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Few sessions"
          >{{r8col2}}</td>
          <td class="text-center border border-[#DCDCDC] text-[#7E7E7E] text-xl"
              data-node="r8col3"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Full Access "
          >{{r8col3}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
  </section>