{% extends 'base.twig' %}

{# --- METADATA & SCHEMA --- #}
{% block title %}{{ product.name }}{% endblock %}
{% block meta_description %}{{ product.shortDescription }}{% endblock %}

{% block canonical_url %}<link rel="canonical" href="{{ app.request.pathInfo }}" />{% 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": "{{ product.name }}",
              "item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
          }
        ]
      }
    </script>
    <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"
              },
              "shippingDetails": {
                "@type": "OfferShippingDetails",
                "shippingRate": {
                    "@type": "MonetaryAmount",
                    "value": 6.00,
                    "currency": "EUR"
                },
                "shippingDestination": {
                  "@type": "DefinedRegion",
                  "addressCountry": "FR"
                },
                "deliveryTime": {
                  "@type": "ShippingDeliveryTime",
                  "handlingTime": {
                    "@type": "QuantitativeValue",
                    "minValue": 0,
                    "maxValue": 1,
                    "unitCode": "DAY"
                  },
                  "transitTime": {
                    "@type": "QuantitativeValue",
                    "minValue": 1,
                    "maxValue": 5,
                    "unitCode": "DAY"
                  }
                }
              },
              "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",
                "hasMerchantReturnPolicy": {
                  "@type": "MerchantReturnPolicy",
                  "applicableCountry": "FR",
                  "returnPolicyCategory": "https://schema.org/{% if product.custom %}MerchantReturnNotPermitted {% else %}MerchantReturnFiniteReturnWindow{% endif %}",
                  "merchantReturnDays": {% if product.custom %}0{%else%}14{% endif %},
                  "returnFees": "https://schema.org/{% if product.custom %}ReturnFeesCustomerResponsibility{%else%}ReturnFeesCustomerResponsibility{% endif %}",
                  "returnMethod": "https://schema.org/ReturnByMail"
                }
              }
        }
    </script>
{% endblock %}

{# --- BODY --- #}
{% block body %}
    {# Ajout d'une balise style pour définir les couleurs personnalisées du bouton #}
    <style>
        .btn-custom-yellow {
            background-color: #FABF04; /* Couleur de base: Jaune vif */
            color: #1f2937; /* Texte gris foncé pour un meilleur contraste */
        }
        .btn-custom-yellow:hover {
            background-color: #e6a800; /* Jaune légèrement plus foncé au survol */
        }
        .btn-custom-yellow:focus {
            --tw-ring-color: #f7d976; /* Anneau de focus jaune clair */
        }
    </style>

    <main class="container mx-auto px-4 py-8">
        {# Conteneur simplifié et épuré #}
        <div class="max-w-7xl mx-auto p-4 lg:p-6">
            {# Titre H1 #}
            <h1 class="text-3xl lg:text-4xl font-extrabold text-gray-900 mb-6 text-center lg:text-left">
                {{ product.name }}
            </h1>

            <div class="lg:grid lg:grid-cols-2 lg:gap-12">
                {# --- Product Image (Left Column on Desktop) --- #}
                <div class="mb-8 lg:mb-0">
                    <img src="{{ vich_uploader_asset(product,'image') | imagine_filter('webp') }}"
                         alt="{{ product.name }}"
                         class="w-full h-auto rounded-lg transition transform hover:scale-[1.01] duration-300"
                    >
                </div>

                {# --- Product Details & Actions (Right Column on Desktop) --- #}
                <div class="flex flex-col space-y-8">
                    {# --- Price (Simple TTC Display) --- #}
                    <div class="pt-2">
                        <p class="text-5xl font-extrabold text-red-600">
                            {{ product.price|number_format(2, ',', ' ') }} € TTC
                        </p>
                    </div>

                    {# --- Short Description --- #}
                    <div class="pt-1">
                        <p class="text-xl text-gray-700 leading-relaxed">
                            {{ product.shortDescription }}
                        </p>
                    </div>

                    {# --- Reference and Custom/Handmade Tags --- #}
                    <div class="space-y-4 pt-2">
                        {# Product Reference #}
                        <p class="text-base text-gray-600">
                            <strong>{{ 'product_ref'|trans }}:</strong> <span class="font-medium text-gray-800">{{ product.ref }}</span>
                        </p>

                        {# Custom / Fait Main Badges #}
                        <div class="flex flex-wrap gap-2">
                            {% if product.handmade %}
                                <span class="inline-flex items-center px-3 py-1 text-sm font-semibold bg-pink-100 text-pink-800 rounded-full shadow-md">
                                    <i class="fas fa-hand-sparkles mr-2"></i> {{ 'product_handmade'|trans }}
                                </span>
                            {% endif %}

                            {% if product.custom %}
                                <span class="inline-flex items-center px-3 py-1 text-sm font-semibold bg-indigo-100 text-indigo-800 rounded-full shadow-md">
                                    <i class="fas fa-crown mr-2"></i> {{ 'product_custom'|trans }}
                                </span>
                            {% endif %}
                        </div>
                    </div>

                    {# --- Action: Add to Cart Button (Updated with custom yellow class) --- #}
                    <div class="pt-4" style="display:none;">
                        <button type="button"
                                class="w-full lg:w-3/4 px-6 py-4 btn-custom-yellow font-bold text-lg rounded-xl shadow-lg transition duration-300 transform hover:scale-[1.01] focus:outline-none focus:ring-4 focus:ring-opacity-75">
                            <i class="fas fa-shopping-cart mr-2"></i> {{ 'product_add_to_cart'|trans }}
                        </button>
                    </div>

                    {# Messages de livraison/stock traduits #}
                    <div class="text-sm text-gray-500 pt-2 space-y-1">
                        <p>{{ 'product_estimated_delivery'|trans }}</p>
                        <p>{{ 'product_shipping_methods'|trans }}</p>
                    </div>

                </div>
            </div>

            {# --- Long Description (Full Width Below) --- #}
            <div class="mt-12 pt-8 border-t border-gray-300">
                <h2 class="text-2xl font-bold text-gray-800 mb-4">{{'product_long_desc_title'|trans}}</h2>
                <div class="prose max-w-none text-gray-700 leading-relaxed">
                    {{ product.longDescription|raw }}
                </div>
            </div>
        </div>
    </main>
{% endblock %}
