import PricingCard from '../../components/pricingcard';
import Navbar from "../../components/navbar";

export default function Pricing() {
  return (
    <div className="flex flex-col items-center pt-12 bg-gradient p-8">
      <Navbar />
      <h1 className="mt-8 text-4xl font-bold text-center text-black">Pricing</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
      <PricingCard
        title="Basic Plan"
        description="Essential features for casual users"
        price="0"
        includedItems={[
          "AI-generated flashcards",
          "10 flashcards per month",
          "Standard support"
        ]}
        notIncludedItems={[
          "Custom flashcard designs",
          "Advanced analytics",
          "Unlimited flashcards"
        ]}
      />
      <PricingCard
        title="Standard Plan"
        description="Enhanced features for regular users"
        price="3"
        includedItems={[
          "Chat with PDF documents",
          "Up to 100 flashcards",
          "Customizable AI content",
        ]}
        notIncludedItems={[
          "Advanced AI models",
          "Premium support",
          "Unlimited flashcards"
        ]}
      />
      <PricingCard
        title="Premium Plan"
        description="Comprehensive features for power users"
        price="15"
        includedItems={[
          "Unlimited flashcards",
          "AI-generated content",
          "Up to 500 flashcards",
          "Priority support"
        ]}
        notIncludedItems={[
          "Account manager",
          "On-site training"
        ]}
      />
      </div>
    </div>
  );
}