<section
  class="w-full bg-black relative overflow-hidden px-4 md:px-20 lg:px-24 xl:px-72 py-32 md:py-48 lg:py-52"
  data-component-type="Content"
>
  <!-- BACKGROUND IMAGE -->
  <img
    src="./assets/Frame 2147225398.png"
    class="absolute top-0 left-1/2 -translate-x-1/2 w-[900px] max-w-[90%] pointer-events-none opacity-90"
  />

  <!-- LABEL -->
  <div class="w-full flex justify-center mb-10">
    <div
      class="inline-block py-3 px-7 font-['Cabin'] text-[32px] font-normal text-white rounded-xl text-center relative bg-[rgba(20,20,20,0.55)] backdrop-blur-[18px] saturate-[120%] border border-white/[0.12] shadow-[0_0_25px_rgba(0,0,0,0.4),inset_0_0_10px_rgba(255,255,255,0.05)]"
      data-node="pricing_label"
      data-node-type="text"
      data-node-default="Pricing"
    >
      {{pricing_label}}
    </div>
  </div>

  <!-- TITLE -->
  <h2
    class="font-['Cabin'] text-[42px] md:text-[56px] font-medium leading-[100%] text-white text-center mt-6"
    data-node="pricing_title"
    data-node-type="text"
    data-node-default="Simple Plans. Clear Outcomes."
  >
    {{pricing_title}}
  </h2>

  <!-- DESCRIPTION -->
  <p
    class="font-['Cabin'] text-[24px] font-normal text-center text-[#7e7e7e] leading-[130%] max-w-[780px] mx-auto my-6 mb-20"
    data-node="pricing_description"
    data-node-type="text"
    data-node-default="Choose based on ambition, not confusion. Flexible plans designed for startups, scaling brands, and established businesses."
  >
    {{pricing_description}}
  </p>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-9">
    <!-- BASIC PLAN -->
    <div class="p-8 md:p-10 bg-white/[0.03] rounded-[20px] border border-white/[0.15] backdrop-blur-[12px]">
      <div
        class="font-['Cabin'] text-[20px] text-white"
        data-node="basic_title"
        data-node-type="text"
        data-node-default="Basic Plan"
      >
        {{basic_title}}
      </div>

      <div
        class="font-['Cabin'] text-[40px] font-medium text-white mt-3.5"
        data-node="basic_price"
        data-node-type="text"
        data-node-default="$120/m"
      >
        {{basic_price}}
      </div>

      <div
        class="text-[16px] font-medium mt-1.5 text-[#7e7e7e]"
        data-node="basic_sub"
        data-node-type="text"
        data-node-default="Best for early-stage brands."
      >
        {{basic_sub}}
      </div>

      <a
        class="w-full block py-4 px-6 bg-[#d3ff5b] text-black text-center text-[24px] rounded-xl mt-7"
        data-node="basic_cta"
        data-node-type="text"
        data-node-default="Get Started"
      >
        {{basic_cta}}
      </a>

      <div
        class="mt-7 text-[20px] font-medium text-white"
        data-node="basic_includes_title"
        data-node-type="text"
        data-node-default="What's included:"
      >
        {{basic_includes_title}}
      </div>

      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-white"
        data-node="basic_includes_1"
        data-node-type="text"
        data-node-default="Brand Audit."
      >
        <img src="./assets/Included.svg" />
        {{basic_includes_1}}
      </div>
      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-white"
        data-node="basic_includes_2"
        data-node-type="text"
        data-node-default="Core Messaging Framework."
      >
        <img src="./assets/Included.svg" />
        {{basic_includes_2}}
      </div>
      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-white"
        data-node="basic_includes_3"
        data-node-type="text"
        data-node-default="A Website or Landing Page."
      >
        <img src="./assets/Included.svg" />
        {{basic_includes_3}}
      </div>

      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-[#7e7e7e]"
        data-node="basic_not_includes_1"
        data-node-type="text"
        data-node-default="Basic SEO setup."
      >
        <img src="./assets/not included.svg" />
        {{basic_not_includes_1}}
      </div>
      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-[#7e7e7e]"
        data-node="basic_not_includes_2"
        data-node-type="text"
        data-node-default="Content outline strategy."
      >
        <img src="./assets/not included.svg" />
        {{basic_not_includes_2}}
      </div>
      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-[#7e7e7e]"
        data-node="basic_not_includes_3"
        data-node-type="text"
        data-node-default="Monthly performance report."
      >
        <img src="./assets/not included.svg" />
        {{basic_not_includes_3}}
      </div>
    </div>

    <!-- STANDARD PLAN -->
    <div
      class="p-8 md:p-10 bg-white text-black rounded-[20px] border border-white/[0.15] backdrop-blur-[12px] relative mt-14 lg:mt-0"
    >
      <div
        class="w-full bg-[#D3FF5B] text-black text-[20px] font-medium h-14 flex items-center justify-center absolute -top-[42px] left-0 rounded-t-[20px] z-[-10]"
        data-node="popular_label"
        data-node-type="text"
        data-node-default="Most Popular"
      >
        {{popular_label}}
      </div>

      <div
        class="font-['Cabin'] text-[20px] text-black"
        data-node="standard_title"
        data-node-type="text"
        data-node-default="Standard Plan"
      >
        {{standard_title}}
      </div>

      <div
        class="font-['Cabin'] text-[40px] font-medium text-black mt-3.5"
        data-node="standard_price"
        data-node-type="text"
        data-node-default="$250/m"
      >
        {{standard_price}}
      </div>

      <div
        class="text-[16px] font-medium mt-1.5 text-[#7e7e7e]"
        data-node="standard_sub"
        data-node-type="text"
        data-node-default="Best for growing businesses."
      >
        {{standard_sub}}
      </div>

      <a
        class="w-full block py-4 px-6 bg-[#d3ff5b] text-black text-center text-[24px] rounded-xl mt-7"
        data-node="standard_cta"
        data-node-type="text"
        data-node-default="Get Started"
      >
        {{standard_cta}}
      </a>

      <div
        class="mt-7 text-[20px] font-medium text-black"
        data-node="standard_includes_title"
        data-node-type="text"
        data-node-default="What's included:"
      >
        {{standard_includes_title}}
      </div>

      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-black"
        data-node="standard_includes_1"
        data-node-type="text"
        data-node-default="Brand strategy & positioning."
      >
        <img src="./assets/Included.svg" />
        {{standard_includes_1}}
      </div>
      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-black"
        data-node="standard_includes_2"
        data-node-type="text"
        data-node-default="Optimised Sales funnels."
      >
        <img src="./assets/Included.svg" />
        {{standard_includes_2}}
      </div>
      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-black"
        data-node="standard_includes_3"
        data-node-type="text"
        data-node-default="SEO & content execution."
      >
        <img src="./assets/Included.svg" />
        {{standard_includes_3}}
      </div>

      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-[#7e7e7e]"
        data-node="standard_not_includes_1"
        data-node-type="text"
        data-node-default="Paid campaign setup."
      >
        <img src="./assets/not included.svg" />
        {{standard_not_includes_1}}
      </div>
      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-[#7e7e7e]"
        data-node="standard_not_includes_2"
        data-node-type="text"
        data-node-default="Conversion optimization."
      >
        <img src="./assets/not included.svg" />
        {{standard_not_includes_2}}
      </div>
      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-[#7e7e7e]"
        data-node="standard_not_includes_3"
        data-node-type="text"
        data-node-default="Bi-weekly performance reviews."
      >
        <img src="./assets/not included.svg" />
        {{standard_not_includes_3}}
      </div>
    </div>

    <!-- PRO PLAN -->
    <div class="p-8 md:p-10 pt-16 bg-white/[0.03] rounded-[20px] border border-white/[0.15] backdrop-blur-[12px]">
      <div
        class="font-['Cabin'] text-[20px] text-white"
        data-node="pro_title"
        data-node-type="text"
        data-node-default="Pro Plan"
      >
        {{pro_title}}
      </div>

      <div
        class="font-['Cabin'] text-[40px] font-medium text-white mt-3.5"
        data-node="pro_price"
        data-node-type="text"
        data-node-default="$550/m"
      >
        {{pro_price}}
      </div>

      <div
        class="text-[16px] font-medium mt-1.5 text-[#7e7e7e]"
        data-node="pro_sub"
        data-node-type="text"
        data-node-default="Best for scale-focused brands."
      >
        {{pro_sub}}
      </div>

      <a
        class="w-full block py-4 px-6 bg-[#d3ff5b] text-black text-center text-[24px] rounded-xl mt-7"
        data-node="pro_cta"
        data-node-type="text"
        data-node-default="Get Started"
      >
        {{pro_cta}}
      </a>

      <div
        class="mt-7 text-[20px] font-medium text-white"
        data-node="pro_includes_title"
        data-node-type="text"
        data-node-default="What's included:"
      >
        {{pro_includes_title}}
      </div>

      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-white"
        data-node="pro_includes_1"
        data-node-type="text"
        data-node-default="Full growth strategy."
      >
        <img src="./assets/Included.svg" /> {{pro_includes_1}}
      </div>
      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-white"
        data-node="pro_includes_2"
        data-node-type="text"
        data-node-default="Multi-channel execution."
      >
        <img src="./assets/Included.svg" /> {{pro_includes_2}}
      </div>
      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-white"
        data-node="pro_includes_3"
        data-node-type="text"
        data-node-default="Advanced analytics tracking."
      >
        <img src="./assets/Included.svg" /> {{pro_includes_3}}
      </div>

      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-[#7e7e7e]"
        data-node="pro_not_includes_1"
        data-node-type="text"
        data-node-default="Funnel optimization."
      >
        <img src="./assets/not included.svg" /> {{pro_not_includes_1}}
      </div>
      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-[#7e7e7e]"
        data-node="pro_not_includes_2"
        data-node-type="text"
        data-node-default="Ongoing experimentation."
      >
        <img src="./assets/not included.svg" /> {{pro_not_includes_2}}
      </div>
      <div
        class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-[#7e7e7e]"
        data-node="pro_not_includes_3"
        data-node-type="text"
        data-node-default="Dedicated growth partner support."
      >
        <img src="./assets/not included.svg" /> {{pro_not_includes_3}}
      </div>
    </div>
  </div>
</section>
