import type { ReactNode } from 'react';
export interface LoadBar {
    /** Row label, e.g. "Anhängelast". */
    label: string;
    /** Displayed value, e.g. "1.800 kg". */
    value: string;
    /** Bar length as a share of the longest bar: `100` or `4` (4.2 %, the 75 kg nose weight against 1.800 kg). Widths are fixed classes, no inline styles. */
    width: 100 | 4;
    /** Light-blue fill for the reference bar; the others stay gray. */
    accent?: boolean;
}
export interface LoadComparisonProps {
    /** Tiny uppercase eyebrow, e.g. "Leistung". */
    eyebrow?: string;
    /** Left-aligned statement headline. */
    statement: ReactNode;
    /** Muted copy under the statement. */
    copy?: ReactNode;
    /** Two rows in the template: towing load (accent) and nose weight. */
    bars: LoadBar[];
    /** Small footnote under the bars, e.g. "Balken maßstäblich zur Anhängelast." */
    note?: string;
}
/**
 * Dark, left-aligned comparison band (`.kwac-compare`): eyebrow, statement,
 * copy and horizontal pill bars (`.kwac-bars`) that put the towing load and the
 * nose weight in proportion and explain what each one means for the buyer. Sits between the
 * feature band and the detail band of the long product page.
 */
export declare function LoadComparison({ eyebrow, statement, copy, bars, note }: LoadComparisonProps): import("react").JSX.Element;