<?php
$current_url = home_url($_SERVER['REQUEST_URI']);
$page_title = get_the_title() ?: 'Главная страница';
$hidden_value = "Страница: {$page_title} | URL: {$current_url}";
?>

<div class="max-[1050px]:p-[24px] p-[40px]">
    <div class="max-[768px]:gap-[6px] max-[768px]:items-start max-[768px]:justify-start max-[768px]:flex-col-reverse flex items-center gap-[24px]">
        <h3 class="max-[1050px]:text-[30px] max-[768px]:text-[24px] font-[500] text-[40px] leading-[120%] text-[#222]">
            Оформить карту “<span class="font-[700]" data-inject="card-title">не выбрана</span>”
        </h3>
            <div class="px-[12px] py-[4px] rounded-[32px] bg-[linear-gradient(90deg,_#ffd65a_39.42%,_#ffe595_92.9%)]">
                                    <span data-inject="card-attr" class="font-[600] text-[14px] leading-[125%]">
    -
</span>

            </div>
    </div>
    <div class="bg-[#fff] max-w-fit px-[20px] max-[768px]:px-[14px] rounded-[8px] py-[8px] flex items-center max-[1050px]:mt-[16px] mt-[32px] gap-[24px]"
         id="card-time-info">
        <h4 class="max-[768px]:hidden max-[1050px]:text-[14px] font-[600] text-[24px] leading-[125%] text-[#222] ">Время
            посещений</h4>
        <svg class="max-[768px]:hidden" width="2" height="50" viewBox="0 0 2 50" fill="none"
             xmlns="http://www.w3.org/2000/svg">
            <rect x="0.5" width="1" height="50" fill="#E0E0E0"/>
        </svg>
        <div class="flex flex-col gap-[4px] font-[500] text-[16px] leading-[145%] text-[#222]">
            <span>Будние дни: <strong data-inject="normal-days">-</strong></span>
            <span class="inline-flex flex-wrap">Выходные и праздничные дни: <strong
                        data-inject="vacation-days">-</strong></span>
        </div>
    </div>

    <div class="max-[1050px]:mt-[16px] mt-[32px]">
        <div id="price-options"
             class="max-[1050px]:justify-start max-[1050px]:gap-[8px] flex overflow-x-auto overflow-y-hidden gap-[6px]">
            <div class=" max-[1050px]:min-w-[120px] max-[1050px]:h-[83px]  price-option [&_div]:text-[#f8f8f8] [&_p]:text-[#bcbcc0] w-full max-w-[213px] h-[147px] rounded-[12px] flex items-center justify-center flex-col cursor-pointer bg-[linear-gradient(180deg,_#f2f2f2_69.59%,_#ededed_100%)]"
                 data-period="1_month">
                <div class="text-center flex flex-col gap-[6px]">
                    <div class="max-[1050px]:text-[14px] font-[600] text-[24px] leading-[125%]">1 месяц</div>
                    <div class="max-[1050px]:text-[20px] font-[700] text-[32px] leading-[115%]">
                        <span data-inject="price-1-month-full">-</span> ₽
                    </div>
                    <p class="max-[1050px]:text-[14px] font-[500] text-[20px] leading-[140%]">
                        <span data-inject="price-1-month-day">-</span> ₽ в мес.
                    </p>
                </div>
            </div>

            <div class=" max-[1050px]:min-w-[120px] max-[1050px]:h-[83px] price-option [&_div]:text-[#f8f8f8] [&_p]:text-[#bcbcc0] w-full max-w-[213px] h-[147px] rounded-[12px] flex items-center justify-center flex-col cursor-pointer bg-[linear-gradient(180deg,_#f2f2f2_69.59%,_#ededed_100%)]"
                 data-period="3_month">
                <div class="text-center flex flex-col gap-[6px]">
                    <div class="max-[1050px]:text-[14px] font-[600] text-[24px] leading-[125%]">3 месяца</div>
                    <div class="max-[1050px]:text-[20px] font-[700] text-[32px] leading-[115%]">
                        <span data-inject="price-3-month-full">-</span> ₽
                    </div>
                    <p class="max-[1050px]:text-[14px] font-[500] text-[20px] leading-[140%]">
                        <span data-inject="price-3-month-day">-</span> ₽ в мес.
                    </p>
                </div>
            </div>

            <div class=" max-[1050px]:min-w-[120px] max-[1050px]:h-[83px] price-option [&_div]:text-[#f8f8f8] [&_p]:text-[#bcbcc0] w-full max-w-[213px] h-[147px] rounded-[12px] flex items-center justify-center flex-col cursor-pointer bg-[linear-gradient(180deg,_#f2f2f2_69.59%,_#ededed_100%)]"
                 data-period="6_month">
                <div class="text-center flex flex-col gap-[6px]">
                    <div class="max-[1050px]:text-[14px] font-[600] text-[24px] leading-[125%]">6 месяцев</div>
                    <div class="max-[1050px]:text-[20px] font-[700] text-[32px] leading-[115%]">
                        <span data-inject="price-6-month-full">-</span> ₽
                    </div>
                    <p class="max-[1050px]:text-[14px] font-[500] text-[20px] leading-[140%]">
                        <span data-inject="price-6-month-day">-</span> ₽ в мес.
                    </p>
                </div>
            </div>

            <div class=" max-[1050px]:min-w-[120px] max-[1050px]:h-[83px] price-option [&_div]:text-[#f8f8f8] [&_p]:text-[#bcbcc0] w-full max-w-[213px] h-[147px] rounded-[12px] flex items-center justify-center flex-col cursor-pointer bg-[linear-gradient(180deg,_#f2f2f2_69.59%,_#ededed_100%)]"
                 data-period="12_month">
                <div class="text-center flex flex-col gap-[6px]">
                    <div class="max-[1050px]:text-[14px] font-[600] text-[24px] leading-[125%]">12 месяцев</div>
                    <div class="max-[1050px]:text-[20px] font-[700] text-[32px] leading-[115%]">
                        <span data-inject="price-12-month-full">-</span> ₽
                    </div>
                    <p class="max-[1050px]:text-[14px] font-[500] text-[20px] leading-[140%]">
                        <span data-inject="price-12-month-day">-</span> ₽ в мес.
                    </p>
                </div>
            </div>
        </div>

        <!-- Выбранный тариф -->
        <div class="max-[1050px]:mt-[16px] mt-[32px] max-[1050px]:text-[14px] font-[500] text-[20px] leading-[140%]">
            Выбрано: “<span data-inject="card-title">-</span>” на <span id="selected-period">-</span>
        </div>

        <div class="form-block-wrapper max-[1050px]:mt-[16px] mt-[32px]"
             data-form-id="4"
             data-hidden-value="<?php echo esc_attr($hidden_value); ?>">
            <?php echo do_shortcode('[fluentform id="4"]'); ?>
        </div>
    </div>
</div>