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

{% block title %}{{ '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 h-100 p-0 mb-100">
        <div class="home-container-new-content">
            {% include 'general/navigation.html.twig' %}

            <section class="help-hero text-center pt-5 pb-4">
                <p class="orange-subtitle">{{ 'help.eyebrow'|trans }}</p>
                <h1 class="dark-blue-title">{{ 'help.hero.title'|trans }}</h1>
                <p class="mx-auto" style="max-width: 640px; color: #334155;">{{ 'help.hero.intro'|trans }}</p>

                <div class="help-search-wrap">
                    <form class="help-search-form" action="{{ path('app_help_search') }}" method="get" role="search">
                        <label class="visually-hidden" for="help-search-q">{{ 'help.search.label'|trans }}</label>
                        <input
                            id="help-search-q"
                            class="help-search-input"
                            type="search"
                            name="q"
                            autocomplete="off"
                            placeholder="{{ 'help.search.placeholder'|trans }}"
                            data-suggest-url="{{ suggest_url }}"
                        >
                        <button type="submit" class="button button-blue">{{ 'help.search.submit'|trans }}</button>
                    </form>
                    <ul id="help-suggest" class="help-suggest" hidden role="listbox" aria-label="{{ 'help.search.suggestions'|trans }}"></ul>
                </div>

                <div class="help-popular-terms" aria-label="{{ 'help.search.popular'|trans }}">
                    {% for term in popular_terms %}
                        <a href="{{ path('app_help_search', {q: term}) }}">{{ term }}</a>
                    {% endfor %}
                </div>
            </section>
        </div>
    </div>

    <div class="container pb-5">
        <h2 class="dark-blue-title h3 mb-2">{{ 'help.categories.title'|trans }}</h2>
        <p class="mb-3" style="color:#667085;">{{ 'help.categories.intro'|trans }}</p>

        <div class="help-category-grid">
            {% for category in categories %}
                <a class="help-category-card" href="{{ path('app_help_category', {slug: category.localizedSlug(app.request.locale)}) }}">
                    <span class="help-category-card__icon" aria-hidden="true">
                        <i class="icofont {{ category.icon ?: 'icofont-info-circle' }}"></i>
                    </span>
                    <h3>{{ category.localizedTitle(app.request.locale) }}</h3>
                    <p>{{ category.localizedDescription(app.request.locale) }}</p>
                    <span class="help-category-card__count">
                        {{ 'help.categories.count'|trans({'%count%': article_counts[category.id] ?? 0}) }}
                    </span>
                </a>
            {% else %}
                <p>{{ 'help.empty.categories'|trans }}</p>
            {% endfor %}
        </div>

        <div class="row mt-5 g-4">
            <div class="col-md-6">
                <h2 class="h4" style="color: var(--dark-blue-color);">{{ 'help.popularArticles'|trans }}</h2>
                <ul class="help-article-list">
                    {% for article in popular_articles %}
                        <li><a href="{{ path('app_help_article', {slug: article.localizedSlug(app.request.locale)}) }}">{{ article.localizedTitle(app.request.locale) }}</a></li>
                    {% else %}
                        <li>{{ 'help.empty.articles'|trans }}</li>
                    {% endfor %}
                </ul>
            </div>
            <div class="col-md-6">
                <h2 class="h4" style="color: var(--dark-blue-color);">{{ 'help.recentArticles'|trans }}</h2>
                <ul class="help-article-list">
                    {% for article in recent_articles %}
                        <li><a href="{{ path('app_help_article', {slug: article.localizedSlug(app.request.locale)}) }}">{{ article.localizedTitle(app.request.locale) }}</a></li>
                    {% else %}
                        <li>{{ 'help.empty.articles'|trans }}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class="d-flex flex-wrap gap-3 mt-4">
            <a class="button button-blue" href="{{ path('app_help_contact') }}">{{ 'help.cta.support'|trans }}</a>
            <a class="button" href="{{ path('app_help_faq') }}">{{ 'help.cta.faq'|trans }}</a>
        </div>

        <aside class="help-ai-teaser" aria-label="{{ 'help.ai.teaserTitle'|trans }}">
            <h2 class="h5 mb-2" style="color: var(--dark-blue-color);">{{ 'help.ai.teaserTitle'|trans }}</h2>
            <p class="mb-0" style="color:#475569;">{{ 'help.ai.teaserText'|trans }}</p>
        </aside>
    </div>
</div>
{% include 'help/_assistant.html.twig' %}
{% endblock %}

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