{{ $main_title = title }}
<div class="relative">
    <div
        class="max-lg:hidden absolute bottom-0 right-0 h-1/2 w-full lg:h-full lg:w-1/2 bg-dark-900 dark:bg-dark-800 -z-10">
    </div>
    {{ if prices }}
        <div class="lg:container py-20">

            <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between lg:space-x-8">
                {{ prices }}
                    <div class="lg:w-1/2 xl:w-5/12">
                        {{ if index === 0 }}
                            <div class="flex flex-col mb-16 max-w-2xl px-4">
                                {{ if $main_title }}
                                    <x-heading>{{ main_title }}</x-heading>
                                {{ /if }}
                                {{ if description }}
                                    <x-richtext size="lg" class="mt-2">{{ description }}</x-richtext>
                                {{ /if }}
                            </div>
                        {{ /if }}
                        <div
                            class="max-lg:p-4 {{if featured }}bg-dark-900 dark:bg-dark-800 max-lg:py-16 max-lg:mt-12{{/if}}">
                            <div
                                class="flex flex-col items-center bg-white dark:bg-dark-900 shadow-md rounded-2xl border border-primary-200 dark:border-dark-600 p-10 xl:p-14">
                                <div>
                                    <x-heading size="h4" class="text-center">{{ title }}</x-heading>
                                    {{ if has_additional_price }}
                                        <div class="flex items-center justify-between w-full my-8">
                                            <div>
                                                {{ if price }}
                                                    <x-heading class="text-center">{{ price }}</x-heading>
                                                {{ /if }}
                                                {{ if duration }}
                                                    <x-paragraph size="xl" color="gray">{{ duration }}</x-paragraph>
                                                {{ /if }}
                                            </div>
                                            <div class="text-xl text-dark-400">+</div>
                                            <div>
                                                {{ if price }}
                                                    <x-heading class="text-center">{{ additional_price }}
                                                    </x-heading>
                                                {{ /if }}
                                                {{ if duration }}
                                                    <x-paragraph size="xl" color="gray">{{ additional_duration }}
                                                    </x-paragraph>
                                                {{ /if }}
                                            </div>
                                        </div>
                                    {{ else }}
                                        <div class="my-8">
                                            {{ if price }}
                                                <x-heading class="text-center">{{ price }}</x-heading>
                                            {{ /if }}
                                            {{ if duration }}
                                                <x-paragraph size="xl" color="gray" class="text-center">
                                                    {{ duration }}
                                                </x-paragraph>
                                            {{ /if }}
                                        </div>
                                    {{ /if }}
                                    {{ if rich_text }}
                                        <x-richtext size="lg">{{ rich_text }}</x-richtext>
                                    {{ /if }}
                                    {{ if features }}
                                        <ul class="mt-8">
                                            {{ features }}
                                                <li class="flex items-center py-2 border-b border-dark-200">
                                                    {{ svg src="check" class="w-6 h-6 mr-3 fill-current text-primary-700" }}
                                                    <x-paragraph color="gray">{{ title }}</x-paragraph>
                                                </li>
                                            {{ /features }}
                                        </ul>
                                    {{ /if }}
                                </div>
                                {{ if toggle and label }}
                                    <x-button url="{{ link }}" target="{{ target_blank ?? '_self' }}"
                                        variant="{{ button_variant }}" size="{{ button_size }}" class="mt-8">
                                        {{ label }}
                                    </x-button>
                                {{ /if }}
                            </div>
                        </div>
                    </div>
                {{ /prices }}
            </div>
        </div>
    {{ /if }}
</div>