Plan comercial.

<section class="ui-sample ui-service" data-billing-plan="true"><header><strong>Plan Equipo</strong><span class="badge badge--ok">Vigente</span></header><p><b>$24.990 CLP</b> al mes · IVA incluido</p><ul><li>10 usuarios</li><li>Exportaciones ilimitadas</li><li>Soporte prioritario</li></ul><a class="btn btn--secondary" href="#plan">Administrar plan</a></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-billing-plan="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Plan Equipo</strong><span class="badge badge--ok">Vigente</span></header><p><b>$24.990 CLP</b> al mes · IVA incluido</p><ul class="grid gap-2"><li>10 usuarios</li><li>Exportaciones ilimitadas</li><li>Soporte prioritario</li></ul><a class="btn btn--secondary underline underline-offset-4" href="#plan">Administrar plan</a></section>

export interface BillingPlanFeature {
  /** Qué incluye el plan, en una frase corta («10 usuarios»). */
  label: string;
}

export interface BillingPlanProps {
  /** Nombre del plan. */
  title?: string;
  /** Estado de la suscripción: vigente, próxima renovación, pago pendiente o vencida; se muestra como etiqueta y vacío la oculta. */
  status?: string;
  /** Tono de la etiqueta de estado; por defecto se deduce del texto (vigente o activo: `ok`; pago pendiente: `warn`; vencida, suspendida o cancelada: `err`; otro: `neutral`). */
  statusTone?: "ok" | "warn" | "err" | "neutral";
  /** Precio con moneda, en negrita; vacío lo oculta. */
  price?: string;
  /** Período de cobro e impuestos, después del precio; vacío lo oculta. */
  detail?: string;
  /** Lo que incluye el plan; sin elementos no se muestra la lista. */
  features?: BillingPlanFeature[];
  /** URL de la página para administrar la suscripción. */
  href?: string;
  /** Texto del enlace para administrar la suscripción; vacío lo oculta. */
  linkLabel?: string;
  className?: string;
}

const FEATURES: BillingPlanFeature[] = [
  { label: "10 usuarios" },
  { label: "Exportaciones ilimitadas" },
  { label: "Soporte prioritario" },
];

const BILLING_PLAN_TONOS: [string, "ok" | "warn" | "err" | "neutral"][] = [
  ["vigente", "ok"],
  ["activ", "ok"],
  ["pago pendiente", "warn"],
  ["pendiente", "warn"],
  ["vencid", "err"],
  ["suspendid", "err"],
  ["cancelad", "err"],
];

function claseEstado(status: string, tone?: "ok" | "warn" | "err" | "neutral") {
  const texto = status.toLowerCase();
  const tono = tone ?? BILLING_PLAN_TONOS.find(([clave]) => texto.startsWith(clave))?.[1] ?? "neutral";
  return tono === "neutral" ? "badge" : `badge badge--${tono}`;
}

/**
 * Plan de suscripción de la cuenta, con nombre, estado, precio, lo que incluye y un enlace para administrarlo; se usa en la sección de facturación.
 *
 * El estado va en texto dentro de una etiqueta con tono (`badge`), no sólo en color; el enlace para administrar el plan es una acción secundaria (`btn--secondary`).
 *
 * @example <BillingPlan title="Plan Equipo" status="Renueva el 4 sep" price="$24.990 CLP" detail="al mes · IVA incluido" features={[{ label: "10 usuarios" }, { label: "Soporte prioritario" }]} href="/cuenta/plan" />
 * @example <BillingPlan status="Pago pendiente" detail="al mes · IVA incluido · cobro rechazado el 25 sep" href="/cuenta/pago" linkLabel="Actualizar medio de pago" />
 */
export function BillingPlan({
  title = "Plan Equipo",
  status = "Vigente",
  statusTone,
  price = "$24.990 CLP",
  detail = "al mes · IVA incluido",
  features = FEATURES,
  href = "#plan",
  linkLabel = "Administrar plan",
  className,
}: BillingPlanProps) {
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-billing-plan>
      <header>
        <strong>{title}</strong>
        {status ? <span className={claseEstado(status, statusTone)}>{status}</span> : null}
      </header>
      {price || detail ? (
        <p>
          {price ? <b>{price}</b> : null}
          {detail ? (price ? ` ${detail}` : detail) : null}
        </p>
      ) : null}
      {features.length ? (
        <ul>
          {features.map((feature, i) => <li key={`${feature.label}-${i}`}>{feature.label}</li>)}
        </ul>
      ) : null}
      {linkLabel ? <a className="btn btn--secondary" href={href}>{linkLabel}</a> : null}
    </section>
  );
}