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

{% block title %}Assistente interno per i dipendenti — Mostry{% endblock %}
{% block description %}Con il piano Custom, un assistente riservato all'azienda che conosce le tue procedure e lavorazioni: i dipendenti chiedono senza disturbare il responsabile.{% endblock %}

{% block main %}
    {# ─────────── INTESTAZIONE ─────────── #}
    <section class="section section--hero">
        <div class="container">
            <div class="hero hero--split">
                <div class="hero__intro reveal">
                    <span class="eyebrow"><i class="fa-solid fa-building-lock"></i> Assistente interno · piano Custom</span>
                    <h1 class="hero__title">L'esperto aziendale che risponde ai tuoi dipendenti</h1>
                    <p class="hero__lead">
                        Un secondo assistente, riservato all'azienda. Gli dai i documenti e le istruzioni interne
                        e lui li conosce: così anche un neoassunto può chiedere <b>come si fa una lavorazione</b>
                        senza dover disturbare il capo ogni volta.
                    </p>
                    <div class="cta-row">
                        <a href="{{ path('register') }}" class="btn btn--lg"><i class="fa-solid fa-arrow-right-to-bracket"></i> Inizia gratis</a>
                        <a href="mailto:mostry@mizunokame24.ovh" class="btn btn--ghost btn--lg">Parla con noi</a>
                    </div>
                </div>
                <figure class="hero__banner-img reveal">
                    <img src="{{ asset('img/team.jpg') }}" alt="Il mostriciattolo mostra un documento al team" loading="eager">
                </figure>
            </div>
        </div>
    </section>

    {# ─────────── IL PROBLEMA / LA SOLUZIONE ─────────── #}
    <section class="section">
        <div class="container">
            {{ page.head('Il problema', 'Le stesse domande, ogni giorno, al responsabile', 'Ogni azienda ha un sapere che vive nella testa di poche persone. Quando non ci sono, il lavoro si ferma.', true) }}
            <div class="grid grid--3">
                <article class="card reveal">
                    <div class="ico ico--pink"><i class="fa-solid fa-user-clock"></i></div>
                    <h3>I nuovi assunti sono persi</h3>
                    <p class="card__desc">Nei primi giorni chiedono di continuo dove trovare le cose e come si svolgono le lavorazioni.</p>
                </article>
                <article class="card reveal">
                    <div class="ico ico--violet"><i class="fa-solid fa-phone-volume"></i></div>
                    <h3>Il capo è interrotto</h3>
                    <p class="card__desc">Responsabili e colleghi esperti perdono tempo a rispondere sempre alle stesse domande.</p>
                </article>
                <article class="card reveal">
                    <div class="ico"><i class="fa-solid fa-box-archive"></i></div>
                    <h3>Le informazioni sono sparse</h3>
                    <p class="card__desc">Procedure e manuali sono in cartelle, email e fogli: nessuno li trova quando servono.</p>
                </article>
            </div>
        </div>
    </section>

    {# ─────────── COME AIUTA ─────────── #}
    <section class="section">
        <div class="container">
            <div class="split">
                <figure class="split__art reveal">
                    <img src="{{ asset('img/onboarding.jpg') }}" alt="Il mostriciattolo entra al lavoro con zaino e libro" loading="lazy">
                </figure>
                <div class="reveal">
                    <span class="eyebrow">La soluzione</span>
                    <h2 class="head__title">Un collega sempre disponibile, che conosce l'azienda</h2>
                    <p class="head__sub">Carichi una volta procedure, manuali e istruzioni. Da quel momento l'assistente risponde ai dipendenti, in italiano, citando da quale documento arriva l'informazione.</p>
                    <ul class="checks" style="margin-top:20px">
                        <li><i class="fa-solid fa-circle-check"></i> <span>Legge procedure, manuali e regole interne</span></li>
                        <li><i class="fa-solid fa-circle-check"></i> <span>I nuovi assunti trovano subito le risposte, da soli</span></li>
                        <li><i class="fa-solid fa-circle-check"></i> <span>Meno interruzioni per te e per i responsabili</span></li>
                        <li><i class="fa-solid fa-circle-check"></i> <span>Risponde solo dai tuoi documenti, non inventa</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    {# ─────────── COME SI CREA ─────────── #}
    <section class="section">
        <div class="container">
            {{ page.head('Come si crea', 'Pronto in tre passi', null, true) }}
            <ol class="steps">
                <li class="card reveal">
                    <div class="step__num">01</div>
                    <h3>Attivi l'assistente interno</h3>
                    <p class="card__desc">Col piano Custom crei un secondo bot e scegli "risponde ai dipendenti".</p>
                </li>
                <li class="card reveal">
                    <div class="step__num">02</div>
                    <h3>Carichi i documenti aziendali</h3>
                    <p class="card__desc">Procedure, manuali, foto di istruzioni. Mostry li trasforma da solo in conoscenza.</p>
                </li>
                <li class="card reveal">
                    <div class="step__num">03</div>
                    <h3>Condividi il link protetto</h3>
                    <p class="card__desc">Dai ai dipendenti un link con codice d'accesso. Il pubblico non può entrare.</p>
                </li>
            </ol>
        </div>
    </section>

    {# ─────────── SICUREZZA ─────────── #}
    <section class="section">
        <div class="container">
            <div class="split">
                <div class="reveal">
                    <span class="eyebrow">Sicurezza</span>
                    <h2 class="head__title">I dati della tua azienda restano tuoi.</h2>
                    <p class="head__sub">
                        L'assistente interno è separato da quello pubblico e protetto da un codice d'accesso.
                        I contenuti che carichi servono solo a lui: non addestrano modelli esterni e non
                        finiscono in nessun archivio condiviso.
                    </p>
                </div>
                <ul class="checks reveal">
                    {% for s in sicurezza %}
                        <li><i class="fa-solid fa-shield-halved"></i> <span>{{ s }}</span></li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </section>

    {# ─────────── CTA ─────────── #}
    <section class="section section--tight">
        <div class="container">
            <div class="cta-box reveal">
                <h2>Dai ai tuoi dipendenti un aiuto sempre pronto.</h2>
                <p>L'assistente interno è incluso nel piano Custom. Scrivici e lo configuriamo insieme sulla tua realtà.</p>
                <div class="cta-row">
                    <a href="{{ path('register') }}" class="btn btn--lg">Crea un account gratuito</a>
                    <a href="mailto:mostry@mizunokame24.ovh" class="btn btn--ghost btn--lg"><i class="fa-solid fa-envelope"></i> Contattaci</a>
                </div>
            </div>
        </div>
    </section>
{% endblock %}