import * as React from 'react';

/**
 * @startingPoint section="Cards" subtitle="Pricing / plan comparison card, 3 fills" viewport="700x420"
 * The "Standard" vs "Premium" plan comparison card. Two real fills exist in the source for
 * the upgrade plan -- a diagonal blue gradient (desktop) and a solid deep navy (mobile) --
 * both legitimate, not a drift to fix (see readme Visual foundations). Use "outline" for the
 * base/recommended plan, and either "gradient" or "solid-navy" for the upgrade plan depending
 * on the layout width.
 */
export interface OfferCardFeature { icon?: string; text: string; }
export interface OfferCardProps {
  variant?: 'outline' | 'gradient' | 'solid-navy';
  /** Ribbon flag text, e.g. "Aktuelles Angebot". Omit for none. */
  ribbon?: string;
  eyebrow?: string;
  title: string;
  subtitle?: string;
  features?: OfferCardFeature[];
  price: string;
  priceCaption?: string;
  cta?: string;
  onCta?: () => void;
  /** Optional small icon badge in the top-right corner (mobile Premium card). Lucide icon name. */
  iconBadge?: string;
}
export function OfferCard(props: OfferCardProps): JSX.Element;