<script setup lang="ts">
import { CheckCircle, ArrowRight } from "lucide-vue-next";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";

interface PricingTier {
  name: string;
  price: string;
  description: string;
  features: string[];
  popular?: boolean;
  promo?: string;
}

withDefaults(defineProps<{
  title?: string;
  subtitle?: string;
  tiers: PricingTier[];
}>(), {
  title: "Nos forfaits",
  subtitle: "Simple et transparent",
});
</script>

<template>
  <section class="py-16 md:py-24 bg-muted/30">
    <div class="container mx-auto px-4">
      <div v-if="title || subtitle" class="text-center max-w-2xl mx-auto mb-12">
        <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4 font-display">{{ title }}</h2>
        <p class="text-muted-foreground">{{ subtitle }}</p>
      </div>

      <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        <Card
          v-for="(tier, index) in tiers"
          :key="index"
          :class="`relative ${tier.popular ? 'border-primary border-2 shadow-xl' : ''}`"
        >
          <span v-if="tier.popular" class="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-medium">
            Recommandé
          </span>

          <CardHeader class="text-center pt-8">
            <CardTitle class="text-2xl">{{ tier.name }}</CardTitle>
            <CardDescription>{{ tier.description }}</CardDescription>
            <div class="mt-4">
              <span class="text-4xl font-bold text-primary">{{ tier.price }}</span>
              <span class="text-muted-foreground text-sm">/mois</span>
            </div>
          </CardHeader>

          <CardContent>
            <ul class="space-y-3 mb-6">
              <li v-for="(feature, i) in tier.features" :key="i" class="flex items-start gap-3 text-sm text-muted-foreground">
                <CheckCircle class="w-5 h-5 text-primary flex-shrink-0" />
                <span>{{ feature }}</span>
              </li>
            </ul>

            <Button
              class="w-full"
              :variant="tier.popular ? 'default' : 'outline'"
              as-child
            >
              <a href="/#contact">Choisir ce forfait <ArrowRight class="w-4 h-4 ml-2" /></a>
            </Button>
            <p v-if="tier.promo" class="text-xs text-primary text-center font-medium mt-4">
              {{ tier.promo }}
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  </section>
</template>
