Pricing Section with Toggle

import type { CSSProperties } from "react"

import { PricingPlans } from "@/components/ui/pricing-plans"

// Midnight by day: Fraunces headings, Geist text, Geist Mono figures, one deep gold accent
const fonts =
  "@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..600,0..100;1,9..144,300..600,0..100&family=Geist:wght@400..600&family=Geist+Mono:wght@400..500&display=swap');"

const settings = {
  label: "Pricing",
  title: "Plans that grow with you.",
  yearlyNote: "Save 20%",
  paper: "#f7f5f0",
  card: "#ffffff",
  ink: "#141a2e",
  muted: "#4a5166",
  primary: "#a8803a",
}

function day(s: typeof settings) {
  const t: Record<string, string> = {
    background: s.paper,
    foreground: s.ink,
    card: s.card,
    primary: s.primary,
    "primary-foreground": "#ffffff",
    "muted-foreground": s.muted,
    ring: s.primary,
  }
  return {
    ...Object.fromEntries(Object.entries(t).flatMap(([k, v]) => [[`--${k}`, v], [`--color-${k}`, v]])),
    "--font-display": "Fraunces, ui-serif, Georgia, serif",
    "--font-sans": "Geist, ui-sans-serif, system-ui, sans-serif",
    "--font-mono": "'Geist Mono', ui-monospace, Menlo, monospace",
  } as CSSProperties
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <div
      className="flex min-h-svh w-full justify-center px-6 py-16"
      style={{ ...day(s), fontFamily: "Geist, ui-sans-serif, system-ui, sans-serif", background: s.paper, color: s.ink } as CSSProperties}
    >
      <style>{fonts}</style>
      <div className="w-full max-w-[1120px]">
        <p className="flex items-center justify-center gap-2 text-[12px] leading-4 tracking-[0.16em] uppercase" style={{ fontFamily: "var(--font-mono)", color: "#8a6a2e" }}>
          <svg viewBox="-6 -6 12 12" className="size-2.5" aria-hidden="true">
            <path d="M0 -6Q0 0 6 0Q0 0 0 6Q0 0 -6 0Q0 0 0 -6Z" fill="currentColor" />
          </svg>
          {s.label}
        </p>
        <h2
          className="mt-5 text-center text-[40px] leading-[1.04] font-[350] tracking-[-0.02em] text-balance md:text-[56px]"
          style={{ fontFamily: "var(--font-display)", fontVariationSettings: '"SOFT" 50' }}
        >
          {s.title}
        </h2>
        <PricingPlans
          className="mt-8"
          yearlyNote={s.yearlyNote}
          plans={[
            {
              name: "Starter",
              monthly: 0,
              yearly: 0,
              unit: "/ month",
              blurb: "For side projects and trying things out.",
              features: ["1 project", "Community templates", "Basic analytics", "Email support"],
              cta: "Start free",
            },
            {
              name: "Pro",
              monthly: 24,
              yearly: 19,
              unit: "/ month",
              blurb: "For freelancers and small teams shipping every week.",
              features: ["Unlimited projects", "Custom domains", "Advanced analytics", "Priority support"],
              cta: "Start 14-day trial",
              featured: true,
            },
            {
              name: "Business",
              monthly: 59,
              yearly: 49,
              unit: "/ month",
              blurb: "For companies that need control and an SLA.",
              features: ["Roles and permissions", "SSO and audit log", "99.9% uptime SLA", "A named contact"],
              cta: "Talk to sales",
              href: "#",
            },
          ]}
        />
      </div>
    </div>
  )
}