{% set active = 'home' %}


{% extends 'base.html.twig' %}

{% block title %}
    Accueil - Micro76
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/home_2.css') }}">
{% endblock %}

{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>


{% endblock %}

{% block body %}

    <section class="typed-container">
        <div>
            <div>Réparer votre <br>
                <span class="typed-js"></span>
            </div>
        </div>
        <p>Efficacement et à deux pas de chez vous.</p>
        <a href="{{ path('repair') }}" id='ask_repair_btn'
           class="bg-blue-500 rounded hover:bg-white hover:text-black p-3 duration-500">
            <i class="fas fa-chevron-right"></i>
            <span>Demander une répararation</span>
        </a>
    </section>




    <section class="help">
        <h1>Comment Pouvons nous vous aidez ?</h1>

        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home"
                        type="button" role="tab" aria-controls="pills-home" aria-selected="true">Besoin d'une réparation
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile"
                        type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Besoin d'un nouvel équipement
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-assistance"
                        type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Besoin d'une assistance à domicile
                </button>
            </li>

        </ul>
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">

                <div class="content">
                    <div class="item">
                        <img src="img/needRepair.webp" alt="" class="ico">
                        <p class="title">Prendre Rdv pour un diagnostic & devis express en 15 min</p>
                        <p class="descr">Vous souhaitez demander une réparation parce que votre équipement ne fonctionne
                            plus
                            correctement.
                        </p>
                        <a href="" class="link">>Besoin d'une répration </a>
                    </div>
                    <div class="item">
                        <img src="img/diag.webp" alt="" class="ico">
                        <p class="title">Sans rendez-vous, venez déposer votre équipement en atelier</p>
                        <p class="descr">Vous avez un équipement en réparation au sein de notre atelier situé à Mont
                            Saint-Aignan

                        </p>
                        <a href="" class="link">> Suivre l'état d'une réparation</a>
                    </div>
                    <div class="item">
                        <img src="img/learn.webp" alt="" class="ico">
                        <p class="title">Prendre Rdv pour une formation en informatique à domicile</p>
                        <p class="descr">Nous nous déplaçons chez vous pour répondre à toutes vos questions
                            informatiques.

                        </p>
                        <a href="" class="link">> Demander une formation personalisée</a>
                    </div>


                </div>

            </div>
            <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                <div class="content">
                    <div class="item">
                        <img src="{{ asset('img/computer (3).png') }}" alt="" class="ico">
                        <p class="title"></p>
                        <p class="descr">Vous souhaitez vous équiper et vous avez besoin de conseils.
                            <br>
                            Nos techniciens vous conseillent en atelier et par téléphone.
                        </p>
                        <a href="" class="link">> Prendre un rdv conseil </a>
                    </div>
                    <div class="item">
                        <img src="{{ asset('img/conversation.png') }}" alt="" class="ico">
                        <p class="title"></p>
                        <p class="descr">Vous souhaitez faire une demande de devis pour vous équiper dans les meilleures conditions.

                        </p>
                        <a href="" class="link">> Faire une demande de devis</a>
                    </div>
                    <div class="item">
                        <img src="{{ asset('img/technical-support (3).png') }}" alt="" class="ico">
                        <p class="title"></p>
                        <p class="descr">
                            Vous souhaitez en savoir plus sur notre service support après-vente et sur la selection de nos équipements en atelier
                        </p>
                        <a href="" class="link">> En savoir plus</a>
                    </div>


                </div>


            </div>
            <div class="tab-pane fade" id="pills-assistance" role="tabpanel" aria-labelledby="pills-profile-tab">
            <div class="content">
                <div class="item">
                    <img src="img/home.webp" alt="" class="ico">
                    <p class="title">Prendre Rdv pour un dépannage informatique à domicile ou appelez-nous</p>
                    <p class="descr">Vous souhaitez qu'un technicien vienne directement chez vous pour résoudre
                        votre
                        problème ou répondre à vos questions.
                    </p>
                    <a href="" class="link">> Demander un dépannage à domicile</a>
                </div>
            </div>

            </div>
        </div>


    </section>
    <main>

        {{ render(path('template.get',{url : 'contact'})) }}


        <section class="engagement">
            <h2 class="title">> Nos
                <span class="text-blue-500">{{ engagements | length }}</span>
                Engagements</h2>
            <p>{{ settings.find(1) }}</p>


            <div class="engagement-container">
                {% for item in engagements %}
                    <div class="item  ">
                        {{ item.image.display(50) }}
                        <div class="title">{{ item.title }}</div>
                        <div>{{ item.content }}</div>
                    </div>
                {% endfor %}
            </div>


        </section>

        {{ render(path('template.get',{url : 'carte'})) }}


        <section class="team">
            <h2 class="title">> Une équipe de technicien polyvalent</h2>
            <p class="content">{{ settings.find(5) }}</p>

            {{ render(path('template.get',{url : 'team'})) }}

        </section>

        {{ render(path('template.get',{url : 'contact_form'})) }}

    </main>



    <script src="{{ asset('js/index.js') }}"></script>
    <script>
        let values = [];
        {% for item in settings.find(6) | split(';') %}
        values.push('{{ item }}')
        {% endfor %}
        const typed = new Typed('.typed-js', {
            strings: values,
            typeSpeed: 100,
            loop: true,
            backDelay: 2000,
        });
    </script>
{% endblock %}