{{# Small Hotel Automation Page Template — legacy fallback.

    Solutions pages render via Replicator (page_sections) by default; see the
    precedence note in pages/default.antlers.html. This template is only reached
    when page_sections is empty on solutions-small-hotel.md. Keep it in sync
    with the Replicator content (rendered via partials/sections/_*.antlers.html)
    so the fallback layout matches what visitors normally see. #}}

{{# Section 1: Hero — full-width parallax #}}
<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" 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 — Small hotel management system #}}
<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-1/2" data-aos="fade-right">
                <img src="/assets/articles/uploads/2021/09/website_traffic.png" alt="Small hotel automation software" class="w-full max-w-lg mx-auto float-bob">
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-6 title-underline">
                    {{ trans:messages.sha_intro_title }}
                </h2>
                <p class="text-[#696687] mb-4 leading-relaxed">{{ trans:messages.sha_intro_p1 }}</p>
                <p class="text-[#696687] leading-relaxed"><strong>{{ trans:messages.sha_intro_p2 }}</strong></p>
            </div>
        </div>
    </div>
</section>

{{# Section 3: Benefits — What does small hotel automation give? #}}
<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-1/2" data-aos="fade-right">
                <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-6 title-underline">
                    {{ trans:messages.sha_benefits_title }}
                </h2>
                <p class="text-[#696687] mb-4 leading-relaxed">{{ trans:messages.sha_benefits_p1 }}</p>
                <p class="text-[#696687] mb-4 leading-relaxed">{{ trans:messages.sha_benefits_p2 }}</p>
                <p class="text-[#696687] mb-8 leading-relaxed">{{ trans:messages.sha_benefits_p3 }}</p>
                {{# 3 benefit icons inline #}}
                <div class="flex items-center gap-6">
                    <div class="text-center" data-aos="fade-up" data-aos-delay="0">
                        <div class="w-20 h-20 rounded-full bg-white shadow-lg flex items-center justify-center mx-auto mb-3">
                            <img src="/assets/articles/uploads/2021/10/icon2.png" alt="{{ trans:messages.sha_card1_title }}" class="w-10 h-10 object-contain">
                        </div>
                        <h3 class="font-nunito text-sm font-bold text-[#252a3f]">{{ trans:messages.sha_card1_title }}</h3>
                    </div>
                    <div class="text-center" data-aos="fade-up" data-aos-delay="100">
                        <div class="w-20 h-20 rounded-full bg-white shadow-lg flex items-center justify-center mx-auto mb-3">
                            <img src="/assets/articles/uploads/2021/10/icon3.png" alt="{{ trans:messages.sha_card2_title }}" class="w-10 h-10 object-contain">
                        </div>
                        <h3 class="font-nunito text-sm font-bold text-[#252a3f]">{{ trans:messages.sha_card2_title }}</h3>
                    </div>
                    <div class="text-center" data-aos="fade-up" data-aos-delay="200">
                        <div class="w-20 h-20 rounded-full bg-white shadow-lg flex items-center justify-center mx-auto mb-3">
                            <img src="/assets/articles/uploads/2021/10/icon1.png" alt="{{ trans:messages.sha_card3_title }}" class="w-10 h-10 object-contain">
                        </div>
                        <h3 class="font-nunito text-sm font-bold text-[#252a3f]">{{ trans:messages.sha_card3_title }}</h3>
                    </div>
                </div>
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <img src="/assets/articles/uploads/2021/09/home1_img_1.png" alt="Small hotel automation benefits" class="w-full max-w-lg mx-auto float-bob">
            </div>
        </div>
    </div>
</section>

{{# Section 4: CTA Banner #}}
<section class="hero-fullscreen relative overflow-hidden" style="background-image: url('/assets/articles/uploads/2021/09/pic_paralax_2.jpg'); background-position: left top; background-repeat: no-repeat; background-color: #ffffff;">
    <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-3">{{ trans:messages.sha_cta_title }}</h2>
            <p class="text-[#ffc70a] text-lg font-semibold mb-4">{{ trans:messages.sha_cta_subtitle }}</p>
            <p class="text-white/80 text-base leading-relaxed mb-8 max-w-2xl mx-auto">{{ trans:messages.sha_cta_desc }}</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-white hover:bg-[#ffa04d] transition-colors shadow-lg">
                {{ trans:messages.sha_cta_button }}
            </a>
        </div>
    </div>
</section>

{{# Section 5: Problems — The usual problems of a small hotel #}}
<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-1/2" data-aos="fade-right">
                <img src="/assets/articles/uploads/2021/09/home2_img_03.jpg" alt="Small hotel problems" class="w-full max-w-lg mx-auto rounded-lg shadow-lg">
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-6 title-underline">
                    {{ trans:messages.sha_problems_title }}
                </h2>
                <ol class="ha-problem-list space-y-5">
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">1</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.sha_problem_1 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">2</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.sha_problem_2 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">3</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.sha_problem_3 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">4</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.sha_problem_4 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">5</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.sha_problem_5 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">6</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.sha_problem_6 }}</span>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</section>

{{# Section 6: Solutions — Small hotel automation solves all these problems #}}
<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 mb-10">
            <div class="md:w-1/2" data-aos="fade-right">
                <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-6 title-underline">
                    {{ trans:messages.sha_solutions_title }}
                </h2>
                <p class="text-[#696687] mb-4 leading-relaxed">{{ trans:messages.sha_solutions_p1 }}</p>
                <p class="text-[#696687] mb-6 leading-relaxed">{{ trans:messages.sha_solutions_p2 }}</p>
                {{# Icon + text #}}
                <div class="flex items-start gap-4 mb-6">
                    <img src="/assets/articles/uploads/2021/10/analytics.png" alt="{{ trans:messages.sha_solutions_icon_text }}" class="w-14 h-14 shrink-0 mt-1">
                    <p class="text-[#696687] leading-relaxed">{{ trans:messages.sha_solutions_icon_text }}</p>
                </div>

            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <img src="/assets/articles/uploads/2021/09/home2_img_06.png" alt="Small hotel automation solutions" class="w-full max-w-lg mx-auto float-bob">
            </div>
        </div>
    </div>
</section>

{{# Section 7: Product Cards — 8 cards in two rows, icon slides out on hover #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {{# Row 1: Front Desk #}}
            <div
               class="ha-product-card group relative bg-[#f7f8fa] rounded-lg shadow-[0_0_30px_3px_rgba(0,0,0,0.05)] min-h-[260px] overflow-hidden block px-6 pt-10 pb-8 flex flex-col transition-colors duration-400 hover:bg-[#3b3663]"
               data-aos="fade-up" data-aos-delay="0">
                <img src="/assets/articles/uploads/2021/09/icon-2.png" alt="{{ trans:messages.sha_prod_pms }}" class="w-[90px] transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                <div class="mt-auto transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                    <div class="w-[40px] h-[2px] bg-[#252a3f] mb-3"></div>
                    <h3 class="font-nunito text-lg font-bold text-[#252a3f]">{{ trans:messages.sha_prod_pms }}</h3>
                </div>
                <div class="absolute inset-0 px-6 pt-10 pb-8 translate-y-full opacity-0 transition-all duration-400 group-hover:translate-y-0 group-hover:opacity-100">
                    <h4 class="font-nunito text-lg font-bold text-white mb-2">{{ trans:messages.sha_prod_pms_hover_title }}</h4>
                    <p class="text-sm text-white/80 leading-relaxed">{{ trans:messages.sha_prod_pms_hover_desc }}</p>
                </div>
            </div>
            {{# Channel Manager #}}
            <div
               class="ha-product-card group relative bg-[#f7f8fa] rounded-lg shadow-[0_0_30px_3px_rgba(0,0,0,0.05)] min-h-[260px] overflow-hidden block px-6 pt-10 pb-8 flex flex-col transition-colors duration-400 hover:bg-[#3b3663]"
               data-aos="fade-up" data-aos-delay="100">
                <img src="/assets/articles/uploads/2021/09/icon-1.png" alt="{{ trans:messages.sha_prod_cm }}" class="w-[90px] transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                <div class="mt-auto transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                    <div class="w-[40px] h-[2px] bg-[#252a3f] mb-3"></div>
                    <h3 class="font-nunito text-lg font-bold text-[#252a3f]">{{ trans:messages.sha_prod_cm }}</h3>
                </div>
                <div class="absolute inset-0 px-6 pt-10 pb-8 translate-y-full opacity-0 transition-all duration-400 group-hover:translate-y-0 group-hover:opacity-100">
                    <h4 class="font-nunito text-lg font-bold text-white mb-2">{{ trans:messages.sha_prod_cm_hover_title }}</h4>
                    <p class="text-sm text-white/80 leading-relaxed">{{ trans:messages.sha_prod_cm_hover_desc }}</p>
                </div>
            </div>
            {{# Booking Engine #}}
            <div
               class="ha-product-card group relative bg-[#f7f8fa] rounded-lg shadow-[0_0_30px_3px_rgba(0,0,0,0.05)] min-h-[260px] overflow-hidden block px-6 pt-10 pb-8 flex flex-col transition-colors duration-400 hover:bg-[#3b3663]"
               data-aos="fade-up" data-aos-delay="200">
                <img src="/assets/articles/uploads/2021/09/icon-3.png" alt="{{ trans:messages.sha_prod_be }}" class="w-[90px] transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                <div class="mt-auto transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                    <div class="w-[40px] h-[2px] bg-[#252a3f] mb-3"></div>
                    <h3 class="font-nunito text-lg font-bold text-[#252a3f]">{{ trans:messages.sha_prod_be }}</h3>
                </div>
                <div class="absolute inset-0 px-6 pt-10 pb-8 translate-y-full opacity-0 transition-all duration-400 group-hover:translate-y-0 group-hover:opacity-100">
                    <h4 class="font-nunito text-lg font-bold text-white mb-2">{{ trans:messages.sha_prod_be_hover_title }}</h4>
                    <p class="text-sm text-white/80 leading-relaxed">{{ trans:messages.sha_prod_be_hover_desc }}</p>
                </div>
            </div>
            {{# Hotel Website #}}
            <div
               class="ha-product-card group relative bg-[#f7f8fa] rounded-lg shadow-[0_0_30px_3px_rgba(0,0,0,0.05)] min-h-[260px] overflow-hidden block px-6 pt-10 pb-8 flex flex-col transition-colors duration-400 hover:bg-[#3b3663]"
               data-aos="fade-up" data-aos-delay="300">
                <img src="/assets/articles/uploads/2021/09/icon-4.png" alt="{{ trans:messages.sha_prod_web }}" class="w-[90px] transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                <div class="mt-auto transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                    <div class="w-[40px] h-[2px] bg-[#252a3f] mb-3"></div>
                    <h3 class="font-nunito text-lg font-bold text-[#252a3f]">{{ trans:messages.sha_prod_web }}</h3>
                </div>
                <div class="absolute inset-0 px-6 pt-10 pb-8 translate-y-full opacity-0 transition-all duration-400 group-hover:translate-y-0 group-hover:opacity-100">
                    <h4 class="font-nunito text-lg font-bold text-white mb-2">{{ trans:messages.sha_prod_web_hover_title }}</h4>
                    <p class="text-sm text-white/80 leading-relaxed">{{ trans:messages.sha_prod_web_hover_desc }}</p>
                </div>
            </div>
            {{# Row 2: Google Analytics #}}
            <div
               class="ha-product-card group relative bg-[#f7f8fa] rounded-lg shadow-[0_0_30px_3px_rgba(0,0,0,0.05)] min-h-[260px] overflow-hidden block px-6 pt-10 pb-8 flex flex-col transition-colors duration-400 hover:bg-[#3b3663]"
               data-aos="fade-up" data-aos-delay="0">
                <img src="/assets/articles/uploads/2021/09/icon-5.png" alt="{{ trans:messages.sha_prod_ga }}" class="w-[90px] transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                <div class="mt-auto transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                    <div class="w-[40px] h-[2px] bg-[#252a3f] mb-3"></div>
                    <h3 class="font-nunito text-lg font-bold text-[#252a3f]">{{ trans:messages.sha_prod_ga }}</h3>
                </div>
                <div class="absolute inset-0 px-6 pt-10 pb-8 translate-y-full opacity-0 transition-all duration-400 group-hover:translate-y-0 group-hover:opacity-100">
                    <h4 class="font-nunito text-lg font-bold text-white mb-2">{{ trans:messages.sha_prod_ga_hover_title }}</h4>
                    <p class="text-sm text-white/80 leading-relaxed">{{ trans:messages.sha_prod_ga_hover_desc }}</p>
                </div>
            </div>
            {{# House Keeping #}}
            <div
               class="ha-product-card group relative bg-[#f7f8fa] rounded-lg shadow-[0_0_30px_3px_rgba(0,0,0,0.05)] min-h-[260px] overflow-hidden block px-6 pt-10 pb-8 flex flex-col transition-colors duration-400 hover:bg-[#3b3663]"
               data-aos="fade-up" data-aos-delay="100">
                <img src="/assets/articles/uploads/2021/09/icon-6.png" alt="{{ trans:messages.sha_prod_hk }}" class="w-[90px] transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                <div class="mt-auto transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                    <div class="w-[40px] h-[2px] bg-[#252a3f] mb-3"></div>
                    <h3 class="font-nunito text-lg font-bold text-[#252a3f]">{{ trans:messages.sha_prod_hk }}</h3>
                </div>
                <div class="absolute inset-0 px-6 pt-10 pb-8 translate-y-full opacity-0 transition-all duration-400 group-hover:translate-y-0 group-hover:opacity-100">
                    <h4 class="font-nunito text-lg font-bold text-white mb-2">{{ trans:messages.sha_prod_hk_hover_title }}</h4>
                    <p class="text-sm text-white/80 leading-relaxed">{{ trans:messages.sha_prod_hk_hover_desc }}</p>
                </div>
            </div>
            {{# Wi-Fi Manager #}}
            <div
               class="ha-product-card group relative bg-[#f7f8fa] rounded-lg shadow-[0_0_30px_3px_rgba(0,0,0,0.05)] min-h-[260px] overflow-hidden block px-6 pt-10 pb-8 flex flex-col transition-colors duration-400 hover:bg-[#3b3663]"
               data-aos="fade-up" data-aos-delay="200">
                <img src="/assets/articles/uploads/2021/09/icon-7.png" alt="{{ trans:messages.sha_prod_wifi }}" class="w-[90px] transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                <div class="mt-auto transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                    <div class="w-[40px] h-[2px] bg-[#252a3f] mb-3"></div>
                    <h3 class="font-nunito text-lg font-bold text-[#252a3f]">{{ trans:messages.sha_prod_wifi }}</h3>
                </div>
                <div class="absolute inset-0 px-6 pt-10 pb-8 translate-y-full opacity-0 transition-all duration-400 group-hover:translate-y-0 group-hover:opacity-100">
                    <h4 class="font-nunito text-lg font-bold text-white mb-2">{{ trans:messages.sha_prod_wifi_hover_title }}</h4>
                    <p class="text-sm text-white/80 leading-relaxed">{{ trans:messages.sha_prod_wifi_hover_desc }}</p>
                </div>
            </div>
            {{# Reputation #}}
            <div
               class="ha-product-card group relative bg-[#f7f8fa] rounded-lg shadow-[0_0_30px_3px_rgba(0,0,0,0.05)] min-h-[260px] overflow-hidden block px-6 pt-10 pb-8 flex flex-col transition-colors duration-400 hover:bg-[#3b3663]"
               data-aos="fade-up" data-aos-delay="300">
                <img src="/assets/articles/uploads/2021/09/icon-8.png" alt="{{ trans:messages.sha_prod_rep }}" class="w-[90px] transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                <div class="mt-auto transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                    <div class="w-[40px] h-[2px] bg-[#252a3f] mb-3"></div>
                    <h3 class="font-nunito text-lg font-bold text-[#252a3f]">{{ trans:messages.sha_prod_rep }}</h3>
                </div>
                <div class="absolute inset-0 px-6 pt-10 pb-8 translate-y-full opacity-0 transition-all duration-400 group-hover:translate-y-0 group-hover:opacity-100">
                    <h4 class="font-nunito text-lg font-bold text-white mb-2">{{ trans:messages.sha_prod_rep_hover_title }}</h4>
                    <p class="text-sm text-white/80 leading-relaxed">{{ trans:messages.sha_prod_rep_hover_desc }}</p>
                </div>
            </div>
        </div>
    </div>
</section>