{{# Contacts Page Template #}}

{{# Section 1: Hero (matches about/history/prices style) #}}
<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;">
    <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">{{ hero_title ?? title }}</h1>
            {{ if hero_subtitle }}
            <p class="text-lg text-white/80" data-aos="fade-up" data-aos-delay="150">{{ hero_subtitle }}</p>
            {{ /if }}
        </div>
    </div>
</section>

{{# Section 2: Careers & Partnership Info Cards #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-5xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            {{# Careers Card #}}
            <div class="card-hover rounded-2xl bg-white shadow-[0_0_40px_3px_rgba(0,0,0,0.06)] p-8" data-aos="fade-up" data-aos-delay="0">
                <div class="icon-hover w-14 h-14 rounded-xl bg-[#6254e7]/10 flex items-center justify-center mb-5">
                    <i class="fa-solid fa-user text-xl text-[#6254e7]"></i>
                </div>
                <h3 class="font-nunito text-xl font-bold text-[#252a3f] mb-3">{{ trans:messages.contacts_careers_title }}</h3>
                <p class="text-[#696687] leading-relaxed mb-4">{{ trans:messages.contacts_careers_text }}</p>
                <a href="mailto:hr@otelms.com" class="inline-flex items-center gap-2 text-[#6254e7] font-semibold hover:underline">
                    <i class="fa-solid fa-envelope text-sm"></i> hr@otelms.com
                </a>
            </div>
            {{# Partnership Card #}}
            <div class="card-hover rounded-2xl bg-white shadow-[0_0_40px_3px_rgba(0,0,0,0.06)] p-8" data-aos="fade-up" data-aos-delay="150">
                <div class="icon-hover w-14 h-14 rounded-xl bg-[#6254e7]/10 flex items-center justify-center mb-5">
                    <i class="fa-solid fa-handshake text-xl text-[#6254e7]"></i>
                </div>
                <h3 class="font-nunito text-xl font-bold text-[#252a3f] mb-3">{{ trans:messages.contacts_partnership_title }}</h3>
                <p class="text-[#696687] leading-relaxed mb-4">{{ trans:messages.contacts_partnership_text }}</p>
                <a href="mailto:partners@otelms.com" class="inline-flex items-center gap-2 text-[#6254e7] font-semibold hover:underline">
                    <i class="fa-solid fa-envelope text-sm"></i> partners@otelms.com
                </a>
            </div>
        </div>
    </div>
</section>

{{# Section 3: "You can rely on us!" Purple Banner #}}
<section class="py-16 full-bleed bg-[#3b3663]">
    <div class="max-w-5xl mx-auto text-center">
        <h2 class="font-nunito text-2xl md:text-3xl font-bold text-white mb-3" data-aos="fade-up">{{ trans:messages.contacts_rely_title }}</h2>
        <p class="text-white/70 max-w-2xl mx-auto mb-12 leading-relaxed" data-aos="fade-up" data-aos-delay="100">{{ trans:messages.contacts_rely_text }}</p>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-left">
            {{# Phone #}}
            <div class="text-white" data-aos="fade-up" data-aos-delay="0">
                <div class="w-14 h-14 rounded-xl bg-white/10 flex items-center justify-center mb-4">
                    <i class="fa-solid fa-phone text-xl text-[#ffc70a]"></i>
                </div>
                <h4 class="font-nunito font-bold text-lg mb-2">{{ trans:messages.contacts_phone }}</h4>
                <a href="tel:{{ geo_phone_raw }}" class="text-white/80 hover:text-[#ffc70a] transition-colors text-lg">{{ geo_phone }}</a>
                {{ if geo_whatsapp }}
                <div class="mt-3">
                    <a href="https://wa.me/{{ geo_whatsapp }}" class="inline-flex items-center gap-2 text-white/70 hover:text-[#25d366] transition-colors">
                        <i class="fa-brands fa-whatsapp text-lg"></i> WhatsApp
                    </a>
                </div>
                {{ /if }}
            </div>
            {{# Email #}}
            <div class="text-white" data-aos="fade-up" data-aos-delay="100">
                <div class="w-14 h-14 rounded-xl bg-white/10 flex items-center justify-center mb-4">
                    <i class="fa-solid fa-envelope text-xl text-[#ffc70a]"></i>
                </div>
                <h4 class="font-nunito font-bold text-lg mb-2">{{ trans:messages.contacts_email }}</h4>
                <a href="mailto:{{ geo_email }}" class="text-white/80 hover:text-[#ffc70a] transition-colors text-lg">{{ geo_email }}</a>
            </div>
            {{# Offices #}}
            <div class="text-white" data-aos="fade-up" data-aos-delay="200">
                <div class="w-14 h-14 rounded-xl bg-white/10 flex items-center justify-center mb-4">
                    <i class="fa-solid fa-location-dot text-xl text-[#ffc70a]"></i>
                </div>
                <h4 class="font-nunito font-bold text-lg mb-2">{{ trans:messages.contacts_our_offices }}</h4>
                {{ geo_addresses }}
                <div class="mb-2">
                    <span class="text-[#ffc70a] font-semibold text-sm">{{ label }}:</span>
                    <span class="text-white/80">{{ line }}</span>
                </div>
                {{ /geo_addresses }}
            </div>
        </div>
    </div>
</section>

{{# Section 4: Contact Form #}}
<section class="py-16 full-bleed bg-[#f9f8ff]">
    <div class="max-w-2xl mx-auto text-center">
        <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-2" data-aos="fade-up">{{ trans:messages.contacts_form_title }}</h2>
        <p class="text-[#696687] mb-10" data-aos="fade-up" data-aos-delay="100">{{ trans:messages.contacts_info_title }}</p>

        <div class="bg-white rounded-2xl shadow-[0_0_40px_3px_rgba(0,0,0,0.08)] p-8 md:p-10 text-left" data-aos="fade-up" data-aos-delay="200">
            {{ form:contact attr:data-recaptcha="true" attr:data-recaptcha-action="contact" }}
                <div class="space-y-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-[#565e81] mb-1 font-nunito">{{ trans:messages.your_name }}</label>
                        <input type="text" name="name" id="name" required
                               class="w-full px-4 py-3 border-0 border-b-2 border-gray-200 bg-transparent focus:border-[#6254e7] outline-none transition-all font-nunito">
                        {{ if errors:name }}<p class="text-red-500 text-sm mt-1">{{ errors:name }}</p>{{ /if }}
                    </div>
                    <div>
                        <label for="email" class="block text-sm font-medium text-[#565e81] mb-1 font-nunito">{{ trans:messages.your_email }}</label>
                        <input type="email" name="email" id="email" required
                               class="w-full px-4 py-3 border-0 border-b-2 border-gray-200 bg-transparent focus:border-[#6254e7] outline-none transition-all font-nunito">
                        {{ if errors:email }}<p class="text-red-500 text-sm mt-1">{{ errors:email }}</p>{{ /if }}
                    </div>
                    <div>
                        <label for="message" class="block text-sm font-medium text-[#565e81] mb-1 font-nunito">{{ trans:messages.your_message }}</label>
                        <textarea name="message" id="message" rows="4" required
                                  class="w-full px-4 py-3 border-0 border-b-2 border-gray-200 bg-transparent focus:border-[#6254e7] outline-none transition-all font-nunito resize-none"></textarea>
                        {{ if errors:message }}<p class="text-red-500 text-sm mt-1">{{ errors:message }}</p>{{ /if }}
                    </div>
                    <button type="submit"
                            class="btn-primary w-full px-6 py-3 rounded-lg">
                        {{ trans:messages.send }}
                    </button>
                </div>
                {{ if success }}
                <div class="mt-4 p-4 bg-green-50 text-green-700 rounded-lg text-center">
                    {{ trans:messages.contacts_success }}
                </div>
                {{ /if }}
                {{ if errors:captcha }}
                <div class="mt-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm text-center">
                    {{ errors:captcha }}
                </div>
                {{ /if }}
            {{ /form:contact }}
        </div>
    </div>
</section>