import Link from "next/link";
import { notFound } from "next/navigation";
import Logo from "@/components/Logo";
import CheckoutForm from "@/components/CheckoutForm";
import LandingBanner from "@/components/LandingBanner";
import { getProductBySlug } from "@/lib/products";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const product = await getProductBySlug(slug);
  if (!product) return { title: "Checkout" };
  return {
    title: `Checkout — ${product.name}`,
    description: `Finalize a compra de ${product.name}`,
  };
}

export default async function CheckoutPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const product = await getProductBySlug(slug);
  if (!product || product.status !== "ativo") notFound();

  const cfg = product.landing;

  return (
    <div
      className="checkout-page"
      style={
        {
          ["--accent" as string]: cfg.accent,
          ["--accent2" as string]: cfg.accent2,
        } as React.CSSProperties
      }
    >
      <header className="co-top">
        <div className="w">
          <Logo />
          <Link href={`/${slug}`} className="co-back">
            ← Voltar à página
          </Link>
        </div>
      </header>
      <LandingBanner cfg={cfg} />
      <main className="w co-main">
        <CheckoutForm product={product} />
      </main>
      <footer className="co-foot">
        <div className="w">
          Pagamento seguro • Pix ou cartão • Acesso ao e-book liberado após confirmação
        </div>
      </footer>
    </div>
  );
}