Pricing Single

import { cn } from "@/lib/utils";

export interface PricingSingleProps {
  kicker?: string;
  title?: string;
  price?: string;
  period?: string;
  description?: string;
  features?: string[];
  cta?: { label: string; href: string };
  guarantee?: string;
  sticker?: string;
  className?: string;
}

export function PricingSingle({
  kicker = "[ 04 ] Pricing",
  title = "One plan. Everything in it.",
  price = "$39",
  period = "per month, per workspace",
  description = "No tiers, no seat math, no feature gates. Every workspace gets the whole of Shipyard.",
  features = [
    "Unlimited projects & releases",
    "AI release summaries",
    "In-app widget & public changelog",
    "Email, Slack & Teams digests",
    "24 languages",
    "Custom domain & SSO",
  ],
  cta = { label: "Start 14-day free trial", href: "#trial" },
  guarantee = "Cancel anytime · 30-day money-back guarantee",
  sticker = "−20% yearly",
  className,
}: PricingSingleProps) {
  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby="pricing-single-title">
      <div className="da-container">
        <div className="text-center">
          <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
          <h2 id="pricing-single-title" className="mt-3 font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[0.95] tracking-da-display uppercase">
            {title}
          </h2>
        </div>

        <div className="relative mx-auto mt-14 max-w-4xl">
          {sticker && (
            <p className="da-stroke absolute -top-6 -right-2 z-10 rotate-6 bg-da-accent px-4 py-2 font-da-display text-lg tracking-da-display text-da-accent-fg uppercase shadow-da-sm sm:-right-6">
              {sticker}
            </p>
          )}
          <div className="da-stroke grid bg-da-surface text-da-surface-fg shadow-da-lg md:grid-cols-[1fr_1.2fr]">
            <div className="flex flex-col justify-between gap-8 bg-da-primary p-8 text-da-primary-fg sm:p-10 md:da-stroke-r">
              <div>
                <p className="font-da-display text-[5rem] leading-none tracking-da-display sm:text-[6.5rem]">{price}</p>
                <p className="mt-2 font-da-mono text-sm font-bold uppercase">{period}</p>
              </div>
              <p className="text-lg font-medium">{description}</p>
            </div>
            <div className="flex flex-col p-8 sm:p-10">
              <ul className="grid gap-4 sm:grid-cols-2">
                {features.map((f, i) => (
                  <li key={f} className="flex items-start gap-3 font-bold">
                    <span aria-hidden className="font-da-mono text-xs text-da-muted-fg">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    {f}
                  </li>
                ))}
              </ul>
              <a
                href={cta.href}
                className="da-focus da-transition da-stroke mt-10 block bg-da-fg px-6 py-4 text-center text-lg font-bold text-da-bg shadow-da-md hover:translate-x-[6px] hover:translate-y-[6px] hover:shadow-none"
              >
                {cta.label}
              </a>
              <p className="mt-4 text-center font-da-mono text-xs font-bold text-da-muted-fg">{guarantee}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default PricingSingle;