import { Section } from "@/components/shared/Section";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Check, Trophy, ClipboardList } from "lucide-react";
import { cn } from "@/lib/utils";

const plans = [
  {
    title: "10-Lesson Package",
    price: "€200",
    priceNumber: "200",
    description: "A comprehensive plan for dedicated students aiming for significant improvement.",
    icon: <Trophy className="h-10 w-10 text-accent" />,
    features: [
      "White Repertoire",
      "Black Repertoire",
      "Middlegame Lessons",
      "Endgame Lessons",
      "Daily Analysis of 3 Games",
      "24/7 Availability",
      "Homework",
    ],
    highlight: true,
  },
  {
    title: "One Lesson",
    price: "€25",
    priceNumber: "25",
    description: "A focused session to analyze your games and get comprehensive advice.",
    icon: <ClipboardList className="h-10 w-10 text-accent" />,
    features: [
      "Looking into your games",
      "General advice",
      "Homework",
    ],
    highlight: false,
  },
];

export function Pricing() {
  return (
    <Section
      id="pricing"
      title="Choose Your Path to Improvement"
      description="Whether you're looking for a deep dive or a quick tune-up, there's a plan that fits your goals."
    >
      <div className="grid gap-8 md:grid-cols-2 md:items-start max-w-4xl mx-auto">
        {plans.map((plan, index) => (
          <Card key={index} className={cn("flex flex-col h-full", plan.highlight && "border-primary shadow-lg")}>
            <CardHeader className="items-center text-center">
              <div className="mb-4 rounded-full bg-primary/10 p-4">{plan.icon}</div>
              <CardTitle className="font-headline text-2xl text-primary">{plan.title}</CardTitle>
              <CardDescription className="pt-2">{plan.description}</CardDescription>
            </CardHeader>
            <CardContent className="flex-1 flex flex-col">
              <div className="mb-6 text-center">
                <span className="text-4xl font-bold">{plan.price}</span>
                <span className="text-muted-foreground">{plan.title === '10-Lesson Package' ? '' : ' / lesson'}</span>
              </div>
              <ul className="space-y-3 text-muted-foreground flex-1">
                {plan.features.map((feature, i) => (
                  <li key={i} className="flex items-start">
                    <Check className="mr-3 h-5 w-5 flex-shrink-0 text-accent" />
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>
            </CardContent>
            <CardFooter>
              <Button asChild className="w-full bg-accent hover:bg-accent/90 text-accent-foreground">
                <a 
                  href={`https://paypal.me/VukPieceVeritas/${plan.priceNumber}`}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Select Plan
                </a>
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>
    </Section>
  );
}