Pricing Tiers

"use client";

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

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

export interface PricingTiersProps {
  title?: string;
  description?: string;
  plans?: PricingTiersPlan[];
  currency?: string;
  className?: string;
}

const DEFAULT_PLANS: PricingTiersPlan[] = [
  {
    name: "Free",
    description: "For trying Nova on your own.",
    monthly: 0,
    yearly: 0,
    features: ["50 messages a day", "2 connected apps", "7-day memory"],
    cta: { label: "Start free", href: "#free" },
  },
  {
    name: "Pro",
    description: "For people who live in Nova.",
    monthly: 20,
    yearly: 16,
    features: ["Unlimited messages", "All integrations", "Unlimited team memory", "Custom agents"],
    cta: { label: "Upgrade to Pro", href: "#pro" },
    featured: true,
  },
  {
    name: "Team",
    description: "Shared memory for the whole company.",
    monthly: null,
    yearly: null,
    priceLabel: "Custom",
    features: ["Everything in Pro", "SSO & SCIM", "Admin analytics", "EU data residency"],
    cta: { label: "Talk to sales", href: "#sales" },
  },
];

/** Three dark plan cards with a monthly/yearly segmented switch; the featured plan gets a periwinkle ring and the glow. */
export function PricingTiers({
  title = "Simple plans. No token math.",
  description = "Start free, upgrade when Nova becomes part of your day.",
  plans = DEFAULT_PLANS,
  currency = "$",
  className,
}: PricingTiersProps) {
  const [yearly, setYearly] = useState(true);

  return (
    <section className={cn("da-section", className)}>
      <div className="da-container">
        <div className="flex flex-col items-center text-center">
          <h2 className="font-da-display text-3xl font-semibold tracking-da-display text-balance sm:text-4xl">{title}</h2>
          <p className="mt-3 text-da-muted-fg">{description}</p>
          <div role="radiogroup" aria-label="Billing period" className="da-stroke mt-8 inline-flex rounded-da-pill bg-da-surface p-1">
            {[
              { value: false, label: "Monthly" },
              { value: true, label: "Yearly · −20%" },
            ].map((o) => (
              <button
                key={o.label}
                type="button"
                role="radio"
                aria-checked={yearly === o.value}
                onClick={() => setYearly(o.value)}
                className={cn(
                  "da-focus da-transition rounded-da-pill px-4 py-1.5 text-sm font-medium",
                  yearly === o.value ? "bg-da-fg text-da-bg" : "text-da-muted-fg hover:text-da-fg",
                )}
              >
                {o.label}
              </button>
            ))}
          </div>
        </div>

        <ul className="mt-12 grid gap-4 lg:grid-cols-3">
          {plans.map((p) => {
            const price = yearly ? p.yearly : p.monthly;
            return (
              <li
                key={p.name}
                className={cn(
                  "relative isolate flex flex-col overflow-hidden rounded-da-lg bg-da-surface p-6 shadow-da-md",
                  p.featured ? "ring-1 ring-da-primary/60" : "da-stroke",
                )}
              >
                {p.featured && <div aria-hidden className="absolute inset-x-0 top-0 -z-10 h-40 rotate-180 bg-(image:--nocturne-glow)" />}
                <div className="flex items-center justify-between">
                  <h3 className="font-da-display text-lg font-medium">{p.name}</h3>
                  {p.featured && <span className="rounded-da-pill bg-da-primary px-2.5 py-0.5 text-[11px] font-semibold text-da-primary-fg">Most popular</span>}
                </div>
                <p className="mt-1 text-sm text-da-muted-fg">{p.description}</p>
                <p className="mt-6 flex items-baseline gap-1">
                  <span className="font-da-display text-4xl font-semibold tracking-da-display">{price === null ? (p.priceLabel ?? "—") : `${currency}${price}`}</span>
                  {price !== null && <span className="text-sm text-da-muted-fg">/ month{yearly && price > 0 ? ", billed yearly" : ""}</span>}
                </p>
                <ul className="mt-6 space-y-2.5 text-sm">
                  {p.features.map((f) => (
                    <li key={f} className="flex items-start gap-2.5">
                      <Check aria-hidden className="mt-0.5 size-4 shrink-0 text-da-primary" />
                      {f}
                    </li>
                  ))}
                </ul>
                <a
                  href={p.cta.href}
                  className={cn(
                    "da-focus da-transition mt-8 inline-flex h-10 items-center justify-center rounded-da-pill px-5 text-sm font-semibold",
                    p.featured ? "bg-da-primary text-da-primary-fg hover:brightness-110" : "da-stroke bg-da-surface-2 hover:bg-da-secondary",
                  )}
                >
                  {p.cta.label}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

export default PricingTiers;