import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import Link from "next/link";
import { Check } from "lucide-react";

export default function PricingPage() {
  return (
    <div className="container py-8 md:py-12 lg:py-24">
      <div className="mx-auto flex max-w-[980px] flex-col items-center gap-4">
        <h1 className="text-4xl font-extrabold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]">
          Simple, Transparent Pricing
        </h1>
        <p className="max-w-[750px] text-center text-lg text-muted-foreground">
          Start free, upgrade when you need more. No hidden fees, no surprises.
        </p>
      </div>

      <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 pt-12 md:grid-cols-3">
        {/* Free Tier */}
        <Card>
          <CardHeader>
            <CardTitle className="text-2xl">Free</CardTitle>
            <CardDescription>Perfect for trying out Vibn</CardDescription>
            <div className="mt-4">
              <span className="text-4xl font-bold">$0</span>
              <span className="text-muted-foreground">/month</span>
            </div>
          </CardHeader>
          <CardContent className="space-y-4">
            <ul className="space-y-3">
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>Up to 100 sessions/month</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>1 project</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>Basic analytics</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>7-day data retention</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>Cursor integration</span>
              </li>
            </ul>
            <Link href="/auth" className="block">
              <Button variant="outline" className="w-full">
                Get Started
              </Button>
            </Link>
          </CardContent>
        </Card>

        {/* Pro Tier */}
        <Card className="border-primary shadow-lg">
          <div className="absolute right-4 top-4 rounded-full bg-primary px-3 py-1 text-xs text-primary-foreground">
            Popular
          </div>
          <CardHeader>
            <CardTitle className="text-2xl">Pro</CardTitle>
            <CardDescription>For serious developers</CardDescription>
            <div className="mt-4">
              <span className="text-4xl font-bold">$19</span>
              <span className="text-muted-foreground">/month</span>
            </div>
          </CardHeader>
          <CardContent className="space-y-4">
            <ul className="space-y-3">
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span className="font-medium">Unlimited sessions</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span className="font-medium">Unlimited projects</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>Advanced analytics</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>90-day data retention</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>ChatGPT integration</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>GitHub integration</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>Priority support</span>
              </li>
            </ul>
            <Link href="/auth" className="block">
              <Button className="w-full">
                Start Pro Trial
              </Button>
            </Link>
          </CardContent>
        </Card>

        {/* Team Tier */}
        <Card>
          <CardHeader>
            <CardTitle className="text-2xl">Team</CardTitle>
            <CardDescription>For teams and organizations</CardDescription>
            <div className="mt-4">
              <span className="text-4xl font-bold">$49</span>
              <span className="text-muted-foreground">/month</span>
            </div>
          </CardHeader>
          <CardContent className="space-y-4">
            <ul className="space-y-3">
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span className="font-medium">Everything in Pro</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>Up to 10 team members</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>Team analytics</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>Unlimited data retention</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>Custom integrations</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>SSO support</span>
              </li>
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-600" />
                <span>Dedicated support</span>
              </li>
            </ul>
            <Link href="/auth" className="block">
              <Button variant="outline" className="w-full">
                Contact Sales
              </Button>
            </Link>
          </CardContent>
        </Card>
      </div>

      {/* FAQ Section */}
      <div className="mx-auto mt-16 max-w-3xl">
        <h2 className="mb-8 text-center text-3xl font-bold">Frequently Asked Questions</h2>
        <div className="space-y-6">
          <div>
            <h3 className="mb-2 text-lg font-semibold">Can I try Pro for free?</h3>
            <p className="text-muted-foreground">
              Yes! All new accounts get a 14-day free trial of Pro features. No credit card required.
            </p>
          </div>
          <div>
            <h3 className="mb-2 text-lg font-semibold">What happens when I exceed the free tier limits?</h3>
            <p className="text-muted-foreground">
              We&apos;ll notify you when you&apos;re approaching your limits. You can upgrade anytime to continue tracking without interruption.
            </p>
          </div>
          <div>
            <h3 className="mb-2 text-lg font-semibold">Can I cancel anytime?</h3>
            <p className="text-muted-foreground">
              Yes, you can cancel your subscription at any time. You&apos;ll retain access until the end of your billing period.
            </p>
          </div>
          <div>
            <h3 className="mb-2 text-lg font-semibold">Do you offer discounts for students or non-profits?</h3>
            <p className="text-muted-foreground">
              Yes! Contact us at support@vibnai.com for special pricing for students, educators, and non-profit organizations.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}