import { PricingTemplate } from "@/components/ui/pricing-template"

const siteNav = (current?: string) => [
  { label: "Product", href: "#product" },
  { label: "Pricing", href: "#pricing", current: current === "pricing" },
  { label: "Customers", href: "#customers" },
  { label: "Changelog", href: "#changelog", current: current === "changelog" },
];

const pricingIntro: Parameters<typeof PricingTemplate>[0]["intro"] = { eyebrow: "Pricing", title: "Pay for the seats that close the books", lead: "Every plan includes unlimited entities on review, daily matching and the audit trail export.", facts: ["14 days free", "No card to start", "Cancel from settings"] };

export function PricingPageDemo() {
  return (
    <div className="h-[720px] w-full overflow-auto rounded-[14px] shadow-[0_0_0_1px_var(--border)]">
      <PricingTemplate
        brand="Halden"
        nav={siteNav("pricing")}
        signIn={{ label: "Sign in", href: "#" }}
        primary={heroes.primary!}
        intro={pricingIntro}
        pricing={{ ...pricing, eyebrow: undefined, title: "Choose a plan" }}
        comparison={comparisons}
        faq={faqs}
        cta={ctas}
        footer={footers}
      />
    </div>
  );
}