{{ $data := .Inner | unmarshal }}
<section class="bg-white">
    <div class="py-8  mx-auto max-w-screen-2xl lg:py-16 ">
        {{ with $data.title }}
        <div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
            <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900">{{ . }}</h2>
            {{ with $data.description }}
            <p class="mb-5 font-light text-gray-500 sm:text-xl">{{ . }}</p>
            {{ end }}
        </div>
        {{ end }}

        <div class="grid grid-cols-1 sm:grid-cols-2  md:grid-cols-3 xl:grid-cols-5 gap-8 xl:gap-2">
            {{ range $index, $plan := $data.plans }}
            <div
                class="relative flex flex-col p-6 {{ if $plan.featured }}bg-primary-400 text-white{{ else }}bg-white{{ end }} rounded-2xl shadow-xl transform hover:-translate-y-1 transition duration-300">
                {{ if $plan.featured }}
                <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
                    <span class="bg-yellow-400 text-gray-900 text-xs font-semibold px-2 py-1 rounded-full">{{ i18n
                        "mostPopular" }}</span>
                </div>
                {{ end }}
                {{ if $plan.selfhosted }}
                <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
                    <span class="bg-yellow-400 text-gray-900 text-xs font-semibold px-4 py-1 rounded-full">{{ i18n
                        "selfHosted" }}</span>
                </div>
                {{ end }}


                <div class="mb-4 xl:min-h-[113px]">
                    <h3 class="text-2xl font-bold {{ if $plan.featured }}text-white{{ else }}text-gray-900{{ end }}">{{
                        $plan.name }}</h3>
                    <p class="mt-2 {{ if not $plan.featured }}text-gray-500{{ end }}">{{ $plan.description }}</p>
                </div>

                {{ if $plan.price }}
                <div class="mb-6">
                    <div class="flex items-baseline">
                        <span
                            class="text-2xl font-extrabold tracking-tight {{ if not $plan.featured }}text-gray-900{{ end }}">{{
                            $plan.price }}</span>
                        <span class="ml-1 {{ if not $plan.featured }}text-gray-500{{ end }}">{{ i18n $plan.price_unit
                            }}</span>
                    </div>

                    <div class="flex items-baseline">
                        <span class="font-extrabold tracking-tight {{ if not $plan.featured }}text-gray-900{{ end }}">{{
                            $plan.additional_price }}
                            <span class="font-light ml-1 {{ if not $plan.featured }}text-gray-500{{ end }}">{{ i18n
                                $plan.additional_price_unit }}</span>
                        </span>
                    </div>
                </div>
                {{ end }}

                <ul class="mb-8 space-y-4 flex-grow">
                    {{ range $plan.features }}
                    <li class="flex items-center flex-nowrap">
                        <svg class="w-5 h-5 flex-shrink-0 {{ if $plan.featured }}text-white{{ else }}text-green-500{{ end }} mr-2"
                            fill="currentColor" viewBox="0 0 20 20" style="width: 20px; height: 20px;">
                            <path fill-rule="evenodd"
                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <span class="{{ if not $plan.featured }}text-gray-600{{ end }} break-words">{{ . }}</span>
                    </li>
                    {{ end }}
                </ul>
                {{ with .additional_description }}
                <div class="text-sm {{ if $plan.featured }}text-white{{ else }}text-gray-500{{ end }}">{{ . }}</div>
                {{ end }}
                <a href="{{ $plan.button.url }}"
                    class="mt-4 text-center w-full px-5 py-3 rounded-lg {{ if $plan.featured }}bg-white text-primary-600 hover:bg-gray-100{{ else }}bg-primary-400 text-white hover:bg-primary-700{{ end }} font-medium transition duration-300">
                    {{ $plan.button.text }}
                </a>
            </div>
            {{ end }}
        </div>
    </div>
</section>