@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/vdp/FinanceCalculator.tsx

@@ -1,465 +1,465 @@
-// Autobahn (auto.de redesign) — VDP offer / finance card (Finanzierung / Leasing /
-// Barzahlung).
-//
-// Structure (desktop rethink, tabs-on-top): payment-type TABS at the top (MD3 underline tabs),
-// then the rate (with any discount), then the "Rate anpassen" rate-editor, then the primary
-// "Angebot sichern" request CTA, and finally the Finanzierungs-/Leasingdetails info + popup link
-// at the foot. Laufzeit is chosen via chips (discrete terms), not a slider.
-//
-// CONTROLLED / PRESENTATIONAL — computes NOTHING financial: `mode`, `monthly`, `down`, `term` and
-// the slider/chip bounds all arrive as props; segment/slider/chip changes are reported back via
-// `onModeChange` / `onDownChange` / `onTermChange`. The real numbers come from `financingStore`.
-// The only local state is the `adjust` expander (pure view state).
-//
-// Renders correctly only inside a `<div className="md3">` subtree.
-
-import React, { useState } from 'react';
-import { TranslationFunction } from '../types';
-
-import { Button, Icon } from '../ui';
-import { TIER_LABELS, TIER_KEYS, TIER_COLORS } from '../constants';
-
-/** Payment mode segment keys. Mirrors the design's ['fin','leasing','cash']. */
-export type FinanceMode = 'fin' | 'leasing' | 'cash';
-
-export interface SliderProps {
-  min: number;
-  max: number;
-  step?: number;
-  value: number;
-  onChange: (value: number) => void;
-  /** formats the min/max end labels (and is reused by callers for the value). */
-  fmt?: (v: number) => React.ReactNode;
-}
-
-/**
- * Range slider with a filled track and min/max end labels. The track fill is a
- * linear-gradient driven by the value's position; the design's `.mslider` class
- * styles the thumb/rail.
- */
-export const Slider: React.FunctionComponent<SliderProps> = ({ min, max, step = 1, value, onChange, fmt = (v) => v }) => {
-  const span = max - min;
-  const pct = span > 0 ? ((value - min) / span) * 100 : 0;
-  return (
-    <div>
-      <input
-        type="range"
-        className="mslider"
-        min={min}
-        max={max}
-        step={step}
-        value={value}
-        onChange={(e) => onChange(Number(e.target.value))}
-        style={{ background: `linear-gradient(90deg, var(--md-primary) ${pct}%, var(--md-sc-highest) ${pct}%)` }}
-      />
-      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
-        <span className="md-label-sm">{fmt(min)}</span>
-        <span className="md-label-sm">{fmt(max)}</span>
-      </div>
-    </div>
-  );
-};
-
-export interface TermChipsProps {
-  /** the selectable term values (months), e.g. [12,24,36,48,60,72]. */
-  options: number[];
-  value: number;
-  onChange: (term: number) => void;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/** Laufzeit selector — discrete term values as tappable chips (replaces the fiddly slider). */
-export const TermChips: React.FunctionComponent<TermChipsProps> = ({ options, value, onChange, t }) => (
-  <div className="term-chips" role="group" aria-label={t('autobahn:finance.termSelection')}>
-    {options.map((m) => (
-      <button
-        key={m}
-        type="button"
-        aria-pressed={m === value}
-        className={'term-chip' + (m === value ? ' on' : '')}
-        onClick={() => onChange(m)}
-      >
-        {m}
-        <span className="tc-unit">{t('autobahn:finance.monthUnit')}</span>
-      </button>
-    ))}
-  </div>
-);
-
-export interface CalcRowProps {
-  label: React.ReactNode;
-  /** when true, drops the bottom hairline (last row). */
-  last?: boolean;
-  children?: React.ReactNode;
-}
-
-/** One label/value row inside the "Rate anpassen" / "Details" expander. */
-export const CalcRow: React.FunctionComponent<CalcRowProps> = ({ label, last, children }) => (
-  <div
-    style={{
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'baseline',
-      gap: 12,
-      padding: '8px 0',
-      borderBottom: last ? 0 : '1px solid var(--md-outline-variant)',
-    }}
-  >
-    <span className="md-label-sm">{label}</span>
-    <span className="num" style={{ fontSize: 13.5, fontWeight: 600 }}>
-      {children}
-    </span>
-  </div>
-);
-
-export interface FinanceCalculatorProps {
-  /** active payment mode (controlled). */
-  mode: FinanceMode;
-  /** purchase price in EUR (the cash mode hero). */
-  price: number;
-  /** previous/list price — when > price, shown struck through as the UVP in cash mode (real discount). */
-  listPrice?: number;
-  /** auto.de-ID reference code — shown with the financing/leasing condition line. */
-  autoDeId?: string;
-  /** price-rating label, e.g. 'Guter Preis' — drives the Preisbewertung indicator. */
-  ratingLabel?: string;
-  /** computed monthly rate in EUR for the current mode — supplied, NOT computed here. */
-  monthly: number;
-  /** effective annual rate (%) for the current mode — supplied, NOT computed here. */
-  apr: number;
-  /** current down payment in EUR (controlled). */
-  down: number;
-  /** current term in months (controlled). */
-  term: number;
-  /** down-payment slider bounds. */
-  downMin: number;
-  downMax: number;
-  /** down-payment slider step (EUR). */
-  downStep?: number;
-  /** term slider bounds (months) — used to derive chip options when termOptions is absent. */
-  termMin: number;
-  termMax: number;
-  /** term slider step (months). */
-  termStep?: number;
-  /** the discrete selectable terms (months) for the Laufzeit chips. */
-  termOptions?: number[];
-  /** annual mileage in km (controlled) — leasing/financing Laufleistung/Jahr. Omit to hide the slider. */
-  annualMileage?: number;
-  /** annual-mileage slider bounds + step (km). */
-  annualMileageMin?: number;
-  annualMileageMax?: number;
-  annualMileageStep?: number;
-  /** annual-mileage slider changed. */
-  onAnnualMileageChange?: (km: number) => void;
-  /** phone number shown on the secondary CTA (touch only). */
-  phone?: string;
-  /** primary CTA click (Angebot sichern). */
-  onSecure?: () => void;
-  /** secondary CTA click (phone). */
-  onCall?: () => void;
-  /** open the Finanzierungs-/Leasingdetails popup (full breakdown + legal). Omit to hide the link. */
-  onShowDetails?: () => void;
-  /** mode segment changed. */
-  onModeChange: (mode: FinanceMode) => void;
-  /** down-payment slider changed. */
-  onDownChange: (down: number) => void;
-  /** term changed. */
-  onTermChange: (term: number) => void;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-const eur = (n: number): string => n.toLocaleString('de-DE');
-
-/** build a [min..max] step range (fallback term options when none are supplied). */
-const range = (min: number, max: number, step: number): number[] => {
-  const out: number[] = [];
-  for (let v = min; v <= max; v += step || 12) out.push(v);
-  return out.length ? out : [min];
-};
-
-/** quiet primary-colored text link (Finanzierungsdetails / Details anzeigen). */
-const DetailsLink: React.FunctionComponent<{ label: string; onClick: () => void }> = ({ label, onClick }) => (
-  <button
-    type="button"
-    onClick={onClick}
-    style={{
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: 5,
-      background: 'none',
-      border: 0,
-      padding: 0,
-      cursor: 'pointer',
-      color: 'var(--md-primary)',
-      font: 'inherit',
-      fontSize: 13,
-      fontWeight: 600,
-    }}
-  >
-    <Icon name="info" size={15} color="var(--md-primary)" />
-    {label}
-  </button>
-);
-
-/** "Rate anpassen" / "Details anzeigen" expander toggle button. */
-const expanderBtnStyle: React.CSSProperties = {
-  width: '100%',
-  background: 'none',
-  border: 0,
-  cursor: 'pointer',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  padding: '10px 0 2px',
-  color: 'var(--md-primary)',
-  fontWeight: 600,
-  fontSize: 14,
-};
-
-const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
-  mode,
-  price,
-  listPrice,
-  autoDeId,
-  ratingLabel,
-  monthly,
-  down,
-  term,
-  downMin,
-  downMax,
-  downStep = 500,
-  termMin,
-  termMax,
-  termStep = 6,
-  termOptions,
-  annualMileage,
-  annualMileageMin = 5000,
-  annualMileageMax = 60000,
-  annualMileageStep = 5000,
-  onAnnualMileageChange,
-  phone = '0800 40 30 182',
-  onSecure,
-  onCall,
-  onShowDetails,
-  onModeChange,
-  onDownChange,
-  onTermChange,
-  t,
-}) => {
-  // Pure view state only — whether the adjust/details expander is open.
-  const [adjust, setAdjust] = useState(false);
-  const isCash = mode === 'cash';
-  const terms = termOptions && termOptions.length ? termOptions : range(termMin, termMax, termStep);
-  const showStrike = listPrice != null && listPrice > price;
-  // price-evaluation tier from the rating label (defaults to 'Guter Preis' tier when unmapped).
-  const tierIdx = TIER_LABELS.indexOf(ratingLabel as (typeof TIER_LABELS)[number]);
-  const evalTier = tierIdx >= 0 ? tierIdx : 1;
-  const evalTierLabel = t('autobahn:tier.' + TIER_KEYS[evalTier]);
-  // condition summary (current selection) — the auto.de-ID lives with the details link, not here.
-  const condParts: string[] = [];
-  if (!isCash) {
-    condParts.push(
-      mode === 'leasing' && annualMileage != null
-        ? t('autobahn:finance.kmPerYear', { value: eur(annualMileage) })
-        : t('autobahn:finance.downPaymentLabel', { value: eur(down) }),
-    );
-    condParts.push(t('autobahn:finance.monthsLabel', { months: term, count: term }));
-  }
-  const condLine = condParts.join(' · ');
-
-  return (
-    <div className="mcard mcard--elevated" style={{ padding: 20 }}>
-      {/* header */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
-        <span
-          style={{
-            width: 34,
-            height: 34,
-            borderRadius: 'var(--md-r-full)',
-            background: 'var(--md-primary-container)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flex: 'none',
-          }}
-        >
-          <Icon name="tag" size={18} color="var(--md-on-primary-container)" />
-        </span>
-        <div style={{ fontFamily: 'var(--md-font-display)', fontSize: 18, fontWeight: 700 }}>{t('autobahn:finance.headerTitle')}</div>
-      </div>
-
-      {/* payment-type TABS on top */}
-      <div className="fin-tabs" role="tablist">
-        {(
-          [
-            ['fin', 'autobahn:finance.mode.financing'],
-            ['leasing', 'autobahn:finance.mode.leasing'],
-            ['cash', 'autobahn:finance.mode.cash'],
-          ] as Array<[FinanceMode, string]>
-        ).map(([k, labelKey]) => (
-          <button
-            key={k}
-            type="button"
-            role="tab"
-            aria-selected={mode === k}
-            className={'fin-tab' + (mode === k ? ' on' : '')}
-            onClick={() => onModeChange(k)}
-          >
-            {t(labelKey)}
-          </button>
-        ))}
-      </div>
-
-      {/* 2-col grid: rate|pill (row 1) + condLine|bar (row 2) — fixed right column prevents wrapping */}
-      <div className="fin-price-grid">
-        {/* col 1 row 1: hero rate */}
-        <div className="fin-rate-main">
-          <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
-            <span
-              className="num"
-              style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
-            >
-              {isCash ? eur(price) : eur(Math.round(monthly))}
-            </span>
-            <span className="md-body-sm" style={{ fontWeight: 600 }}>
-              {isCash ? '€' : `€ ${t('autobahn:finance.perMonth')}`}
-            </span>
-          </div>
-          {isCash && <div className="md-label-sm">{t('autobahn:finance.fixedPrice')}</div>}
-          {isCash && showStrike && (
-            <div className="fin-kauf">
-              {t('autobahn:finance.uvp')} <s>{eur(listPrice as number)} €</s>
-            </div>
-          )}
-        </div>
-        {/* col 2 row 1: price-rating pill */}
-        <div>
-          {ratingLabel && (
-            <span
-              className="fin-eval-pill"
-              style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
-              aria-label={t('autobahn:finance.priceRatingAria', { rating: evalTierLabel })}
-            >
-              <Icon
-                name={evalTier <= 1 ? 'check' : evalTier === 2 ? 'minus' : 'trending-up'}
-                size={14}
-                stroke={2.6}
-                color={TIER_COLORS[evalTier]}
-              />
-              {evalTierLabel}
-            </span>
-          )}
-        </div>
-        {/* col 1 row 2: condition line */}
-        <div className="fin-cond">{condLine}</div>
-        {/* col 2 row 2: gradient evaluation bar */}
-        <div>
-          {ratingLabel && (
-            <div className="fin-eval-bar">
-              <div className="fin-eval-thumb" style={{ left: `${(evalTier + 0.5) * 20}%`, borderColor: TIER_COLORS[evalTier] }} />
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* RATE EDIT (Rate anpassen) — between the rate and the request CTA */}
-      <div className="fin-adjust">
-        <button onClick={() => setAdjust((a) => !a)} style={expanderBtnStyle}>
-          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
-            <Icon name={isCash ? 'list' : 'sliders-horizontal'} size={16} color="var(--md-primary)" />
-            {isCash ? t('autobahn:finance.detailsShow') : t('autobahn:finance.adjustRate')}
-          </span>
-          <Icon name={adjust ? 'chevron-up' : 'chevron-down'} size={18} color="var(--md-primary)" />
-        </button>
-        {adjust &&
-          (isCash ? (
-            <div style={{ marginTop: 4 }}>
-              <CalcRow label={t('autobahn:finance.paymentLabel')}>{t('autobahn:finance.paymentValue')}</CalcRow>
-              <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
-              <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
-                {t('autobahn:finance.deliveryValue')}
-              </CalcRow>
-            </div>
-          ) : (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 8 }}>
-              <div>
-                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
-                  <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
-                  <span className="num" style={{ fontWeight: 700 }}>
-                    {eur(down)} €
-                  </span>
-                </div>
-                <Slider
-                  min={downMin}
-                  max={downMax}
-                  step={downStep}
-                  value={down}
-                  onChange={onDownChange}
-                  fmt={(v) => `${eur(Number(v))} €`}
-                />
-              </div>
-              {annualMileage != null && onAnnualMileageChange && (
-                <div>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
-                    <span className="md-title-sm">{t('autobahn:finance.annualMileageLabel')}</span>
-                    <span className="num" style={{ fontWeight: 700 }}>
-                      {eur(annualMileage)} km
-                    </span>
-                  </div>
-                  <Slider
-                    min={annualMileageMin}
-                    max={annualMileageMax}
-                    step={annualMileageStep}
-                    value={annualMileage}
-                    onChange={onAnnualMileageChange}
-                    fmt={(v) => `${eur(Number(v))} km`}
-                  />
-                </div>
-              )}
-              <div>
-                <div className="md-title-sm" style={{ marginBottom: 8 }}>
-                  {t('autobahn:finance.termSelection')}
-                </div>
-                <TermChips options={terms} value={term} onChange={onTermChange} t={t} />
-              </div>
-              <div>
-                <CalcRow label={t('autobahn:finance.purchasePrice')}>{eur(price)} €</CalcRow>
-                <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
-                <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
-                  {t('autobahn:finance.deliveryValue')}
-                </CalcRow>
-              </div>
-            </div>
-          ))}
-      </div>
-
-      {/* REQUEST CTA */}
-      <Button variant="filled" block size="lg" icon="shield-check" style={{ marginTop: 14 }} onClick={onSecure}>
-        {t('autobahn:finance.secureOffer')}
-      </Button>
-      {/* phone CTA — touch only (hidden on desktop via .fin-call) */}
-      <div className="fin-call">
-        <Button variant="outlined" block icon="phone" onClick={onCall}>
-          {phone}
-        </Button>
-      </div>
-
-      {/* auto.de-ID in front of the Finanzierungs-/Leasingdetails link — one row, under everything */}
-      {(autoDeId || (!isCash && onShowDetails)) && (
-        <div className="fin-info">
-          {autoDeId && <span className="fin-id">auto.de-ID {autoDeId}</span>}
-          {!isCash && onShowDetails && (
-            <DetailsLink
-              label={mode === 'leasing' ? t('autobahn:finance.leasingDetails') : t('autobahn:finance.financingDetails')}
-              onClick={onShowDetails}
-            />
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default FinanceCalculator;
+// Autobahn (auto.de redesign) — VDP offer / finance card (Finanzierung / Leasing /
+// Barzahlung).
+//
+// Structure (desktop rethink, tabs-on-top): payment-type TABS at the top (MD3 underline tabs),
+// then the rate (with any discount), then the "Rate anpassen" rate-editor, then the primary
+// "Angebot sichern" request CTA, and finally the Finanzierungs-/Leasingdetails info + popup link
+// at the foot. Laufzeit is chosen via chips (discrete terms), not a slider.
+//
+// CONTROLLED / PRESENTATIONAL — computes NOTHING financial: `mode`, `monthly`, `down`, `term` and
+// the slider/chip bounds all arrive as props; segment/slider/chip changes are reported back via
+// `onModeChange` / `onDownChange` / `onTermChange`. The real numbers come from `financingStore`.
+// The only local state is the `adjust` expander (pure view state).
+//
+// Renders correctly only inside a `<div className="md3">` subtree.
+
+import React, { useState } from 'react';
+import { TranslationFunction } from '../types';
+
+import { Button, Icon } from '../ui';
+import { TIER_LABELS, TIER_KEYS, TIER_COLORS } from '../constants';
+
+/** Payment mode segment keys. Mirrors the design's ['fin','leasing','cash']. */
+export type FinanceMode = 'fin' | 'leasing' | 'cash';
+
+export interface SliderProps {
+  min: number;
+  max: number;
+  step?: number;
+  value: number;
+  onChange: (value: number) => void;
+  /** formats the min/max end labels (and is reused by callers for the value). */
+  fmt?: (v: number) => React.ReactNode;
+}
+
+/**
+ * Range slider with a filled track and min/max end labels. The track fill is a
+ * linear-gradient driven by the value's position; the design's `.mslider` class
+ * styles the thumb/rail.
+ */
+export const Slider: React.FunctionComponent<SliderProps> = ({ min, max, step = 1, value, onChange, fmt = (v) => v }) => {
+  const span = max - min;
+  const pct = span > 0 ? ((value - min) / span) * 100 : 0;
+  return (
+    <div>
+      <input
+        type="range"
+        className="mslider"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        style={{ background: `linear-gradient(90deg, var(--md-primary) ${pct}%, var(--md-sc-highest) ${pct}%)` }}
+      />
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
+        <span className="md-label-sm">{fmt(min)}</span>
+        <span className="md-label-sm">{fmt(max)}</span>
+      </div>
+    </div>
+  );
+};
+
+export interface TermChipsProps {
+  /** the selectable term values (months), e.g. [12,24,36,48,60,72]. */
+  options: number[];
+  value: number;
+  onChange: (term: number) => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** Laufzeit selector — discrete term values as tappable chips (replaces the fiddly slider). */
+export const TermChips: React.FunctionComponent<TermChipsProps> = ({ options, value, onChange, t }) => (
+  <div className="term-chips" role="group" aria-label={t('autobahn:finance.termSelection')}>
+    {options.map((m) => (
+      <button
+        key={m}
+        type="button"
+        aria-pressed={m === value}
+        className={'term-chip' + (m === value ? ' on' : '')}
+        onClick={() => onChange(m)}
+      >
+        {m}
+        <span className="tc-unit">{t('autobahn:finance.monthUnit')}</span>
+      </button>
+    ))}
+  </div>
+);
+
+export interface CalcRowProps {
+  label: React.ReactNode;
+  /** when true, drops the bottom hairline (last row). */
+  last?: boolean;
+  children?: React.ReactNode;
+}
+
+/** One label/value row inside the "Rate anpassen" / "Details" expander. */
+export const CalcRow: React.FunctionComponent<CalcRowProps> = ({ label, last, children }) => (
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'baseline',
+      gap: 12,
+      padding: '8px 0',
+      borderBottom: last ? 0 : '1px solid var(--md-outline-variant)',
+    }}
+  >
+    <span className="md-label-sm">{label}</span>
+    <span className="num" style={{ fontSize: 13.5, fontWeight: 600 }}>
+      {children}
+    </span>
+  </div>
+);
+
+export interface FinanceCalculatorProps {
+  /** active payment mode (controlled). */
+  mode: FinanceMode;
+  /** purchase price in EUR (the cash mode hero). */
+  price: number;
+  /** previous/list price — when > price, shown struck through as the UVP in cash mode (real discount). */
+  listPrice?: number;
+  /** auto.de-ID reference code — shown with the financing/leasing condition line. */
+  autoDeId?: string;
+  /** price-rating label, e.g. 'Guter Preis' — drives the Preisbewertung indicator. */
+  ratingLabel?: string;
+  /** computed monthly rate in EUR for the current mode — supplied, NOT computed here. */
+  monthly: number;
+  /** effective annual rate (%) for the current mode — supplied, NOT computed here. */
+  apr: number;
+  /** current down payment in EUR (controlled). */
+  down: number;
+  /** current term in months (controlled). */
+  term: number;
+  /** down-payment slider bounds. */
+  downMin: number;
+  downMax: number;
+  /** down-payment slider step (EUR). */
+  downStep?: number;
+  /** term slider bounds (months) — used to derive chip options when termOptions is absent. */
+  termMin: number;
+  termMax: number;
+  /** term slider step (months). */
+  termStep?: number;
+  /** the discrete selectable terms (months) for the Laufzeit chips. */
+  termOptions?: number[];
+  /** annual mileage in km (controlled) — leasing/financing Laufleistung/Jahr. Omit to hide the slider. */
+  annualMileage?: number;
+  /** annual-mileage slider bounds + step (km). */
+  annualMileageMin?: number;
+  annualMileageMax?: number;
+  annualMileageStep?: number;
+  /** annual-mileage slider changed. */
+  onAnnualMileageChange?: (km: number) => void;
+  /** phone number shown on the secondary CTA (touch only). */
+  phone?: string;
+  /** primary CTA click (Angebot sichern). */
+  onSecure?: () => void;
+  /** secondary CTA click (phone). */
+  onCall?: () => void;
+  /** open the Finanzierungs-/Leasingdetails popup (full breakdown + legal). Omit to hide the link. */
+  onShowDetails?: () => void;
+  /** mode segment changed. */
+  onModeChange: (mode: FinanceMode) => void;
+  /** down-payment slider changed. */
+  onDownChange: (down: number) => void;
+  /** term changed. */
+  onTermChange: (term: number) => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+const eur = (n: number): string => n.toLocaleString('de-DE');
+
+/** build a [min..max] step range (fallback term options when none are supplied). */
+const range = (min: number, max: number, step: number): number[] => {
+  const out: number[] = [];
+  for (let v = min; v <= max; v += step || 12) out.push(v);
+  return out.length ? out : [min];
+};
+
+/** quiet primary-colored text link (Finanzierungsdetails / Details anzeigen). */
+const DetailsLink: React.FunctionComponent<{ label: string; onClick: () => void }> = ({ label, onClick }) => (
+  <button
+    type="button"
+    onClick={onClick}
+    style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 5,
+      background: 'none',
+      border: 0,
+      padding: 0,
+      cursor: 'pointer',
+      color: 'var(--md-primary)',
+      font: 'inherit',
+      fontSize: 13,
+      fontWeight: 600,
+    }}
+  >
+    <Icon name="info" size={15} color="var(--md-primary)" />
+    {label}
+  </button>
+);
+
+/** "Rate anpassen" / "Details anzeigen" expander toggle button. */
+const expanderBtnStyle: React.CSSProperties = {
+  width: '100%',
+  background: 'none',
+  border: 0,
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '10px 0 2px',
+  color: 'var(--md-primary)',
+  fontWeight: 600,
+  fontSize: 14,
+};
+
+const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
+  mode,
+  price,
+  listPrice,
+  autoDeId,
+  ratingLabel,
+  monthly,
+  down,
+  term,
+  downMin,
+  downMax,
+  downStep = 500,
+  termMin,
+  termMax,
+  termStep = 6,
+  termOptions,
+  annualMileage,
+  annualMileageMin = 5000,
+  annualMileageMax = 60000,
+  annualMileageStep = 5000,
+  onAnnualMileageChange,
+  phone = '0800 40 30 182',
+  onSecure,
+  onCall,
+  onShowDetails,
+  onModeChange,
+  onDownChange,
+  onTermChange,
+  t,
+}) => {
+  // Pure view state only — whether the adjust/details expander is open.
+  const [adjust, setAdjust] = useState(false);
+  const isCash = mode === 'cash';
+  const terms = termOptions && termOptions.length ? termOptions : range(termMin, termMax, termStep);
+  const showStrike = listPrice != null && listPrice > price;
+  // price-evaluation tier from the rating label (defaults to 'Guter Preis' tier when unmapped).
+  const tierIdx = TIER_LABELS.indexOf(ratingLabel as (typeof TIER_LABELS)[number]);
+  const evalTier = tierIdx >= 0 ? tierIdx : 1;
+  const evalTierLabel = t('autobahn:tier.' + TIER_KEYS[evalTier]);
+  // condition summary (current selection) — the auto.de-ID lives with the details link, not here.
+  const condParts: string[] = [];
+  if (!isCash) {
+    condParts.push(
+      mode === 'leasing' && annualMileage != null
+        ? t('autobahn:finance.kmPerYear', { value: eur(annualMileage) })
+        : t('autobahn:finance.downPaymentLabel', { value: eur(down) }),
+    );
+    condParts.push(t('autobahn:finance.monthsLabel', { months: term, count: term }));
+  }
+  const condLine = condParts.join(' · ');
+
+  return (
+    <div className="mcard mcard--elevated" style={{ padding: 20 }}>
+      {/* header */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
+        <span
+          style={{
+            width: 34,
+            height: 34,
+            borderRadius: 'var(--md-r-full)',
+            background: 'var(--md-primary-container)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: 'none',
+          }}
+        >
+          <Icon name="tag" size={18} color="var(--md-on-primary-container)" />
+        </span>
+        <div style={{ fontFamily: 'var(--md-font-display)', fontSize: 18, fontWeight: 700 }}>{t('autobahn:finance.headerTitle')}</div>
+      </div>
+
+      {/* payment-type TABS on top */}
+      <div className="fin-tabs" role="tablist">
+        {(
+          [
+            ['fin', 'autobahn:finance.mode.financing'],
+            ['leasing', 'autobahn:finance.mode.leasing'],
+            ['cash', 'autobahn:finance.mode.cash'],
+          ] as Array<[FinanceMode, string]>
+        ).map(([k, labelKey]) => (
+          <button
+            key={k}
+            type="button"
+            role="tab"
+            aria-selected={mode === k}
+            className={'fin-tab' + (mode === k ? ' on' : '')}
+            onClick={() => onModeChange(k)}
+          >
+            {t(labelKey)}
+          </button>
+        ))}
+      </div>
+
+      {/* 2-col grid: rate|pill (row 1) + condLine|bar (row 2) — fixed right column prevents wrapping */}
+      <div className="fin-price-grid">
+        {/* col 1 row 1: hero rate */}
+        <div className="fin-rate-main">
+          <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
+            <span
+              className="num"
+              style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
+            >
+              {isCash ? eur(price) : eur(Math.round(monthly))}
+            </span>
+            <span className="md-body-sm" style={{ fontWeight: 600 }}>
+              {isCash ? '€' : `€ ${t('autobahn:finance.perMonth')}`}
+            </span>
+          </div>
+          {isCash && <div className="md-label-sm">{t('autobahn:finance.fixedPrice')}</div>}
+          {isCash && showStrike && (
+            <div className="fin-kauf">
+              {t('autobahn:finance.uvp')} <s>{eur(listPrice as number)} €</s>
+            </div>
+          )}
+        </div>
+        {/* col 2 row 1: price-rating pill */}
+        <div>
+          {ratingLabel && (
+            <span
+              className="fin-eval-pill"
+              style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
+              aria-label={t('autobahn:finance.priceRatingAria', { rating: evalTierLabel })}
+            >
+              <Icon
+                name={evalTier <= 1 ? 'check' : evalTier === 2 ? 'minus' : 'trending-up'}
+                size={14}
+                stroke={2.6}
+                color={TIER_COLORS[evalTier]}
+              />
+              {evalTierLabel}
+            </span>
+          )}
+        </div>
+        {/* col 1 row 2: condition line */}
+        <div className="fin-cond">{condLine}</div>
+        {/* col 2 row 2: gradient evaluation bar */}
+        <div>
+          {ratingLabel && (
+            <div className="fin-eval-bar">
+              <div className="fin-eval-thumb" style={{ left: `${(evalTier + 0.5) * 20}%`, borderColor: TIER_COLORS[evalTier] }} />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* RATE EDIT (Rate anpassen) — between the rate and the request CTA */}
+      <div className="fin-adjust">
+        <button onClick={() => setAdjust((a) => !a)} style={expanderBtnStyle}>
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
+            <Icon name={isCash ? 'list' : 'sliders-horizontal'} size={16} color="var(--md-primary)" />
+            {isCash ? t('autobahn:finance.detailsShow') : t('autobahn:finance.adjustRate')}
+          </span>
+          <Icon name={adjust ? 'chevron-up' : 'chevron-down'} size={18} color="var(--md-primary)" />
+        </button>
+        {adjust &&
+          (isCash ? (
+            <div style={{ marginTop: 4 }}>
+              <CalcRow label={t('autobahn:finance.paymentLabel')}>{t('autobahn:finance.paymentValue')}</CalcRow>
+              <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
+              <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
+                {t('autobahn:finance.deliveryValue')}
+              </CalcRow>
+            </div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 8 }}>
+              <div>
+                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+                  <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
+                  <span className="num" style={{ fontWeight: 700 }}>
+                    {eur(down)} €
+                  </span>
+                </div>
+                <Slider
+                  min={downMin}
+                  max={downMax}
+                  step={downStep}
+                  value={down}
+                  onChange={onDownChange}
+                  fmt={(v) => `${eur(Number(v))} €`}
+                />
+              </div>
+              {annualMileage != null && onAnnualMileageChange && (
+                <div>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+                    <span className="md-title-sm">{t('autobahn:finance.annualMileageLabel')}</span>
+                    <span className="num" style={{ fontWeight: 700 }}>
+                      {eur(annualMileage)} km
+                    </span>
+                  </div>
+                  <Slider
+                    min={annualMileageMin}
+                    max={annualMileageMax}
+                    step={annualMileageStep}
+                    value={annualMileage}
+                    onChange={onAnnualMileageChange}
+                    fmt={(v) => `${eur(Number(v))} km`}
+                  />
+                </div>
+              )}
+              <div>
+                <div className="md-title-sm" style={{ marginBottom: 8 }}>
+                  {t('autobahn:finance.termSelection')}
+                </div>
+                <TermChips options={terms} value={term} onChange={onTermChange} t={t} />
+              </div>
+              <div>
+                <CalcRow label={t('autobahn:finance.purchasePrice')}>{eur(price)} €</CalcRow>
+                <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
+                <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
+                  {t('autobahn:finance.deliveryValue')}
+                </CalcRow>
+              </div>
+            </div>
+          ))}
+      </div>
+
+      {/* REQUEST CTA */}
+      <Button variant="filled" block size="lg" icon="shield-check" style={{ marginTop: 14 }} onClick={onSecure}>
+        {t('autobahn:finance.secureOffer')}
+      </Button>
+      {/* phone CTA — touch only (hidden on desktop via .fin-call) */}
+      <div className="fin-call">
+        <Button variant="outlined" block icon="phone" onClick={onCall}>
+          {phone}
+        </Button>
+      </div>
+
+      {/* auto.de-ID in front of the Finanzierungs-/Leasingdetails link — one row, under everything */}
+      {(autoDeId || (!isCash && onShowDetails)) && (
+        <div className="fin-info">
+          {autoDeId && <span className="fin-id">auto.de-ID {autoDeId}</span>}
+          {!isCash && onShowDetails && (
+            <DetailsLink
+              label={mode === 'leasing' ? t('autobahn:finance.leasingDetails') : t('autobahn:finance.financingDetails')}
+              onClick={onShowDetails}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FinanceCalculator;