Pricing Spotlight

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

export interface PricingSpotlightProps {
  eyebrow?: string;
  title?: string;
  plan?: string;
  price?: string;
  unit?: string;
  note?: string;
  features?: string[];
  cta?: { label: string; href: string };
  secondary?: { label: string; href: string };
  logos?: string[];
  className?: string;
}

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

/** One plan, one price: a wide glass card with a gradient price block, two-column feature list, guarantee and trust wordmarks. */
export function PricingSpotlight({
  eyebrow = "Simple pricing",
  title = "One plan with everything in it",
  plan = "Halo Team",
  price = "$12",
  unit = "per member / month, billed yearly",
  note = "$15 billed monthly",
  features = [
    "Unlimited AI recaps",
    "30 transcription languages",
    "Async video with chapters",
    "Ask Halo across 12 months",
    "Slack, Notion, Linear & Jira",
    "Shared team workspace",
    "SOC 2 Type II, EU hosting",
    "Priority support",
  ],
  cta = { label: "Start 14-day trial", href: "#trial" },
  secondary = { label: "Talk to sales", href: "#sales" },
  logos = ["Northwind", "Lumen", "Parcel", "Quanta"],
  className,
}: PricingSpotlightProps) {
  return (
    <section aria-labelledby="glass-spot-title" 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="glass-spot-title"
            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>
        </div>
        <div className={cn("mx-auto mt-12 grid max-w-4xl overflow-hidden rounded-da-lg shadow-da-lg md:grid-cols-[1fr_1.3fr]", GLASS)}>
          <div className="relative overflow-hidden bg-gradient-to-br from-da-primary to-da-accent p-8 text-da-primary-fg">
            <div aria-hidden className="absolute -bottom-20 -left-10 size-56 rounded-full bg-da-primary-fg/20 blur-3xl" />
            <p className="relative font-da-display text-lg font-semibold">{plan}</p>
            <p className="relative mt-6 font-da-display text-6xl font-semibold tracking-da-display">{price}</p>
            <p className="relative mt-2 text-sm opacity-90">{unit}</p>
            <p className="relative text-sm opacity-80">{note}</p>
            <a
              href={cta.href}
              className="da-focus da-transition relative mt-8 flex h-12 items-center justify-center rounded-da-pill bg-da-primary-fg font-semibold text-da-primary shadow-da-md hover:-translate-y-0.5"
            >
              {cta.label}
            </a>
            <a
              href={secondary.href}
              className="da-focus relative mt-3 block rounded-da-pill py-2 text-center text-sm font-semibold underline-offset-4 hover:underline"
            >
              {secondary.label}
            </a>
          </div>
          <div className="p-8">
            <p className="text-sm font-semibold">Everything included</p>
            <ul className="mt-5 grid gap-3 sm:grid-cols-2">
              {features.map((f) => (
                <li key={f} className="flex items-start gap-2.5 text-[15px]">
                  <span className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent text-da-primary-fg">
                    <Check aria-hidden className="size-3" strokeWidth={3} />
                  </span>
                  {f}
                </li>
              ))}
            </ul>
            <p className="mt-8 flex items-center gap-2 rounded-da-md bg-da-surface-2 px-4 py-3 text-sm">
              <ShieldCheck aria-hidden className="size-4 shrink-0 text-da-success" />
              30-day money-back guarantee, no questions asked.
            </p>
            <p className="mt-6 text-xs text-da-muted-fg">Chosen by teams at</p>
            <ul className="mt-2 flex flex-wrap gap-x-6 gap-y-1 font-da-display text-sm font-semibold text-da-muted-fg">
              {logos.map((l) => (
                <li key={l}>{l}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

export default PricingSpotlight;