{{# Registration / Free Trial Page Template #}}

{{# Section 1: Hero — full-width parallax (matches product pages) #}}
<section class="hero-fullscreen relative -mt-6 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; transform: translate3d(0px, 0px, 0px);">
    <div class="absolute inset-0 bg-[#3b3663]/35"></div>
    <div class="hero-dots relative z-10 px-6 lg:px-[90px] pt-32 md:pt-36 pb-16 md:pb-20">
        <div class="max-w-4xl mx-auto text-center text-white">
            <h1 class="font-nunito text-3xl md:text-4xl lg:text-5xl font-bold mb-4 uppercase" data-aos="fade-down">{{ hero_title ?? title }}</h1>
            {{ if hero_subtitle }}
            <p class="text-lg text-white/80 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="150">{{ hero_subtitle }}</p>
            {{ /if }}
        </div>
    </div>
</section>

{{# Section 2: Intro — text left, image right #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row items-center gap-10 lg:gap-16">
            <div class="md:w-7/12" data-aos="fade-right">
                <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-6 title-underline">
                    {{ trans:messages.reg_intro_title }}
                </h2>
                <div class="text-[#696687] leading-relaxed space-y-4">
                    <p>{{ trans:messages.reg_intro_p1 }}</p>
                    <p>{{ trans:messages.reg_intro_p2 }}</p>
                    <p>{{ trans:messages.reg_intro_p3 }}</p>
                    <p>{{ trans:messages.reg_intro_p4 }}</p>
                    <p>{{ trans:messages.reg_intro_p5 }}</p>
                </div>
            </div>
            <div class="md:w-5/12" data-aos="fade-left">
                <img src="/assets/articles/uploads/2021/10/layer-113.png" alt="{{ trans:messages.reg_intro_title }}" class="w-full max-w-md mx-auto float-bob">
            </div>
        </div>
    </div>
</section>

{{# Section 3: Two-column — benefits left, form right #}}
<section class="py-16 full-bleed bg-[#f9f8ff]">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row gap-10 lg:gap-14">

            {{# Left Column: Benefits #}}
            <div class="md:w-[30%] shrink-0" data-aos="fade-right">
                <h2 class="font-nunito text-xl font-bold text-[#252a3f] mb-6">{{ trans:messages.registration_benefits_title }}</h2>
                <ul class="space-y-4 mb-8">
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-check-circle text-[#6254e7] mt-0.5 shrink-0"></i>
                        <span class="text-[#565e81] text-sm">{{ trans:messages.registration_benefit_1 }}</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-check-circle text-[#6254e7] mt-0.5 shrink-0"></i>
                        <span class="text-[#565e81] text-sm">{{ trans:messages.registration_benefit_2 }}</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-check-circle text-[#6254e7] mt-0.5 shrink-0"></i>
                        <span class="text-[#565e81] text-sm">{{ trans:messages.registration_benefit_3 }}</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-check-circle text-[#6254e7] mt-0.5 shrink-0"></i>
                        <span class="text-[#565e81] text-sm">{{ trans:messages.registration_benefit_4 }}</span>
                    </li>
                </ul>

                {{# Floating illustration #}}
                <div class="hidden md:block">
                    <img src="/assets/articles/uploads/2021/09/home1_img_1.png" alt="OtelMS hotel management registration" class="float-bob max-w-[220px] mx-auto opacity-90">
                </div>

                {{ if content }}
                <div class="mt-8 prose prose-sm">
                    {{ content }}
                </div>
                {{ /if }}
            </div>

            {{# Right Column: Registration Form #}}
            <div class="md:w-[70%]" data-aos="fade-left">
                <div class="bg-white rounded-2xl md:rounded-l-[2rem] shadow-[0_0_40px_3px_rgba(0,0,0,0.08)] p-6 md:p-10"
                     x-data="{
                         password: '',
                         confirm: '',
                         get mismatch() { return this.confirm.length > 0 && this.password !== this.confirm }
                     }">

                    <h2 class="font-nunito text-xl font-bold text-[#252a3f] mb-8 text-center">{{ trans:messages.registration_form_title }}</h2>

                    {{ form:registration attr:data-recaptcha="true" attr:data-recaptcha-action="registration" }}
                        <div class="space-y-5">
                            {{# Row 1: First Name + Last Name #}}
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="first_name" class="block text-sm font-medium text-[#565e81] mb-1 font-nunito">{{ trans:messages.registration_first_name }} *</label>
                                    <input type="text" name="first_name" id="first_name" required
                                           class="w-full px-4 py-3 border-0 border-b-2 border-gray-200 bg-transparent focus:border-[#6254e7] outline-none transition-all font-nunito text-[#495057]">
                                    {{ if errors:first_name }}<p class="text-red-500 text-xs mt-1">{{ errors:first_name }}</p>{{ /if }}
                                </div>
                                <div>
                                    <label for="last_name" class="block text-sm font-medium text-[#565e81] mb-1 font-nunito">{{ trans:messages.registration_last_name }} *</label>
                                    <input type="text" name="last_name" id="last_name" required
                                           class="w-full px-4 py-3 border-0 border-b-2 border-gray-200 bg-transparent focus:border-[#6254e7] outline-none transition-all font-nunito text-[#495057]">
                                    {{ if errors:last_name }}<p class="text-red-500 text-xs mt-1">{{ errors:last_name }}</p>{{ /if }}
                                </div>
                            </div>

                            {{# Row 2: Email #}}
                            <div>
                                <label for="email" class="block text-sm font-medium text-[#565e81] mb-1 font-nunito">{{ trans:messages.registration_email }} *</label>
                                <input type="email" name="email" id="email" required
                                       class="w-full px-4 py-3 border-0 border-b-2 border-gray-200 bg-transparent focus:border-[#6254e7] outline-none transition-all font-nunito text-[#495057]">
                                {{ if errors:email }}<p class="text-red-500 text-xs mt-1">{{ errors:email }}</p>{{ /if }}
                            </div>

                            {{# Row 3: Password + Confirm Password #}}
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="password" class="block text-sm font-medium text-[#565e81] mb-1 font-nunito">{{ trans:messages.registration_password }} *</label>
                                    <input type="password" name="password" id="password" required minlength="8"
                                           x-model="password"
                                           class="w-full px-4 py-3 border-0 border-b-2 border-gray-200 bg-transparent focus:border-[#6254e7] outline-none transition-all font-nunito text-[#495057]">
                                    <p class="text-[#9289f1] text-xs mt-1">{{ trans:messages.registration_password_min }}</p>
                                    {{ if errors:password }}<p class="text-red-500 text-xs mt-1">{{ errors:password }}</p>{{ /if }}
                                </div>
                                <div>
                                    <label for="password_confirmation" class="block text-sm font-medium text-[#565e81] mb-1 font-nunito">{{ trans:messages.registration_password_confirm }} *</label>
                                    <input type="password" name="password_confirmation" id="password_confirmation" required
                                           x-model="confirm"
                                           class="w-full px-4 py-3 border-0 border-b-2 border-gray-200 bg-transparent outline-none transition-all font-nunito text-[#495057]"
                                           :class="mismatch ? 'border-red-400 focus:border-red-500' : 'border-gray-200 focus:border-[#6254e7]'">
                                    <p x-show="mismatch" x-cloak class="text-red-500 text-xs mt-1">{{ trans:messages.registration_password_mismatch }}</p>
                                    {{ if errors:password_confirmation }}<p class="text-red-500 text-xs mt-1">{{ errors:password_confirmation }}</p>{{ /if }}
                                </div>
                            </div>

                            {{# Row 4: Phone (intl-tel-input with flag dropdown) #}}
                            <div>
                                <label for="phone" class="block text-sm font-medium text-[#565e81] mb-1 font-nunito">{{ trans:messages.registration_phone }} *</label>
                                <input type="tel" name="phone" id="phone" required
                                       x-intl-tel data-country="{{ geo_country ?? 'us' }}"
                                       class="w-full py-3 pr-4 border-0 border-b-2 border-gray-200 bg-transparent focus:border-[#6254e7] outline-none transition-all font-nunito text-[#495057]">
                                {{ if errors:phone }}<p class="text-red-500 text-xs mt-1">{{ errors:phone }}</p>{{ /if }}
                            </div>

                            {{# Row 5: Hotel / Property Name #}}
                            <div>
                                <label for="hotel_name" class="block text-sm font-medium text-[#565e81] mb-1 font-nunito">{{ trans:messages.registration_hotel_name }} *</label>
                                <input type="text" name="hotel_name" id="hotel_name" required
                                       class="w-full px-4 py-3 border-0 border-b-2 border-gray-200 bg-transparent focus:border-[#6254e7] outline-none transition-all font-nunito text-[#495057]">
                                {{ if errors:hotel_name }}<p class="text-red-500 text-xs mt-1">{{ errors:hotel_name }}</p>{{ /if }}
                            </div>

                            {{# Row 6: Language + Promo Code #}}
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="language" class="block text-sm font-medium text-[#565e81] mb-1 font-nunito">{{ trans:messages.registration_language }}</label>
                                    <select name="language" id="language"
                                            class="w-full px-4 py-3 border-0 border-b-2 border-gray-200 bg-transparent focus:border-[#6254e7] outline-none transition-all font-nunito text-[#495057] appearance-none">
                                        <option value="en" {{ if {current_locale} == "en" }}selected{{ /if }}>English</option>
                                        <option value="ru" {{ if {current_locale} == "ru" }}selected{{ /if }}>Русский</option>
                                        <option value="pl" {{ if {current_locale} == "pl" }}selected{{ /if }}>Polski</option>
                                        <option value="es" {{ if {current_locale} == "es" }}selected{{ /if }}>Español</option>
                                        <option value="ge" {{ if {current_locale} == "ge" }}selected{{ /if }}>ქართული</option>
                                        <option value="uk" {{ if {current_locale} == "uk" }}selected{{ /if }}>Українська</option>
                                        <option value="bg" {{ if {current_locale} == "bg" }}selected{{ /if }}>Български</option>
                                    </select>
                                </div>
                                <div>
                                    <label for="promo_code" class="block text-sm font-medium text-[#565e81] mb-1 font-nunito">{{ trans:messages.registration_promo_code }}</label>
                                    <input type="text" name="promo_code" id="promo_code"
                                           class="w-full px-4 py-3 border-0 border-b-2 border-gray-200 bg-transparent focus:border-[#6254e7] outline-none transition-all font-nunito text-[#495057]">
                                </div>
                            </div>

                            {{# Terms text #}}
                            <p class="text-xs text-[#9298b0] leading-relaxed">{{ trans:messages.registration_terms_text }}</p>

                            {{# Submit Button #}}
                            <button type="submit"
                                    :disabled="mismatch"
                                    class="btn-primary w-full px-6 py-3.5 text-base font-semibold font-nunito rounded-lg shadow-md disabled:opacity-50 disabled:cursor-not-allowed">
                                {{ trans:messages.registration_submit }}
                            </button>
                        </div>

                        {{ if success }}
                        <div class="mt-6 p-4 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm text-center">
                            <i class="fa-solid fa-circle-check mr-1"></i> {{ trans:messages.registration_success }}
                        </div>
                        {{ /if }}

                        {{ if errors }}
                        <div class="mt-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">
                            <ul class="list-disc list-inside space-y-1">
                                {{ errors }}
                                    <li>{{ value }}</li>
                                {{ /errors }}
                            </ul>
                        </div>
                        {{ /if }}
                    {{ /form:registration }}
                </div>
            </div>
        </div>
    </div>
</section>