<!-- 
  Pricing Plans Section Component
  Three-tier pricing cards with features
-->
<section data-component-type="Content" class="w-full py-20 bg-[#F6F6F6]">
  <div class="max-w-[1400px] mx-auto grid md:grid-cols-3 gap-8 px-5">
    <!-- BASIC PLAN -->
    <div class="bg-[#FFFFFF] rounded-xl p-8 flex flex-col justify-between">
      <div>
        <h3
          data-node="plan_basic_name"
          data-node-type="text"
          data-node-label="Basic Plan Name"
          data-node-default="Basic Plan"
          class="text-gray-800 font-semibold text-lg"
        >
          {{plan_basic_name}}
        </h3>
        <p class="text-4xl font-bold mt-3">
          <span
            data-node="plan_basic_price"
            data-node-type="text"
            data-node-label="Basic Plan Price"
            data-node-default="$120"
            >{{plan_basic_price}}</span
          >
          <span
            data-node="plan_basic_duration"
            data-node-type="text"
            data-node-label="Basic Plan Duration"
            data-node-default="/m"
            class="text-xl font-normal"
            >{{plan_basic_duration}}</span
          >
        </p>
        <p
          data-node="plan_basic_note"
          data-node-type="text"
          data-node-label="Basic Plan Note"
          data-node-default="Pause or cancel anytime"
          class="text-xs text-gray-500 mt-1"
        >
          {{plan_basic_note}}
        </p>

        <a
          data-node="plan_basic_cta_link"
          data-node-type="page_links"
          data-node-label="Basic Plan CTA Link"
          data-node-default="#"
          href="{{plan_basic_cta_link}}"
          class="block w-full mt-6 bg-[#019D76] hover:bg-[#019D76] text-white py-3 rounded-lg font-medium text-center"
        >
          <span
            data-node="plan_basic_cta_text"
            data-node-type="text"
            data-node-label="Basic Plan CTA Text"
            data-node-default="Get Started"
            >{{plan_basic_cta_text}}</span
          >
        </a>

        <p class="font-semibold text-gray-800 mt-8">What's included:</p>
        <ul class="space-y-3 text-sm mt-4 text-gray-700">
          <li class="flex items-center gap-2">
            <img
              data-node="plan_basic_feature_1_icon"
              data-node-type="file"
              data-node-label="Basic Feature 1 Icon"
              data-node-default="../assets/tick.png"
              src="{{plan_basic_feature_1_icon}}"
              class="w-4 h-4"
              alt="Icon"
            />
            <span
              data-node="plan_basic_feature_1_text"
              data-node-type="text"
              data-node-label="Basic Feature 1 Text"
              data-node-default="Core tools"
              >{{plan_basic_feature_1_text}}</span
            >
          </li>
          <li class="flex items-center gap-2">
            <img
              data-node="plan_basic_feature_2_icon"
              data-node-type="file"
              data-node-label="Basic Feature 2 Icon"
              data-node-default="../assets/tick.png"
              src="{{plan_basic_feature_2_icon}}"
              class="w-4 h-4"
              alt="Icon"
            />
            <span
              data-node="plan_basic_feature_2_text"
              data-node-type="text"
              data-node-label="Basic Feature 2 Text"
              data-node-default="Single workspace"
              >{{plan_basic_feature_2_text}}</span
            >
          </li>
          <li class="flex items-center gap-2">
            <img
              data-node="plan_basic_feature_3_icon"
              data-node-type="file"
              data-node-label="Basic Feature 3 Icon"
              data-node-default="../assets/tick.png"
              src="{{plan_basic_feature_3_icon}}"
              class="w-4 h-4"
              alt="Icon"
            />
            <span
              data-node="plan_basic_feature_3_text"
              data-node-type="text"
              data-node-label="Basic Feature 3 Text"
              data-node-default="Basic analytics"
              >{{plan_basic_feature_3_text}}</span
            >
          </li>
          <li class="flex items-center gap-2">
            <img
              data-node="plan_basic_feature_4_icon"
              data-node-type="file"
              data-node-label="Basic Feature 4 Icon"
              data-node-default="../assets/wrong.png"
              src="{{plan_basic_feature_4_icon}}"
              class="w-4 h-4"
              alt="Icon"
            />
            <span
              data-node="plan_basic_feature_4_text"
              data-node-type="text"
              data-node-label="Basic Feature 4 Text"
              data-node-default="Standard support"
              >{{plan_basic_feature_4_text}}</span
            >
          </li>
          <li class="flex items-center gap-2">
            <img
              data-node="plan_basic_feature_5_icon"
              data-node-type="file"
              data-node-label="Basic Feature 5 Icon"
              data-node-default="../assets/wrong.png"
              src="{{plan_basic_feature_5_icon}}"
              class="w-4 h-4"
              alt="Icon"
            />
            <span
              data-node="plan_basic_feature_5_text"
              data-node-type="text"
              data-node-label="Basic Feature 5 Text"
              data-node-default="10GB bandwidth"
              >{{plan_basic_feature_5_text}}</span
            >
          </li>
          <li class="flex items-center gap-2">
            <img
              data-node="plan_basic_feature_6_icon"
              data-node-type="file"
              data-node-label="Basic Feature 6 Icon"
              data-node-default="../assets/wrong.png"
              src="{{plan_basic_feature_6_icon}}"
              class="w-4 h-4"
              alt="Icon"
            />
            <span
              data-node="plan_basic_feature_6_text"
              data-node-type="text"
              data-node-label="Basic Feature 6 Text"
              data-node-default="30 pages"
              >{{plan_basic_feature_6_text}}</span
            >
          </li>
        </ul>
      </div>
    </div>

    <!-- MOST POPULAR PLAN -->
    <div class="bg-[#FFFFFF] rounded-xl p-8 relative  rounded-t-[20px] scale-105">
      <!-- Ribbon -->
      <div
        class="absolute top-0 left-1/2 -translate-x-1/2 bg-[#019D76] w-[100%] text-white text-sm px-6 py-1 rounded-t-[20px] font-medium"
      >
        <h3
          data-node="plan_standard_ribbon"
          data-node-type="text"
          data-node-label="Most Popular Ribbon"
          data-node-default="Most Popular"
          class="text-[20px] p-3"
        >
          {{plan_standard_ribbon}}
        </h3>
      </div>

      <h3
        data-node="plan_standard_name"
        data-node-type="text"
        data-node-label="Standard Plan Name"
        data-node-default="Standard Plan"
        class="text-gray-800 font-semibold text-lg mt-[45px]"
      >
        {{plan_standard_name}}
      </h3>
      <p class="text-4xl font-bold mt-3">
        <span
          data-node="plan_standard_price"
          data-node-type="text"
          data-node-label="Standard Plan Price"
          data-node-default="$250"
          >{{plan_standard_price}}</span
        >
        <span
          data-node="plan_standard_duration"
          data-node-type="text"
          data-node-label="Standard Plan Duration"
          data-node-default="/m"
          class="text-xl font-normal"
          >{{plan_standard_duration}}</span
        >
      </p>
      <p
        data-node="plan_standard_note"
        data-node-type="text"
        data-node-label="Standard Plan Note"
        data-node-default="Pause or cancel anytime"
        class="text-xs text-gray-500 mt-1"
      >
        {{plan_standard_note}}
      </p>

      <a
        data-node="plan_standard_cta_link"
        data-node-type="page_links"
        data-node-label="Standard Plan CTA Link"
        data-node-default="#"
        href="{{plan_standard_cta_link}}"
        class="block w-full mt-6 bg-[#019D76] hover:bg-[#019D76] text-white py-3 rounded-lg font-medium text-center"
      >
        <span
          data-node="plan_standard_cta_text"
          data-node-type="text"
          data-node-label="Standard Plan CTA Text"
          data-node-default="Get Started"
          >{{plan_standard_cta_text}}</span
        >
      </a>

      <p class="font-semibold text-gray-800 mt-8">What's included:</p>
      <ul class="space-y-3 text-sm mt-4 text-gray-700">
        <li class="flex items-center gap-2">
          <img
            data-node="plan_standard_feature_1_icon"
            data-node-type="file"
            data-node-label="Standard Feature 1 Icon"
            data-node-default="../assets/tick.png"
            src="{{plan_standard_feature_1_icon}}"
            class="w-4 h-4"
            alt="Icon"
          />
          <span
            data-node="plan_standard_feature_1_text"
            data-node-type="text"
            data-node-label="Standard Feature 1 Text"
            data-node-default="Advanced tools"
            >{{plan_standard_feature_1_text}}</span
          >
        </li>
        <li class="flex items-center gap-2">
          <img
            data-node="plan_standard_feature_2_icon"
            data-node-type="file"
            data-node-label="Standard Feature 2 Icon"
            data-node-default="../assets/tick.png"
            src="{{plan_standard_feature_2_icon}}"
            class="w-4 h-4"
            alt="Icon"
          />
          <span
            data-node="plan_standard_feature_2_text"
            data-node-type="text"
            data-node-label="Standard Feature 2 Text"
            data-node-default="Multi-workspace"
            >{{plan_standard_feature_2_text}}</span
          >
        </li>
        <li class="flex items-center gap-2">
          <img
            data-node="plan_standard_feature_3_icon"
            data-node-type="file"
            data-node-label="Standard Feature 3 Icon"
            data-node-default="../assets/tick.png"
            src="{{plan_standard_feature_3_icon}}"
            class="w-4 h-4"
            alt="Icon"
          />
          <span
            data-node="plan_standard_feature_3_text"
            data-node-type="text"
            data-node-label="Standard Feature 3 Text"
            data-node-default="Priority support"
            >{{plan_standard_feature_3_text}}</span
          >
        </li>
        <li class="flex items-center gap-2">
          <img
            data-node="plan_standard_feature_4_icon"
            data-node-type="file"
            data-node-label="Standard Feature 4 Icon"
            data-node-default="../assets/wrong.png"
            src="{{plan_standard_feature_4_icon}}"
            class="w-4 h-4"
            alt="Icon"
          />
          <span
            data-node="plan_standard_feature_4_text"
            data-node-type="text"
            data-node-label="Standard Feature 4 Text"
            data-node-default="100GB bandwidth"
            >{{plan_standard_feature_4_text}}</span
          >
        </li>
        <li class="flex items-center gap-2">
          <img
            data-node="plan_standard_feature_5_icon"
            data-node-type="file"
            data-node-label="Standard Feature 5 Icon"
            data-node-default="../assets/wrong.png"
            src="{{plan_standard_feature_5_icon}}"
            class="w-4 h-4"
            alt="Icon"
          />
          <span
            data-node="plan_standard_feature_5_text"
            data-node-type="text"
            data-node-label="Standard Feature 5 Text"
            data-node-default="150 pages"
            >{{plan_standard_feature_5_text}}</span
          >
        </li>
        <li class="flex items-center gap-2">
          <img
            data-node="plan_standard_feature_6_icon"
            data-node-type="file"
            data-node-label="Standard Feature 6 Icon"
            data-node-default="../assets/wrong.png"
            src="{{plan_standard_feature_6_icon}}"
            class="w-4 h-4"
            alt="Icon"
          />
          <span
            data-node="plan_standard_feature_6_text"
            data-node-type="text"
            data-node-label="Standard Feature 6 Text"
            data-node-default="10 CMS collections"
            >{{plan_standard_feature_6_text}}</span
          >
        </li>
      </ul>
    </div>

    <!-- PRO PLAN -->
    <div class="bg-[#FFFFFF] rounded-xl p-8 flex flex-col justify-between">
      <div>
        <h3
          data-node="plan_pro_name"
          data-node-type="text"
          data-node-label="Pro Plan Name"
          data-node-default="Pro Plan"
          class="text-gray-800 font-semibold text-lg"
        >
          {{plan_pro_name}}
        </h3>
        <p class="text-4xl font-bold mt-3">
          <span
            data-node="plan_pro_price"
            data-node-type="text"
            data-node-label="Pro Plan Price"
            data-node-default="$550"
            >{{plan_pro_price}}</span
          >
          <span
            data-node="plan_pro_duration"
            data-node-type="text"
            data-node-label="Pro Plan Duration"
            data-node-default="/m"
            class="text-xl font-normal"
            >{{plan_pro_duration}}</span
          >
        </p>
        <p
          data-node="plan_pro_note"
          data-node-type="text"
          data-node-label="Pro Plan Note"
          data-node-default="Pause or cancel anytime"
          class="text-xs text-gray-500 mt-1"
        >
          {{plan_pro_note}}
        </p>

        <a
          data-node="plan_pro_cta_link"
          data-node-type="page_links"
          data-node-label="Pro Plan CTA Link"
          data-node-default="#"
          href="{{plan_pro_cta_link}}"
          class="block w-full mt-6 bg-[#019D76] hover:bg-[#019D76] text-white py-3 rounded-lg font-medium text-center"
        >
          <span
            data-node="plan_pro_cta_text"
            data-node-type="text"
            data-node-label="Pro Plan CTA Text"
            data-node-default="Get Started"
            >{{plan_pro_cta_text}}</span
          >
        </a>

        <p class="font-semibold text-gray-800 mt-8">What's included:</p>
        <ul class="space-y-3 text-sm mt-4 text-gray-700">
          <li class="flex items-center gap-2">
            <img
              data-node="plan_pro_feature_1_icon"
              data-node-type="file"
              data-node-label="Pro Feature 1 Icon"
              data-node-default="../assets/tick.png"
              src="{{plan_pro_feature_1_icon}}"
              class="w-4 h-4"
              alt="Icon"
            />
            <span
              data-node="plan_pro_feature_1_text"
              data-node-type="text"
              data-node-label="Pro Feature 1 Text"
              data-node-default="Full suite"
              >{{plan_pro_feature_1_text}}</span
            >
          </li>
          <li class="flex items-center gap-2">
            <img
              data-node="plan_pro_feature_2_icon"
              data-node-type="file"
              data-node-label="Pro Feature 2 Icon"
              data-node-default="../assets/tick.png"
              src="{{plan_pro_feature_2_icon}}"
              class="w-4 h-4"
              alt="Icon"
            />
            <span
              data-node="plan_pro_feature_2_text"
              data-node-type="text"
              data-node-label="Pro Feature 2 Text"
              data-node-default="Unlimited workspaces"
              >{{plan_pro_feature_2_text}}</span
            >
          </li>
          <li class="flex items-center gap-2">
            <img
              data-node="plan_pro_feature_3_icon"
              data-node-type="file"
              data-node-label="Pro Feature 3 Icon"
              data-node-default="../assets/tick.png"
              src="{{plan_pro_feature_3_icon}}"
              class="w-4 h-4"
              alt="Icon"
            />
            <span
              data-node="plan_pro_feature_3_text"
              data-node-type="text"
              data-node-label="Pro Feature 3 Text"
              data-node-default="Premium support"
              >{{plan_pro_feature_3_text}}</span
            >
          </li>
          <li class="flex items-center gap-2">
            <img
              data-node="plan_pro_feature_4_icon"
              data-node-type="file"
              data-node-label="Pro Feature 4 Icon"
              data-node-default="../assets/wrong.png"
              src="{{plan_pro_feature_4_icon}}"
              class="w-4 h-4"
              alt="Icon"
            />
            <span
              data-node="plan_pro_feature_4_text"
              data-node-type="text"
              data-node-label="Pro Feature 4 Text"
              data-node-default="300GB bandwidth"
              >{{plan_pro_feature_4_text}}</span
            >
          </li>
          <li class="flex items-center gap-2">
            <img
              data-node="plan_pro_feature_5_icon"
              data-node-type="file"
              data-node-label="Pro Feature 5 Icon"
              data-node-default="../assets/wrong.png"
              src="{{plan_pro_feature_5_icon}}"
              class="w-4 h-4"
              alt="Icon"
            />
            <span
              data-node="plan_pro_feature_5_text"
              data-node-type="text"
              data-node-label="Pro Feature 5 Text"
              data-node-default="300 pages"
              >{{plan_pro_feature_5_text}}</span
            >
          </li>
          <li class="flex items-center gap-2">
            <img
              data-node="plan_pro_feature_6_icon"
              data-node-type="file"
              data-node-label="Pro Feature 6 Icon"
              data-node-default="../assets/wrong.png"
              src="{{plan_pro_feature_6_icon}}"
              class="w-4 h-4"
              alt="Icon"
            />
            <span
              data-node="plan_pro_feature_6_text"
              data-node-type="text"
              data-node-label="Pro Feature 6 Text"
              data-node-default="20 CMS collections"
              >{{plan_pro_feature_6_text}}</span
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>
