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

{% block title %}Funzionalità — Mostry{% endblock %}

{% block main %}
    {# ─────────── INTESTAZIONE PAGINA ─────────── #}
    <section class="section section--hero">
        <div class="container">
            <div class="page-hero reveal">
                <span class="eyebrow">Funzionalità</span>
                <h1 class="hero__title">Tutto quello che il tuo assistente sa fare</h1>
                <p class="hero__lead">
                    Un unico assistente che lavora per te su ogni fronte del rapporto con i clienti:
                    risponde, filtra, raccoglie e non dorme mai.
                </p>
                <div class="cta-row">
                    <a href="{{ path('trial') }}" class="btn"><i class="fa-solid fa-comments"></i> Provalo gratis</a>
                    <a href="{{ path('prezzi') }}" class="btn btn--ghost">Vedi i prezzi</a>
                </div>
            </div>
        </div>
    </section>

    {# ─────────── COME FUNZIONA ─────────── #}
    <section class="section" id="come">
        <div class="container">
            {{ page.head('Come funziona', 'Il tuo assistente pronto in tre passi', 'Nessuna competenza tecnica, nessuna installazione. Sei online in meno di 10 minuti.') }}
            <ol class="steps">
                {% for s in step %}
                    <li class="card reveal">
                        <div class="step__num">{{ '%02d'|format(loop.index) }}</div>
                        <h3>{{ s.t }}</h3>
                        <p class="card__desc">{{ s.d }}</p>
                        <div class="tags">
                            {% for t in s.tags %}<span class="tag">{{ t }}</span>{% endfor %}
                        </div>
                    </li>
                {% endfor %}
            </ol>
        </div>
    </section>

    {# ─────────── FUNZIONALITÀ ─────────── #}
    <section class="section">
        <div class="container">
            {{ page.head('Cosa sa fare', 'Un assistente completo, non un semplice risponditore', null) }}
            <div class="grid grid--auto">
                {% for f in funzioni %}
                    <article class="card reveal">
                        <div class="ico {{ f.c }}"><i class="{{ f.i }}"></i></div>
                        <h3>{{ f.t }}</h3>
                        <p class="card__desc">{{ f.d }}</p>
                    </article>
                {% endfor %}
            </div>
        </div>
    </section>

    {# ─────────── DOCUMENTI → CONOSCENZA ─────────── #}
    <section class="section" id="documenti">
        <div class="container">
            {{ page.head('La conoscenza', 'Carichi i documenti, al resto pensa <span class="accent">Mostry</span>', 'Niente pannelli da compilare a mano. Carichi PDF, foto e file Word: l\'assistente li legge e impara.', true) }}

            <div class="doc-steps">
                {% for d in documenti %}
                    <article class="doc-step reveal">
                        <figure class="doc-step__art">
                            <img src="{{ asset('img/' ~ d.img) }}" alt="" loading="lazy">
                            <span class="doc-step__num">{{ d.n }}</span>
                        </figure>
                        <h3>{{ d.t }}</h3>
                        <p class="card__desc">{{ d.d }}</p>
                    </article>
                {% endfor %}
            </div>

            <p class="doc-note reveal">
                <i class="fa-solid fa-camera-retro"></i>
                Funziona anche con le <b>foto</b>: scatti la pagina di un manuale o un foglio di istruzioni e l'assistente lo legge.
            </p>
        </div>
    </section>

    {# ─────────── PER CHI È ─────────── #}
    <section class="section" id="casi">
        <div class="container">
            {{ page.head('Per chi è pensato', 'Fatto su misura per la tua attività', 'Mostry si adatta a te. Ecco cosa fa, in concreto, per il tuo mestiere.') }}
            <div class="grid grid--3">
                {% for c in casiUso %}
                    <article class="card reveal">
                        <div class="ico {{ c.c }}"><i class="{{ c.i }}"></i></div>
                        <h3>{{ c.t }}</h3>
                        <p class="card__desc">{{ c.d }}</p>
                        <div class="tags">
                            {% for t in c.tags %}<span class="tag">{{ t }}</span>{% endfor %}
                        </div>
                    </article>
                {% endfor %}
            </div>
        </div>
    </section>

    {# ─────────── CTA ─────────── #}
    <section class="section section--tight">
        <div class="container">
            <div class="cta-box reveal">
                <h2>Vuoi anche un assistente per i tuoi dipendenti?</h2>
                <p>Col piano Custom aggiungi un secondo assistente, interno all'azienda, che conosce le tue lavorazioni.</p>
                <div class="cta-row">
                    <a href="{{ path('assistente_interno') }}" class="btn btn--lg"><i class="fa-solid fa-building-lock"></i> Scopri l'assistente interno</a>
                </div>
            </div>
        </div>
    </section>
{% endblock %}