import { getTranslations } from "next-intl/server";
import { CheckCircle } from "lucide-react";
import Link from "next/link";

export async function generateMetadata({
  params: { locale },
}: {
  params: { locale: string };
}) {
  const t = await getTranslations({ locale, namespace: "metadata" });
  return {
    title: `${t("title")} - Buchung erfolgreich`,
    description: t("description"),
  };
}

export default function BookingSuccessPage({
  params: { locale },
}: {
  params: { locale: string };
}) {
  const isDe = locale === "de";

  return (
    <div className="py-16">
      <div className="max-w-2xl mx-auto px-4 text-center">
        <CheckCircle className="w-16 h-16 text-brand-green mx-auto mb-6" />
        <h1 className="text-4xl font-bold mb-4">
          {isDe ? "Anzahlung erfolgreich!" : "Deposit successful!"}
        </h1>
        <p className="text-brand-grey text-lg mb-8">
          {isDe
            ? "Vielen Dank für Ihre Buchung. Sie erhalten in Kürze eine Bestätigungs-E-Mail. Die monatlichen Rechnungen werden Ihnen über das Kundenportal zur Verfügung gestellt."
            : "Thank you for your booking. You will receive a confirmation email shortly. Monthly invoices will be available through the customer portal."}
        </p>
        <Link
          href={`/${locale}`}
          className="inline-block bg-brand-green text-white font-semibold px-8 py-4 rounded-full hover:bg-brand-green-dark transition-colors"
        >
          {isDe ? "Zurück zur Startseite" : "Back to home"}
        </Link>
      </div>
    </div>
  );
}