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

{% block title %}{{ 'about.title'|trans }}{% endblock %}

{% block body %}
    <section class="article-hero">
        <div class="container">
            <h1>{{ 'about.heading'|trans|raw }}</h1>
            <div class="title-bar"></div>
        </div>
    </section>

    <section class="section">
        <div class="container">
            <div class="about-grid">
                <div>
                    <h2 class="section-title">{{ 'about.mission_title'|trans|raw }}</h2>
                    <p style="color: var(--grey); margin-bottom: 18px;">
                        {{ 'about.mission_p1'|trans }}
                    </p>
                    <p style="color: var(--grey);">
                        {{ 'about.mission_p2'|trans }}
                    </p>
                </div>
                <div class="declaration-box" style="text-align: center;">
                    <h3 style="font-size: 3rem; color: var(--red-light);">{{ publishedCount }}</h3>
                    <p style="text-transform: uppercase; letter-spacing: 2px; font-weight: 700;">{{ 'about.stat_label'|trans }}</p>
                    <br>
                    <a href="{{ path('app_stories') }}" class="btn btn-primary">{{ 'about.discover_btn'|trans }}</a>
                </div>
            </div>

            <div class="about-values">
                <div class="value-box">
                    <h4>{{ 'about.value1_title'|trans }}</h4>
                    <p>{{ 'about.value1_text'|trans }}</p>
                </div>
                <div class="value-box">
                    <h4>{{ 'about.value2_title'|trans }}</h4>
                    <p>{{ 'about.value2_text'|trans }}</p>
                </div>
                <div class="value-box">
                    <h4>{{ 'about.value3_title'|trans }}</h4>
                    <p>{{ 'about.value3_text'|trans }}</p>
                </div>
                <div class="value-box">
                    <h4>{{ 'about.value4_title'|trans }}</h4>
                    <p>{{ 'about.value4_text'|trans }}</p>
                </div>
            </div>
        </div>
    </section>

    <section class="stats-band">
        <div class="container stats-inner">
            <div class="stat"><h3>{{ publishedCount }}</h3><p>{{ 'about.stat_published'|trans }}</p></div>
            <div class="stat"><h3>24h/24</h3><p>{{ 'about.stat_open'|trans }}</p></div>
            <div class="stat"><h3>100%</h3><p>{{ 'about.stat_confidential'|trans }}</p></div>
        </div>
    </section>

    <section class="section">
        <div class="container">
            <h2 class="section-title">{{ 'about.contact_title'|trans|raw }}</h2>
            <div class="title-bar"></div>
            <div class="declaration-box contact-box">
                <img src="{{ asset('uploads/logo/aswat-nissa-logo.png') }}" alt="{{ 'site.association_name'|trans }}" class="contact-logo">
                <div class="contact-details">
                    <p>📍 {{ 'footer.address'|trans }}</p>
                    <p><a href="tel:{{ 'footer.phone'|trans|replace({' ': ''}) }}">📞 {{ 'footer.phone'|trans }}</a></p>
                    <p><a href="mailto:{{ 'footer.email'|trans }}">✉️ {{ 'footer.email'|trans }}</a></p>
                </div>
            </div>
        </div>
    </section>
{% endblock %}