{% extends "base.html" %}
{% set _cms_title = get_page_content(page_id, 'title', g.lang_code) %}
{% set _cms_desc = get_page_content(page_id, 'description', g.lang_code) %}
{% set _cms_heading = get_page_content(page_id, 'page_heading', g.lang_code) %}
{% set _cms_page_desc = get_page_content(page_id, 'page_description', g.lang_code) %}
{% set _cms_head_html = get_page_content(page_id, 'head_html', g.lang_code) %}
{% set _cms_og_image = get_page_content(page_id, 'og_image', g.lang_code) %}
{% block title %}{% if _cms_title %}{{ _cms_title }}{% else %}{% trans %}Contact Us | OnlineConvert.cc{% endtrans %}{% endif %}{% endblock %}
{% block description %}{% if _cms_desc %}{{ _cms_desc }}{% else %}{% trans %}Contact us for help, feedback or questions.{% endtrans %}{% endif %}{% endblock %}
{% block og_image_tag %}{% if _cms_og_image %}<meta property="og:image" content="{{ _cms_og_image }}">{% endif %}{% endblock %}
{% block extra_head %}{% if _cms_head_html %}{{ _cms_head_html|safe }}{% endif %}{% endblock %}

{% block content %}
{% set _ht_contact = site.get('hero_bg_type', 'gradient') if site is defined else 'gradient' %}
{% set _hero_img = site.get('hero_bg_image', '') if site is defined else '' %}
{% set _hero_lcl = (site.get('hero_img_left_color_light', '#1e3a5f') if site is defined) or '#1e3a5f' %}
{% set _hero_lcd = (site.get('hero_img_left_color_dark', '#0f172a') if site is defined) or '#0f172a' %}
<section class="hero-gradient relative overflow-hidden">
        {% if _ht_contact == 'image' %}
    <style>
    .hero-gradient { background: {{ _hero_lcl }} !important; background-image: none !important; }
    .dark .hero-gradient { background: {{ _hero_lcd }} !important; background-image: none !important; }
    </style>
    {% endif %}
    {% if _ht_contact == 'gradient' %}
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.05%22%3E%3Cpath%20d%3D%22M36%2034v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6%2034v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6%204V0H4v4H0v2h4v4h2V6h4V4H6z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E')] opacity-50"></div>
    {% elif _ht_contact == 'image' and _hero_img %}
    <div class="hero-bg-img"><img src="{{ _hero_img }}" alt="" class="w-full h-full object-contain"></div>
    {% endif %}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative z-10">
        <div class="max-w-3xl animate-slide-up">
            <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4">{{ _cms_heading if _cms_heading else _('Contact Team') }}</h1>
            {% if _cms_page_desc %}<p class="text-lg text-white/90 max-w-2xl leading-relaxed">{{ _cms_page_desc }}</p>{% else %}
            <p class="text-lg text-white/90 max-w-2xl leading-relaxed">{% trans %}Unlimited All in One File Converter with Audio, Video, Images, Documents, PDFs, Ebooks, Softwares, Compressions and Much More.{% endtrans %}</p>
            {% endif %}
        </div>
    </div>
