{# app/templates/platform/pricing.html #}
{# Standalone Pricing Page #}
{% extends "platform/base.html" %}

{% block title %}Pricing - Wizamart{% endblock %}

{% block content %}
<div x-data="{ annual: false }" class="py-16 lg:py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {# Header #}
        <div class="text-center mb-12">
            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
                Choose Your Plan
            </h1>
            <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                All plans include a {{ trial_days }}-day free trial. No credit card required to start.
            </p>

            {# Billing Toggle #}
            <div class="flex items-center justify-center mt-8 space-x-4">
                <span class="text-gray-700 dark:text-gray-300" :class="{ 'font-semibold': !annual }">Monthly</span>
                <button @click="annual = !annual"
                        class="relative w-14 h-7 rounded-full transition-colors"
                        :class="annual ? 'bg-indigo-600' : 'bg-gray-300 dark:bg-gray-600'">
                    <span class="absolute top-1 left-1 w-5 h-5 bg-white rounded-full shadow transition-transform"
                          :class="annual ? 'translate-x-7' : ''"></span>
                </button>
                <span class="text-gray-700 dark:text-gray-300" :class="{ 'font-semibold': annual }">
                    Annual
                    <span class="text-green-600 text-sm font-medium ml-1">Save 2 months!</span>
                </span>
            </div>
        </div>

        {# Pricing Cards #}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {% for tier in tiers %}
            <div class="relative bg-white dark:bg-gray-800 rounded-2xl p-6 border-2 transition-all hover:shadow-xl
                        {% if tier.is_popular %}border-indigo-500 shadow-lg{% else %}border-gray-200 dark:border-gray-700{% endif %}">

                {% if tier.is_popular %}
                <div class="absolute -top-3 left-1/2 -translate-x-1/2">
                    <span class="bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full">RECOMMENDED</span>
                </div>
                {% endif %}

                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{{ tier.name }}</h3>

                <div class="mb-6">
                    <template x-if="!annual">
                        <div>
                            <span class="text-4xl font-extrabold text-gray-900 dark:text-white">{{ tier.price_monthly }}</span>
                            <span class="text-gray-500">/month</span>
                        </div>
                    </template>
                    <template x-if="annual">
                        <div>
                            {% if tier.price_annual %}
                            <span class="text-4xl font-extrabold text-gray-900 dark:text-white">{{ (tier.price_annual / 12)|round(0)|int }}</span>
                            <span class="text-gray-500">/month</span>
                            <div class="text-sm text-gray-500">Billed {{ tier.price_annual }}/year</div>
                            {% else %}
                            <span class="text-2xl font-bold text-gray-900 dark:text-white">Custom Pricing</span>
                            {% endif %}
                        </div>
                    </template>
                </div>

                <ul class="space-y-3 mb-8 text-sm">
                    <li class="flex items-center text-gray-700 dark:text-gray-300">
                        <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                        {% if tier.orders_per_month %}{{ tier.orders_per_month }} orders/month{% else %}Unlimited orders{% endif %}
                    </li>
                    <li class="flex items-center text-gray-700 dark:text-gray-300">
                        <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                        {% if tier.products_limit %}{{ tier.products_limit }} products{% else %}Unlimited products{% endif %}
                    </li>
                    <li class="flex items-center text-gray-700 dark:text-gray-300">
                        <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                        {% if tier.team_members %}{{ tier.team_members }} team member{% if tier.team_members > 1 %}s{% endif %}{% else %}Unlimited team{% endif %}
                    </li>
                    <li class="flex items-center text-gray-700 dark:text-gray-300">
                        <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                        {% if tier.order_history_months %}{{ tier.order_history_months }} months history{% else %}Unlimited history{% endif %}
                    </li>
                </ul>

                {% if tier.is_enterprise %}
                <a href="/contact" class="block w-full py-3 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white font-semibold rounded-xl text-center hover:bg-gray-300 transition-colors">
                    Contact Sales
                </a>
                {% else %}
                <a :href="'/signup?tier={{ tier.code }}&annual=' + annual"
                   class="block w-full py-3 font-semibold rounded-xl text-center transition-colors
                          {% if tier.is_popular %}bg-indigo-600 hover:bg-indigo-700 text-white{% else %}bg-indigo-100 text-indigo-700 hover:bg-indigo-200{% endif %}">
                    Start Free Trial
                </a>
                {% endif %}
            </div>
            {% endfor %}
        </div>

        {# Back to Home #}
        <div class="text-center mt-12">
            <a href="/" class="text-indigo-600 dark:text-indigo-400 hover:underline">
                &larr; Back to Home
            </a>
        </div>
    </div>
</div>
{% endblock %}