{{#
    @name Service Card
    @desc Standard card for a service in the treatment catalog
#}}

<div 
    {{ if enable_category_tabs }}
        x-show="activeTab === 'all' || activeTab === '{{ service_categories:0:slug }}'"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
    {{ /if }}
    class="group flex flex-col justify-between rounded-2xl bg-white border border-neutral-200/80 p-6 sm:p-7 shadow-2xs hover:shadow-md hover:border-accent/50 transition-all duration-200"
>
    <div>
        {{ if brand }}
            <div class="text-2xs uppercase tracking-widest font-bold text-accent-dark mb-1">
                {{ brand }}
            </div>
        {{ elseif service_categories:0:title }}
            <div class="text-2xs uppercase tracking-widest font-bold text-accent-dark mb-1">
                {{ service_categories:0:title }}
            </div>
        {{ /if }}

        <h3 class="font-serif text-xl sm:text-2xl font-bold text-neutral-900 mb-3 group-hover:text-accent-dark transition-colors">
            <a href="{{ url }}">{{ title }}</a>
        </h3>

        <p class="text-neutral-600 text-sm leading-relaxed mb-6">
            {{ teaser }}
        </p>
    </div>

    <div class="pt-5 border-t border-neutral-100">
        {{ if pricing_options }}
            <div class="space-y-1.5 mb-5">
                {{ pricing_options limit="2" }}
                    <div class="flex items-center justify-between text-xs">
                        <span class="text-neutral-500 font-medium">{{ duration }}</span>
                        <span class="font-bold text-neutral-900">{{ price }}</span>
                    </div>
                {{ /pricing_options }}
            </div>
        {{ /if }}

        <div class="flex items-center justify-between gap-3">
            <a 
                href="/contact?service={{ title | urlencode }}" 
                class="inline-flex items-center justify-center px-4 py-2 rounded-full bg-neutral-900 hover:bg-neutral-800 text-white text-xs font-semibold uppercase tracking-wider transition-colors shadow-2xs"
            >
                Book Now
            </a>
            <a 
                href="{{ url }}" 
                class="text-xs font-semibold text-neutral-500 hover:text-neutral-900 transition-colors inline-flex items-center gap-1"
            >
                Details &rarr;
            </a>
        </div>
    </div>
</div>