"use client";

import { useState, useEffect, useCallback } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { API_BASE } from "@/lib/config";
import {
  Crown, Zap, Sparkles, Building2, Rocket, BadgeCheck,
  ArrowRight, AlertTriangle, CheckCircle2, XCircle,
  BarChart3, FileText, Layers, Brain, CreditCard,
  RefreshCw, ExternalLink, ChevronRight, Info,
  TrendingUp, Calendar, Gauge
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { cn } from "@/lib/utils";

/* ─────────────────────────────────────────────
   Types
───────────────────────────────────────────── */
interface UserInfo {
  id: string;
  email: string;
  name: string;
  plan: string;
  subscription_status: string;
  docs_translated_this_month: number;
  pages_translated_this_month: number;
  api_calls_this_month: number;
  extra_credits: number;
  subscription_ends_at?: string;
  cancel_at_period_end?: boolean;
}

interface UsageLimits {
  plan: string;
  docs_used: number;
  docs_limit: number;
  pages_used: number;
  pages_limit: number;
  api_calls_used: number;
  api_calls_limit: number;
  can_translate: boolean;
  upgrade_required: boolean;
  extra_credits: number;
}

interface Plan {
  id: string;
  name: string;
  price_monthly: number;
  price_yearly: number;
  docs_per_month: number;
  max_pages_per_doc: number;
  max_file_size_mb: number;
  features: string[];
  ai_translation: boolean;
  ai_tier?: string;
  api_access: boolean;
  priority_processing: boolean;
  team_seats?: number;
  popular?: boolean;
  badge?: string;
  description?: string;
}

/* ─────────────────────────────────────────────
   Helpers
───────────────────────────────────────────── */
const PLAN_ICONS: Record<string, any> = {
  free: Sparkles, starter: Zap, pro: Crown, business: Building2, enterprise: Rocket,
};
const PLAN_COLORS: Record<string, string> = {
  free: "from-slate-600 to-slate-700",
  starter: "from-blue-600 to-blue-700",
  pro: "from-violet-600 to-violet-700",
  business: "from-emerald-600 to-emerald-700",
  enterprise: "from-amber-600 to-amber-700",
};
const PLAN_LABELS: Record<string, string> = {
  free: "Gratuit", starter: "Starter", pro: "Pro",
  business: "Business", enterprise: "Entreprise",
};

function pct(used: number, limit: number) {
  if (limit === -1) return 0;
  return Math.min(100, Math.round((used / limit) * 100));
}

function fmtLimit(val: number) {
  return val === -1 ? "Illimité" : String(val);
}

function UsageBar({
  label, used, limit, icon,
}: { label: string; used: number; limit: number; icon: React.ReactNode }) {
  const p = pct(used, limit);
  const isUnlimited = limit === -1;
  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between text-sm">
        <div className="flex items-center gap-2 text-muted-foreground">
          {icon}
          {label}
        </div>
        <span className={cn(
          "font-mono text-xs",
          isUnlimited ? "text-emerald-500" :
            p >= 90 ? "text-destructive" : p >= 70 ? "text-warning" : "text-muted-foreground"
        )}>
          {isUnlimited ? "∞" : `${used} / ${limit}`}
        </span>
      </div>
      {!isUnlimited && (
        <div className="h-1.5 bg-secondary rounded-full overflow-hidden">
          <div
            className={cn(
              "h-full rounded-full transition-all duration-700",
              p >= 90 ? "bg-destructive" : p >= 70 ? "bg-warning" : "bg-accent"
            )}
            style={{ width: `${p}%` }}
          />
        </div>
      )}
    </div>
  );
}

