{{# History Page Template #}}

{{# Hero with parallax — full viewport width #}}
<section class="hero-fullscreen relative overflow-hidden -mt-6"
         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="relative z-10 px-6 lg:px-[90px] pt-32 md:pt-36 pb-16">
        <div class="max-w-4xl mx-auto text-center text-white">
            <h1 class="font-nunito text-3xl md:text-4xl font-bold mb-4" data-aos="fade-down">{{ trans:messages.history_hero_title }}</h1>
            <p class="text-lg text-white/80" data-aos="fade-up" data-aos-delay="150">{{ trans:messages.history_hero_subtitle }}</p>
        </div>
    </div>
</section>

{{# Intro paragraph #}}
<section class="py-14 full-bleed bg-white">
    <div class="max-w-4xl mx-auto px-6 lg:px-0">
        <p class="text-lg text-[#696687] leading-relaxed" data-aos="fade-up">
            {{ trans:messages.history_intro }}
        </p>
    </div>
</section>

{{# Timeline #}}
<section class="py-16 full-bleed bg-[#f7f9fb]">
    <div class="max-w-6xl mx-auto px-6 lg:px-[90px]">
        <div class="timeline">

            {{# 2013 — Founding #}}
            <div class="timeline-entry">
                <div class="timeline-dot">2013</div>
                <div class="timeline-card" data-aos="fade-left">
                    <img src="/assets/articles/uploads/2021/10/history1.png" alt="OtelMS founding 2013"
                         class="timeline-image">
                    <h2 class="font-nunito text-2xl font-bold text-[#252a3f] mb-4">{{ trans:messages.history_2013_title }}</h2>
                    <p class="text-[#696687] leading-relaxed">{{ trans:messages.history_2013_text }}</p>
                </div>
            </div>

            {{# 2016 — Booking.com Partner #}}
            <div class="timeline-entry">
                <div class="timeline-dot">2016</div>
                <div class="timeline-card" data-aos="fade-right">
                    <img src="/assets/articles/uploads/2021/10/history2.png" alt="Booking.com preferred partner 2016"
                         class="timeline-image">
                    <h2 class="font-nunito text-2xl font-bold text-[#252a3f] mb-4">{{ trans:messages.history_2016_title }}</h2>
                    <p class="text-[#696687] leading-relaxed">{{ trans:messages.history_2016_text }}</p>
                </div>
            </div>

            {{# 2017 — Website Service + v2.0 #}}
            <div class="timeline-entry">
                <div class="timeline-dot">2017</div>
                <div class="timeline-card" data-aos="fade-left">
                    <img src="/assets/articles/uploads/2021/10/history3.png" alt="OtelMS v2.0 launch 2017"
                         class="timeline-image">
                    <h2 class="font-nunito text-2xl font-bold text-[#252a3f] mb-4">{{ trans:messages.history_2017_title }}</h2>
                    <p class="text-[#696687] leading-relaxed">{{ trans:messages.history_2017_text }}</p>
                </div>
            </div>

            {{# Present — Global Reach #}}
            <div class="timeline-entry">
                <div class="timeline-dot timeline-dot-now"><i class="fa-solid fa-globe text-sm"></i></div>
                <div class="timeline-card" data-aos="fade-right">
                    <img src="/assets/articles/uploads/2021/10/history4.png" alt="OtelMS global reach"
                         class="timeline-image">
                    <h2 class="font-nunito text-2xl font-bold text-[#252a3f] mb-4">{{ trans:messages.history_now_title }}</h2>
                    <p class="text-[#696687] leading-relaxed">{{ trans:messages.history_now_text }}</p>
                </div>
            </div>

        </div>
    </div>
</section>