Pricing Credits

"use client";

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

export interface PricingCreditsPack {
  hours: number;
  price: number;
  tag?: string;
}

export interface PricingCreditsProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  packs?: PricingCreditsPack[];
  defaultIndex?: number;
  currency?: string;
  cta?: { label: string; href: string };
  className?: string;
}

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

/** Pay-as-you-go pricing: selectable glass packs of recording hours (radio cards) feeding a gradient summary card with per-hour price. */
export function PricingCredits({
  eyebrow = "Pay as you go",
  title = "Only pay for the meetings you record",
  description = "Buy hours once, use them any time within 12 months. No seats, no subscription.",
  packs = [
    { hours: 10, price: 15 },
    { hours: 40, price: 48, tag: "Popular" },
    { hours: 100, price: 99 },
    { hours: 300, price: 240, tag: "Best value" },
  ],
  defaultIndex = 1,
  currency = "$",
  cta = { label: "Buy hours", href: "#buy" },
  className,
}: PricingCreditsProps) {
  const [sel, setSel] = useState(defaultIndex);
  const id = useId();
  const pack = packs[sel] ?? packs[0]!;
  const perHour = pack.price / pack.hours;

  return (
    <section aria-labelledby={`${id}-t`} className={cn("da-section text-da-fg", className)}>
      <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={`${id}-t`} 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>
        <div className="mx-auto mt-12 grid max-w-4xl gap-6 lg:grid-cols-[1.4fr_1fr]">
          <fieldset>
            <legend className="sr-only">Choose a pack of hours</legend>
            <div className="grid grid-cols-2 gap-3">
              {packs.map((p, i) => (
                <label
                  key={p.hours}
                  className={cn(
                    "da-transition relative cursor-pointer rounded-da-lg p-5 shadow-da-sm has-focus-visible:ring-(length:--da-ring-width) has-focus-visible:ring-da-ring",
                    GLASS,
                    i === sel && "shadow-da-md ring-2 ring-da-primary",
                  )}
                >
                  <input type="radio" name={id} checked={i === sel} onChange={() => setSel(i)} className="sr-only" />
                  {p.tag && (
                    <span className="absolute -top-2.5 right-3 rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent px-2 py-0.5 text-[10px] font-semibold text-da-primary-fg">
                      {p.tag}
                    </span>
                  )}
                  <span className="block font-da-display text-3xl font-semibold tracking-da-display">{p.hours}h</span>
                  <span className="mt-1 block text-sm text-da-muted-fg">
                    {currency}
                    {p.price} · {currency}
                    {(p.price / p.hours).toFixed(2)}/h
                  </span>
                </label>
              ))}
            </div>
          </fieldset>
          <div className="relative overflow-hidden rounded-da-lg bg-gradient-to-br from-da-primary to-da-accent p-6 text-da-primary-fg shadow-da-lg">
            <div aria-hidden className="absolute -top-16 -right-16 size-48 rounded-full bg-da-primary-fg/20 blur-2xl" />
            <p className="relative flex items-center gap-2 text-sm font-semibold">
              <Sparkles aria-hidden className="size-4" /> Your pack
            </p>
            <p className="relative mt-4 font-da-display text-5xl font-semibold tracking-da-display" aria-live="polite">
              {currency}
              {pack.price}
            </p>
            <p className="relative mt-1 text-sm opacity-90">
              {pack.hours} hours · {currency}
              {perHour.toFixed(2)} per hour
            </p>
            <ul className="relative mt-5 space-y-1.5 text-sm">
              <li>✓ ~{Math.round(pack.hours * 2)} meetings of 30 min</li>
              <li>✓ Recaps, search and video included</li>
              <li>✓ Valid 12 months</li>
            </ul>
            <a
              href={cta.href}
              className="da-focus da-transition relative mt-6 flex h-11 items-center justify-center rounded-da-pill bg-da-primary-fg font-semibold text-da-primary hover:-translate-y-0.5"
            >
              {cta.label}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

export default PricingCredits;