Pricing Team

"use client";

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

export interface PricingTeamProps {
  title?: string;
  description?: string;
  perSeat?: number;
  freeSeats?: number;
  min?: number;
  max?: number;
  defaultSeats?: number;
  currency?: string;
  cta?: { label: string; href: string };
  className?: string;
}

/** Team-size calculator: big round −/+ stepper with avatar dots filling up, and a butter summary card showing the monthly price (first seats free). */
export function PricingTeam({
  title = "How big is your team?",
  description = "The first 5 people are always free. After that, it’s $6 per person a month.",
  perSeat = 6,
  freeSeats = 5,
  min = 1,
  max = 50,
  defaultSeats = 8,
  currency = "$",
  cta = { label: "Start with this team", href: "#signup" },
  className,
}: PricingTeamProps) {
  const [seats, setSeats] = useState(defaultSeats);
  const id = useId();
  const paid = Math.max(0, seats - freeSeats);
  const total = paid * perSeat;
  const set = (n: number) => setSeats(Math.min(max, Math.max(min, n)));
  const tints = ["bg-da-accent", "bg-da-secondary", "bg-da-primary/30", "bg-da-warning/50"];

  return (
    <section aria-labelledby={`${id}-t`} className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto grid max-w-4xl items-stretch gap-5 md:grid-cols-[1.3fr_1fr]">
          <div className="rounded-da-lg bg-da-surface p-8 shadow-da-sm">
            <h2 id={`${id}-t`} className="font-da-display text-3xl font-extrabold tracking-da-display">
              {title}
            </h2>
            <p className="mt-2 text-da-muted-fg">{description}</p>
            <div className="mt-8 flex items-center gap-4">
              <button
                type="button"
                onClick={() => set(seats - 1)}
                disabled={seats <= min}
                aria-label="Remove a person"
                className="da-focus da-transition grid size-14 place-items-center rounded-full bg-da-surface-2 hover:bg-da-muted disabled:opacity-40"
              >
                <Minus aria-hidden className="size-5" />
              </button>
              <label htmlFor={id} className="sr-only">
                Team size
              </label>
              <input
                id={id}
                type="number"
                inputMode="numeric"
                min={min}
                max={max}
                value={seats}
                onChange={(e) => set(Number(e.target.value) || min)}
                className="da-focus w-24 rounded-da-md bg-transparent text-center font-da-display text-5xl font-extrabold tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
              />
              <button
                type="button"
                onClick={() => set(seats + 1)}
                disabled={seats >= max}
                aria-label="Add a person"
                className="da-focus da-transition grid size-14 place-items-center rounded-full bg-da-primary text-da-primary-fg hover:-translate-y-0.5 disabled:opacity-40"
              >
                <Plus aria-hidden className="size-5" />
              </button>
              <span className="text-da-muted-fg">people</span>
            </div>
            <div aria-hidden className="mt-8 flex flex-wrap gap-1.5">
              {Array.from({ length: seats }, (_, i) => (
                <span
                  key={i}
                  className={cn(
                    "size-6 rounded-full transition-[scale] duration-(--da-duration) ease-da-emphasized starting:scale-0",
                    tints[i % tints.length],
                    i >= freeSeats && "ring-2 ring-da-primary ring-offset-1 ring-offset-da-surface",
                  )}
                />
              ))}
            </div>
          </div>
          <div className="flex flex-col rounded-da-lg bg-da-warning/25 p-8">
            <p className="font-medium">Your monthly price</p>
            <p className="mt-2 font-da-display text-6xl font-extrabold tracking-da-display" aria-live="polite">
              {currency}
              {total}
            </p>
            <p className="mt-1 text-sm text-da-muted-fg">
              {Math.min(seats, freeSeats)} free + {paid} × {currency}
              {perSeat}
            </p>
            <a
              href={cta.href}
              className="da-focus da-transition mt-auto inline-flex h-12 items-center justify-center rounded-da-pill bg-da-fg font-semibold text-da-bg hover:-translate-y-0.5 max-md:mt-8"
            >
              {cta.label}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

export default PricingTeam;