/* ─────────────────────────────────────────────
   Main component
───────────────────────────────────────────── */
export default function SubscriptionPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const targetPlan = searchParams.get("plan");

  const [user, setUser] = useState<UserInfo | null>(null);
  const [usage, setUsage] = useState<UsageLimits | null>(null);
  const [plans, setPlans] = useState<Plan[]>([]);
  const [isYearly, setIsYearly] = useState(false);
  const [loadingPortal, setLoadingPortal] = useState(false);
  const [cancelConfirm, setCancelConfirm] = useState(false);
  const [statusMsg, setStatusMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);
  const [loading, setLoading] = useState(true);
  const [isProcessingCheckout, setIsProcessingCheckout] = useState(false);

  const token = typeof window !== "undefined" ? localStorage.getItem("token") : null;
  const authHeaders = { Authorization: `Bearer ${token}` };

  const fetchData = useCallback(async () => {
    if (!token) { router.push("/auth/login?redirect=/settings/subscription"); return; }
    try {
      const [meRes, usageRes, plansRes] = await Promise.all([
        fetch(`${API_BASE}/api/v1/auth/me`, { headers: authHeaders }),
        fetch(`${API_BASE}/api/v1/auth/usage`, { headers: authHeaders }),
        fetch(`${API_BASE}/api/v1/auth/plans`),
      ]);
      if (meRes.ok) {
        const j = await meRes.json();
        setUser(j.data ?? j);
      }
      if (usageRes.ok) {
        const j = await usageRes.json();
        setUsage(j.data ?? j);
      }
      if (plansRes.ok) {
        const j = await plansRes.json();
        const d = j.data ?? j;
        if (Array.isArray(d.plans)) setPlans(d.plans);
      }
    } catch {
      // ignore
    } finally {
      setLoading(false);
    }
  }, [token]);


  useEffect(() => { fetchData(); }, [fetchData]);

  const handleBillingPortal = async () => {
    setLoadingPortal(true);
    try {
      const res = await fetch(`${API_BASE}/api/v1/auth/billing-portal`, { headers: authHeaders });
      const j = await res.json();
      const url = j.data?.url ?? j.url;
      if (url) window.open(url, "_blank");
      else setStatusMsg({ type: "err", text: "Portail de facturation non disponible pour le moment." });
    } catch {
      setStatusMsg({ type: "err", text: "Impossible d'accéder au portail de facturation." });
    } finally {
      setLoadingPortal(false);
    }
  };

  const handleCancel = async () => {
    if (!cancelConfirm) { setCancelConfirm(true); return; }
    try {
      const res = await fetch(`${API_BASE}/api/v1/auth/cancel-subscription`, {
        method: "POST",
        headers: authHeaders,
      });
      if (res.ok) {
        setStatusMsg({ type: "ok", text: "Abonnement annulé. Vous conservez l'accès jusqu'à la fin de la période en cours." });
        setCancelConfirm(false);
        fetchData();
      } else {
        setStatusMsg({ type: "err", text: "Erreur lors de l'annulation. Réessayez ou contactez le support." });
      }
    } catch {
      setStatusMsg({ type: "err", text: "Erreur réseau." });
    }
  };

  const handleSubscribe = async (planId: string) => {
    if (planId === "enterprise") {
      window.location.href = "mailto:contact@votre-domaine.com?subject=Offre Enterprise";
      return;
    }

    setStatusMsg({
      type: "ok",
      text: `Création de votre session de paiement pour le forfait ${PLAN_LABELS[planId] ?? planId}…`,
    });

    try {
      const res = await fetch(`${API_BASE}/api/v1/auth/create-checkout`, {
        method: "POST",
        headers: { ...authHeaders, "Content-Type": "application/json" },
        body: JSON.stringify({ plan: planId, billing_period: isYearly ? "yearly" : "monthly" }),
      });
      const data = await res.json();

      if (!res.ok) {
        const msg = data.message ?? data.error ?? "Erreur lors de la création de la session de paiement.";
        setStatusMsg({ type: "err", text: msg });
        return;
      }

      const url = data.data?.url ?? data.url;
      if (url) {
        window.location.replace(url);
      } else {
        await handleBillingPortal();
      }
    } catch {
      setStatusMsg({ type: "err", text: "Erreur réseau lors de la création de la session de paiement." });
    } finally {
      setIsProcessingCheckout(false);
    }
  };

  // Handle targetPlan from URL query param automatically (MUST be after handleSubscribe declaration)
  useEffect(() => {
    if (targetPlan && plans.length > 0 && !loading && !isProcessingCheckout) {
      const p = plans.find(plan => plan.id === targetPlan);
      if (p && user?.plan !== targetPlan) {
        setIsProcessingCheckout(true);
        // Clean URL to prevent infinite re-triggering
        router.replace("/settings/subscription", { scroll: false });
        handleSubscribe(targetPlan);
      }
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [targetPlan, plans, loading, user]);

  const handleCreditsCheckout = async (packageIndex: number) => {
    setStatusMsg({
      type: "ok",
      text: "Préparation de l'achat de crédits...",
    });
    
    try {
      const res = await fetch(`${API_BASE}/api/v1/auth/create-credits-checkout`, {
        method: "POST",
        headers: { ...authHeaders, "Content-Type": "application/json" },
        body: JSON.stringify({ package_index: packageIndex }),
      });
      const data = await res.json();
      
      const url = data.data?.url ?? data.url;
      if (url) {
        window.location.replace(url);
      } else {
        setTimeout(() => handleBillingPortal(), 1000);
      }
    } catch {
      setStatusMsg({ type: "err", text: "Erreur lors de la création de la session de paiement." });
    }
  };

  if (loading || isProcessingCheckout) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <RefreshCw className="w-8 h-8 text-violet-400 animate-spin" />
      </div>
    );
  }

  const currentPlanId = user?.plan ?? "free";
  const currentPlanLabel = PLAN_LABELS[currentPlanId] ?? currentPlanId;
  const Icon = PLAN_ICONS[currentPlanId] ?? Sparkles;
  const gradient = PLAN_COLORS[currentPlanId] ?? PLAN_COLORS.free;
  const currentPlanData = plans.find((p) => p.id === currentPlanId);

  const otherPlans = plans.filter((p) => p.id !== currentPlanId);
  const upgradePlans = otherPlans.filter((p) => {
    const order = ["free", "starter", "pro", "business", "enterprise"];
    return order.indexOf(p.id) > order.indexOf(currentPlanId);
  });
  const downgradePlans = otherPlans.filter((p) => {
    const order = ["free", "starter", "pro", "business", "enterprise"];
    return order.indexOf(p.id) < order.indexOf(currentPlanId);
  });

  return (
    <div className="max-w-4xl mx-auto px-4 py-10 space-y-8">
      <div>
        <h1 className="text-3xl font-bold text-foreground">Mon abonnement</h1>
        <p className="text-muted-foreground mt-1">Gérez votre forfait, votre usage et votre facturation.</p>
      </div>

      {/* Status message */}
      {statusMsg && (
        <div className={cn(
          "flex items-start gap-3 p-4 rounded-xl border",
          statusMsg.type === "ok"
            ? "bg-success/10 border-success/30 text-success"
            : "bg-destructive/10 border-destructive/30 text-destructive"
        )}>
          {statusMsg.type === "ok"
            ? <CheckCircle2 className="w-5 h-5 flex-shrink-0 mt-0.5" />
            : <XCircle className="w-5 h-5 flex-shrink-0 mt-0.5" />}
          <span className="text-sm">{statusMsg.text}</span>
          <button className="ml-auto text-muted-foreground hover:text-foreground" onClick={() => setStatusMsg(null)}>✕</button>
        </div>
      )}

      {/* ── Current plan card ── */}
      <div className={cn("rounded-2xl p-1 bg-gradient-to-br", gradient)}>
        <div className="bg-card/95 rounded-xl p-6">
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div className="flex items-center gap-4">
              <div className={cn("p-3 rounded-xl bg-gradient-to-br", gradient)}>
                <Icon className="w-6 h-6 text-white" />
              </div>
              <div>
                <div className="flex items-center gap-2">
                  <h2 className="text-xl font-bold text-foreground">Forfait {currentPlanLabel}</h2>
                  {user?.subscription_status && (
                    <Badge className={cn(
                      "text-xs",
                      user.subscription_status === "active" ? "bg-success/10 text-success border-success/30" :
                      user.subscription_status === "trialing" ? "bg-primary/10 text-primary border-primary/30" :
                      "bg-warning/10 text-warning border-warning/30"
                    )}>
                      {user.subscription_status === "active" ? "Actif" :
                       user.subscription_status === "trialing" ? "Essai" :
                       user.subscription_status === "canceled" ? "Annulé" :
                       user.subscription_status}
                    </Badge>
                  )}
                </div>
                {user?.subscription_ends_at && (
                  <p className="text-muted-foreground text-sm mt-0.5">
                    <Calendar className="w-3.5 h-3.5 inline mr-1" />
                    {user.cancel_at_period_end ? "Expire le " : "Renouvellement le "}
                    {new Date(user.subscription_ends_at).toLocaleDateString("fr-FR", { day: "2-digit", month: "long", year: "numeric" })}
                  </p>
                )}
              </div>
            </div>
            <div className="flex flex-wrap gap-2">
              {currentPlanId !== "free" && (
                <Button
                  variant="outline"
                  onClick={handleBillingPortal}
                  disabled={loadingPortal}
                >
                  {loadingPortal ? <RefreshCw className="w-4 h-4 animate-spin mr-1" /> : <CreditCard className="w-4 h-4 mr-1" />}
                  Portail de facturation
                  <ExternalLink className="w-3.5 h-3.5 ml-1" />
                </Button>
              )}
              {upgradePlans.length > 0 && (
                <Button
                  className="bg-accent hover:bg-accent/90 text-accent-foreground"
                  onClick={() => router.push("/pricing")}
                >
                  <TrendingUp className="w-4 h-4 mr-1" /> Upgrader
                </Button>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* ── Usage this month ── */}
      {usage && (
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg flex items-center gap-2">
              <BarChart3 className="w-5 h-5 text-accent" />
              Utilisation ce mois
              <span className="ml-auto text-xs text-muted-foreground font-normal">Remise à zéro chaque 1er du mois</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-5">
            <UsageBar
              label="Documents traduits"
              used={usage.docs_used}
              limit={usage.docs_limit}
              icon={<FileText className="w-4 h-4 text-muted-foreground" />}
            />
            <UsageBar
              label="Pages traduites"
              used={usage.pages_used}
              limit={usage.pages_limit}
              icon={<Layers className="w-4 h-4 text-muted-foreground" />}
            />
            {usage.api_calls_limit !== 0 && (
              <UsageBar
                label="Appels API"
                used={usage.api_calls_used}
                limit={usage.api_calls_limit}
                icon={<Gauge className="w-4 h-4 text-muted-foreground" />}
              />
            )}
            {usage.extra_credits > 0 && (
              <div className="flex items-center gap-3 p-3 rounded-xl bg-warning/10 border border-warning/20 text-sm">
                <Info className="w-4 h-4 text-warning flex-shrink-0" />
                <span className="text-warning">
                  {usage.extra_credits} crédit{usage.extra_credits > 1 ? "s" : ""} supplémentaire{usage.extra_credits > 1 ? "s" : ""} disponible{usage.extra_credits > 1 ? "s" : ""}
                </span>
              </div>
            )}
            {usage.upgrade_required && (
              <div className="flex items-center gap-3 p-3 rounded-xl bg-destructive/10 border border-destructive/20 text-sm">
                <AlertTriangle className="w-4 h-4 text-destructive flex-shrink-0" />
                <span className="text-destructive">
                  Quota atteint. Achetez des crédits ou upgradez votre forfait pour continuer.
                </span>
                <Button size="sm" className="ml-auto bg-destructive hover:bg-destructive/90 text-destructive-foreground flex-shrink-0" onClick={() => router.push("/pricing")}>
                  Upgrader
                </Button>
              </div>
            )}
          </CardContent>
        </Card>
      )}

      {/* ── Plan features recap ── */}
      {currentPlanData && (
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg flex items-center gap-2">
              <BadgeCheck className="w-5 h-5 text-success" />
              Inclus dans votre forfait
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid sm:grid-cols-2 gap-2">
              {currentPlanData.features.map((f, i) => (
                <div key={i} className="flex items-start gap-2 text-sm">
                  <CheckCircle2 className="w-4 h-4 text-success flex-shrink-0 mt-0.5" />
                  <span className="text-muted-foreground">{f}</span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      {/* ── Upgrade options ── */}
      {upgradePlans.length > 0 && (
        <div>
          <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
            <TrendingUp className="w-5 h-5 text-accent" />
            Passer à un forfait supérieur
          </h3>

          {/* Billing toggle */}
          <div className="inline-flex items-center gap-2 bg-muted/60 border border-border/50 rounded-full p-1 mb-4">
            <button
              onClick={() => setIsYearly(false)}
              className={cn("px-4 py-1.5 rounded-full text-xs font-medium transition-all", !isYearly ? "bg-foreground text-background" : "text-muted-foreground")}
            >Mensuel</button>
            <button
              onClick={() => setIsYearly(true)}
              className={cn("px-4 py-1.5 rounded-full text-xs font-medium transition-all flex items-center gap-1.5", isYearly ? "bg-foreground text-background" : "text-muted-foreground")}
            >
              Annuel
              <span className="bg-success text-success-foreground text-xs px-1.5 py-0.5 rounded-full">−20 %</span>
            </button>
          </div>

          <div className="grid sm:grid-cols-2 gap-4">
            {upgradePlans.map((plan) => {
              const PIcon = PLAN_ICONS[plan.id] ?? Zap;
              const grad = PLAN_COLORS[plan.id] ?? PLAN_COLORS.starter;
              const price = plan.price_monthly === -1
                ? null
                : isYearly
                  ? (plan.price_yearly / 12).toFixed(2)
                  : plan.price_monthly.toFixed(2);

              return (
                <div
                  key={plan.id}
                  className={cn(
                    "relative rounded-2xl border bg-card overflow-hidden",
                    plan.popular ? "border-accent/50" : "border-border/40"
                  )}
                >
                  {plan.badge && (
                    <div className="absolute top-3 right-3">
                      <Badge className="bg-accent text-accent-foreground text-xs">{plan.badge}</Badge>
                    </div>
                  )}
                  <div className={cn("p-4 bg-gradient-to-br", grad)}>
                    <div className="flex items-center gap-2">
                      <PIcon className="w-5 h-5 text-white" />
                      <span className="font-bold text-white">{plan.name}</span>
                    </div>
                    <div className="mt-2 flex items-end gap-1">
                      {price === null ? (
                        <span className="text-2xl font-bold text-white">Sur devis</span>
                      ) : (
                        <>
                          <span className="text-2xl font-bold text-white">{price} €</span>
                          <span className="text-white/70 text-sm pb-0.5">/mois</span>
                        </>
                      )}
                    </div>
                  </div>
                  <div className="p-4 space-y-2">
                    {plan.features.slice(0, 4).map((f, i) => (
                      <div key={i} className="flex items-start gap-2 text-xs text-muted-foreground">
                        <CheckCircle2 className="w-3.5 h-3.5 text-success flex-shrink-0 mt-0.5" />
                        {f}
                      </div>
                    ))}
                    {plan.features.length > 4 && (
                      <p className="text-xs text-muted-foreground">+{plan.features.length - 4} autres avantages…</p>
                    )}
                    <button
                      onClick={() => handleSubscribe(plan.id)}
                      className={cn(
                        "mt-3 w-full py-2 rounded-xl text-sm font-semibold text-white flex items-center justify-center gap-2 transition-all",
                        `bg-gradient-to-r ${grad} hover:opacity-90`
                      )}
                    >
                      Passer au forfait {plan.name} <ChevronRight className="w-4 h-4" />
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* ── Buy credits ── */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-lg flex items-center gap-2">
            <CreditCard className="w-5 h-5 text-warning" />
            Crédits supplémentaires
          </CardTitle>
          <p className="text-muted-foreground text-sm">1 crédit = 1 page traduite. Utilisables sans expiration.</p>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
            {[
              { credits: 50,   price: 5  },
              { credits: 150,  price: 12, popular: true },
              { credits: 500,  price: 35 },
              { credits: 1000, price: 60 },
            ].map((pkg, i) => (
              <div
                key={i}
                className={cn(
                  "relative p-4 rounded-xl border text-center",
                  pkg.popular
                    ? "border-warning/50 bg-warning/10"
                    : "border-border/40 bg-muted/20"
                )}
              >
                {pkg.popular && (
                  <div className="absolute -top-2 left-1/2 -translate-x-1/2 px-2 py-0.5 bg-warning text-warning-foreground text-xs rounded-full font-bold whitespace-nowrap">
                    Meilleure valeur
                  </div>
                )}
                <div className="text-xl font-bold text-foreground">{pkg.credits}</div>
                <div className="text-muted-foreground text-xs mb-2">crédits</div>
                <div className="text-lg font-bold text-foreground">{pkg.price} €</div>
                <div className="text-muted-foreground text-xs mb-3">{((pkg.price / pkg.credits) * 100).toFixed(0)} cts/crédit</div>
                <button
                  onClick={() => handleCreditsCheckout(i)}
                  className="w-full py-1.5 rounded-lg bg-muted hover:bg-muted/80 text-foreground text-xs transition-all"
                >
                  Acheter
                </button>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* ── Downgrade / Cancel ── */}
      {currentPlanId !== "free" && (
        <Card className="border-destructive/20">
          <CardHeader className="pb-3">
            <CardTitle className="text-lg text-destructive flex items-center gap-2">
              <AlertTriangle className="w-5 h-5" />
              Zone de danger
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {downgradePlans.length > 0 && (
              <div>
                <p className="text-sm text-muted-foreground mb-2">Rétrograder vers un forfait inférieur :</p>
                <div className="flex flex-wrap gap-2">
                  {downgradePlans.map((p) => (
                    <button
                      key={p.id}
                      onClick={() => handleSubscribe(p.id)}
                      className="px-4 py-2 rounded-lg bg-muted hover:bg-secondary text-muted-foreground text-sm border border-border/50 transition-all"
                    >
                      Passer à {p.name}
                    </button>
                  ))}
                </div>
              </div>
            )}

            <div className="border-t border-border/30 pt-4">
              {!cancelConfirm ? (
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-foreground">Annuler mon abonnement</p>
                    <p className="text-xs text-muted-foreground mt-0.5">Vous conservez l'accès jusqu'à la fin de la période payée.</p>
                  </div>
                  <Button
                    variant="outline"
                    className="border-destructive/50 text-destructive hover:bg-destructive/10"
                    onClick={() => setCancelConfirm(true)}
                  >
                    Annuler l'abonnement
                  </Button>
                </div>
              ) : (
                <div className="p-4 rounded-xl bg-destructive/10 border border-destructive/30 space-y-3">
                  <p className="text-sm text-destructive font-medium">
                    ⚠️ Confirmer l'annulation ?
                  </p>
                  <p className="text-xs text-muted-foreground">
                    Votre abonnement sera annulé et vous reviendrez au forfait Gratuit à la fin de la période en cours.
                    Vos documents traduits resteront accessibles pendant 30 jours.
                  </p>
                  <div className="flex gap-2">
                    <Button
                      className="bg-destructive hover:bg-destructive/90 text-destructive-foreground"
                      onClick={handleCancel}
                    >
                      Oui, annuler mon abonnement
                    </Button>
                    <Button
                      variant="outline"
                      onClick={() => setCancelConfirm(false)}
                    >
                      Non, conserver
                    </Button>
                  </div>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      )}

      {/* Link to full pricing */}
      <div className="text-center">
        <button
          onClick={() => router.push("/pricing")}
          className="text-accent hover:text-accent/80 text-sm flex items-center gap-1 mx-auto"
        >
          Voir tous les forfaits en détail <ChevronRight className="w-4 h-4" />
        </button>
      </div>
    </div>
  );
}