{% extends 'site.html.twig' %}
{% import '_macros.html.twig' as page %}

{% block title %}Prezzi — Mostry{% endblock %}

{% block main %}
    {# ─────────── INTESTAZIONE ─────────── #}
    <section class="section section--hero">
        <div class="container">
            <div class="page-hero reveal">
                <span class="eyebrow">Prezzi</span>
                <h1 class="hero__title">Un piano per ogni impresa</h1>
                <p class="hero__lead">
                    Registrarsi è gratis. Il canone si paga solo quando pubblichi il tuo assistente,
                    senza commissioni sulle conversazioni gestite.
                </p>
            </div>
        </div>
    </section>

    {# ─────────── PIANI ─────────── #}
    <section class="section">
        <div class="container">
            <div class="grid grid--3">
                {% for p in pricing %}
                    <article class="card price-card reveal {{ p.featured ? 'price-card--featured' : '' }}">
                        {% if p.featured %}<span class="tag price-card__badge">Più scelto</span>{% endif %}
                        <h3>{{ p.name }}</h3>
                        <p class="price-card__desc">{{ p.desc }}</p>
                        <div class="price-row">
                            <span class="price">{{ p.price }}</span>
                            <span class="price__note">{{ p.note }}</span>
                        </div>
                        <ul class="feature-list">
                            {% for f in p.features %}
                                <li><i class="fa-solid fa-check"></i> <span>{{ f }}</span></li>
                            {% endfor %}
                        </ul>
                        <a href="{{ path('register') }}" class="btn btn--block {{ p.featured ? '' : 'btn--ghost' }}">Inizia gratis</a>
                    </article>
                {% endfor %}
            </div>
            <p class="doc-note reveal">
                <i class="fa-solid fa-circle-info"></i>
                Tutti i piani includono il caricamento dei documenti. L'assistente interno per i dipendenti è nel piano
                <a href="{{ path('assistente_interno') }}">Custom</a>.
            </p>
        </div>
    </section>

    {# ─────────── FAQ ─────────── #}
    <section class="section" id="faq">
        <div class="container">
            {{ page.head('FAQ', 'Domande frequenti', null, true) }}
            <div class="faq-list" style="margin-inline:auto">
                {% for f in faq %}
                    <details class="card faq reveal">
                        <summary>
                            {{ f.q }}
                            <span class="faq__ico"><i class="fa-solid fa-chevron-right"></i></span>
                        </summary>
                        <p>{{ f.a }}</p>
                    </details>
                {% endfor %}
            </div>
        </div>
    </section>

    {# ─────────── CTA ─────────── #}
    <section class="section section--tight">
        <div class="container">
            <div class="cta-box reveal">
                <h2>Provalo prima di scegliere un piano.</h2>
                <p>Parla con l'assistente di Mostry: ti serve solo la tua email, nessuna carta di credito.</p>
                <div class="cta-row">
                    <a href="{{ path('trial') }}" class="btn btn--lg"><i class="fa-solid fa-comments"></i> Prova gratis</a>
                    <a href="{{ path('register') }}" class="btn btn--ghost btn--lg">Crea un account</a>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block page_js %}
    <script>
        // Una FAQ aperta alla volta
        (function () {
            var all = document.querySelectorAll('.faq');
            all.forEach(function (d) {
                d.addEventListener('toggle', function () {
                    if (!d.open) return;
                    all.forEach(function (o) { if (o !== d) o.open = false; });
                });
            });
        })();
    </script>
{% endblock %}