<script setup lang="ts">
import DashboardLayout from '@/layouts/DashboardLayout.vue'

const plans = [
    {
        name: 'Free',
        price: '₹0',
        credits: '10 credits',
        description: 'For trying out AI generation.',
        popular: false,
        features: [
            '10 credits',
            'Standard generation',
            '1024×1024 images',
            'Generation history',
        ],
    },
    {
        name: 'Starter',
        price: '₹199',
        credits: '100 credits',
        description: 'For casual creators.',
        popular: false,
        features: [
            '100 credits',
            'High quality generation',
            'All aspect ratios',
            'Generation history',
            'Image downloads',
        ],
    },
    {
        name: 'Pro',
        price: '₹499',
        credits: '350 credits',
        description: 'For serious creators.',
        popular: true,
        features: [
            '350 credits',
            'Premium generation',
            'High resolution',
            'Priority generation',
            'Commercial usage',
        ],
    },
    {
        name: 'Business',
        price: '₹999',
        credits: '800 credits',
        description: 'For professionals and teams.',
        popular: false,
        features: [
            '800 credits',
            'Premium generation',
            'Priority queue',
            'API access',
            'Commercial usage',
        ],
    },
]
</script>

<template>
    <DashboardLayout title="Plans & Pricing">

        <div class="mx-auto max-w-7xl">

            <div class="mx-auto max-w-2xl text-center">

                <h2 class="text-3xl font-bold">
                    Choose your plan
                </h2>

                <p class="mt-3 text-zinc-400">
                    Get more credits and create more images.
                </p>

            </div>

            <div class="mt-12 grid gap-5 lg:grid-cols-4">

                <div
                    v-for="plan in plans"
                    :key="plan.name"
                    class="relative flex flex-col rounded-3xl border p-6"
                    :class="plan.popular
                        ? 'border-purple-500/40 bg-purple-500/[0.05]'
                        : 'border-white/10 bg-[#111114]'"
                >

                    <div
                        v-if="plan.popular"
                        class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-purple-500 px-4 py-1 text-xs font-bold"
                    >
                        POPULAR
                    </div>

                    <h3 class="text-lg font-semibold">
                        {{ plan.name }}
                    </h3>

                    <p class="mt-2 text-sm text-zinc-500">
                        {{ plan.description }}
                    </p>

                    <div class="mt-6">
                        <span class="text-4xl font-bold">
                            {{ plan.price }}
                        </span>

                        <span
                            v-if="plan.price !== '₹0'"
                            class="text-sm text-zinc-500"
                        >
                            / month
                        </span>
                    </div>

                    <div class="mt-3 text-sm font-medium text-purple-400">
                        {{ plan.credits }}
                    </div>

                    <button
                        class="mt-6 rounded-xl px-4 py-3 text-sm font-semibold"
                        :class="plan.popular
                            ? 'bg-white text-black hover:bg-zinc-200'
                            : 'border border-white/10 bg-white/5 hover:bg-white/10'"
                    >
                        Choose {{ plan.name }}
                    </button>

                    <div class="my-6 border-t border-white/10"></div>

                    <ul class="space-y-3">
                        <li
                            v-for="feature in plan.features"
                            :key="feature"
                            class="flex gap-3 text-sm text-zinc-300"
                        >
                            <span class="text-green-400">✓</span>
                            {{ feature }}
                        </li>
                    </ul>

                </div>

            </div>

        </div>

    </DashboardLayout>
</template>