{% trans_default_domain 'innovation' %}
{% set route = app.request.get('_route') %}

{% extends 'base.html.twig' %}
{% block meta %}
    <meta name="description"
          content="Quali Distrib innove pour vous proposer des fonctionnalités et services toujours plus moderne, découvrez les nouveautés en cours de développement ! "/>
    <meta property="og:title" content="Innovation"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="https://qualidistrib.com/innovation"/>
    <meta property="og:image" content="{{ asset('build/images/derniere-generation.jpeg') }}"/>
    <meta property="og:description"
          content="Quali Distrib innove pour vous proposer des fonctionnalités et services toujours plus moderne, découvrez les nouveautés en cours de développement ! "/>
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('build/innovation.css') }}"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
{% endblock %}

{% block title %}{{ page_title }}{% endblock %}

{% block body %}

    <div class="alert alert-warning alert-dismissible fade show" role="alert" id="alert-box">
        <strong>{{ 'innovation.dev'|trans }}
            <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close" id='close'><span
                        aria-hidden="true">&times;</span></button>
        </strong>
    </div>


    </button>
    </div>
    <div class="container-m">
        <h1 id="titleOne" class="title-body">{{ 'innovation.titleTitre'|trans }}</h1>
        <section class="section innovation border-bottom">
            {# <img src="{{ asset('build/images/distrib_vert.svg') }}" class="section-img-left"> #}

            <article id="vente" class="fonctionalite">
                <div class="section-body data">
                    <h3 class="section-title">{{ 'innovation.fonctionalite'|trans }}</h3>
                    <p class="section-text">
                        {{ 'innovation.fonctionaliteTexte'|trans }}</p>
                </div>
                <div class="innovation-schema">
                    <div id="elem1" class="box-left">
                        <img src="{{ asset('build/images/premier.jpeg') }}" alt="medaille premier" class="premier">
                        <div class="box">
                            <h3 class="section-body-title">{{ 'innovation.premier'|trans }}</h3>
                        </div>
                    </div>
                    <i id="fleche1" class="far fa-arrow-alt-circle-right fa-size" aria-hidden="true"></i>

                    <img id="elem2" src="{{ asset('build/images/think.jpg') }}" alt="personnage feminin"
                         class="innovation-schema-img perso-f">
                    <i id="fleche2" class="far fa-arrow-alt-circle-right fa-size" aria-hidden="true"></i>
                    <img id="elem3" src="{{ asset('build/images/achatweb.jpg') }}" alt="achat via téléphone"
                         class="innovation-schema-img">
                    <i id="fleche3" class="far fa-arrow-alt-circle-right fa-size" aria-hidden="true"></i>
                    <img id="elem4" src="{{ asset ('build/images/ICON-QUALIDISTRIB-MACHINE-DEF-[Récupéré].jpg') }}"
                         alt="lot de 3 distributeurs" class="innovation-distrib-img">

                </div>


            </article>
            {# <div class="descr"> #}
            {# <img src="{{ asset('build/images/QRCodeGen/Quali-Distrib.jpg') }}"> #}
            {# </div> #}

        </section>
        {# (insérez un visuel de machine violette et bleu) doté d’une fonctionnalité unique : #}
        {# la vente à distance, fini les invendu ou les paniers moyen trop faibles, désormais vos clients sont assures d ‘avoir le produit #}
        {# qui leur ferait plaisir, #}
        {# ils passent commande (insérez un logo QR code) directement via la plateforme que nous mettons à votre #}
        {# (insérez disposition, puis ils sont avertit de la disponibilité de leur commande dans l’appareil, pratique, rapide et qualitatif, #}

        <section class="section-form-mairie" id="form">
            <h2 class="form-title">{{ 'innovation.formTitre'|trans }}</h2>
            <div class="form-mairie">
                <div>
                    <p>

                        {{ 'innovation.formTexte'|trans }}</p>
                </div>

                <div class="form-form">
                    {{ form_start(formMairie) }}
                    <div class="form-vous">
                        <h4>{{ 'innovation.coordonnees'|trans }}</h4>
                        <div class="row">
                            <div class="col">{{ form_row(formMairie.nameContact,{'attr':{'placeholder':'placeholderContact'|trans}}) }}</div>
                            <div class="col">{{ form_row(formMairie.namePlace,{'attr':{'placeholder':'placeholderPlace'|trans},}) }}</div>
                            <div class="col">{{ form_row(formMairie.codePostal,{'attr':{'placeholder':'placeholderPostal'|trans},}) }}</div>
                        </div>
                    </div>
                    <div class="form-coord">

                        <div class="row">
                            <div class="col">{{ form_row(formMairie.email,{'attr':{'placeholder':'placeholderMail'|trans}}) }}</div>
                            {# <div class="col">{{ form_row(formMairie.phone,{'label':'Numéro de téléphone','attr':{'placeholder':"Votre numéro de téléphone"}}) }}</div> #}
                        </div>

                    </div>
                    <div class="form-mess">
                        <h4>{{ 'innovation.message'|trans }}</h4>
                        {{ form_row(formMairie.message,{'attr':{'placeholder':'placeholderMessage'|trans}}) }}
                        {{ form_row(formMairie._token) }}
                    </div>

                    <div class="form-souhait">
                        {{ form_row(formMairie.submitForm,{'attr':{'class':'btn-form'}}) }}
                        {{ form_row(formMairie.Type,{'attr':{'value':'Artisan'}}) }}

                        {{ form_end(formMairie, {'render_rest': false}) }}
                    </div>

                </div>
            </div>
        </section>
    </div>
{{ encore_entry_script_tags('innovationjs') }}
    <script defer type="application/ld+json">
        {
            "@context": "https://qualidistrib.com",
            "@type": "BreadcrumbList",
            "itemListElement": [
                {
                    "@type": "ListItem",
                    "position": 1,
                    "name": "Innovation",
                    "item": "https://qualidistrib.com/innovation"
                }
            ]
        }
    </script>
{% endblock %}