{{#
    @name Page Builder: Collection Feed
    @desc Unified dynamic collection showcase for services, testimonials, or news
#}}

<section class="py-16 sm:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" {{ if enable_category_tabs }}x-data="{ activeTab: 'all' }"{{ /if }}>
    
    {{ if kicker or title or lead }}
        <div class="text-center max-w-3xl mx-auto mb-12">
            {{ if kicker }}
                <div class="inline-flex items-center gap-2 text-accent-dark text-xs font-bold tracking-widest uppercase mb-3">
                    <span class="w-2 h-2 rounded-full bg-accent"></span>
                    {{ kicker }}
                </div>
            {{ /if }}
            {{ if title }}
                <h2 class="font-serif text-3xl sm:text-4xl lg:text-5xl text-neutral-900 font-bold tracking-tight mb-4">
                    {{ title }}
                </h2>
            {{ /if }}
            {{ if lead }}
                <p class="text-neutral-600 text-base sm:text-lg">
                    {{ lead }}
                </p>
            {{ /if }}

            {{ if enable_category_tabs and collection == 'services' }}
                {{# Category Filter Tabs #}}
                <div class="flex flex-wrap items-center justify-center gap-2 mt-8 max-w-2xl mx-auto">
                    <button 
                        @click="activeTab = 'all'" 
                        :class="activeTab === 'all' ? 'bg-primary text-white shadow-xs' : 'bg-white text-neutral-700 hover:bg-neutral-100 border border-neutral-200'"
                        class="px-4 py-2 rounded-full text-xs font-semibold tracking-wide transition-all"
                    >
                        All Treatments
                    </button>
                    <button 
                        @click="activeTab = 'facials'" 
                        :class="activeTab === 'facials' ? 'bg-primary text-white shadow-xs' : 'bg-white text-neutral-700 hover:bg-neutral-100 border border-neutral-200'"
                        class="px-4 py-2 rounded-full text-xs font-semibold tracking-wide transition-all"
                    >
                        Facial Treatments
                    </button>
                    <button 
                        @click="activeTab = 'body'" 
                        :class="activeTab === 'body' ? 'bg-primary text-white shadow-xs' : 'bg-white text-neutral-700 hover:bg-neutral-100 border border-neutral-200'"
                        class="px-4 py-2 rounded-full text-xs font-semibold tracking-wide transition-all"
                    >
                        Body Rituals &amp; Massage
                    </button>
                    <button 
                        @click="activeTab = 'makeup'" 
                        :class="activeTab === 'makeup' ? 'bg-primary text-white shadow-xs' : 'bg-white text-neutral-700 hover:bg-neutral-100 border border-neutral-200'"
                        class="px-4 py-2 rounded-full text-xs font-semibold tracking-wide transition-all"
                    >
                        Makeup &amp; Bridal
                    </button>
                    <button 
                        @click="activeTab = 'nails'" 
                        :class="activeTab === 'nails' ? 'bg-primary text-white shadow-xs' : 'bg-white text-neutral-700 hover:bg-neutral-100 border border-neutral-200'"
                        class="px-4 py-2 rounded-full text-xs font-semibold tracking-wide transition-all"
                    >
                        Nails &amp; Pedicures
                    </button>
                    <button 
                        @click="activeTab = 'eyelashes-and-waxing'" 
                        :class="activeTab === 'eyelashes-and-waxing' ? 'bg-primary text-white shadow-xs' : 'bg-white text-neutral-700 hover:bg-neutral-100 border border-neutral-200'"
                        class="px-4 py-2 rounded-full text-xs font-semibold tracking-wide transition-all"
                    >
                        Lashes &amp; Waxing
                    </button>
                </div>
            {{ /if }}
        </div>
    {{ /if }}

    {{# 1. Services Feed #}}
    {{ if collection == 'services' }}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {{ if featured_only }}
                {{ if limit }}
                    {{ collection:services :limit="limit" is_featured:is="true" sort="order:asc" }}
                        {{ partial:components/service_card :enable_category_tabs="enable_category_tabs" }}
                    {{ /collection:services }}
                {{ else }}
                    {{ collection:services is_featured:is="true" sort="order:asc" }}
                        {{ partial:components/service_card :enable_category_tabs="enable_category_tabs" }}
                    {{ /collection:services }}
                {{ /if }}
            {{ else }}
                {{ if limit }}
                    {{ collection:services :limit="limit" sort="order:asc" }}
                        {{ partial:components/service_card :enable_category_tabs="enable_category_tabs" }}
                    {{ /collection:services }}
                {{ else }}
                    {{ collection:services sort="order:asc" }}
                        {{ partial:components/service_card :enable_category_tabs="enable_category_tabs" }}
                    {{ /collection:services }}
                {{ /if }}
            {{ /if }}
        </div>

    {{# 2. Testimonials Feed #}}
    {{ elseif collection == 'testimonials' }}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
            {{ if featured_only }}
                {{ if limit }}
                    {{ collection:testimonials :limit="limit" is_featured:is="true" sort="date:desc" }}
                        {{ partial:components/testimonial_card }}
                    {{ /collection:testimonials }}
                {{ else }}
                    {{ collection:testimonials is_featured:is="true" sort="date:desc" }}
                        {{ partial:components/testimonial_card }}
                    {{ /collection:testimonials }}
                {{ /if }}
            {{ else }}
                {{ if limit }}
                    {{ collection:testimonials :limit="limit" sort="date:desc" }}
                        {{ partial:components/testimonial_card }}
                    {{ /collection:testimonials }}
                {{ else }}
                    {{ collection:testimonials sort="date:desc" }}
                        {{ partial:components/testimonial_card }}
                    {{ /collection:testimonials }}
                {{ /if }}
            {{ /if }}
        </div>

    {{# 3. News Feed #}}
    {{ elseif collection == 'news' }}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
            {{ if limit }}
                {{ collection:news :limit="limit" sort="date:desc" }}
                    <article class="flex flex-col rounded-2xl bg-white border border-neutral-200/80 overflow-hidden shadow-2xs hover:shadow-md transition-shadow">
                        {{ if image }}
                            <div class="h-48 overflow-hidden bg-neutral-100">
                                <img src="{{ image:0:url ?? image:url ?? image }}" alt="{{ title }}" class="w-full h-full object-cover" />
                            </div>
                        {{ /if }}
                        <div class="p-6 flex flex-col justify-between flex-1">
                            <div>
                                <div class="text-xs text-neutral-400 mb-2">
                                    {{ date | format('F Y') }}
                                </div>
                                <h3 class="font-serif text-xl font-bold text-neutral-900 mb-2 leading-snug hover:text-accent-dark transition-colors">
                                    <a href="{{ url }}">{{ title }}</a>
                                </h3>
                                <p class="text-neutral-600 text-sm leading-relaxed mb-4">
                                    {{ teaser | truncate(110) }}
                                </p>
                            </div>
                            <a href="{{ url }}" class="text-xs font-bold uppercase tracking-wider text-accent-dark hover:text-neutral-900 transition-colors inline-flex items-center gap-1">
                                Read Article &rarr;
                            </a>
                        </div>
                    </article>
                {{ /collection:news }}
            {{ else }}
                {{ collection:news sort="date:desc" }}
                    <article class="flex flex-col rounded-2xl bg-white border border-neutral-200/80 overflow-hidden shadow-2xs hover:shadow-md transition-shadow">
                        {{ if image }}
                            <div class="h-48 overflow-hidden bg-neutral-100">
                                <img src="{{ image:0:url ?? image:url ?? image }}" alt="{{ title }}" class="w-full h-full object-cover" />
                            </div>
                        {{ /if }}
                        <div class="p-6 flex flex-col justify-between flex-1">
                            <div>
                                <div class="text-xs text-neutral-400 mb-2">
                                    {{ date | format('F Y') }}
                                </div>
                                <h3 class="font-serif text-xl font-bold text-neutral-900 mb-2 leading-snug hover:text-accent-dark transition-colors">
                                    <a href="{{ url }}">{{ title }}</a>
                                </h3>
                                <p class="text-neutral-600 text-sm leading-relaxed mb-4">
                                    {{ teaser | truncate(110) }}
                                </p>
                            </div>
                            <a href="{{ url }}" class="text-xs font-bold uppercase tracking-wider text-accent-dark hover:text-neutral-900 transition-colors inline-flex items-center gap-1">
                                Read Article &rarr;
                            </a>
                        </div>
                    </article>
                {{ /collection:news }}
            {{ /if }}
        </div>
    {{ /if }}

    {{ if view_all_url }}
        <div class="text-center mt-12">
            <a 
                href="{{ view_all_url }}" 
                class="inline-flex items-center gap-2 px-8 py-3.5 rounded-full border border-neutral-300 bg-white hover:bg-neutral-50 text-neutral-900 text-sm font-semibold transition-all shadow-xs"
            >
                <span>{{ view_all_text ?? 'View All' }}</span>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                </svg>
            </a>
        </div>
    {{ /if }}

</section>