{{# Website Development Product Page Template #}}

{{# 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 uppercase" data-aos="fade-down">{{ trans:messages.wd_hero_title }}</h1>
            <p class="text-lg text-white/80 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="150">{{ trans:messages.wd_hero_subtitle }}</p>
        </div>
    </div>
</section>

{{# Section 2: Website development intro — image left, text 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-1/2" data-aos="fade-right">
                <img src="/assets/articles/uploads/2021/10/otelms-ste-1.png" alt="Website development" 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.wd_intro_title }}
                </h2>
                <p class="text-[#696687] leading-relaxed">{{ trans:messages.wd_intro_p1 }}</p>
            </div>
        </div>
    </div>
</section>

{{# Section 3: Reservations/admin — 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-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.wd_admin_title }}
                </h2>
                <p class="text-[#696687] leading-relaxed">{{ trans:messages.wd_admin_p1 }}</p>
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <img src="/assets/articles/uploads/2021/10/otelms-ste2.png" alt="Website admin panel" class="w-full max-w-lg mx-auto float-bob">
            </div>
        </div>
    </div>
</section>

{{# Section 4: We offer — image left, bullet list 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-1/2" data-aos="fade-right">
                <img src="/assets/articles/uploads/2020/09/p-2.jpg" alt="We offer" 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.wd_offer_title }}
                </h2>
                <ul class="space-y-3">
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i>
                        <span class="text-[#696687] leading-relaxed">{{ trans:messages.wd_offer_item_1 }}</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i>
                        <span class="text-[#696687] leading-relaxed">{{ trans:messages.wd_offer_item_2 }}</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i>
                        <span class="text-[#696687] leading-relaxed">{{ trans:messages.wd_offer_item_3 }}</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i>
                        <span class="text-[#696687] leading-relaxed">{{ trans:messages.wd_offer_item_4 }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

{{# Section 5: Your new website will — bullet list 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-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.wd_newsite_title }}
                </h2>
                <ul class="space-y-3">
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i>
                        <span class="text-[#696687] leading-relaxed">{{ trans:messages.wd_newsite_item_1 }}</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i>
                        <span class="text-[#696687] leading-relaxed">{{ trans:messages.wd_newsite_item_2 }}</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i>
                        <span class="text-[#696687] leading-relaxed">{{ trans:messages.wd_newsite_item_3 }}</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i>
                        <span class="text-[#696687] leading-relaxed">{{ trans:messages.wd_newsite_item_4 }}</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i>
                        <span class="text-[#696687] leading-relaxed">{{ trans:messages.wd_newsite_item_5 }}</span>
                    </li>
                </ul>
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <img src="/assets/articles/uploads/2020/09/p-4.jpg" alt="Your new website" class="w-full max-w-lg mx-auto float-bob">
            </div>
        </div>
    </div>
</section>

{{# Section 6: Pricing Cards #}}
<section class="py-16 full-bleed bg-[#f7f8fa]">
    <div class="max-w-6xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8" data-aos="fade-up">
            {{# Tier 1: Template Site #}}
            <div class="bg-white rounded-2xl shadow-lg overflow-hidden flex flex-col">
                <div class="bg-[#3b3663] text-white text-center py-6 px-4">
                    <h3 class="font-nunito text-lg font-bold uppercase mb-2">{{ trans:messages.wd_tier1_name }}</h3>
                    <p class="text-3xl font-bold">{{ trans:messages.wd_tier1_price }}</p>
                </div>
                <div class="p-6 flex-1">
                    <ul class="space-y-3 text-sm text-[#696687]">
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier1_f1 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier1_f2 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier1_f3 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier1_f4 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier1_f5 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier1_f6 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier1_f7 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier1_f8 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier1_f9 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier1_f10 }}</li>
                    </ul>
                </div>
                <div class="p-6 pt-0 text-center">
                    <a href="{{ locale_path }}/sites-free/" class="inline-block w-full px-6 py-3 text-sm font-bold uppercase tracking-wider rounded bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors">{{ trans:messages.wd_tier_cta }}</a>
                </div>
            </div>

            {{# Tier 2: Website Development #}}
            <div class="bg-white rounded-2xl shadow-lg overflow-hidden flex flex-col">
                <div class="bg-[#3b3663] text-white text-center py-6 px-4">
                    <h3 class="font-nunito text-lg font-bold uppercase mb-2">{{ trans:messages.wd_tier2_name }}</h3>
                    <p class="text-3xl font-bold">{{ trans:messages.wd_tier2_price }}</p>
                </div>
                <div class="p-6 flex-1">
                    <ul class="space-y-3 text-sm text-[#696687]">
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier2_f1 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier2_f2 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier2_f3 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier2_f4 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier2_f5 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier2_f6 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier2_f7 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier2_f8 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier2_f9 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier2_f10 }}</li>
                    </ul>
                </div>
                <div class="p-6 pt-0 text-center">
                    <a href="https://fl-brief.otelms.com/paid-{current_locale}/" target="_blank" rel="noopener" class="inline-block w-full px-6 py-3 text-sm font-bold uppercase tracking-wider rounded bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors">{{ trans:messages.wd_tier_cta }}</a>
                </div>
            </div>

            {{# Tier 3: Premium Website Development #}}
            <div class="bg-white rounded-2xl shadow-lg overflow-hidden flex flex-col">
                <div class="bg-[#3b3663] text-white text-center py-6 px-4">
                    <h3 class="font-nunito text-lg font-bold uppercase mb-2">{{ trans:messages.wd_tier3_name }}</h3>
                    <p class="text-3xl font-bold">{{ trans:messages.wd_tier3_price }}</p>
                </div>
                <div class="p-6 flex-1">
                    <ul class="space-y-3 text-sm text-[#696687]">
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier3_f1 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier3_f2 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier3_f3 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier3_f4 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier3_f5 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier3_f6 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier3_f7 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier3_f8 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier3_f9 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier3_f10 }}</li>
                        <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#ffc70a] mt-0.5 shrink-0"></i>{{ trans:messages.wd_tier3_f11 }}</li>
                    </ul>
                </div>
                <div class="p-6 pt-0 text-center">
                    <a href="https://fl-brief.otelms.com/paid-{current_locale}/" target="_blank" rel="noopener" class="inline-block w-full px-6 py-3 text-sm font-bold uppercase tracking-wider rounded bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors">{{ trans:messages.wd_tier_cta }}</a>
                </div>
            </div>
        </div>
        <div class="mt-6 text-sm text-[#696687]" data-aos="fade-up">
            <p>{{ trans:messages.wd_footnote_1 }}</p>
            <p>{{ trans:messages.wd_footnote_2 }}</p>
        </div>
    </div>
</section>

{{# Section 7: Contact / Order Form #}}
<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">
                <p class="text-[#696687] leading-relaxed">{{ trans:messages.wd_contact_text }}</p>
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <div class="bg-[#f7f8fa] rounded-2xl p-8">
                    <h3 class="font-nunito text-xl font-bold text-[#252a3f] mb-6">{{ trans:messages.wd_form_title }}</h3>
                    <form action="{{ locale_path }}/registration" method="get" class="space-y-4">
                        <input type="text" name="name" placeholder="{{ trans:messages.wd_ph_name }}" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#ffc70a] focus:ring-1 focus:ring-[#ffc70a] outline-none transition-colors">
                        <input type="email" name="email" placeholder="{{ trans:messages.wd_ph_email }}" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#ffc70a] focus:ring-1 focus:ring-[#ffc70a] outline-none transition-colors">
                        <input type="tel" name="phone" placeholder="{{ trans:messages.wd_ph_phone }}" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#ffc70a] focus:ring-1 focus:ring-[#ffc70a] outline-none transition-colors">
                        <input type="text" name="hotel_name" placeholder="{{ trans:messages.wd_ph_hotel }}" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#ffc70a] focus:ring-1 focus:ring-[#ffc70a] outline-none transition-colors">
                        <input type="text" name="otelms_id" placeholder="{{ trans:messages.wd_ph_otelms_id }}" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#ffc70a] focus:ring-1 focus:ring-[#ffc70a] outline-none transition-colors">
                        <select name="service" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#ffc70a] focus:ring-1 focus:ring-[#ffc70a] outline-none transition-colors text-[#696687]">
                            <option value="" disabled selected>{{ trans:messages.wd_ph_service }}</option>
                            <option value="template">{{ trans:messages.wd_service_template }}</option>
                            <option value="development">{{ trans:messages.wd_service_development }}</option>
                            <option value="premium">{{ trans:messages.wd_service_premium }}</option>
                        </select>
                        <button type="submit" class="w-full px-6 py-3 text-sm font-bold uppercase tracking-wider rounded bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors">{{ trans:messages.send }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

{{# Section 8: CTA Banner — full-bleed parallax matching 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.wd_cta_title }}</h2>
            <p class="text-white/80 mb-8 leading-relaxed">{{ trans:messages.wd_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.wd_cta_button }}
            </a>
        </div>
    </div>
</section>