{% extends "base.html" %}
{% block title %}{{ product.meta_title|default:product.name }} | {{ site_settings.site_name }}{% endblock %}
{% block meta_description %}{{ product.meta_description|default:product.description|truncatechars:160 }}{% endblock %}

{% block content %}
<!-- Premium Breadcrumb Bar -->
<div class="bg-slate-50 border-b border-slate-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <nav class="text-sm text-slate-500 font-medium flex items-center" aria-label="Breadcrumb">
            <a href="/products/" class="hover:text-indigo-600 transition-colors flex items-center">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
                    </path>
                </svg>
                Catalog
            </a>
            <svg class="w-4 h-4 mx-2 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
            <a href="/products/{{ product.category.slug }}/" class="hover:text-indigo-600 transition-colors">{{ product.category.name }}</a>
            <svg class="w-4 h-4 mx-2 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
            <span class="text-slate-900" aria-current="page">{{ product.name }}</span>
        </nav>
    </div>
</div>

<section class="py-16 bg-white min-h-screen">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">

            <!-- Premium Image Gallery -->
            <div class="sticky top-24" data-aos="fade-right">
                <div
                    class="bg-slate-100 rounded-3xl overflow-hidden border border-slate-200 mb-6 aspect-[4/3] shadow-md group relative cursor-pointer" id="main-image-container">
                    {% with primary_image=product.images.first %}
                    {% if primary_image %}
                    <img src="{{ primary_image.image.url }}" alt="{{ product.name }}"
                        class="w-full h-full object-cover transition-all duration-500 group-hover:scale-105"
                        id="main-image">
                    <!-- Zoom icon overlay -->
                    <div class="absolute inset-0 bg-indigo-900/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center pointer-events-none">
                        <div class="bg-white/90 backdrop-blur-sm p-3 rounded-full text-indigo-600 shadow-lg transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
                            </svg>
                        </div>
                    </div>
                    {% else %}
                    <div class="w-full h-full flex flex-col items-center justify-center text-slate-400">
                        <svg class="w-16 h-16 mb-4 text-slate-300" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
                            </path>
                        </svg>
                        <span class="text-lg font-medium">No Image Available</span>
                    </div>
                    {% endif %}
                    {% endwith %}
                </div>
                <!-- Thumbnails -->
                {% if product.images.count > 1 %}
                <div class="grid grid-cols-5 gap-4">
                    {% for img in product.images.all %}
                    <div class="cursor-pointer rounded-xl overflow-hidden border-2 border-transparent hover:border-indigo-600 focus:border-indigo-600 transition-all shadow-sm"
                        onclick="updateMainImage('{{ img.image.url }}', this)">
                        <img src="{{ img.image_thumbnail.url }}"
                            class="w-full h-full object-cover aspect-square hover:opacity-80 transition-opacity">
                    </div>
                    {% endfor %}
                </div>
                
                <script>
                    function updateMainImage(newSrc, thumbnailElement) {
                        const mainImage = document.getElementById('main-image');
                        // Fade out
                        mainImage.style.opacity = '0';
                        
                        setTimeout(() => {
                            mainImage.src = newSrc;
                            // Fade in once loaded
                            mainImage.onload = () => {
                                mainImage.style.opacity = '1';
                            };
                        }, 200); // Wait for fade out
                    }
                </script>
                {% endif %}
            </div>

            <!-- Premium Product Details -->
            <div data-aos="fade-left" data-aos-delay="100">
                <div class="flex items-center space-x-3 mb-6">
                    <span
                        class="inline-flex items-center px-3 py-1 rounded-full bg-indigo-50 text-indigo-700 text-xs font-bold uppercase tracking-widest border border-indigo-100">
                        {{ product.category.name }}
                    </span>
                    {% if product.is_featured %}
                    <span
                        class="inline-flex items-center px-3 py-1 rounded-full bg-amber-50 text-amber-700 text-xs font-bold uppercase tracking-widest border border-amber-100">
                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                        Featured
                    </span>
                    {% endif %}
                </div>

                <h1 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-6 tracking-tight leading-tight">{{ product.name }}</h1>

                {% if product.origin_country %}
                <div class="flex items-center text-slate-700 mb-8 pb-8 border-b border-slate-100">
                    <div
                        class="w-12 h-12 bg-slate-50 rounded-full flex items-center justify-center mr-4 border border-slate-200">
                        <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                            </path>
                        </svg>
                    </div>
                    <div>
                        <p class="text-xs font-bold uppercase tracking-wider text-slate-500 mb-1">Country of Origin</p>
                        <p class="text-lg font-semibold text-slate-900">{{ product.origin_country }}</p>
                    </div>
                </div>
                {% endif %}

                <div class="prose prose-lg prose-indigo text-slate-600 mb-10 leading-relaxed max-w-none">
                    {{ product.description|linebreaks }}
                </div>

                <!-- Sticky Action Card -->
                <div class="bg-indigo-50 border border-indigo-100 rounded-2xl p-6 relative overflow-hidden">
                    <div class="absolute -right-10 -top-10 w-40 h-40 bg-indigo-200 rounded-full blur-3xl opacity-50">
                    </div>
                    <h3 class="text-lg font-bold text-indigo-900 mb-1.5 relative z-10">Interested in wholesale pricing?</h3>
                    <p class="text-sm text-indigo-700 mb-5 relative z-10 leading-relaxed">Connect with our specialized trade team to discuss
                        volumes, logistics, and pricing for {{ product.name }}.</p>
                    <a href="/contact/?product={{ product.name|urlencode }}"
                        class="relative z-10 inline-flex items-center justify-center w-full sm:w-auto bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-bold py-2.5 px-6 rounded-lg shadow-[0_4px_15px_rgb(79,70,229,0.3)] transition-all transform hover:-translate-y-0.5 hover:shadow-[0_8px_20px_rgb(79,70,229,0.4)]">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                            </path>
                        </svg>
                        Inquire About This Product
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}