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

{% block main %}
    {# ─────────── HERO / BANNER FULL-BLEED ─────────── #}
    <section class="banner" style="background-image:url('{{ asset('img/hero.jpg') }}')">
        <div class="banner__fade"></div>
        <div class="container banner__inner">
            <div class="banner__text">
                <span class="eyebrow reveal">Assistente AI conversazionale per la tua attività</span>
                <h1 class="hero__title reveal">
                    Rispondi ai tuoi clienti <span class="accent">giorno e notte</span>, come lo faresti tu.
                </h1>
                <p class="hero__lead reveal">
                    Mostry crea in pochi minuti un assistente virtuale su misura per la tua attività:
                    risponde su sito e WhatsApp, in italiano naturale, con il tuo tono di voce.
                    Senza scrivere una riga di codice.
                </p>

                <div class="cta-row reveal">
                    <a href="{{ path('trial') }}" class="btn btn--lg">
                        <i class="fa-solid fa-comments"></i> Prova gratis l'assistente
                    </a>
                    <a href="{{ path('register') }}" class="btn btn--ghost btn--lg">
                        Crea un account gratuito
                    </a>
                </div>
                <p class="hero__note reveal">
                    <i class="fa-solid fa-circle-check"></i>
                    Provare il bot richiede solo la tua email · L'iscrizione è gratuita
                </p>
            </div>
        </div>
    </section>

    {# Striscia con le pillole delle capacità #}
    <section class="chips-strip">
        <div class="container">
            <div class="chips chips--center reveal">
                {% for c in chips %}
                    <span class="chip"><i class="{{ c.i }}"></i> {{ c.t }}</span>
                {% endfor %}
            </div>
        </div>
    </section>

    {# ─────────── COS'È MOSTRY (in breve) ─────────── #}
    <section class="section">
        <div class="container">
            {{ page.head('In breve', 'Un assistente che conosce la tua attività', 'Gli dai le tue informazioni una volta, lui risponde per sempre — ai clienti e, se vuoi, anche ai tuoi dipendenti.', true) }}
            <div class="grid grid--3">
                <article class="card reveal">
                    <div class="ico"><i class="fa-solid fa-comments"></i></div>
                    <h3>Parla al posto tuo</h3>
                    <p class="card__desc">Risponde a domande, orari, prezzi e prenotazioni su sito e WhatsApp, 24 ore su 24.</p>
                </article>
                <article class="card reveal">
                    <div class="ico ico--violet"><i class="fa-solid fa-folder-open"></i></div>
                    <h3>Impara dai tuoi file</h3>
                    <p class="card__desc">Carichi PDF, foto e documenti: Mostry li legge e impara da solo, senza scrivere niente a mano.</p>
                </article>
                <article class="card reveal">
                    <div class="ico ico--mint"><i class="fa-solid fa-bolt"></i></div>
                    <h3>Pronto in 10 minuti</h3>
                    <p class="card__desc">Nessun codice, nessuna installazione. Configuri, personalizzi il tono e pubblichi.</p>
                </article>
            </div>
            <div class="center-cta reveal">
                <a href="{{ path('funzionalita') }}" class="btn btn--ghost">Scopri tutte le funzionalità <i class="fa-solid fa-arrow-right"></i></a>
            </div>
        </div>
    </section>

    {# ─────────── I DUE ASSISTENTI (teaser) ─────────── #}
    <section class="section">
        <div class="container">
            {{ page.head('Due assistenti', 'Uno per i <span class="accent">clienti</span>, uno per i <span class="accent">dipendenti</span>', 'Con Mostry non crei solo il bot per il sito. Puoi averne un secondo, riservato all\'azienda.', true) }}

            <div class="assistants">
                {% for key, a in assistenti %}
                    <article class="card assistant reveal {{ a.featured ? 'assistant--featured' : '' }}">
                        <figure class="assistant__art">
                            <img src="{{ asset('img/' ~ a.img) }}" alt="" loading="lazy">
                        </figure>
                        <div class="assistant__body">
                            <span class="eyebrow"><i class="{{ a.icon }}"></i> {{ a.eyebrow }}</span>
                            <h3>{{ a.t }}</h3>
                            <p class="card__desc">{{ a.d }}</p>
                            <div class="assistant__foot">
                                <span class="tag">{{ a.piano }}</span>
                                {% if key == 'interno' %}
                                    <a href="{{ path('assistente_interno') }}" class="link-more">Come funziona <i class="fa-solid fa-arrow-right"></i></a>
                                {% endif %}
                            </div>
                        </div>
                    </article>
                {% endfor %}
            </div>
        </div>
    </section>

    {# ─────────── PREZZI (sintesi) ─────────── #}
    <section class="section">
        <div class="container">
            {{ page.head('Prezzi', 'Un piano per ogni impresa', 'Registrarsi è gratis. Il canone si paga solo quando pubblichi il tuo assistente.', true) }}
            <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>
                        <a href="{{ path('register') }}" class="btn btn--block {{ p.featured ? '' : 'btn--ghost' }}">Inizia gratis</a>
                    </article>
                {% endfor %}
            </div>
            <div class="center-cta reveal">
                <a href="{{ path('prezzi') }}" class="btn btn--ghost">Confronta i piani in dettaglio <i class="fa-solid fa-arrow-right"></i></a>
            </div>
        </div>
    </section>

    {# ─────────── CTA FINALE ─────────── #}
    <section class="section">
        <div class="container">
            <div class="cta-box reveal">
                <h2>Parlaci prima di decidere.</h2>
                <p>
                    Fai due domande al nostro assistente e vedi con i tuoi occhi come risponderebbe ai tuoi clienti.
                    Ti serve solo la tua email.
                </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>
                <p class="hero__note">Nessuna carta di credito · L'iscrizione è gratuita · Disdici quando vuoi</p>
            </div>
        </div>
    </section>
{% endblock %}