{% extends "base.html" %}
{% load static %}
{% block title %}Trade | {{ site_settings.site_name }}{% endblock %}

{% block content %}
<section class="py-16 md:py-24 lg:py-32 bg-slate-50 min-h-screen flex flex-col justify-center">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
        
        <!-- Text Content -->
        <div class="text-center max-w-4xl mx-auto mb-10 md:mb-16" data-aos="fade-up">
            <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold mb-5 tracking-tight text-slate-900 leading-tight">
                {{ products_settings.trade_title|safe }}
            </h1>
            
            <div class="w-16 h-1 bg-indigo-600 mx-auto rounded-full mb-6 opacity-80"></div>
            
            <div class="space-y-4 text-base md:text-lg text-slate-600 font-normal leading-relaxed max-w-3xl mx-auto">
                {{ products_settings.trade_description|safe }}
            </div>
        </div>

        <!-- Image Gallery -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8" data-aos="fade-up" data-aos-delay="100">
            {% if products_settings.trade_images.all %}
                {% for trade_img in products_settings.trade_images.all %}
                    {% if trade_img.is_active %}
                    <div class="rounded-2xl overflow-hidden shadow-xl aspect-[4/5] group relative bg-slate-200">
                        <img src="{{ trade_img.image.url }}" alt="Trade highlight" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-in-out">
                        <div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-colors duration-500"></div>
                    </div>
                    {% endif %}
                {% endfor %}
            {% else %}
                <!-- Fallback 4 images -->
                <div class="rounded-2xl overflow-hidden shadow-xl aspect-[4/5] group relative bg-slate-200">
                    <img src="/media/products/wheat01.jpeg" alt="Wheat field" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-in-out">
                    <div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-colors duration-500"></div>
                </div>
                
                <div class="rounded-2xl overflow-hidden shadow-xl aspect-[4/5] group relative bg-slate-200">
                    <img src="/media/products/agro01.joeg.jpg" alt="Wheat close up" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-in-out">
                    <div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-colors duration-500"></div>
                </div>
                
                <div class="rounded-2xl overflow-hidden shadow-xl aspect-[4/5] group relative bg-slate-200">
                    <img src="/media/products/sun01.jpeg" alt="Harvester in field" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-in-out">
                    <div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-colors duration-500"></div>
                </div>
                
                <div class="rounded-2xl overflow-hidden shadow-xl aspect-[4/5] group relative bg-slate-200">
                    <img src="/media/products/soya01.jpeg" alt="Grains and agriculture" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-in-out">
                    <div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-colors duration-500"></div>
                </div>
            {% endif %}
        </div>
        
    </div>
</section>
{% endblock %}