Pricing Team

"use client";

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

export interface PricingTeamProps {
  title?: string;
  /** Price per employee per month (EUR). */
  perSeat?: number;
  min?: number;
  max?: number;
  defaultSize?: number;
  className?: string;
}

/** Team-size calculator: a warm range slider (10–500 people) drives a big serif monthly price, annual saving line and a sapling illustration that grows with team size. */
export function PricingTeam({ title = "Pay for the team you have", perSeat = 9, min = 10, max = 500, defaultSize = 60, className }: PricingTeamProps) {
  const id = useId();
  const [size, setSize] = useState(defaultSize);
  const monthly = size <= 20 ? 0 : size * perSeat * (size > 200 ? 0.8 : 1);
  const annual = monthly * 12 * 0.85;
  const scale = 0.5 + ((size - min) / (max - min)) * 0.5;
  const eur = (n: number) => `€${Math.round(n).toLocaleString("en-US")}`;
  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-center gap-10 rounded-da-lg bg-da-surface p-8 text-da-surface-fg shadow-da-md sm:p-12 md:grid-cols-[1fr_auto]">
          <div>
            <h2 id={`${id}-t`} className="font-da-display text-[clamp(2rem,4vw,2.75rem)] leading-tight tracking-da-display">
              {title}
            </h2>
            <label htmlFor={id} className="mt-8 block text-da-muted-fg">
              Team size: <span className="font-da-mono text-da-fg">{size} people</span>
            </label>
            <input
              id={id}
              type="range"
              min={min}
              max={max}
              step={10}
              value={size}
              onChange={(e) => setSize(Number(e.target.value))}
              aria-valuetext={`${size} people`}
              className="da-focus mt-3 w-full accent-(--da-primary)"
            />
            <div className="mt-8 flex flex-wrap items-end gap-x-6 gap-y-2" aria-live="polite">
              <p>
                <span className="font-da-display text-6xl">{monthly === 0 ? "Free" : eur(monthly)}</span>
                {monthly > 0 && <span className="ml-1 text-da-muted-fg">/ month</span>}
              </p>
              {monthly > 0 && <p className="rounded-da-pill bg-da-accent px-3 py-1 text-sm text-da-accent-fg">{eur(annual)} / year if paid annually (−15%)</p>}
            </div>
            <p className="mt-4 text-sm text-da-muted-fg">Free up to 20 people · 20% off every seat above 200.</p>
          </div>
          <svg aria-hidden viewBox="0 0 160 200" className="mx-auto h-48 w-40 overflow-visible">
            <ellipse cx="80" cy="190" rx="60" ry="8" fill="var(--da-surface-2)" />
            <g style={{ transform: `scale(${scale})`, transformOrigin: "80px 190px", transition: "transform var(--da-duration-slow) var(--da-ease)" }}>
              <path d="M80 190V70" stroke="var(--da-primary)" strokeWidth="5" strokeLinecap="round" />
              <path d="M80 130c-30 0-48-18-48-48 30 0 48 18 48 48Z" fill="var(--da-primary)" opacity=".75" />
              <path d="M80 105c28 0 44-16 44-44-28 0-44 16-44 44Z" fill="var(--da-primary)" />
              <path d="M80 80c-18 0-30-12-30-30 18 0 30 12 30 30Z" fill="color-mix(in oklab, var(--da-primary) 55%, var(--da-accent))" />
            </g>
          </svg>
        </div>
      </div>
    </section>
  );
}

export default PricingTeam;