</section>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="flex flex-col md:flex-row gap-8">
        <aside class="w-full md:w-64 flex-shrink-0">
            <nav class="sticky top-24 space-y-1">
                <a href="{{ full_url('/privacy') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all">{% trans %}Privacy Policy{% endtrans %}</a>
                <a href="{{ full_url('/terms') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all">{% trans %}Terms of Use{% endtrans %}</a>
                <a href="{{ full_url('/disclaimer') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all">{% trans %}Disclaimer{% endtrans %}</a>
                <a href="{{ full_url('/imprint') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all">{% trans %}Imprint{% endtrans %}</a>
                <a href="{{ full_url('/contact') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium bg-primary/10 text-primary dark:bg-primary-light/10 dark:text-primary-light">{% trans %}Contact{% endtrans %}</a>
            </nav>
        </aside>

        <div class="flex-1 min-w-0">
            <div class="text-center mb-8">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">{% trans %}How Can We Help?{% endtrans %}</h2>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div>
                    {% if success_message %}
                    <div class="flex items-center gap-3 p-4 rounded-xl bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 mb-6">
                        <i class="fa fa-check-circle"></i> {% trans %}Message successfully sent!{% endtrans %}
                    </div>
                    {% endif %}

                    <form method="post" action="{{ full_url('/contact') }}" class="space-y-4">
                        <div>
                            <label for="contact-type" class="sr-only">{% trans %}Contact type{% endtrans %}</label>
                            <select name="contact_type" id="contact-type" class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary dark:focus:border-primary-light outline-none transition-all text-sm" data-testid="select-contact-type">
                                <option value="question">{% trans %}Ask a question{% endtrans %}</option>
                                <option value="issue">{% trans %}Report an issue{% endtrans %}</option>
                                <option value="feature">{% trans %}Suggest a feature{% endtrans %}</option>
                                <option value="sales">{% trans %}Contact sales{% endtrans %}</option>
                                <option value="accounting">{% trans %}Contact accounting{% endtrans %}</option>
                            </select>
                        </div>
                        <div>
                            <input type="text" id="name" name="name" placeholder="{% trans %}Your Name Here{% endtrans %}" required
                                class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary/50 focus:border-primary dark:focus:border-primary-light outline-none transition-all text-sm">
                        </div>
                        <div>
                            <input type="email" id="email" name="email" placeholder="{% trans %}Email Address{% endtrans %}" required
                                class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary/50 focus:border-primary dark:focus:border-primary-light outline-none transition-all text-sm">
                        </div>
                        <div>
                            <textarea id="message" name="message" placeholder="{% trans %}Type Your Message Here{% endtrans %}" rows="8" required
                                class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary/50 focus:border-primary dark:focus:border-primary-light outline-none transition-all text-sm resize-none"></textarea>
                        </div>
                        <div>
                            <div class="g-recaptcha" data-sitekey="{{ sitekey }}"></div>
                        </div>
                        <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
                        {{ recaptcha }}
                        {% if captcha %}
                        <div class="flex items-center gap-3 p-4 rounded-xl bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-yellow-700 dark:text-yellow-300">
                            <i class="fa fa-triangle-exclamation"></i> {% trans %}Captcha Issue!{% endtrans %}
                        </div>
                        {% endif %}
                        <div>
                            <button type="submit" class="inline-flex items-center gap-2 px-8 py-3 rounded-xl bg-accent hover:bg-accent-dark text-white font-semibold shadow-lg shadow-accent/30 hover:shadow-xl hover:shadow-accent/40 transition-all duration-300">
                                <i class="fa fa-paper-plane"></i> {% trans %}Send{% endtrans %}
                            </button>
                        </div>
                    </form>

                    {% with messages = get_flashed_messages() %}{% for msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:"info",msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}
                </div>

                <div class="rounded-xl overflow-hidden shadow-lg">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1690.9624056087287!2d-74.00298078634508!3d40.748015633589596!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259c7840fb4e5%3A0x583f615c850a3c91!2sThe%20High%20Line!5e0!3m2!1sen!2sus!4v1707603689278!5m2!1sen!2sus" width="100%" height="450" class="border-0" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block contact_us %}
<div class="bg-gray-50 dark:bg-gray-900/50 transition-theme">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="flex items-center gap-4 p-6 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 transition-theme">
                <div class="w-12 h-12 rounded-xl bg-primary/10 dark:bg-primary-light/10 flex items-center justify-center flex-shrink-0">
                    <i class="fa fa-location-dot text-primary dark:text-primary-light text-lg"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white text-sm">{% trans %}Address{% endtrans %}</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">The High Line<br>New York, NY 10011<br>USA</p>
                </div>
            </div>
            <div class="flex items-center gap-4 p-6 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 transition-theme">
                <div class="w-12 h-12 rounded-xl bg-secondary/10 dark:bg-secondary-light/10 flex items-center justify-center flex-shrink-0">
                    <i class="fa fa-phone text-secondary dark:text-secondary-light text-lg"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white text-sm">{% trans %}Phone{% endtrans %}</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">&nbsp;</p>
                </div>
            </div>
            <div class="flex items-center gap-4 p-6 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 transition-theme">
                <div class="w-12 h-12 rounded-xl bg-accent/10 dark:bg-accent-light/10 flex items-center justify-center flex-shrink-0">
                    <i class="fa fa-envelope text-accent dark:text-accent-light text-lg"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white text-sm">{% trans %}Email{% endtrans %}</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">info@onlineconvert.cc</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block google_captcha %}<script src='https://www.google.com/recaptcha/api.js'></script>{% endblock %}