Pricing Slider

"use client";

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

export interface PricingSliderTier {
  /** Upper bound of projects for this tier (inclusive). */
  upTo: number;
  pricePerProject: number;
}

export interface PricingSliderProps {
  kicker?: string;
  title?: string;
  description?: string;
  min?: number;
  max?: number;
  defaultValue?: number;
  tiers?: PricingSliderTier[];
  currency?: string;
  included?: string[];
  cta?: { label: string; href: string };
  className?: string;
}

export function PricingSlider({
  kicker = "[ 04 ] Pricing",
  title = "Pay per project. Readers are free.",
  description = "Slide to your number of projects. Volume discounts kick in automatically.",
  min = 1,
  max = 50,
  defaultValue = 8,
  tiers = [
    { upTo: 1, pricePerProject: 0 },
    { upTo: 10, pricePerProject: 9 },
    { upTo: 30, pricePerProject: 7 },
    { upTo: Infinity, pricePerProject: 5 },
  ],
  currency = "$",
  included = ["Unlimited releases & readers", "AI summaries", "In-app widget", "Email & Slack digests", "Custom domain"],
  cta = { label: "Start 14-day trial", href: "#trial" },
  className,
}: PricingSliderProps) {
  const [projects, setProjects] = useState(defaultValue);
  const sliderId = useId();
  const tier = tiers.find((t) => projects <= t.upTo) ?? tiers[tiers.length - 1];
  const perProject = tier?.pricePerProject ?? 0;
  const total = projects * perProject;
  const pct = ((projects - min) / (max - min)) * 100;

  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby={`${sliderId}-title`}>
      <div className="da-container grid gap-10 lg:grid-cols-[1fr_1.1fr] lg:items-center">
        <div>
          <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
          <h2 id={`${sliderId}-title`} className="mt-3 font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[0.95] tracking-da-display uppercase">
            {title}
          </h2>
          <p className="mt-4 text-lg text-da-muted-fg">{description}</p>
          <ul className="mt-8 grid gap-3 sm:grid-cols-2">
            {included.map((i) => (
              <li key={i} className="flex items-center gap-3 font-bold">
                <span aria-hidden className="da-stroke size-4 bg-da-success" />
                {i}
              </li>
            ))}
          </ul>
        </div>

        <div className="da-stroke bg-da-surface text-da-surface-fg shadow-da-lg">
          <div className="p-8">
            <div className="flex items-baseline justify-between gap-4">
              <label htmlFor={sliderId} className="font-da-mono text-xs font-bold tracking-da-label uppercase">
                Projects
              </label>
              <output htmlFor={sliderId} className="font-da-display text-5xl tracking-da-display">
                {projects}
              </output>
            </div>
            <input
              id={sliderId}
              type="range"
              min={min}
              max={max}
              value={projects}
              onChange={(e) => setProjects(Number(e.target.value))}
              aria-valuetext={`${projects} projects, ${currency}${total} per month`}
              className="da-focus da-stroke mt-6 h-5 w-full cursor-pointer appearance-none bg-da-surface-2 [&::-moz-range-thumb]:size-8 [&::-moz-range-thumb]:rounded-none [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-da-border [&::-moz-range-thumb]:bg-da-primary [&::-webkit-slider-thumb]:size-8 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-da-border [&::-webkit-slider-thumb]:bg-da-primary [&::-webkit-slider-thumb]:shadow-da-sm"
              style={{ backgroundImage: `linear-gradient(to right, var(--da-secondary) ${pct}%, transparent ${pct}%)` }}
            />
            <div className="mt-2 flex justify-between font-da-mono text-[11px] font-bold text-da-muted-fg">
              <span>{min}</span>
              <span>{max}+</span>
            </div>
          </div>
          <div className="da-stroke-t grid grid-cols-2">
            <div className="p-6">
              <p className="font-da-mono text-[11px] font-bold tracking-da-label text-da-muted-fg uppercase">Per project</p>
              <p className="mt-1 font-da-display text-2xl tracking-da-display">
                {currency}
                {perProject}
              </p>
            </div>
            <div className="da-stroke-l bg-da-primary p-6 text-da-primary-fg">
              <p className="font-da-mono text-[11px] font-bold tracking-da-label uppercase">Total / month</p>
              <p className="mt-1 font-da-display text-4xl tracking-da-display" aria-live="polite">
                {total === 0 ? "Free" : `${currency}${total}`}
              </p>
            </div>
          </div>
          <a href={cta.href} className="da-focus da-stroke-t block bg-da-fg px-6 py-4 text-center font-bold text-da-bg hover:bg-da-secondary hover:text-da-secondary-fg">
            {cta.label} →
          </a>
        </div>
      </div>
    </section>
  );
}

export default PricingSlider;