<!-- 
  Pricing Table Section Component
  Feature comparison table
-->
<section data-component-type="Content" 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="The clarity you need before subscribing"
      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="Compare limits, features, and scalability with full transparency. Upgrade only when you truly need more power."
      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-gray-300">
    <table class="w-full min-w-[700px] text-left border-collapse">
      <thead>
        <tr class="bg-gray-50">
          <th class="p-5 text-sm font-medium text-gray-700 border border-gray-300"></th>
          <th class="p-5 font-semibold text-[20px] text-[#000000] text-center align-middle border border-gray-300">
            <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-gray-300">
            <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-gray-300">
            <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="text-gray-800">
        <!-- Row 1 -->
        <tr>
          <td class="p-5 border border-gray-300 text-[20px] font-semibold">
            <span
              data-node="feature_custom_domain"
              data-node-type="text"
              data-node-label="Custom Domain Label"
              data-node-default="Custom Domain"
              >{{feature_custom_domain}}</span
            >
            <p
              data-node="feature_custom_domain_desc"
              data-node-type="text"
              data-node-label="Custom Domain Description"
              data-node-default="Connect your domain"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_custom_domain_desc}}
            </p>
          </td>
          <td class="text-center border border-gray-300 text-green-600 text-xl">✔</td>
          <td class="text-center border border-gray-300 text-green-600 text-xl">✔</td>
          <td class="text-center border border-gray-300 text-green-600 text-xl">✔</td>
        </tr>

        <!-- Row 2 -->
        <tr>
          <td class="p-5 border border-gray-300 text-[20px] font-semibold">
            <span
              data-node="feature_site_pages"
              data-node-type="text"
              data-node-label="Site Pages Label"
              data-node-default="Site Pages"
              >{{feature_site_pages}}</span
            >
            <p
              data-node="feature_site_pages_desc"
              data-node-type="text"
              data-node-label="Site Pages Description"
              data-node-default="Design custom pages"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_site_pages_desc}}
            </p>
          </td>
          <td class="text-center border border-gray-300 text-[#7E7E7E] text-[18px]">30 pages</td>
          <td class="text-center border border-gray-300 text-[#7E7E7E] text-[18px]">150 pages</td>
          <td class="text-center border border-gray-300 text-[#7E7E7E] text-[18px]">300+ pages</td>
        </tr>

        <!-- Row 3 -->
        <tr>
          <td class="p-5 border border-gray-300 text-[20px] font-semibold">
            <span
              data-node="feature_cms_collections"
              data-node-type="text"
              data-node-label="CMS Collections Label"
              data-node-default="CMS Collections"
              >{{feature_cms_collections}}</span
            >
            <p
              data-node="feature_cms_collections_desc"
              data-node-type="text"
              data-node-label="CMS Collections Description"
              data-node-default="Store structured content"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_cms_collections_desc}}
            </p>
          </td>
          <td class="text-center border border-gray-300 text-[18px] text-[#7E7E7E]">1 collection</td>
          <td class="text-center border border-gray-300 text-[18px] text-[#7E7E7E]">10 collections</td>
          <td class="text-center border border-gray-300 text-[18px] text-[#7E7E7E]">20+ collections</td>
        </tr>

        <!-- Row 4 -->
        <tr>
          <td class="p-5 border border-gray-300 text-[20px] font-semibold">
            <span
              data-node="feature_cms_items"
              data-node-type="text"
              data-node-label="CMS Items Label"
              data-node-default="CMS Items"
              >{{feature_cms_items}}</span
            >
            <p
              data-node="feature_cms_items_desc"
              data-node-type="text"
              data-node-label="CMS Items Description"
              data-node-default="Add dynamic entries"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_cms_items_desc}}
            </p>
          </td>
          <td class="text-center border border-gray-300 text-[18px] text-[#000]">1,000</td>
          <td class="text-center border border-gray-300 text-[18px] text-[#000]">2,500</td>
          <td class="text-center border border-gray-300 text-[18px] text-[#000]">10,000+</td>
        </tr>

        <!-- Row 5 -->
        <tr>
          <td class="p-5 border border-gray-300 text-[20px] font-semibold">
            <span
              data-node="feature_analytics"
              data-node-type="text"
              data-node-label="Analytics Label"
              data-node-default="Advanced Analytics"
              >{{feature_analytics}}</span
            >
            <p
              data-node="feature_analytics_desc"
              data-node-type="text"
              data-node-label="Analytics Description"
              data-node-default="Track user behavior"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_analytics_desc}}
            </p>
          </td>
          <td class="text-center border border-gray-300 text-red-500 text-xl">✘</td>
          <td class="text-center border border-gray-300 text-red-500 text-xl">✘</td>
          <td class="text-center border border-gray-300 text-green-600 text-xl">✔</td>
        </tr>

        <!-- Row 6 -->
        <tr>
          <td class="p-5 border border-gray-300 text-[20px] font-semibold">
            <span
              data-node="feature_bandwidth"
              data-node-type="text"
              data-node-label="Bandwidth Label"
              data-node-default="Bandwidth"
              >{{feature_bandwidth}}</span
            >
            <p
              data-node="feature_bandwidth_desc"
              data-node-type="text"
              data-node-label="Bandwidth Description"
              data-node-default="Monthly data usage"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_bandwidth_desc}}
            </p>
          </td>
          <td class="text-center border border-gray-300 text-[18px] text-[#000]">10 GB</td>
          <td class="text-center border border-gray-300 text-[18px] text-[#000]">100 GB</td>
          <td class="text-center border border-gray-300 text-[18px] text-[#000]">200+ GB</td>
        </tr>

        <!-- Row 7 -->
        <tr>
          <td class="p-5 border border-gray-300 text-[20px] font-semibold">
            <span
              data-node="feature_password"
              data-node-type="text"
              data-node-label="Password Protect Label"
              data-node-default="Password Protect"
              >{{feature_password}}</span
            >
            <p
              data-node="feature_password_desc"
              data-node-type="text"
              data-node-label="Password Protect Description"
              data-node-default="Secure page access"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_password_desc}}
            </p>
          </td>
          <td class="text-center border border-gray-300 text-red-500 text-xl">✘</td>
          <td class="text-center border border-gray-300 text-green-600 text-xl">✔</td>
          <td class="text-center border border-gray-300 text-green-600 text-xl">✔</td>
        </tr>

        <!-- Row 8 -->
        <tr>
          <td class="p-5 border border-gray-300 text-[20px] font-semibold">
            <span
              data-node="feature_cdn"
              data-node-type="text"
              data-node-label="Hosting CDN Label"
              data-node-default="Hosting CDN"
              >{{feature_cdn}}</span
            >
            <p
              data-node="feature_cdn_desc"
              data-node-type="text"
              data-node-label="Hosting CDN Description"
              data-node-default="This is limits of the SaaS"
              class="text-[#7E7E7E] text-[16px] font-normal"
            >
              {{feature_cdn_desc}}
            </p>
          </td>
          <td class="text-center border border-gray-300 text-[18px] text-[#000]">20</td>
          <td class="text-center border border-gray-300 text-[18px] text-[#000]">20</td>
          <td class="text-center border border-gray-300 text-[18px] text-[#000]">300+</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
