{{# Product Hover Cards Section — 8 cards in two rows, non-clickable, slide-up hover #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        {{ if card_items }}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {{# Row 1 — dynamic from card_items (PMS, Channel Manager, Booking Engine, Hotel Website) #}}
            {{ card_items }}
            <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="{{ index | multiply:100 }}">
                {{ if icon_image }}
                <img src="{{ icon_image:url }}" alt="{{ title }}" class="w-[90px] transition-all duration-400 group-hover:-translate-y-full group-hover:opacity-0">
                {{ /if }}
                <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]">{{ title }}</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">
                    {{ if hover_title }}
                    <h4 class="font-nunito text-lg font-bold text-white mb-2">{{ hover_title }}</h4>
                    {{ /if }}
                    {{ if hover_desc }}
                    <p class="text-sm text-white/80 leading-relaxed">{{ hover_desc }}</p>
                    {{ /if }}
                </div>
            </div>
            {{ /card_items }}

            {{# Row 2 — static cards mirroring home page (Analytics, Housekeeping, Wi-Fi, 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="0">
                <img src="/assets/articles/uploads/2021/09/icon-5.png" alt="{{ trans:messages.home_card_analytics }}" 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.home_card_analytics }}</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.home_card_analytics }}</h4>
                    <p class="text-sm text-white/80 leading-relaxed">{{ trans:messages.home_card_analytics_desc }}</p>
                </div>
            </div>
            <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.home_card_housekeeping }}" 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.home_card_housekeeping }}</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.home_card_housekeeping }}</h4>
                    <p class="text-sm text-white/80 leading-relaxed">{{ trans:messages.home_card_housekeeping_desc }}</p>
                </div>
            </div>
            <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.home_card_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.home_card_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.home_card_wifi }}</h4>
                    <p class="text-sm text-white/80 leading-relaxed">{{ trans:messages.home_card_wifi_desc }}</p>
                </div>
            </div>
            <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.home_card_reputation }}" 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.home_card_reputation }}</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.home_card_reputation }}</h4>
                    <p class="text-sm text-white/80 leading-relaxed">{{ trans:messages.home_card_reputation_desc }}</p>
                </div>
            </div>
        </div>
        {{ /if }}
    </div>
</section>