import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { Check } from "lucide-react";

const tiers = [
  {
    name: "Starter",
    price: "29€",
    description: "Parfait pour les indépendants et petites entreprises.",
    features: ["1 Utilisateur", "Projets illimités", "Support par email", "Analyses de base"],
    cta: "Commencer",
    featured: false,
  },
  {
    name: "Pro",
    price: "99€",
    description: "La solution complète pour les équipes en croissance.",
    features: ["5 Utilisateurs", "Projets illimités", "Support prioritaire", "Analyses avancées", "Intégrations API"],
    cta: "Essai gratuit",
    featured: true,
  },
  {
    name: "Entreprise",
    price: "Sur devis",
    description: "Sécurité et support sur mesure pour les grands groupes.",
    features: ["Utilisateurs illimités", "SSO & Sécurité avancée", "Account Manager dédié", "SLA 99.9%"],
    cta: "Nous contacter",
    featured: false,
  },
];

export default function PricingPage() {
  return (
    <div className="py-24">
      <Container>
        <div className="text-center mb-16">
          <Heading>Des tarifs simples et transparents</Heading>
          <Subheading className="mt-4">Choisissez le plan qui correspond à vos besoins.</Subheading>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {tiers.map((tier) => (
            <Card key={tier.name} className={tier.featured ? "border-black border-2 shadow-xl scale-105" : "border-neutral-200"}>
              <CardHeader>
                <CardTitle className="text-2xl">{tier.name}</CardTitle>
                <div className="mt-4">
                  <span className="text-4xl font-bold">{tier.price}</span>
                  {tier.price !== "Sur devis" && <span className="text-neutral-500">/mois</span>}
                </div>
                <CardDescription className="mt-2">{tier.description}</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-4 mb-8">
                  {tier.features.map((feature) => (
                    <li key={feature} className="flex items-center gap-2 text-sm">
                      <Check className="w-4 h-4 text-green-500" />
                      {feature}
                    </li>
                  ))}
                </ul>
                <Button className="w-full" variant={tier.featured ? "default" : "outline"}>
                  {tier.cta}
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </Container>
    </div>
  );
}