{% extends "web/layout.html.twig" %}
{% block meta %}
    <title>{{ seo.getTituloByLang(app.request.locale) }}</title>
    <meta name="description" content="{{ seo.getDescripcionByLang(app.request.locale) }}" />
    <!-- Schema.org markup -->
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "WebSite",
            "url": "{{ url(app.request.attributes.get('_route')) }}"
        }
    </script>
    <link rel="alternate" hreflang="ca" href="{{ url(app.request.attributes.get('_route') , {_locale: 'ca'}) }}" />
    <link rel="alternate" hreflang="en" href="{{ url(app.request.attributes.get('_route') , {_locale: 'en'}) }}" />
    <link rel="alternate" hreflang="es" href="{{ url(app.request.attributes.get('_route') , {_locale: 'es'}) }}" />
    <!-- Twitter Card data -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="{{ seo.getTituloByLang(app.request.locale) }}">
    <meta name="twitter:description" content="{{ seo.getDescripcionByLang(app.request.locale) }}">
    <meta name="twitter:image" content="{{ absolute_url(asset('/build/images/web/logo-header-mobile.png') ) }}">
    <!-- Open Graph data -->
    <meta property="og:title" content="{{ seo.getTituloByLang(app.request.locale) }}" />
    <meta property="og:url" content="{{ url(app.request.attributes.get('_route') ) }}">
    <meta name="og:image" content="{{ absolute_url(asset('/build/images/web/logo-header-mobile.png') ) }}">
    <meta property="og:description" content="{{ seo.getDescripcionByLang(app.request.locale) }}" />
    <meta property="og:site_name" content="Justicialistas" />
{% endblock %}
{% block content %}
    <section class="slider-home">
        <div>
            <product-carousel></product-carousel>
        </div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-6 contenedor-boton">
                    <a href="{{ path("web_store") }}">
                        <button class="just-button">{{ 'go.to.store'|trans({}, 'home') }}</button>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section class="categorias-principales reveal">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-12">
                    <h1>{{ 'highlited.categories.title'|trans({}, 'home') }}</h1>
                    <p class="text">
                        {{ 'highlited.categories.text'|trans({}, 'home') }}
                        <strong><a href="#">{{ 'click-here'|trans({}, 'home') }}</a> </strong>
                    </p>
                </div>
            </div>
            <div class="row justify-content-center d-none d-lg-flex">
                <div class="col-lg-4">
                    <a href="{{ path('web_store', {categorySlug: 'hombre'}) }}" class="d-block;">
                        <img src="{{ asset("build/images/web/pochos-desktop.png") }}" class="img-fluid first-image" alt="Hombres">
                    </a>
                </div>
                <div class="col-lg-4">
                    <a href="{{ path('web_store', {categorySlug: 'mujer'}) }}" class="d-block;">
                        <img src="{{ asset("build/images/web/evas-desktop.png") }}" class="img-fluid" alt="Mujeres">
                    </a>
                </div>
                <div class="col-lg-4 d-flex flex-column justify-content-between">
                    <a href="{{ path('web_store', {categorySlug: 'accesorios'}) }}" class="d-block;">
                        <img src="{{ asset("build/images/web/accesorios-desktop.png") }}" class="img-fluid first-image" alt="Accesoreios">
                    </a>
                    <a href="{{ path("web_store") }}" class="d-block;">
                        <img src="{{ asset("build/images/web/calzado-desktop.png") }}" class="img-fluid" alt="Calzado">
                    </a>
                </div>
            </div>
        </div>
        <div class="d-block d-lg-none">
            <div id="category-carousel"></div>
        </div>
    </section>
    <section class="highlited-products reveal">
        <div class="container">
            <h1>{{ 'highlited.products.title'|trans({}, 'home') }}</h1>
            <div class="row">
                {% for product in products %}{{ include('web/blocks/product_item_block.html.twig', {product: product}) }}{% endfor %}
            </div>
            <div class="row">
                <div class="col-12">
                    <a href="{{ path("web_store") }}">
                        <button class="just-button">{{ 'go.to.store'|trans({}, 'home') }}</button>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section class="section-4 reveal">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-7">
                    <div class="image-container">
                        <img src="{{ asset("build/images/web/image-left-section-4.png") }}" class="img-fluid" alt="JUSTICIALISTAS">
                    </div>
                    <div class="socials-container">
                        <button class="just-button">
                            <i class="icon-bxl-facebook"></i> Facebook
                        </button>
                        <button class="just-button">
                            <i class="icon-bxl-instagram-1"></i> Instagram
                        </button>
                    </div>
                </div>
                <div class="col-12 col-lg-5">
                    <div class="payments-container shadow">
                        <button class="just-button">{{ 'payment.method.button'|trans({}, 'home') }}</button>
                        <div class="payment-method">
                            <h4>{{ 'payment.method.text.1'|trans({}, 'home') }}</h4>
                            <img src="{{ asset("build/images/web/debit-cards.png") }}" class="img-fluid" alt="JUSTICIALISTAS">
                        </div>
                        <div class="payment-method">
                            <h4>{{ 'payment.method.text.2'|trans({}, 'home') }}</h4>
                            <img src="{{ asset("build/images/web/credit-cards.png") }}" class="img-fluid" alt="JUSTICIALISTAS">
                        </div>
                        <div class="payment-method">
                            <h4>{{ 'payment.method.text.3'|trans({}, 'home') }}</h4>
                            <img src="{{ asset("build/images/web/banks.png") }}" class="img-fluid" alt="JUSTICIALISTAS">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="highlited-clients reveal">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h1>{{ 'highlited-clients'|trans({}, 'home') }}</h1>
                </div>
            </div>
            <div class="row">
                <client-carousel></client-carousel>
            </div>
        </div>
    </section>
{% endblock %}