{#
# Treatments Grid Component
# Luxury grid with navy/gold accents
#
# Usage: 
#   {% include 'components/treatments-grid.twig' %} - Shows all treatments
#   {% include 'components/treatments-grid.twig' with { block: block } %} - From page builder
#}

{% import '_macros/images.twig' as imageMacro %}

{# Get dynamic content from block – no defaults; only show when set #}
{% set topLabel = block is defined and block.plainText2|length ? block.plainText2 : null %}
{% set heading = block is defined and block.plainText|length ? block.plainText : null %}
{% set description = block is defined and block.textArea|length ? block.textArea : null %}

{# Determine which treatments to show #}
{% if block is defined %}
    {# Get displayType value - handle both string and dropdown field object #}
    {% set displayTypeRaw = block.displayType ?? null %}
    {% set displayType = displayTypeRaw.value ?? displayTypeRaw ?? 'all' %}
    {% set numberOfTreatments = block.numberOfTreatments ?? null %}
    
    {% if displayType == 'selected' %}
        {# Show manually selected treatments in the order they were selected #}
        {% set selectedTreatments = block.selectedTreatments ?? null %}
        {% if selectedTreatments and selectedTreatments.all is defined %}
            {% set treatments = selectedTreatments.all() %}
        {% else %}
            {% set treatments = [] %}
        {% endif %}
    {% elseif displayType == 'limited' and numberOfTreatments %}
        {# Show limited number of treatments #}
        {% set treatments = craft.entries()
            .section('treatments')
            .limit(numberOfTreatments)
            .all() %}
    {% else %}
        {# Show all treatments #}
        {% set treatments = craft.entries()
            .section('treatments')
            .all() %}
    {% endif %}
{% else %}
    {# Default: Show all treatments #}
    {% set treatments = craft.entries()
        .section('treatments')
        .all() %}
{% endif %}

{% if treatments|length %}
<section class="section-luxury bg-beige-light relative overflow-hidden bg-pattern-diagonal">
    <div class="container-default relative">
        {% if topLabel or heading or description %}
        <div class="section-heading">
            {% if topLabel %}
            <div class="flex items-center justify-center gap-4 mb-6">
                <div class="w-12 h-px bg-gold"></div>
                <p class="text-gold tracking-widest text-2xl font-medium font-body">{{ topLabel }}</p>
                <div class="w-12 h-px bg-gold"></div>
            </div>
            {% endif %}
            {% if heading %}<h2 class="text-navy italic">{{ heading }}</h2>{% endif %}
            {% if description %}
            <p class="text-charcoal-light max-w-2xl mx-auto mt-6 leading-relaxed">
                {{ description }}
            </p>
            {% endif %}
        </div>
        {% endif %}
        
        <!-- Treatment Grid - Responsive -->
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8 mb-16">
            {% for treatment in treatments %}
                {% set featuredImage = treatment.featuredImage|length ? treatment.featuredImage.one() : null %}
                
                <a href="{{ treatment.url }}" class="group block relative overflow-hidden rounded-2xl shadow-lg hover:shadow-xl transition-all duration-500 hover:-translate-y-2">
                    <div class="aspect-[4/5] overflow-hidden">
                        {% if featuredImage %}
                            {{ imageMacro.optimizedImage(featuredImage, {
                              alt: treatment.title,
                              class: 'w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110',
                              loading: 'lazy',
                              width: featuredImage.width,
                              height: featuredImage.height,
                              sizes: '(max-width: 1024px) 50vw, 25vw'
                            }) }}
                        {% else %}
                            <div class="w-full h-full bg-blush/20"></div>
                        {% endif %}
                    </div>
                    <!-- Navy gradient overlay -->
                    <div class="absolute inset-0 bg-gradient-to-t from-navy/70 via-navy/15 to-transparent"></div>
                    <!-- Text overlay -->
                    <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
                        <h5 class="font-semibold tracking-wide text-white mb-1 text-lg">{{ treatment.title }}</h5>
                    </div>
                    <!-- Gold corner accents on hover -->
                    <div class="absolute top-4 left-4 w-10 h-10 border-t-2 border-l-2 border-gold opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                    <div class="absolute top-4 right-4 w-10 h-10 border-t-2 border-r-2 border-gold opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                    <div class="absolute bottom-4 right-4 w-10 h-10 border-b-2 border-r-2 border-gold opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                </a>
            {% endfor %}
        </div>
        
        <!-- Button -->
        <div class="text-center">
            <a href="/treatments" class="btn-gold inline-flex items-center group">
                <span>View All Treatments</span>
                <svg class="w-4 h-4 ml-3 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                </svg>
            </a>
        </div>
    </div>
</section>
{% endif %}