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

package/cards/cardParts.tsx

@@ -1,489 +1,529 @@
-// Autobahn (auto.de redesign) — car-card helper parts.
-//
-// Typed React 18 + TS port of the helper components from the design kit
-// (docs/redesign/design-source/ui_kits/website/CarCard.jsx). Pure /
-// presentational: every value comes from the `AutobahnCar` prop, there is no
-// store / API / `window` access. The design kit's `window.CO2_CLASSES` /
-// `window.CO2_COLORS` globals are replaced by the shared autobahn constants.
-//
-// These render correctly only inside a `<div className="md3">` subtree (the
-// `.pricepaths`, `.pp-*`, `.specstrip`, `.imglabel` … classes are scoped there).
-//
-// NEEDS-DATA discipline (the point of the ticket): wherever the design showed a
-// figure we have no real source for, these helpers render the NEEDS_DATA_LABEL
-// ('Daten folgt') marker instead of inventing a number — see PricePaths'
-// market band and PpActivity. DropChip renders nothing when there is no drop.
-
-import React from 'react';
-import { TranslationFunction } from '../types';
-import { defaultConfig } from '@bytebrand/fe-financing';
-
-import { Icon } from '../ui';
-import { CO2_CLASSES, CO2_COLORS, TIER_COLORS, TIER_KEYS } from '../constants';
-import { AutobahnCar } from './types';
-
-// Default financing/leasing terms shown under the rate (the SRP card has no per-car selector, so
-// these are the same default config the displayed rate is computed with — consistent, not invented).
-const _finCfg = (defaultConfig as any).financing || {};
-const _leasCfg = (defaultConfig as any).leasing || {};
-/** financing terms inputs (rendered via t in PricePaths), e.g. "0 € Anzahlung · 48 Monate Laufzeit". */
-const _finFirstInstallment = (_finCfg.firstInstallment || 0).toLocaleString('de-DE');
-const _finMonths = _finCfg.rawPaybackPeriod || _finCfg.paybackPeriod || 48;
-/** leasing terms inputs (only when the config carries mileage + period), e.g. "10.000 km/Jahr · 48 Monate". */
-const _leasPeriod = _leasCfg.rawPaybackPeriod || _leasCfg.paybackPeriod;
-const _leasMileage = _leasCfg.annualMileage || _leasCfg.mileage;
-const _hasLeasTerms = Boolean(_leasMileage && _leasPeriod);
-const _leasMileageStr = _leasMileage ? Number(_leasMileage).toLocaleString('de-DE') : '';
-
-/** mileage → 'X.XXX km' (de-DE grouping). */
-export function fmtKm(n: number): string {
-  return n.toLocaleString('de-DE') + ' km';
-}
-
-/**
- * Monthly rate → de-DE integer euro string (e.g. 402.12 → "402"). Rates are shown as whole
- * euros like the legacy card ("271 €"); a raw float printed directly rendered as "402.12 €",
- * which a German reader parses as 402.120 — fixed here with rounding + de-DE grouping.
- */
-export function fmtRate(n: number): string {
-  return Math.round(n).toLocaleString('de-DE');
-}
-
-/** strip a trailing parenthetical, e.g. '110 kW (150 PS)' → '110 kW'. */
-function stripParen(s: string): string {
-  return s.replace(/\s*\(.*\)/, '');
-}
-
-// Compact spec for cards: short fuel/gear labels so all five values fit ONE line
-// without clipping.
-const FUEL_SHORT: Record<string, string> = {
-  'Plug-in-Hybrid': 'Hybrid',
-  Benzin: 'Benzin',
-  Diesel: 'Diesel',
-  Elektro: 'Elektro',
-};
-const GEAR_SHORT: Record<string, string> = {
-  Automatik: 'Automatik',
-  Schaltgetriebe: 'Manuell',
-};
-
-/** five compact spec values for the grid card's one-line spec strip. */
-export function cardSpec(car: AutobahnCar): string[] {
-  const fuel = stripParen(car.fuel);
-  return [
-    fmtKm(car.km),
-    car.reg,
-    stripParen(car.power),
-    FUEL_SHORT[fuel] || fuel,
-    GEAR_SHORT[car.gear] || car.gear,
-  ];
-}
-
-export interface SpecLineProps {
-  items: string[];
-  size?: number;
-  /** never wrap — clip overflow with ellipsis (single line). */
-  oneLine?: boolean;
-}
-
-/** Compact pipe-separated spec line (AutoScout pattern). */
-export const SpecLine: React.FunctionComponent<SpecLineProps> = ({ items, size = 12.5, oneLine = false }) => (
-  <div
-    style={{
-      display: 'flex',
-      flexWrap: oneLine ? 'nowrap' : 'wrap',
-      alignItems: 'center',
-      gap: '2px 8px',
-      fontSize: size,
-      color: 'var(--md-on-surface-variant)',
-      ...(oneLine ? { overflow: 'hidden', whiteSpace: 'nowrap' } : {}),
-    }}
-  >
-    {items.map((v, i) => (
-      <React.Fragment key={i}>
-        {i > 0 && <span style={{ color: 'var(--md-outline-variant)', flex: 'none' }}>·</span>}
-        <span style={oneLine ? { whiteSpace: 'nowrap' } : undefined}>{v}</span>
-      </React.Fragment>
-    ))}
-  </div>
-);
-
-export interface PriceBlockProps {
-  car: AutobahnCar;
-  align?: 'left' | 'right';
-  t: TranslationFunction;
-}
-
-/** Price block — rate-first (monthly is the lead), purchase price secondary. */
-export const PriceBlock: React.FunctionComponent<PriceBlockProps> = ({ car, align = 'left', t }) => {
-  const showStrike = car.savings != null && car.savings > 600 && car.listPrice != null;
-  return (
-    <div style={{ textAlign: align }}>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'baseline',
-          gap: 5,
-          justifyContent: align === 'right' ? 'flex-end' : 'flex-start',
-        }}
-      >
-        <span
-          className="num"
-          style={{
-            fontWeight: 700,
-            fontSize: 26,
-            color: 'var(--md-primary)',
-            letterSpacing: '-.6px',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {fmtRate(car.monthly)} €
-        </span>
-        <span className="md-label-sm">{t('autobahn:card.price.perMonth')}</span>
-      </div>
-      <div
-        className="md-label-sm"
-        style={{
-          marginTop: 1,
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: '0 6px',
-          justifyContent: align === 'right' ? 'flex-end' : 'flex-start',
-        }}
-      >
-        <span style={{ whiteSpace: 'nowrap' }}>
-          {t('autobahn:card.price.purchasePrice')}{' '}
-          <b style={{ color: 'var(--md-on-surface)' }}>{car.price.toLocaleString('de-DE')} €</b>
-        </span>
-        {showStrike && (
-          <span
-            style={{
-              color: 'var(--md-on-surface-variant)',
-              textDecoration: 'line-through',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            {car.listPrice!.toLocaleString('de-DE')} €
-          </span>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export interface DropChipProps {
-  /** real price reduction in EUR; when undefined the chip renders nothing. */
-  amount?: number;
-  t: TranslationFunction;
-}
-
-/**
- * Price-drop chip — a REAL reduction on this car. White pill so it doesn't
- * compete with the solid green rating chip. Renders nothing when there is no
- * drop (we never fabricate a reduction).
- */
-export const DropChip: React.FunctionComponent<DropChipProps> = ({ amount, t }) => {
-  if (amount == null) {
-    return null;
-  }
-  return (
-    <span
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: 3,
-        height: 22,
-        padding: '0 8px',
-        borderRadius: 'var(--md-r-full)',
-        background: 'rgba(255,255,255,.94)',
-        color: 'var(--md-good)',
-        fontSize: 10.5,
-        fontWeight: 700,
-        boxShadow: 'var(--md-e1)',
-        whiteSpace: 'nowrap',
-      }}
-    >
-      <Icon name="trending-down" size={12} stroke={2.4} color="var(--md-good)" />
-      {t('autobahn:card.price.priceDropAmount', { amount: amount.toLocaleString('de-DE') })}
-    </span>
-  );
-};
-
-/** shared deal-badge pill style (NEU/drop/percent/zero-down all share the same compact shape). */
-const dealPill: React.CSSProperties = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  height: 22,
-  padding: '0 8px',
-  borderRadius: 'var(--md-r-full)',
-  fontSize: 10.5,
-  fontWeight: 700,
-  boxShadow: 'var(--md-e1)',
-  whiteSpace: 'nowrap',
-};
-
-/** Percent price-drop chip (−X%). Red pill — pairs with DropChip. Renders nothing without a real pct. */
-export const PercentChip: React.FunctionComponent<{ pct?: number }> = ({ pct }) => {
-  if (pct == null || pct <= 0) return null;
-  return <span style={{ ...dealPill, background: 'var(--md-error)', color: '#fff' }}>−{pct}%</span>;
-};
-
-/**
- * Zero-down-payment chip (offer.showDownPayment). Cyan pill. Spells out "0 € Anzahlung" where
- * there is room (grid cards / wide image) and uses the compact "0 € Anz." on the narrow list-card
- * image, so the badge row always stays on ONE line on both desktop and mobile.
- */
-export const ZeroDownChip: React.FunctionComponent<{ show?: boolean; compact?: boolean; t: TranslationFunction }> = ({
-  show,
-  compact,
-  t,
-}) => {
-  if (!show) return null;
-  return (
-    <span style={{ ...dealPill, background: 'var(--md-accent-container)', color: 'var(--md-on-accent-container)' }}>
-      {compact ? t('autobahn:card.price.zeroDownCompact') : t('autobahn:card.price.zeroDown')}
-    </span>
-  );
-};
-
-interface InlineClsProps {
-  /** CO₂ class letter, e.g. 'B'. */
-  c: string;
-}
-
-/** Small inline colored CO₂-class letter (keeps EnVKV line a fixed height). */
-const InlineCls: React.FunctionComponent<InlineClsProps> = ({ c }) => {
-  const i = Math.max(0, CO2_CLASSES.indexOf(c as (typeof CO2_CLASSES)[number]));
-  const color = CO2_COLORS[i] || 'var(--md-outline)';
-  return (
-    <span
-      style={{
-        display: 'inline-flex',
-        width: 14,
-        height: 14,
-        borderRadius: 3,
-        background: color,
-        color: '#fff',
-        fontSize: 9.5,
-        fontWeight: 800,
-        alignItems: 'center',
-        justifyContent: 'center',
-        verticalAlign: '-2px',
-        margin: '0 1px',
-      }}
-    >
-      {c}
-    </span>
-  );
-};
-
-export interface EcoLineProps {
-  car: AutobahnCar;
-  style?: React.CSSProperties;
-  t: TranslationFunction;
-}
-
-/**
- * Pkw-EnVKV legal line — full consumption + CO₂ + class. REQUIRED on every
- * German car ad and must stay visible. Quiet fine-print footnote with a fixed
- * min-height so all cards stay the same height. Handles the PHEV dual-figure
- * variant when a `phev` block is present.
- */
-export const EcoLine: React.FunctionComponent<EcoLineProps> = ({ car, style, t }) => {
-  const wrap: React.CSSProperties = {
-    borderTop: '1px solid var(--md-outline-variant)',
-    paddingTop: 8,
-    minHeight: 41,
-    fontSize: 11,
-    lineHeight: 1.5,
-    color: 'var(--md-on-surface-variant)',
-    ...style,
-  };
-  if (car.phev) {
-    const p = car.phev;
-    return (
-      <div style={wrap}>
-        {p.consEl}{' '}
-        {t('autobahn:card.eco.phevConsumptionLine', {
-          consFuel: p.consFuel,
-          consDis: p.consDis,
-          co2w: p.co2w,
-          co2classW: p.co2classW,
-          co2classD: p.co2classD,
-        })}
-      </div>
-    );
-  }
-  return (
-    <div style={wrap}>
-      {t('autobahn:card.eco.consumptionLine', { cons: car.cons, co2: car.co2, co2class: car.co2class })}
-    </div>
-  );
-};
-
-export interface PricePathsProps {
-  car: AutobahnCar;
-  t: TranslationFunction;
-}
-
-/** Map the AutobahnCar rating tone → meter segment index (0 best … 4 worst). */
-const TONE_TO_TIER: Record<string, number> = { top: 0, good: 1, fair: 2, raised: 3, high: 4 };
-
-/**
- * Segmented Preisbewertung meter + label. Extracted from PricePaths so the SRP price
- * column (Option A layout) can pin it to the BOTTOM of the column, separate from the
- * grouped price figures at the top. Renders nothing when there is no rating/band
- * (needs-data: we never draw a fake market position).
- */
-export const PriceMeter: React.FunctionComponent<{ car: AutobahnCar; t: TranslationFunction }> = ({ car, t }) => {
-  const hasMarket =
-    car.marketLow != null && car.marketAvg != null && car.marketHigh != null && car.marketHigh > car.marketLow;
-  const seg = (tier: number) => (
-    <div className="pp-meter">
-      {[0, 1, 2, 3, 4].map((s) => (
-        <span key={s} className="pp-seg" style={{ background: TIER_COLORS[s], opacity: s === tier ? 1 : 0.26 }} />
-      ))}
-    </div>
-  );
-  if (hasMarket) {
-    const delta = car.marketAvg! - car.price;
-    const good = delta > 150;
-    const mpos = Math.max(0, Math.min(1, (car.price - car.marketLow!) / (car.marketHigh! - car.marketLow!)));
-    return (
-      <div className="pp-meter-block">
-        {seg(Math.round(mpos * 4))}
-        <span className={'pp-mlabel' + (good ? ' pp-mlabel--good' : '')}>
-          {good
-            ? t('autobahn:card.pricing.belowMarket', { delta: delta.toLocaleString('de-DE') })
-            : t('autobahn:card.pricing.marketPrice')}
-        </span>
-      </div>
-    );
-  }
-  if (car.rating && TONE_TO_TIER[car.rating] != null) {
-    // No market BAND yet, but the real Preisbewertung tier (same signal as the rating chip)
-    // drives the segmented position meter. Real data, not faked.
-    const tier = TONE_TO_TIER[car.rating];
-    return (
-      <div className="pp-meter-block">
-        {seg(tier)}
-        <span className={'pp-mlabel' + (tier <= 1 ? ' pp-mlabel--good' : '')}>
-          {TIER_KEYS[tier] ? t('autobahn:tier.' + TIER_KEYS[tier]) : t('autobahn:card.pricing.marketPrice')}
-        </span>
-      </div>
-    );
-  }
-  return null;
-};
-
-interface PpRowProps {
-  /** payment-path label (Finanzierung / Leasing / Kaufen). */
-  label: string;
-  /** the figure to show — a monthly rate (money=false) or a full price (money=true). */
-  value: number;
-  /** small unit before the figure, e.g. 'mtl.'. */
-  unit?: string;
-  /** real previous price to strike through (only ever the genuine list price). */
-  old?: number | null;
-  /** the financing row — kept visually dominant (larger). */
-  focus?: boolean;
-  /** format as a full euro price (Kaufen) instead of a rounded rate. */
-  money?: boolean;
-}
-
-/**
- * One payment-path row: label (+ a quiet info marker) on the left, the price right-aligned
- * with an optional struck-through previous price above it. Even row spacing reproduces the
- * production "Finanzierung / Leasing / Kaufen" price table the design references.
- */
-const PpRow: React.FunctionComponent<PpRowProps> = ({ label, value, unit, old, focus, money }) => (
-  <div className={'pp-row' + (focus ? ' pp-row--focus' : '')}>
-    <span className="pp-row-label">
-      {label}
-      <Icon name="info" size={13} stroke={1.9} cls="pp-row-i" />
-    </span>
-    <span className="pp-row-price">
-      {old != null && <span className="pp-old">{old.toLocaleString('de-DE')} €</span>}
-      <span className="pp-now">
-        {unit && <span className="pp-unit">{unit}</span>}
-        <b className="num pp-val">{money ? value.toLocaleString('de-DE') : fmtRate(value)} €</b>
-      </span>
-    </span>
-  </div>
-);
-
-/**
- * Monthly-rate payment paths (SRP price column, TOP group) — modelled on the legacy design:
- * Finanzierung is the hero (eyebrow + big blue rate + its terms line), which both keeps the
- * financing focus and FILLS the upper gap with real default-config info (Anzahlung · Laufzeit).
- * Leasing follows as a quiet neutral row (with its own terms when the config carries them) and
- * is omitted entirely when leasing isn't active. The Kaufen row is rendered separately
- * (PriceKauf) below a divider so only the financing rate stands out — no wall of blue prices.
- */
-export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t }) => {
-  const hasLease = car.lease != null;
-  return (
-    <div className="pricepaths">
-      <div className="pp-hero">
-        <div className="pp-eyebrow">{t('autobahn:card.price.financingFrom')}</div>
-        <div className="pp-hero-rate">
-          <b className="num pp-hero-val">{fmtRate(car.monthly)} €</b>
-          <span className="pp-hero-unit">{t('autobahn:card.price.perMonth')}</span>
-        </div>
-        <div className="pp-hero-terms">
-          {t('autobahn:card.price.financeTerms', {
-            firstInstallment: _finFirstInstallment,
-            months: _finMonths,
-            count: _finMonths,
-          })}
-        </div>
-      </div>
-      {hasLease && (
-        <div className="pp-lease-row">
-          <PpRow label={t('autobahn:card.price.leasing')} value={car.lease as number} unit="mtl." />
-          {_hasLeasTerms && (
-            <div className="pp-sub-terms">
-              {t('autobahn:card.price.leaseTerms', { mileage: _leasMileageStr, months: _leasPeriod })}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-/**
- * Kaufen (outright purchase) row — the BOTTOM group, separated from the monthly-rate paths by a
- * divider. Quiet/neutral (not blue) and strikes the previous price only on a real list-price
- * saving (never a fabricated "was" price).
- */
-export const PriceKauf: React.FunctionComponent<PricePathsProps> = ({ car, t }) => {
-  const showStrike = car.savings != null && car.savings > 600 && car.listPrice != null;
-  return (
-    <PpRow label={t('autobahn:card.price.buy')} value={car.price} old={showStrike ? (car.listPrice as number) : null} money />
-  );
-};
-
-export interface PpActivityProps {
-  car: AutobahnCar;
-  t: TranslationFunction;
-}
-
-/**
- * Buyer-activity cue rendered below the CTA in the listing card.
- *
- * NEEDS-DATA: needs watchers + views. When either is missing we show the
- * 'Daten folgt' marker instead of inventing interest figures.
- */
-export const PpActivity: React.FunctionComponent<PpActivityProps> = ({ car, t }) => {
-  // No real watcher/view data (no backend yet) → render nothing rather than a "Daten folgt"
-  // placeholder that reads as perpetual loading. Wire when UserActionsAPI stats are available.
-  if (car.watchers == null || car.views == null) return null;
-  const hrs = 1 + (car.views % 6);
-  return (
-    <div className="pp-activity">
-      <Icon name="eye" size={12} stroke={1.9} />
-      {t('autobahn:card.activity.watchers', { watchers: car.watchers, hrs, count: car.watchers })}
-    </div>
-  );
-};
+// Autobahn (auto.de redesign) — car-card helper parts.
+//
+// Typed React 18 + TS port of the helper components from the design kit
+// (docs/redesign/design-source/ui_kits/website/CarCard.jsx). Pure /
+// presentational: every value comes from the `AutobahnCar` prop, there is no
+// store / API / `window` access. The design kit's `window.CO2_CLASSES` /
+// `window.CO2_COLORS` globals are replaced by the shared autobahn constants.
+//
+// These render correctly only inside a `<div className="md3">` subtree (the
+// `.pricepaths`, `.pp-*`, `.specstrip`, `.imglabel` … classes are scoped there).
+//
+// NEEDS-DATA discipline (the point of the ticket): wherever the design showed a
+// figure we have no real source for, these helpers render the NEEDS_DATA_LABEL
+// ('Daten folgt') marker instead of inventing a number — see PricePaths'
+// market band and PpActivity. DropChip renders nothing when there is no drop.
+
+import React from 'react';
+import { TranslationFunction } from '../types';
+import { defaultConfig } from '@bytebrand/fe-financing';
+
+import { Icon } from '../ui';
+import { CO2_CLASSES, CO2_COLORS, TIER_COLORS, TIER_KEYS } from '../constants';
+import { AutobahnCar } from './types';
+
+// Default financing/leasing terms shown under the rate (the SRP card has no per-car selector, so
+// these are the same default config the displayed rate is computed with — consistent, not invented).
+const _finCfg = (defaultConfig as any).financing || {};
+const _leasCfg = (defaultConfig as any).leasing || {};
+/** financing terms inputs (rendered via t in PricePaths), e.g. "0 € Anzahlung · 48 Monate Laufzeit". */
+const _finFirstInstallment = (_finCfg.firstInstallment || 0).toLocaleString('de-DE');
+const _finMonths = _finCfg.rawPaybackPeriod || _finCfg.paybackPeriod || 48;
+/** leasing terms inputs (only when the config carries mileage + period), e.g. "10.000 km/Jahr · 48 Monate". */
+const _leasPeriod = _leasCfg.rawPaybackPeriod || _leasCfg.paybackPeriod;
+const _leasMileage = _leasCfg.annualMileage || _leasCfg.mileage;
+const _hasLeasTerms = Boolean(_leasMileage && _leasPeriod);
+const _leasMileageStr = _leasMileage ? Number(_leasMileage).toLocaleString('de-DE') : '';
+
+/** mileage → 'X.XXX km' (de-DE grouping). */
+export function fmtKm(n: number): string {
+  return n.toLocaleString('de-DE') + ' km';
+}
+
+/**
+ * Monthly rate → de-DE integer euro string (e.g. 402.12 → "402"). Rates are shown as whole
+ * euros like the legacy card ("271 €"); a raw float printed directly rendered as "402.12 €",
+ * which a German reader parses as 402.120 — fixed here with rounding + de-DE grouping.
+ */
+export function fmtRate(n: number): string {
+  return Math.round(n).toLocaleString('de-DE');
+}
+
+/** strip a trailing parenthetical, e.g. '110 kW (150 PS)' → '110 kW'. */
+function stripParen(s: string): string {
+  return s.replace(/\s*\(.*\)/, '');
+}
+
+// Compact spec for cards: short fuel/gear labels so all five values fit ONE line
+// without clipping.
+const FUEL_SHORT: Record<string, string> = {
+  'Plug-in-Hybrid': 'Hybrid',
+  Benzin: 'Benzin',
+  Diesel: 'Diesel',
+  Elektro: 'Elektro',
+};
+const GEAR_SHORT: Record<string, string> = {
+  Automatik: 'Automatik',
+  Schaltgetriebe: 'Manuell',
+};
+
+/** five compact spec values for the grid card's one-line spec strip. */
+export function cardSpec(car: AutobahnCar): string[] {
+  const fuel = stripParen(car.fuel);
+  return [
+    fmtKm(car.km),
+    car.reg,
+    stripParen(car.power),
+    FUEL_SHORT[fuel] || fuel,
+    GEAR_SHORT[car.gear] || car.gear,
+  ];
+}
+
+export interface SpecLineProps {
+  items: string[];
+  size?: number;
+  /** never wrap — clip overflow with ellipsis (single line). */
+  oneLine?: boolean;
+}
+
+/** Compact pipe-separated spec line (AutoScout pattern). */
+export const SpecLine: React.FunctionComponent<SpecLineProps> = ({ items, size = 12.5, oneLine = false }) => (
+  <div
+    style={{
+      display: 'flex',
+      flexWrap: oneLine ? 'nowrap' : 'wrap',
+      alignItems: 'center',
+      gap: '2px 8px',
+      fontSize: size,
+      color: 'var(--md-on-surface-variant)',
+      ...(oneLine ? { overflow: 'hidden', whiteSpace: 'nowrap' } : {}),
+    }}
+  >
+    {items.map((v, i) => (
+      <React.Fragment key={i}>
+        {i > 0 && <span style={{ color: 'var(--md-outline-variant)', flex: 'none' }}>·</span>}
+        <span style={oneLine ? { whiteSpace: 'nowrap' } : undefined}>{v}</span>
+      </React.Fragment>
+    ))}
+  </div>
+);
+
+export interface PriceBlockProps {
+  car: AutobahnCar;
+  align?: 'left' | 'right';
+  t: TranslationFunction;
+}
+
+/** Price block — rate-first (monthly is the lead), purchase price secondary. */
+export const PriceBlock: React.FunctionComponent<PriceBlockProps> = ({ car, align = 'left', t }) => {
+  const showStrike = car.savings != null && car.savings > 600 && car.listPrice != null;
+  return (
+    <div style={{ textAlign: align }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'baseline',
+          gap: 5,
+          justifyContent: align === 'right' ? 'flex-end' : 'flex-start',
+        }}
+      >
+        <span
+          className="num"
+          style={{
+            fontWeight: 700,
+            fontSize: 26,
+            color: 'var(--md-primary)',
+            letterSpacing: '-.6px',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {fmtRate(car.monthly)} €
+        </span>
+        <span className="md-label-sm">{t('autobahn:card.price.perMonth')}</span>
+      </div>
+      <div
+        className="md-label-sm"
+        style={{
+          marginTop: 1,
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '0 6px',
+          justifyContent: align === 'right' ? 'flex-end' : 'flex-start',
+        }}
+      >
+        <span style={{ whiteSpace: 'nowrap' }}>
+          {t('autobahn:card.price.purchasePrice')}{' '}
+          <b style={{ color: 'var(--md-on-surface)' }}>{car.price.toLocaleString('de-DE')} €</b>
+        </span>
+        {showStrike && (
+          <span
+            style={{
+              color: 'var(--md-on-surface-variant)',
+              textDecoration: 'line-through',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {car.listPrice!.toLocaleString('de-DE')} €
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export interface DropChipProps {
+  /** real price reduction in EUR; when undefined the chip renders nothing. */
+  amount?: number;
+  t: TranslationFunction;
+}
+
+/**
+ * Price-drop chip — a REAL reduction on this car. White pill so it doesn't
+ * compete with the solid green rating chip. Renders nothing when there is no
+ * drop (we never fabricate a reduction).
+ */
+export const DropChip: React.FunctionComponent<DropChipProps> = ({ amount, t }) => {
+  if (amount == null) {
+    return null;
+  }
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 3,
+        height: 22,
+        padding: '0 8px',
+        borderRadius: 'var(--md-r-full)',
+        background: 'rgba(255,255,255,.94)',
+        color: 'var(--md-good)',
+        fontSize: 10.5,
+        fontWeight: 700,
+        boxShadow: 'var(--md-e1)',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      <Icon name="trending-down" size={12} stroke={2.4} color="var(--md-good)" />
+      {t('autobahn:card.price.priceDropAmount', { amount: amount.toLocaleString('de-DE') })}
+    </span>
+  );
+};
+
+/** shared deal-badge pill style (NEU/drop/percent/zero-down all share the same compact shape). */
+const dealPill: React.CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  height: 22,
+  padding: '0 8px',
+  borderRadius: 'var(--md-r-full)',
+  fontSize: 10.5,
+  fontWeight: 700,
+  boxShadow: 'var(--md-e1)',
+  whiteSpace: 'nowrap',
+};
+
+/** Percent price-drop chip (−X%). Red pill — pairs with DropChip. Renders nothing without a real pct. */
+export const PercentChip: React.FunctionComponent<{ pct?: number }> = ({ pct }) => {
+  if (pct == null || pct <= 0) return null;
+  return <span style={{ ...dealPill, background: 'var(--md-error)', color: '#fff' }}>−{pct}%</span>;
+};
+
+/**
+ * Zero-down-payment chip (offer.showDownPayment). Cyan pill. Spells out "0 € Anzahlung" where
+ * there is room (grid cards / wide image) and uses the compact "0 € Anz." on the narrow list-card
+ * image, so the badge row always stays on ONE line on both desktop and mobile.
+ */
+export const ZeroDownChip: React.FunctionComponent<{ show?: boolean; compact?: boolean; t: TranslationFunction }> = ({
+  show,
+  compact,
+  t,
+}) => {
+  if (!show) return null;
+  return (
+    <span style={{ ...dealPill, background: 'var(--md-accent-container)', color: 'var(--md-on-accent-container)' }}>
+      {compact ? t('autobahn:card.price.zeroDownCompact') : t('autobahn:card.price.zeroDown')}
+    </span>
+  );
+};
+
+interface InlineClsProps {
+  /** CO₂ class letter, e.g. 'B'. */
+  c: string;
+}
+
+/** Small inline colored CO₂-class letter (keeps EnVKV line a fixed height). */
+const InlineCls: React.FunctionComponent<InlineClsProps> = ({ c }) => {
+  const i = Math.max(0, CO2_CLASSES.indexOf(c as (typeof CO2_CLASSES)[number]));
+  const color = CO2_COLORS[i] || 'var(--md-outline)';
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        width: 14,
+        height: 14,
+        borderRadius: 3,
+        background: color,
+        color: '#fff',
+        fontSize: 9.5,
+        fontWeight: 800,
+        alignItems: 'center',
+        justifyContent: 'center',
+        verticalAlign: '-2px',
+        margin: '0 1px',
+      }}
+    >
+      {c}
+    </span>
+  );
+};
+
+export interface EcoLineProps {
+  car: AutobahnCar;
+  style?: React.CSSProperties;
+  t: TranslationFunction;
+}
+
+/**
+ * Pkw-EnVKV legal line — full consumption + CO₂ + class. REQUIRED on every
+ * German car ad and must stay visible. Quiet fine-print footnote with a fixed
+ * min-height so all cards stay the same height. Handles the PHEV dual-figure
+ * variant when a `phev` block is present.
+ */
+export const EcoLine: React.FunctionComponent<EcoLineProps> = ({ car, style, t }) => {
+  const wrap: React.CSSProperties = {
+    borderTop: '1px solid var(--md-outline-variant)',
+    paddingTop: 8,
+    minHeight: 41,
+    fontSize: 11,
+    lineHeight: 1.5,
+    color: 'var(--md-on-surface-variant)',
+    ...style,
+  };
+  if (car.phev) {
+    const p = car.phev;
+    return (
+      <div style={wrap}>
+        {p.consEl}{' '}
+        {t('autobahn:card.eco.phevConsumptionLine', {
+          consFuel: p.consFuel,
+          consDis: p.consDis,
+          co2w: p.co2w,
+          co2classW: p.co2classW,
+          co2classD: p.co2classD,
+        })}
+      </div>
+    );
+  }
+  return (
+    <div style={wrap}>
+      {t('autobahn:card.eco.consumptionLine', { cons: car.cons, co2: car.co2, co2class: car.co2class })}
+    </div>
+  );
+};
+
+export interface PricePathsProps {
+  car: AutobahnCar;
+  t: TranslationFunction;
+}
+
+/** Map the AutobahnCar rating tone → meter segment index (0 best … 4 worst). */
+const TONE_TO_TIER: Record<string, number> = { top: 0, good: 1, fair: 2, raised: 3, high: 4 };
+
+/**
+ * Segmented Preisbewertung meter + label. Extracted from PricePaths so the SRP price
+ * column (Option A layout) can pin it to the BOTTOM of the column, separate from the
+ * grouped price figures at the top. Renders nothing when there is no rating/band
+ * (needs-data: we never draw a fake market position).
+ */
+export const PriceMeter: React.FunctionComponent<{ car: AutobahnCar; t: TranslationFunction }> = ({ car, t }) => {
+  const hasMarket =
+    car.marketLow != null && car.marketAvg != null && car.marketHigh != null && car.marketHigh > car.marketLow;
+  const seg = (tier: number) => (
+    <div className="pp-meter">
+      {[0, 1, 2, 3, 4].map((s) => (
+        <span key={s} className="pp-seg" style={{ background: TIER_COLORS[s], opacity: s === tier ? 1 : 0.26 }} />
+      ))}
+    </div>
+  );
+  if (hasMarket) {
+    const delta = car.marketAvg! - car.price;
+    const good = delta > 150;
+    const mpos = Math.max(0, Math.min(1, (car.price - car.marketLow!) / (car.marketHigh! - car.marketLow!)));
+    return (
+      <div className="pp-meter-block">
+        {seg(Math.round(mpos * 4))}
+        <span className={'pp-mlabel' + (good ? ' pp-mlabel--good' : '')}>
+          {good
+            ? t('autobahn:card.pricing.belowMarket', { delta: delta.toLocaleString('de-DE') })
+            : t('autobahn:card.pricing.marketPrice')}
+        </span>
+      </div>
+    );
+  }
+  if (car.rating && TONE_TO_TIER[car.rating] != null) {
+    // No market BAND yet, but the real Preisbewertung tier (same signal as the rating chip)
+    // drives the segmented position meter. Real data, not faked.
+    const tier = TONE_TO_TIER[car.rating];
+    return (
+      <div className="pp-meter-block">
+        {seg(tier)}
+        <span className={'pp-mlabel' + (tier <= 1 ? ' pp-mlabel--good' : '')}>
+          {TIER_KEYS[tier] ? t('autobahn:tier.' + TIER_KEYS[tier]) : t('autobahn:card.pricing.marketPrice')}
+        </span>
+      </div>
+    );
+  }
+  return null;
+};
+
+interface PpRowProps {
+  /** payment-path label (Finanzierung / Leasing / Kaufen). */
+  label: string;
+  /** the figure to show — a monthly rate (money=false) or a full price (money=true). */
+  value: number;
+  /** small unit before the figure, e.g. 'mtl.'. */
+  unit?: string;
+  /** real previous price to strike through (only ever the genuine list price). */
+  old?: number | null;
+  /** the financing row — kept visually dominant (larger). */
+  focus?: boolean;
+  /** format as a full euro price (Kaufen) instead of a rounded rate. */
+  money?: boolean;
+}
+
+/**
+ * One payment-path row: label (+ a quiet info marker) on the left, the price right-aligned
+ * with an optional struck-through previous price above it. Even row spacing reproduces the
+ * production "Finanzierung / Leasing / Kaufen" price table the design references.
+ */
+const PpRow: React.FunctionComponent<PpRowProps> = ({ label, value, unit, old, focus, money }) => (
+  <div className={'pp-row' + (focus ? ' pp-row--focus' : '')}>
+    <span className="pp-row-label">
+      {label}
+      <Icon name="info" size={13} stroke={1.9} cls="pp-row-i" />
+    </span>
+    <span className="pp-row-price">
+      {old != null && <span className="pp-old">{old.toLocaleString('de-DE')} €</span>}
+      <span className="pp-now">
+        {unit && <span className="pp-unit">{unit}</span>}
+        <b className="num pp-val">{money ? value.toLocaleString('de-DE') : fmtRate(value)} €</b>
+      </span>
+    </span>
+  </div>
+);
+
+/**
+ * Monthly-rate payment paths (SRP price column, TOP group) — modelled on the legacy design:
+ * Finanzierung is the hero (eyebrow + big blue rate + its terms line), which both keeps the
+ * financing focus and FILLS the upper gap with real default-config info (Anzahlung · Laufzeit).
+ * Leasing follows as a quiet neutral row (with its own terms when the config carries them) and
+ * is omitted entirely when leasing isn't active. The Kaufen row is rendered separately
+ * (PriceKauf) below a divider so only the financing rate stands out — no wall of blue prices.
+ */
+export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t }) => {
+  const hasLease = car.lease != null;
+  return (
+    <div className="pricepaths">
+      <div className="pp-hero">
+        <div className="pp-eyebrow">{t('autobahn:card.price.financingFrom')}</div>
+        <div className="pp-hero-rate">
+          <b className="num pp-hero-val">{fmtRate(car.monthly)} €</b>
+          <span className="pp-hero-unit">{t('autobahn:card.price.perMonth')}</span>
+        </div>
+        <div className="pp-hero-terms">
+          {t('autobahn:card.price.financeTerms', {
+            firstInstallment: _finFirstInstallment,
+            months: _finMonths,
+            count: _finMonths,
+          })}
+        </div>
+      </div>
+      {hasLease && (
+        <div className="pp-lease-row">
+          <PpRow label={t('autobahn:card.price.leasing')} value={car.lease as number} unit="mtl." />
+          {_hasLeasTerms && (
+            <div className="pp-sub-terms">
+              {t('autobahn:card.price.leaseTerms', { mileage: _leasMileageStr, months: _leasPeriod })}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Kaufen (outright purchase) row — the BOTTOM group, separated from the monthly-rate paths by a
+ * divider. Quiet/neutral (not blue) and strikes the previous price only on a real list-price
+ * saving (never a fabricated "was" price).
+ */
+export const PriceKauf: React.FunctionComponent<PricePathsProps> = ({ car, t }) => {
+  const showStrike = car.savings != null && car.savings > 600 && car.listPrice != null;
+  return (
+    <PpRow label={t('autobahn:card.price.buy')} value={car.price} old={showStrike ? (car.listPrice as number) : null} money />
+  );
+};
+
+export interface PpActivityProps {
+  car: AutobahnCar;
+  t: TranslationFunction;
+}
+
+/**
+ * Buyer-activity cue rendered below the CTA in the listing card.
+ *
+ * NEEDS-DATA: needs watchers + views. When either is missing we show the
+ * 'Daten folgt' marker instead of inventing interest figures.
+ */
+export const PpActivity: React.FunctionComponent<PpActivityProps> = ({ car, t }) => {
+  // No real watcher/view data (no backend yet) → render nothing rather than a "Daten folgt"
+  // placeholder that reads as perpetual loading. Wire when UserActionsAPI stats are available.
+  if (car.watchers == null || car.views == null) return null;
+  const hrs = 1 + (car.views % 6);
+  return (
+    <div className="pp-activity">
+      <Icon name="eye" size={12} stroke={1.9} />
+      {t('autobahn:card.activity.watchers', { watchers: car.watchers, hrs, count: car.watchers })}
+    </div>
+  );
+};
+
+export interface GalleryBadgesProps {
+  car: AutobahnCar;
+  t: TranslationFunction;
+}
+
+/**
+ * Trust/activity pill row rendered under the gallery on the SRP list card — mirrors the mobile
+ * VDP gallery header (availability · views · favorites · Geprüft).
+ *
+ * PM decision (2026-07-10, Viktoriia — "this logic already exists on prod"): the row is all-or-
+ * nothing. A missing or zero view/favorite count is NOT shown as "0×" — the whole row (including
+ * the always-on availability/Geprüft pills) is hidden rather than reading as an empty/broken card.
+ * It only appears once BOTH counts are real and positive.
+ */
+export const GalleryBadges: React.FunctionComponent<GalleryBadgesProps> = ({ car, t }) => {
+  if (!car.viewsCount || !car.favoritesCount) return null;
+  return (
+    <div className="gallery-badges">
+      {car.availability && (
+        <span className="gallery-pill">
+          <Icon name="circle-check" size={16} stroke={2} color="var(--md-good)" />
+          {car.availability}
+        </span>
+      )}
+      <span className="gallery-pill">
+        <Icon name="eye" size={16} stroke={1.9} />
+        {t('autobahn:card.activity.viewsCount', { count: car.viewsCount })}
+      </span>
+      <span className="gallery-pill">
+        <Icon name="heart" size={16} stroke={1.9} />
+        {t('autobahn:card.activity.favoritesCount', { count: car.favoritesCount })}
+      </span>
+      <span className="gallery-pill">
+        <Icon name="shield-check" size={16} stroke={1.9} />
+        {t('autobahn:card.trust.checked')}
+      </span>
+    </div>
+  );
+};