{{# Product Page Template #}}

{{# Hero with parallax bg + side illustration #}}
<section class="relative hero-section overflow-hidden" 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-32 md:pt-36 pb-16 md:pb-20">
        <div class="max-w-5xl mx-auto flex flex-col md:flex-row items-center gap-10">
            <div class="flex-1 text-white">
                <h1 class="font-nunito text-3xl md:text-4xl font-bold mb-4" data-aos="fade-right">{{ hero_title ?? title }}</h1>
                {{ if hero_subtitle }}
                <p class="text-lg text-white/80 mb-6" data-aos="fade-right" data-aos-delay="150">{{ hero_subtitle }}</p>
                {{ /if }}
                <a href="{{ if hero_cta_url }}{{ hero_cta_url }}{{ else }}{{ locale_path }}/registration{{ /if }}"
                   class="btn-glow inline-block px-8 py-3 font-bold rounded bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors shadow-lg"
                   data-aos="fade-right" data-aos-delay="300">
                    {{ hero_cta_text ?? trans:messages.nav_free_trial }}
                </a>
            </div>
            {{ if hero_image }}
            <div class="flex-1 hidden md:block" data-aos="fade-left" data-aos-delay="200">
                <img src="{{ hero_image:url }}" alt="{{ hero_title ?? title }}" class="float-bob rounded-lg shadow-2xl max-w-full">
            </div>
            {{ else }}
            <div class="flex-1 hidden md:block" data-aos="fade-left" data-aos-delay="200">
                <img src="/assets/articles/uploads/2021/10/home_img-03.png" alt="OtelMS product illustration" class="float-bob max-w-sm mx-auto drop-shadow-2xl">
            </div>
            {{ /if }}
        </div>
    </div>
</section>

{{# Features #}}
{{ if features }}
<section class="py-14">
    <div class="max-w-6xl mx-auto">
        <h2 class="title-underline font-nunito text-2xl font-bold text-center text-[#252a3f] mb-12" data-aos="fade-up">{{ trans:messages.product_features_title }}</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            {{ features }}
            <div class="card-hover flex gap-4 p-6 bg-white rounded-xl border border-gray-100 shadow-[0_0_30px_2px_rgba(0,0,0,0.04)]"
                 data-aos="fade-up" data-aos-delay="{{ index | multiply:80 }}">
                {{ if icon }}
                <div class="icon-hover w-12 h-12 rounded-xl bg-[#6254e7]/10 flex items-center justify-center shrink-0">
                    <i class="{{ icon }} text-lg text-[#6254e7]"></i>
                </div>
                {{ /if }}
                <div>
                    <h3 class="font-nunito font-bold text-[#252a3f] mb-1">{{ feature_title }}</h3>
                    <p class="text-sm text-[#696687]">{{ feature_description }}</p>
                </div>
            </div>
            {{ /features }}
        </div>
    </div>
</section>
{{ /if }}

{{# Main Content #}}
{{ if content }}
<section class="py-8">
    <div class="max-w-4xl mx-auto prose prose-lg" data-aos="fade-up">
        {{ content }}
    </div>
</section>
{{ /if }}

{{# CTA with parallax #}}
<section class="relative hero-section overflow-hidden" 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="relative z-10 px-6 lg:px-[90px] py-16">
        <div class="max-w-3xl mx-auto text-center text-white" data-aos="zoom-in">
            <h2 class="font-nunito text-2xl font-bold mb-4">{{ trans:messages.product_cta_title }}</h2>
            <p class="text-white/80 mb-6">{{ trans:messages.product_cta_subtitle }}</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ locale_path }}/registration"
                   class="btn-glow inline-block px-8 py-3 font-bold rounded bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors shadow-lg">
                    {{ trans:messages.nav_free_trial }}
                </a>
                <a href="{{ locale_path }}/prices"
                   class="inline-block px-8 py-3 font-semibold rounded border-2 border-white/30 text-white hover:bg-white/10 transition-colors">
                    {{ trans:messages.nav_prices }}
                </a>
            </div>
        </div>
    </div>
</section>