{#
# Blog Grid Component
# Luxury blog posts grid with navy/gold accents
#
# Usage: 
#   {% include 'components/blog-grid.twig' %} - Shows all posts
#   {% include 'components/blog-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 blog posts 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 numberOfPosts = block.numberOfPosts ?? null %}
    
    {% if displayType == 'selected' %}
        {# Show manually selected posts in the order they were selected #}
        {% set selectedPosts = block.selectedPosts ?? null %}
        {% if selectedPosts and selectedPosts.all is defined %}
            {% set posts = selectedPosts.all() %}
        {% else %}
            {% set posts = [] %}
        {% endif %}
    {% elseif displayType == 'limited' and numberOfPosts %}
        {# Show limited number of posts #}
        {% set posts = craft.entries()
            .section('blog')
            .orderBy('postDate desc')
            .limit(numberOfPosts)
            .all() %}
    {% else %}
        {# Show all posts #}
        {% set posts = craft.entries()
            .section('blog')
            .orderBy('postDate desc')
            .all() %}
    {% endif %}
{% else %}
    {# Default: Show all posts #}
    {% set posts = craft.entries()
        .section('blog')
        .orderBy('postDate desc')
        .all() %}
{% endif %}

{% if posts|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">{{ heading }}</h2>{% endif %}
            {% if description %}
            <p class="text-charcoal-light max-w-2xl mx-auto mt-6 leading-relaxed">
                {{ description }}
            </p>
            {% endif %}
        </div>
        {% endif %}
        
        <!-- Blog Posts Grid -->
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12 mb-16">
            {% for post in posts %}
                {% set featuredImage = post.featuredImage|length ? post.featuredImage.one() : null %}
                
                <article class="card-luxury overflow-hidden group">
                    <a href="{{ post.url }}" class="block">
                        {% if featuredImage %}
                        <div class="aspect-[4/3] overflow-hidden">
                            {{ imageMacro.optimizedImage(featuredImage, {
                              alt: post.title,
                              class: 'w-full h-full object-cover transition-transform duration-700 group-hover:scale-110',
                              loading: 'lazy',
                              width: featuredImage.width,
                              height: featuredImage.height,
                              sizes: '(max-width: 1024px) 50vw, 33vw'
                            }) }}
                        </div>
                        {% else %}
                        <div class="aspect-[4/3] bg-blush/20"></div>
                        {% endif %}
                        
                        <div class="p-8 lg:p-10">
                            <!-- Date -->
                            <p class="text-gold text-xs uppercase tracking-[0.2em] mb-4">{{ post.postDate|date('M d, Y') }}</p>
                            
                            <!-- Title -->
                            <h3 class="text-navy mb-4 text-xl lg:text-2xl group-hover:text-gold transition-colors">{{ post.title }}</h3>
                            
                            <!-- Excerpt from WYSIWYG -->
                            {% set contentField = post.wisywig ?? null %}
                            {% if contentField %}
                                {% set plainText = contentField|striptags %}
                                {% set words = plainText|split(' ') %}
                                {% set excerpt = words|slice(0, 25)|join(' ') %}
                                <p class="text-charcoal-light text-sm mb-6 leading-relaxed">
                                    {{ excerpt }}{% if words|length > 25 %}...{% endif %}
                                </p>
                            {% endif %}
                            
                            <!-- Read More Link -->
                            <span class="link-primary group/link">
                                <span>Read Article</span>
                                <svg class="w-4 h-4 ml-2 transition-transform group-hover/link:translate-x-1" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                                </svg>
                            </span>
                        </div>
                    </a>
                </article>
            {% endfor %}
        </div>
        
        <!-- View All Button -->
        <div class="text-center">
            <a href="/blog" class="btn-outline-navy inline-flex items-center group">
                <span>View All Posts</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 %}