Pricing Rows

import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface PricingRowsPlan {
  name: string;
  description: string;
  price: string;
  unit: string;
  highlights: string[];
  cta: { label: string; href: string };
  featured?: boolean;
}

export interface PricingRowsProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  plans?: PricingRowsPlan[];
  enterprise?: { title: string; description: string; cta: { label: string; href: string } };
  className?: string;
}

const DEFAULT_PLANS: PricingRowsPlan[] = [
  {
    name: "Starter",
    description: "For a single team getting its first real on-call.",
    price: "$0",
    unit: "up to 5 responders",
    highlights: ["5 integrations", "1 rotation", "Slack war rooms"],
    cta: { label: "Start free", href: "#starter" },
  },
  {
    name: "Team",
    description: "For product teams sharing the pager across services.",
    price: "$19",
    unit: "per responder / month",
    highlights: ["Unlimited integrations", "Phone & SMS", "3 status pages"],
    cta: { label: "Start 14-day trial", href: "#team" },
    featured: true,
  },
  {
    name: "Business",
    description: "For engineering orgs standardising incident response.",
    price: "$39",
    unit: "per responder / month",
    highlights: ["AI postmortems", "SSO / SAML", "Workflows"],
    cta: { label: "Start 14-day trial", href: "#business" },
  },
];

/** Plans as full-width horizontal rows (name · highlights · price · CTA) plus an enterprise strip. Scannable on any screen. */
export function PricingRows({
  eyebrow = "Pricing",
  title = "Straightforward pricing, no surprise seats",
  description = "Only responders count. Viewers, stakeholders and subscribers are always free.",
  plans = DEFAULT_PLANS,
  enterprise = {
    title: "Enterprise",
    description: "SCIM, audit logs, EU data residency, custom contracts and a dedicated technical account manager.",
    cta: { label: "Talk to sales", href: "#sales" },
  },
  className,
}: PricingRowsProps) {
  return (
    <section aria-labelledby="pricing-rows-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="max-w-2xl">
          <p className="font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
          <h2 id="pricing-rows-title" className="mt-3 text-[clamp(1.875rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display text-balance">
            {title}
          </h2>
          <p className="mt-4 text-[17px] text-da-muted-fg">{description}</p>
        </div>
        <ul className="mt-12 space-y-3">
          {plans.map((p) => (
            <li
              key={p.name}
              className={cn(
                "da-stroke grid gap-5 rounded-da-lg bg-da-surface p-6 text-da-surface-fg md:grid-cols-[1.3fr_1.4fr_auto_auto] md:items-center md:gap-8",
                p.featured && "ring-2 ring-da-primary/60 shadow-da-md",
              )}
            >
              <div>
                <h3 className="flex items-center gap-2 text-[17px] font-semibold">
                  {p.name}
                  {p.featured && <span className="rounded-da-pill bg-da-accent px-2 py-0.5 text-[11px] font-medium text-da-accent-fg">Most popular</span>}
                </h3>
                <p className="mt-1 text-sm text-da-muted-fg">{p.description}</p>
              </div>
              <ul className="flex flex-wrap gap-1.5">
                {p.highlights.map((h) => (
                  <li key={h} className="rounded-da-sm bg-da-muted px-2 py-1 text-[12px] text-da-fg">
                    {h}
                  </li>
                ))}
              </ul>
              <p className="md:text-right">
                <span className="text-3xl font-semibold tracking-tight">{p.price}</span>
                <span className="block text-[12px] text-da-muted-fg">{p.unit}</span>
              </p>
              <a
                href={p.cta.href}
                className={cn(
                  "da-focus da-transition inline-flex h-10 items-center justify-center rounded-da-md px-4 text-sm font-medium whitespace-nowrap md:w-44",
                  p.featured ? "bg-da-primary text-da-primary-fg hover:bg-da-primary/90" : "da-stroke bg-da-surface hover:bg-da-muted",
                )}
              >
                {p.cta.label}
              </a>
            </li>
          ))}
        </ul>
        <div className="mt-3 flex flex-col gap-4 rounded-da-lg bg-da-fg p-6 text-da-bg sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h3 className="text-[17px] font-semibold">{enterprise.title}</h3>
            <p className="mt-1 max-w-xl text-sm opacity-75">{enterprise.description}</p>
          </div>
          <a
            href={enterprise.cta.href}
            className="da-focus da-transition group inline-flex h-10 shrink-0 items-center justify-center gap-1.5 rounded-da-md bg-da-bg px-4 text-sm font-medium text-da-fg hover:bg-da-bg/90"
          >
            {enterprise.cta.label}
            <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
          </a>
        </div>
      </div>
    </section>
  );
}

export default PricingRows;