{{# Prices Page Template #}}

{{# Hero #}}
<section class="hero-fullscreen relative -mt-6 overflow-hidden flex items-center"
         style="background: url('/assets/articles/uploads/2021/09/pic_paralax_2.jpg') center/cover no-repeat fixed;">
    <div class="absolute inset-0 bg-[#3b3663]/35"></div>
    <div class="hero-dots relative z-10 px-6 lg:px-[90px] pt-28 md:pt-32 pb-14 md:pb-16 w-full">
        <div class="max-w-4xl mx-auto text-center text-white">
            <h1 class="font-nunito text-3xl md:text-4xl lg:text-[42px] font-bold mb-6 leading-[1.4]"
                data-aos="fade-down" data-aos-delay="100">
                {{ hero_title ?? title }}
            </h1>
            {{ if hero_subtitle }}
            <p class="text-lg md:text-xl text-white/80 max-w-2xl mx-auto"
               data-aos="fade-up" data-aos-delay="250">
                {{ hero_subtitle }}
            </p>
            {{ /if }}
        </div>
    </div>
</section>

{{# Pricing state — data is pre-encoded JSON (built by view composer); methods added in JS.
     Uses object-spread (not Object.assign) so `get plans()` is attached as a real getter
     — Object.assign would invoke the getter during copy and lose the binding to `this`. #}}
<script>
window.pricesData = () => ({
    ...{{ prices_data_json }},
    get plans() { return this.tab === 'hotels' ? this.hotels : this.apartments; },
    price(plan) {
        if (plan.per) {
            if (plan.base === 0) return 0;
            return plan.base + Math.max(0, this.apts - 5) * plan.perExtra;
        }
        return plan.pricing[this.months];
    },
    savings(plan) {
        if (!plan.pricing || this.months === 1) return 0;
        return plan.pricing[1] * this.months - plan.pricing[this.months];
    },
    periodSuffix(plan) {
        if (plan.per) return this.perMoLabel;
        if (this.months === 1) return this.perMoLabel;
        return this.perNMoTemplate.replace(':n', this.months);
    },
    totalLine(plan) {
        if (plan.per) {
            if (plan.base === 0) return '';
            const extra = Math.max(0, this.apts - 5);
            return extra > 0 ? '$' + plan.base + ' + ' + extra + ' × $' + plan.perExtra : '';
        }
        if (plan.pricing[this.months] === 0) return '';
        if (this.months > 1) {
            const s = this.savings(plan);
            return s > 0 ? this.saveLabel + ' $' + s : '';
        }
        return '';
    }
});
</script>

{{# Pricing Section #}}
<section class="py-16 full-bleed bg-[#f9f8ff]" x-data="pricesData()">
    <div class="max-w-6xl mx-auto">

        {{# Property Type Toggle #}}
        <div class="flex justify-center mb-8" data-aos="fade-up">
            <div class="inline-flex bg-white rounded-lg shadow-sm border border-gray-200 p-1">
                <button @click="tab = 'hotels'"
                        :class="tab === 'hotels' ? 'bg-[#3b3663] text-white shadow' : 'text-[#696687] hover:text-[#3b3663]'"
                        class="px-6 py-2.5 rounded-md text-sm font-bold font-nunito transition-all">
                    <i class="fa-solid fa-hotel mr-2"></i>{{ trans:messages.price_tab_hotels }}
                </button>
                <button @click="tab = 'apartments'"
                        :class="tab === 'apartments' ? 'bg-[#3b3663] text-white shadow' : 'text-[#696687] hover:text-[#3b3663]'"
                        class="px-6 py-2.5 rounded-md text-sm font-bold font-nunito transition-all">
                    <i class="fa-solid fa-city mr-2"></i>{{ trans:messages.price_tab_apartments }}
                </button>
            </div>
        </div>

        {{# Hotel Period Selector #}}
        <div x-show="tab === 'hotels'" x-transition class="flex flex-col items-center gap-2 mb-12" data-aos="fade-up" data-aos-delay="100">
            <span class="text-sm font-semibold text-[#3b3663]">{{ trans:messages.price_billing_period }}</span>
            <div class="inline-flex bg-white rounded-lg shadow-sm border border-gray-200 p-1">
                <template x-for="m in [1, 3, 6, 12]" :key="m">
                    <button @click="months = m"
                            :class="months === m ? 'bg-[#6254e7] text-white shadow' : 'text-[#696687] hover:text-[#3b3663]'"
                            class="px-4 py-2 rounded-md text-sm font-bold font-nunito transition-all relative">
                        <span x-text="periodLabels[m]"></span>
                        <span x-show="m === 12" class="absolute -top-2.5 -right-1 text-[10px] font-bold text-white bg-[#6254e7] rounded-full px-1.5"
                              :class="months === 12 ? 'bg-[#ffc70a] text-[#3b3663]' : 'bg-[#6254e7]'">{{ trans:messages.price_badge_best }}</span>
                    </button>
                </template>
            </div>
        </div>

        {{# Apartment Count Selector #}}
        <div x-show="tab === 'apartments'" x-transition class="flex items-center justify-center gap-4 mb-12" data-aos="fade-up" data-aos-delay="150">
            <span class="text-sm font-semibold text-[#3b3663]">{{ trans:messages.price_num_apartments }}</span>
            <div class="flex items-center bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <button @click="apts = Math.max(5, apts - 1)"
                        class="px-3 py-2 text-[#6254e7] hover:bg-[#f4f3ff] transition-colors font-bold text-lg leading-none">
                    &minus;
                </button>
                <input type="number" x-model.number="apts" min="5" max="999"
                       @change="apts = Math.max(5, apts || 5)"
                       class="w-16 text-center py-2 text-[#252a3f] font-bold font-nunito text-lg border-x border-gray-200 focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
                <button @click="apts = Math.min(999, apts + 1)"
                        class="px-3 py-2 text-[#6254e7] hover:bg-[#f4f3ff] transition-colors font-bold text-lg leading-none">
                    +
                </button>
            </div>
        </div>

        {{# Pricing Cards #}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 items-start">
            <template x-for="(plan, i) in plans" :key="plan.name + tab">
                <div class="relative rounded-xl overflow-hidden transition-all duration-300"
                     :class="plan.featured
                        ? 'bg-white shadow-[0_20px_60px_-12px_rgba(59,54,99,0.25)] ring-2 ring-[#6254e7] md:-mt-4 md:mb-[-16px]'
                        : 'bg-white shadow-[0_0_40px_3px_rgba(0,0,0,0.06)]'"
                     data-aos="fade-up"
                     :data-aos-delay="i * 120">

                    {{# Featured badge #}}
                    <div x-show="plan.featured"
                         class="bg-[#6254e7] text-white text-center text-xs font-bold py-1.5 tracking-wider uppercase">
                        {{ trans:messages.price_most_popular }}
                    </div>

                    <div class="p-8">
                        {{# Plan header #}}
                        <div class="text-center mb-6">
                            <div class="w-12 h-12 mx-auto mb-4 rounded-lg flex items-center justify-center"
                                 :class="plan.featured ? 'bg-[#6254e7]/10' : 'bg-[#f4f3ff]'">
                                <i class="fa-solid text-xl"
                                   :class="plan.icon + (plan.featured ? ' text-[#6254e7]' : ' text-[#9289f1]')"></i>
                            </div>
                            <h3 class="font-nunito text-xl font-bold text-[#252a3f] mb-1" x-text="plan.name"></h3>
                            <p class="text-sm text-[#696687]" x-text="plan.desc"></p>
                        </div>

                        {{# Price #}}
                        <div class="text-center mb-6 pb-6 border-b border-gray-100">
                            <div class="flex items-start justify-center">
                                <span class="text-lg font-bold text-[#696687] mt-2">$</span>
                                <span class="text-5xl font-nunito font-extrabold text-[#252a3f] mx-0.5"
                                      x-text="price(plan).toLocaleString()"></span>
                            </div>
                            <div class="text-sm text-[#696687] mt-1">
                                <span x-show="price(plan) === 0" x-text="freeForeverLabel"></span>
                                <span x-show="price(plan) > 0" x-text="periodSuffix(plan)"></span>
                            </div>
                            <div class="text-xs text-[#6254e7] font-semibold mt-1 h-4"
                                 x-show="price(plan) > 0"
                                 x-text="totalLine(plan)"></div>
                            <div class="text-xs text-[#696687] mt-1 h-4"
                                 x-show="plan.per && plan.base"
                                 x-text="'$' + plan.perExtra + ' ' + perAdditionalLabel"></div>
                        </div>

                        {{# Features #}}
                        <ul class="space-y-3 mb-8">
                            <template x-for="(feat, j) in plan.features" :key="j">
                                <li class="flex items-start gap-2.5 text-sm">
                                    <i class="fa-solid fa-check text-[#6254e7] mt-0.5 text-xs shrink-0"
                                       x-show="feat.type === 'feature'"></i>
                                    <span x-show="feat.type === 'group'"
                                          class="text-xs font-bold text-[#6254e7] uppercase tracking-wide"
                                          x-text="feat.label"></span>
                                    <span x-show="feat.type === 'feature'"
                                          class="text-[#565e81]" x-text="feat.label"></span>
                                </li>
                            </template>
                        </ul>

                        {{# CTA Button #}}
                        <a href="{{ locale_path }}/registration"
                           class="block text-center py-3 rounded-lg font-bold font-nunito text-sm transition-all duration-300"
                           :class="plan.featured
                              ? 'bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] shadow hover:shadow-lg hover:-translate-y-0.5'
                              : price(plan) === 0
                                ? 'bg-[#f4f3ff] text-[#6254e7] hover:bg-[#6254e7] hover:text-white'
                                : 'bg-[#3b3663] text-white hover:bg-[#2a2548] hover:shadow-lg hover:-translate-y-0.5'">
                            <span x-text="price(plan) === 0 ? ctaFree : ctaTrial"></span>
                        </a>
                    </div>
                </div>
            </template>
        </div>

        {{# Footnote #}}
        <p class="text-center text-xs text-[#a0aec6] mt-8" data-aos="fade-up">
            {{ trans:messages.price_footnote }}
        </p>
    </div>
</section>

{{# Comparison-table labels — stashed on window so Alpine's x-data can spread them.
     Inlining the JSON directly into the attribute produced "Unexpected token" errors
     because the HTML-attribute parser doesn't process Unicode escapes the way a <script> tag does. #}}
<script>
window.pricesCompareLabels = {{ prices_compare_labels_json }};
</script>

{{# Feature Comparison Table #}}
<section class="py-16 full-bleed bg-white" x-data="{ compTab: 'hotels', ...window.pricesCompareLabels }">
    <div class="max-w-5xl mx-auto">
        <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] text-center mb-3 title-underline" data-aos="fade-up">
            {{ trans:messages.price_compare_title }}
        </h2>
        <p class="text-[#696687] text-center mb-8 mt-6" data-aos="fade-up" data-aos-delay="100">
            {{ trans:messages.price_compare_subtitle }}
        </p>

        {{# Tab toggle for comparison #}}
        <div class="flex justify-center mb-8" data-aos="fade-up" data-aos-delay="150">
            <div class="inline-flex bg-[#f9f8ff] rounded-lg p-1">
                <button @click="compTab = 'hotels'"
                        :class="compTab === 'hotels' ? 'bg-white shadow text-[#3b3663]' : 'text-[#696687]'"
                        class="px-5 py-2 rounded-md text-sm font-bold font-nunito transition-all">{{ trans:messages.price_tab_hotels }}</button>
                <button @click="compTab = 'apartments'"
                        :class="compTab === 'apartments' ? 'bg-white shadow text-[#3b3663]' : 'text-[#696687]'"
                        class="px-5 py-2 rounded-md text-sm font-bold font-nunito transition-all">{{ trans:messages.price_tab_apartments }}</button>
            </div>
        </div>

        <div class="overflow-x-auto rounded-xl border border-gray-200 shadow-sm" data-aos="fade-up" data-aos-delay="200">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-[#f9f8ff]">
                        <th class="text-left py-4 px-6 font-nunito font-bold text-[#252a3f] w-[40%]">{{ trans:messages.price_compare_feature_column }}</th>
                        <th class="text-center py-4 px-4 font-nunito font-bold text-[#252a3f]">{{ trans:messages.price_plan_free }}</th>
                        <th class="text-center py-4 px-4 font-nunito font-bold text-[#252a3f]">{{ trans:messages.price_plan_standard }}</th>
                        <th class="text-center py-4 px-4 font-nunito font-bold text-[#6254e7]">
                            {{ trans:messages.price_plan_ultra }} <i class="fa-solid fa-crown text-xs ml-1"></i>
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    {{# Free tier features #}}
                    <tr class="bg-[#f9f8ff]/50">
                        <td class="py-3 px-6 font-semibold text-[#3b3663]" colspan="4">{{ trans:messages.price_compare_section_core }}</td>
                    </tr>
                    <tr>
                        <td class="py-3 px-6 text-[#565e81]">{{ trans:messages.price_feat_basic_system }}</td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                    </tr>
                    <tr>
                        <td class="py-3 px-6 text-[#565e81]">{{ trans:messages.price_feat_booking_module }}</td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                    </tr>
                    <tr>
                        <td class="py-3 px-6 text-[#565e81]">{{ trans:messages.price_feat_reports }}</td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                    </tr>
                    <tr>
                        <td class="py-3 px-6 text-[#565e81]">{{ trans:messages.price_feat_support }}</td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                    </tr>

                    {{# Standard tier additions #}}
                    <tr class="bg-[#f9f8ff]/50">
                        <td class="py-3 px-6 font-semibold text-[#3b3663]" colspan="4">{{ trans:messages.price_compare_section_distribution }}</td>
                    </tr>
                    <tr>
                        <td class="py-3 px-6 text-[#565e81]">{{ trans:messages.price_feat_channel_manager }}</td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-minus text-gray-300"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                    </tr>
                    <tr>
                        <td class="py-3 px-6 text-[#565e81]">{{ trans:messages.price_feat_web_analytics }}</td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-minus text-gray-300"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                    </tr>

                    {{# Ultra tier additions #}}
                    <tr class="bg-[#f9f8ff]/50">
                        <td class="py-3 px-6 font-semibold text-[#3b3663]" colspan="4">{{ trans:messages.price_compare_section_advanced }}</td>
                    </tr>
                    <tr>
                        <td class="py-3 px-6 text-[#565e81]">{{ trans:messages.price_feat_housekeeping }}</td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-minus text-gray-300"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-minus text-gray-300"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                    </tr>
                    <tr>
                        <td class="py-3 px-6 text-[#565e81]">{{ trans:messages.price_feat_wifi }}</td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-minus text-gray-300"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-minus text-gray-300"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                    </tr>
                    <tr>
                        <td class="py-3 px-6 text-[#565e81]">{{ trans:messages.price_feat_reputation }}</td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-minus text-gray-300"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-minus text-gray-300"></i></td>
                        <td class="py-3 px-4 text-center"><i class="fa-solid fa-check text-[#6254e7]"></i></td>
                    </tr>

                    {{# Pricing row #}}
                    <tr class="bg-[#f9f8ff]">
                        <td class="py-4 px-6 font-nunito font-bold text-[#3b3663]"
                            x-text="compTab === 'hotels' ? startingFromMo : startingFromApts"></td>
                        <td class="py-4 px-4 text-center font-bold text-[#252a3f]">$0</td>
                        <td class="py-4 px-4 text-center font-bold text-[#252a3f]"
                            x-text="compTab === 'hotels' ? '$35/mo' : '$30/mo'"></td>
                        <td class="py-4 px-4 text-center font-bold text-[#6254e7]"
                            x-text="compTab === 'hotels' ? '$130/mo' : '$180/mo'"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

{{# CTA — full-bleed parallax background matching the page's hero #}}
<section class="hero-fullscreen relative overflow-hidden"
         style="background-image: url('/assets/articles/uploads/2021/09/pic_paralax_2.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover;">
    <div class="absolute inset-0 bg-[#3b3663]/35"></div>
    <div class="relative z-10 px-6 lg:px-[90px] py-20">
        <div class="max-w-3xl mx-auto text-center" data-aos="fade-up">
            <h2 class="font-nunito text-2xl md:text-3xl font-bold text-white mb-4 uppercase">{{ trans:messages.prices_cta_title }}</h2>
            <p class="text-white/80 mb-8">{{ trans:messages.prices_cta_subtitle }}</p>
            <a href="{{ locale_path }}/registration"
               class="btn-glow inline-block px-10 py-3.5 text-sm font-bold uppercase tracking-wider rounded bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors shadow-lg">
                {{ trans:messages.nav_free_trial }}
            </a>
        </div>
    </div>
</section>