{% extends 'base.html.twig' %}

{% block title %}{{ 'help.contact.title'|trans }} · {{ 'help.meta.indexTitle'|trans }}{% endblock %}
{% block navigation %}{% endblock %}

{% block styles %}
    {% include 'help/_styles.html.twig' %}
{% endblock %}

{% block body %}
<div class="help-page">
    <div class="gradient-background container-fluid p-0 mb-4">
        <div class="home-container-new-content">
            {% include 'general/navigation.html.twig' %}
            <div class="pt-5 pb-3">
                <nav class="help-breadcrumb" aria-label="Breadcrumb">
                    <a href="{{ path('app_help_index') }}">{{ 'help.breadcrumb.home'|trans }}</a>
                    <span aria-hidden="true">/</span>
                    <span>{{ 'help.contact.title'|trans }}</span>
                </nav>
                <h1 class="dark-blue-title">{{ 'help.contact.title'|trans }}</h1>
                <p style="max-width:720px;color:#475569;">{{ 'help.contact.intro'|trans }}</p>
            </div>
        </div>
    </div>

    <div class="container pb-5">
        <div class="row">
            <div class="col-lg-7">
                {% include 'general/components/__contact_form.html.twig' %}
            </div>
            <div class="col-lg-5">
                <aside class="help-ai-teaser">
                    <h2 class="h5" style="color:var(--dark-blue-color);">{{ 'help.contact.before'|trans }}</h2>
                    <p style="color:#475569;">{{ 'help.contact.beforeText'|trans }}</p>
                    <a class="button button-blue" href="{{ path('app_help_index') }}">{{ 'help.breadcrumb.home'|trans }}</a>
                </aside>
            </div>
        </div>
    </div>
</div>
{% include 'help/_assistant.html.twig' %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('help') }}
{% endblock %}