zapishis-client/apps/web/app/(main)/pro/page.tsx

import { getSubscription } from '@/actions/api/subscriptions';
import { getSessionUser } from '@/actions/session';
import { PageHeader } from '@/components/navigation';
import { TryFreeButton } from '@/components/subscription';
import { env } from '@/config/env';
import { Button } from '@repo/ui/components/ui/button';
import { ArrowRight, Crown, Infinity as InfinityIcon } from 'lucide-react';
import Link from 'next/link';

export default async function ProPage() {
  const { telegramId } = await getSessionUser();
  const { hasActiveSubscription, usedTrialSubscription } = await getSubscription({
    telegramId,
  });

  const canUseTrial = !usedTrialSubscription;

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
      <PageHeader title="" />
      {/* Hero Section */}
      <div className="px-4 py-16 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-4xl text-center">
          <div className="mb-2 flex justify-center">
            <div className="relative">
              <div className="absolute inset-0 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 opacity-30 blur-xl dark:from-purple-700 dark:to-blue-700" />
              <div className="relative rounded-full bg-gradient-to-r from-purple-600 to-blue-600 p-4 dark:from-purple-700 dark:to-blue-700">
                <Crown className="size-8 text-white" />
              </div>
            </div>
          </div>

          <h1 className="mb-6 text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl">
            Доступ{' '}
            <span className="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent dark:from-purple-700 dark:to-blue-700">
              Pro
            </span>
          </h1>

          <p className="mx-auto mb-8 max-w-2xl text-xl text-gray-600 dark:text-gray-300">
            {hasActiveSubscription
              ? 'Ваш Pro доступ активен!'
              : 'Разблокируйте больше возможностей'}
          </p>

          {!hasActiveSubscription && (
            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
              {canUseTrial && <TryFreeButton />}

              <Button
                asChild
                className={`w-full border-2 text-base font-semibold sm:w-auto ${
                  canUseTrial
                    ? 'border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700'
                    : 'border-0 bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700 dark:from-purple-700 dark:to-blue-700 dark:hover:from-purple-800 dark:hover:to-blue-800'
                }`}
                size="lg"
                variant={canUseTrial ? 'outline' : 'default'}
              >
                <Link href={env.BOT_URL} rel="noopener noreferrer" target="_blank">
                  Приобрести Pro доступ через бота
                  <ArrowRight className="ml-2 size-5" />
                </Link>
              </Button>
            </div>
          )}

          <div className="mx-auto mt-12 max-w-2xl">
            <h2 className="mb-6 text-center text-2xl font-bold text-gray-900 dark:text-white">
              Преимущества
            </h2>
            <div className="space-y-4">
              <div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white/50 p-4 dark:border-gray-700 dark:bg-slate-800/50">
                <div className="mt-1 shrink-0">
                  <InfinityIcon className="size-5 text-purple-600 dark:text-purple-400" />
                </div>
                <p className="text-left text-base leading-relaxed text-gray-700 dark:text-gray-300">
                  Доступно неограниченное количество записей в месяц
                </p>
              </div>

              {/* <div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white/50 p-4 dark:border-gray-700 dark:bg-slate-800/50">
                <div className="mt-1 shrink-0">
                  <Star className="size-5 text-purple-600 dark:text-purple-400" />
                </div>
                <p className="text-left text-base leading-relaxed text-gray-700 dark:text-gray-300">
                  Профиль и аватар выделяются цветом
                </p>
              </div> */}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}