Pricing Frosted

"use client";

import { useId, useState } from "react";
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface PricingFrostedPlan {
  name: string;
  description: string;
  monthly: number | null;
  yearly: number | null;
  unit?: string;
  features: string[];
  cta: { label: string; href: string };
  featured?: boolean;
}

export interface PricingFrostedProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  plans?: PricingFrostedPlan[];
  currency?: string;
  defaultBilling?: "monthly" | "yearly";
  className?: string;
}

const DEFAULT_PLANS: PricingFrostedPlan[] = [
  {
    name: "Starter",
    description: "For individuals who want their meetings to take notes for them.",
    monthly: 0,
    yearly: 0,
    unit: "forever",
    features: ["10 recorded meetings / month", "AI summaries & action items", "Async video up to 5 min", "Slack sharing"],
    cta: { label: "Get started", href: "#signup" },
  },
  {
    name: "Team",
    description: "For teams replacing status meetings with async updates.",
    monthly: 18,
    yearly: 14,
    unit: "per seat / month",
    features: ["Unlimited meetings", "Ask-your-meetings search", "Linear, Jira & Notion sync", "Custom vocabulary", "Admin & usage analytics"],
    cta: { label: "Start 14-day trial", href: "#trial" },
    featured: true,
  },
  {
    name: "Enterprise",
    description: "For organisations with security and compliance needs.",
    monthly: null,
    yearly: null,
    unit: "annual billing",
    features: ["SAML SSO & SCIM", "EU data residency", "Redaction policies", "Dedicated success manager"],
    cta: { label: "Contact sales", href: "#sales" },
  },
];

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

export function PricingFrosted({
  eyebrow = "Pricing",
  title = "Start free. Scale when your team does.",
  description = "Every plan includes unlimited viewers — only people who record need a seat.",
  plans = DEFAULT_PLANS,
  currency = "$",
  defaultBilling = "yearly",
  className,
}: PricingFrostedProps) {
  const [billing, setBilling] = useState(defaultBilling);
  const titleId = useId();

  return (
    <section className={cn("da-section text-da-fg", className)} aria-labelledby={titleId}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h2 id={titleId} className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3.25rem)] leading-[1.08] font-semibold tracking-da-display text-balance">
            {title}
          </h2>
          <p className="mt-4 text-lg text-da-muted-fg">{description}</p>

          <div role="group" aria-label="Billing period" className={cn("mt-8 inline-flex rounded-da-pill p-1 shadow-da-sm", GLASS)}>
            {(["monthly", "yearly"] as const).map((b) => (
              <button
                key={b}
                type="button"
                aria-pressed={billing === b}
                onClick={() => setBilling(b)}
                className={cn(
                  "da-focus da-transition rounded-da-pill px-5 py-2 text-sm font-semibold capitalize",
                  billing === b ? "bg-da-fg text-da-bg shadow-da-sm" : "text-da-muted-fg hover:text-da-fg",
                )}
              >
                {b}
                {b === "yearly" && <span className={cn("ml-1.5 text-xs", billing === b ? "opacity-80" : "text-da-success")}>−22%</span>}
              </button>
            ))}
          </div>
        </div>

        <ul className="mt-14 grid items-stretch gap-6 lg:grid-cols-3">
          {plans.map((plan) => {
            const price = billing === "monthly" ? plan.monthly : plan.yearly;
            const card = (
              <div
                className={cn(
                  "relative flex h-full flex-col rounded-da-lg p-7",
                  plan.featured ? "bg-da-surface shadow-da-lg backdrop-blur-da backdrop-saturate-150 lg:-my-3 lg:h-[calc(100%+1.5rem)]" : cn(GLASS, "shadow-da-md"),
                )}
              >
                {plan.featured && (
                  // Gradient border: a masked 1.5px ring, so the glass inside stays clear
                  <span
                    aria-hidden
                    className="pointer-events-none absolute inset-0 rounded-[inherit] bg-gradient-to-br from-da-primary via-da-accent to-da-primary/30 p-[1.5px] [mask:linear-gradient(#000_0_0)_content-box_exclude,linear-gradient(#000_0_0)]"
                  />
                )}
                <div className="flex items-center justify-between">
                  <h3 className="font-da-display text-lg font-semibold tracking-da-display">{plan.name}</h3>
                  {plan.featured && (
                    <span className="rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent px-2.5 py-1 text-xs font-semibold text-da-primary-fg">Most popular</span>
                  )}
                </div>
                <p className="mt-2 min-h-[2lh] text-sm text-da-muted-fg">{plan.description}</p>
                <p className="mt-6 flex h-14 items-baseline gap-2">
                  <span className="font-da-display text-5xl font-semibold tracking-da-display tabular-nums">{price === null ? "Custom" : `${currency}${price}`}</span>
                  {plan.unit && <span className="text-sm text-da-muted-fg">{plan.unit}</span>}
                </p>
                <a
                  href={plan.cta.href}
                  className={cn(
                    "da-focus da-transition mt-6 inline-flex h-11 items-center justify-center rounded-da-pill text-sm font-semibold hover:-translate-y-0.5",
                    plan.featured ? "bg-gradient-to-r from-da-primary to-da-accent text-da-primary-fg shadow-da-md" : "da-stroke bg-da-secondary text-da-secondary-fg shadow-da-sm",
                  )}
                >
                  {plan.cta.label}
                </a>
                <ul className="mt-7 space-y-3 text-sm">
                  {plan.features.map((f) => (
                    <li key={f} className="flex gap-3">
                      <span aria-hidden className="mt-0.5 grid size-4 shrink-0 place-items-center rounded-full bg-da-primary/15 text-da-primary">
                        <Check className="size-3" strokeWidth={3} />
                      </span>
                      {f}
                    </li>
                  ))}
                </ul>
              </div>
            );
            return (
              <li key={plan.name}>{card}</li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

export default PricingFrosted;