{% extends 'base.twig' %}

{# --- METADATA & SEO --- #}
{% block title %}{{'shop.title'|trans}}{% endblock %}
{% block meta_description %}{{'shop.description'|trans}}{% endblock %}
{% block canonical_url %}<link rel="canonical" href="{{ url('app_shop') }}" />{% endblock %}

{% block breadcrumb_schema %}
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          "itemListElement": [
            {
              "@type": "ListItem",
              "position": 1,
              "name": "{{ 'breadcrumb.home'|trans }}",
              "item": "{{ app.request.schemeAndHttpHost }}"
          },
            {
              "@type": "ListItem",
              "position": 2,
              "name": "{{ 'breadcrumb.shop'|trans }}",
              "item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
          }
        ]
      }
    </script>
    {% for product in featuredProducts %}
        <script type="application/ld+json">
            {
                "@context": "https://schema.org/",
                "@type": "ImageObject",
                "contentUrl": "{{ vich_uploader_asset(product,'image') | imagine_filter('webp') }}",
                "license": "https://example.com/license",
                "acquireLicensePage": "{{ app.request.schemeAndHttpHost}}{{ path('app_legal') }}",
                "creditText": "E-Cosplay",
                "creator": {
                    "@type": "Person",
                    "name": "E-Cosplay"
                },
                "copyrightNotice": "E-Cosplay"
            }
        </script>
        <script type="application/ld+json">
            {
              "@context": "https://schema.org/",
              "@type": "Product",
              "name": "{{ product.name }}",
              "image": "{{ vich_uploader_asset(product,'image') | imagine_filter('webp') }}",
              "description": "{{ product.shortDescription }}",
              "sku": "EC-{{ product.id }}",
              "brand": {
                "@type": "Brand",
                "name": "E-COSPLAY"
              },
              "offers": {
                "@type": "Offer",
                "url": "{{ app.request.schemeAndHttpHost }}{{ path('app_product_show',{'slug': (product.name|lower|replace({' ': '-'}))~"-"~product.id}) }}",
                "priceCurrency": "EUR",
                "price": "{{ product.price }}",
                "itemCondition": "https://schema.org/{% if product.state == 'new' %}NewCondition{% else %}UsedCondition{% endif %}",
                "availability": "https://schema.org/InStock"
              }
        }
        </script>
    {% endfor %}
{% endblock %}

{% block body %}
    <div class="bg-[#fbfbfb] min-h-screen py-12 px-4 italic">
        <div class="max-w-7xl mx-auto">

            {# HEADER DE LA BOUTIQUE #}
            <header class="mb-16 text-center">
                <div class="inline-block bg-indigo-600 text-white px-6 py-2 border-4 border-gray-900 font-black uppercase tracking-tighter text-sm mb-4 skew-x-[-12deg] shadow-[4px_4px_0px_rgba(0,0,0,1)]">
                    E-Cosplay Market // Avail_
                </div>
                <h1 class="text-6xl md:text-8xl font-black uppercase tracking-tighter leading-none mb-6">
                    {{ 'shop.welcome_title'|trans }}
                </h1>
                <p class="max-w-2xl mx-auto text-xl font-bold uppercase text-gray-500 leading-tight">
                    {{ 'shop.description'|trans }}
                </p>
            </header>

            {# --- GRILLE DE PRODUITS --- #}
            <main class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                {% for product in featuredProducts %}
                    <div class="group relative bg-white border-4 border-gray-900 shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all flex flex-col h-full">

                        {# ÉTIQUETTE PROMO / ETAT #}
                        <div class="absolute -top-4 -right-4 z-10 flex flex-col gap-2">
                            {% if product.promo %}
                                <div class="bg-pink-500 text-white text-[10px] font-black px-3 py-1 border-2 border-gray-900 uppercase rotate-12">
                                    {{ 'shop.tag_promo'|trans }}
                                </div>
                            {% endif %}
                            <div class="bg-yellow-400 text-gray-900 text-[10px] font-black px-2 py-1 border-2 border-gray-900 uppercase -rotate-6">
                                {{ ('shop.state_' ~ product.state)|trans }}
                            </div>
                        </div>

                        {# IMAGE PRODUIT #}
                        <div class="relative h-64 overflow-hidden border-b-4 border-gray-900 bg-gray-100">
                            <img src="{{ vich_uploader_asset(product,'image') | imagine_filter('webp')}}"
                                 alt="{{ product.name }}"
                                 class="w-full h-full object-cover grayscale group-hover:grayscale-0 group-hover:scale-110 transition-all duration-500">

                            {# TAGS FLOTTANTS #}
                            <div class="absolute bottom-2 left-2 flex gap-2">
                                {% if product.handmade %}
                                    <span class="bg-green-400 text-black text-[9px] font-black border-2 border-black px-2 py-0.5 uppercase">
                                        {{ 'shop.tag_handmade'|trans }}
                                    </span>
                                {% endif %}
                                {% if product.id == 1 %}
                                    <span class="bg-blue-400 text-black text-[9px] font-black border-2 border-black px-2 py-0.5 uppercase">
                                        {{ 'shop.tag_custom'|trans }}
                                    </span>
                                {% endif %}
                            </div>
                        </div>

                        {# INFOS PRODUIT #}
                        <div class="p-6 flex-grow flex flex-col">
                            <h3 class="text-2xl font-black uppercase tracking-tighter leading-none mb-3 truncate">
                                {{ product.name }}
                            </h3>

                            <p class="text-xs font-bold text-gray-500 uppercase leading-snug mb-6 line-clamp-3 italic">
                                {{ product.shortDescription }}
                            </p>

                            <div class="mt-auto pt-6 border-t-4 border-dashed border-gray-100 flex justify-between items-center">
                                <div class="flex flex-col">
                                    <span class="text-xs font-black text-gray-400 uppercase tracking-widest">Price_</span>
                                    <span class="text-2xl font-black text-indigo-600">
                                        {{ product.price | number_format(2, ',', ' ') }}€
                                    </span>
                                </div>

                                <a href="{{ path('app_product_show', {'slug': (product.name|lower|replace({' ': '-'}))~"-"~product.id}) }}"
                                   class="w-12 h-12 bg-gray-900 text-white flex items-center justify-center border-2 border-gray-900 shadow-[4px_4px_0px_#ec4899] group-hover:shadow-none group-hover:translate-x-1 group-hover:translate-y-1 transition-all">
                                    <i class="fas fa-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </main>

            {# --- NOTE DE VENTE TERMINAL STYLE --- #}
            <div class="mt-20 p-8 bg-gray-900 border-8 border-indigo-600 shadow-[16px_16px_0px_rgba(79,70,229,0.2)]">
                <div class="flex flex-col md:flex-row gap-8 items-center">
                    <div class="flex-shrink-0 w-20 h-20 bg-indigo-600 text-white flex items-center justify-center border-4 border-white rotate-3">
                        <i class="fas fa-heart-handshake text-3xl"></i>
                    </div>
                    <div class="flex-grow">
                        <h3 class="text-2xl font-black text-white uppercase tracking-tighter mb-4 italic">
                            <span class="text-indigo-400">#</span> {{ 'shop.sales_note_title'|trans }}
                        </h3>
                        <div class="text-gray-300 font-bold text-sm leading-relaxed uppercase opacity-90">
                            {{ 'shop.sales_note_main'|trans|raw }}
                        </div>
                        <p class="mt-4 text-[10px] font-black text-indigo-400 uppercase tracking-[0.2em]">
                            >> {{ 'shop.sales_note_details'|trans }}
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
{% endblock %}