@bytebrand/fe-ui-core-autobahn 1.0.0

package/vdp/VdpModules.tsx

@@ -0,0 +1,1490 @@
+// Autobahn (auto.de redesign) — Vehicle-Detail (VDP) presentational modules.
+//
+// Typed React 18 + TS port of the remaining VDP pieces from the design kit
+// (docs/redesign/design-source/ui_kits/website/CdpModules.jsx + ScreenVDP.jsx).
+// Each is a pure / presentational ES named export with an explicit props
+// interface; none touches a store, the API or `window`. The page wiring that
+// feeds these from the real stores is a SEPARATE later step (W3b).
+//
+// Replaces the design kit's globals:
+//   - `window.CO2_CLASSES` / `window.CO2_COLORS`        → ../constants
+//   - `equipFor(id)` / `car.priceHistory` / market band → typed props on VehicleDetail
+//   - `assetUrl(...)`                                    → pre-resolved image URLs (caller's job)
+//   - `data-lucide` icons                               → the ui kit's <Icon />
+// The DealerBlock from CdpModules is intentionally NOT ported (auto.de is the
+// seller, not a dealer marketplace).
+//
+// NEEDS-DATA discipline (the point of the ticket): wherever the design showed a
+// figure we have no real source for, these render the NEEDS_DATA_LABEL
+// ('Daten folgt') marker rather than inventing a value — see PriceHistory (whole
+// card) and its market band.
+//
+// All components render correctly only inside a `<div className="md3">` subtree.
+
+import React, { useState } from 'react';
+import { TranslationFunction } from '../types';
+
+import { Button, Icon, Spec, StatChip, Stars } from '../ui';
+import { CO2_CLASSES, CO2_COLORS } from '../constants';
+import { defaultVdpSpecs, EquipmentGroups, VehicleDetail, VdpSpec, VdpReview } from './types';
+import { Slider, TermChips } from './FinanceCalculator';
+
+const eur = (n: number): string => n.toLocaleString('de-DE');
+
+/** mileage → 'X.XXX km' (de-DE grouping). */
+function fmtKm(n: number): string {
+  return `${n.toLocaleString('de-DE')} km`;
+}
+
+/** strip a trailing parenthetical, e.g. '110 kW (150 PS)' → '110 kW'. */
+function stripParen(s: string): string {
+  return s.replace(/\s*\(.*\)/, '');
+}
+
+// ---------------------------------------------------------------------------
+// Header card — title, fact line, highlight chips, condition tiles
+// ---------------------------------------------------------------------------
+
+export interface VdpHeaderCardProps {
+  vehicle: VehicleDetail;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/**
+ * One container holding the entire vehicle identity: headline + trim/power, the
+ * dot-separated fact line, the hand-picked highlight chips, and the condition
+ * (zustand) tiles footer. The gallery itself is composed by the page (W3b) — this
+ * is just the textual header card that sits beneath it.
+ */
+export const VdpHeaderCard: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => {
+  const { condition } = vehicle;
+  const factLine: ReadonlyArray<readonly [string, string]> = [
+    ['gauge', fmtKm(vehicle.km)],
+    ['calendar', vehicle.reg],
+    ['cog', vehicle.gear],
+    ['fuel', stripParen(vehicle.fuel)],
+    ['user', t('autobahn:header.owners', { owners: vehicle.owners, count: vehicle.owners })],
+  ];
+  // condition.hu === 'Neu' compares the RAW backend data value, not a display string — left as-is.
+  const tiles: ReadonlyArray<readonly [string, string, string]> = [
+    ['wrench', t('autobahn:header.huLabel'), condition.hu === 'Neu' ? t('autobahn:header.huNew') : t('autobahn:header.huUntil', { date: condition.hu })],
+    ['shield-check', t('autobahn:header.accidentFree'), condition.unfallfrei ? t('autobahn:header.yes') : t('autobahn:header.no')],
+    ['clipboard-check', t('autobahn:header.serviceHistory'), condition.scheckheft ? t('autobahn:header.yes') : t('autobahn:header.no')],
+    ['award', t('autobahn:header.warranty'), condition.garantie],
+  ];
+  return (
+    <div className="mcard" style={{ marginTop: 16, padding: '22px 24px 18px' }}>
+      <div className="vdp-headrow">
+        <div style={{ minWidth: 0 }}>
+          <h1 className="md-headline" style={{ margin: '0 0 4px' }}>
+            {vehicle.make} {vehicle.model}
+          </h1>
+          <p className="md-body" style={{ margin: 0, fontSize: 15 }}>
+            {vehicle.trim} · {vehicle.power}
+          </p>
+          {/* auto.de-ID lives in the offer card (next to Finanzierungsdetails), not here */}
+        </div>
+        {/* BL-08: no chip at all when there's no real rating (empty/broken price) — never a
+            fabricated "Top Preis"-shaped badge for `rating === ''`. */}
+        {vehicle.rating && (
+          <StatChip
+            tone={vehicle.rating === 'fair' ? 'warn' : 'good'}
+            icon={vehicle.rating === 'fair' ? 'minus' : 'check'}
+          >
+            {t('autobahn:tier.' + vehicle.rating)}
+          </StatChip>
+        )}
+      </div>
+
+      {/* fact line — plain text with dot separators, not pills */}
+      <div className="vdp-meta">
+        {factLine.map(([ic, v]) => (
+          <span key={ic}>
+            <Icon name={ic} size={16} color="var(--md-on-surface-variant)" stroke={1.8} />
+            {v}
+          </span>
+        ))}
+      </div>
+
+      {/* hand-picked highlights — the single accent row of the header */}
+      <div
+        className="vdp-highlights"
+        style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, marginTop: 14 }}
+      >
+        {vehicle.highlights.slice(0, 6).map((f) => (
+          <span key={f} className="chip chip--filter chip--selected" style={{ cursor: 'default' }}>
+            <Icon name="check" size={14} stroke={2.4} />
+            {f}
+          </span>
+        ))}
+      </div>
+
+      {/* condition — footer row of the header card, divided by a hairline */}
+      <div className="zustand-grid">
+        {tiles.map(([ic, l, v]) => (
+          <div key={l} className="zustand-tile">
+            <Icon name={ic} size={19} color="var(--md-primary)" stroke={1.9} style={{ flex: 'none' }} />
+            <span style={{ minWidth: 0 }}>
+              <span
+                className="md-label-sm"
+                style={{ display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
+              >
+                {l}
+              </span>
+              <span className="md-title-sm" style={{ display: 'block' }}>
+                {v}
+              </span>
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Fahrzeugdaten spec table (mobile clamp + "Mehr anzeigen")
+// ---------------------------------------------------------------------------
+
+export interface VdpSpecTableProps {
+  vehicle: VehicleDetail;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/**
+ * Fahrzeugdaten grid of Spec items. Uses the vehicle's explicit `specs` when
+ * present, else derives the design's twelve-row layout via `defaultVdpSpecs`. On
+ * phones the table clamps to a few rows (`vdp-specs--clamp`) with a "Mehr
+ * anzeigen" toggle (pure view state).
+ */
+export const VdpSpecTable: React.FunctionComponent<VdpSpecTableProps> = ({ vehicle, t }) => {
+  const [allSpecs, setAllSpecs] = useState(false);
+  const specs: VdpSpec[] = vehicle.specs && vehicle.specs.length ? vehicle.specs : defaultVdpSpecs(vehicle);
+  return (
+    <div className="mcard" id="vdp-daten" style={{ padding: 22 }}>
+      <h2 className="md-headline-sm" style={{ marginBottom: 16 }}>
+        {t('autobahn:specTable.title')}
+      </h2>
+      <div className={'vdp-specs' + (allSpecs ? '' : ' vdp-specs--clamp')}>
+        {specs.map(([ic, l, v]) => (
+          <Spec key={l} icon={ic} label={l}>
+            {v}
+          </Spec>
+        ))}
+      </div>
+      {/* phone only: clamp button only meaningful when there are more than 6 specs */}
+      {specs.length > 6 && (
+        <button
+          className="mbtn mbtn--text show-mobile"
+          style={{ marginTop: 12, padding: 0 }}
+          onClick={() => setAllSpecs((a) => !a)}
+        >
+          {allSpecs ? t('autobahn:vdp.specs.showLess') : t('autobahn:specTable.showAll', { count: specs.length })}
+          <Icon name={allSpecs ? 'chevron-up' : 'chevron-down'} size={16} />
+        </button>
+      )}
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Equipment list (grouped + searchable)
+// ---------------------------------------------------------------------------
+
+export interface EquipmentListProps {
+  /** grouped equipment, e.g. { Komfort: [...], Sicherheit: [...] }. */
+  groups: EquipmentGroups;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** Grouped + searchable equipment list (Autohero / AutoScout pattern). */
+export const EquipmentList: React.FunctionComponent<EquipmentListProps> = ({ groups, t }) => {
+  const [q, setQ] = useState('');
+  const [openAll, setOpenAll] = useState(false);
+  const ql = q.trim().toLowerCase();
+  const entries = Object.entries(groups)
+    .map(([g, items]): [string, string[]] => [g, items.filter((it) => !ql || it.toLowerCase().includes(ql))])
+    .filter(([, items]) => items.length);
+  const total = Object.values(groups).reduce((s, a) => s + a.length, 0);
+  return (
+    <div className="mcard" id="vdp-ausstattung" style={{ padding: 22 }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 12,
+          marginBottom: 14,
+          flexWrap: 'wrap',
+        }}
+      >
+        <h2 className="md-headline-sm">
+          {t('autobahn:equipment.title')}{' '}
+          <span style={{ color: 'var(--md-on-surface-variant)', fontWeight: 600 }}>({total})</span>
+        </h2>
+        <label className="mfield" style={{ height: 40, maxWidth: 240, flex: 1, minWidth: 170 }}>
+          <Icon name="search" size={18} />
+          <input placeholder={t('autobahn:equipment.search.placeholder')} value={q} onChange={(e) => setQ(e.target.value)} />
+          {q && (
+            <button className="icon-btn" style={{ width: 28, height: 28 }} onClick={() => setQ('')}>
+              <Icon name="x" size={15} />
+            </button>
+          )}
+        </label>
+      </div>
+      <div className="eq-cols">
+        {entries.map(([g, items]) => (
+          <div key={g} style={{ breakInside: 'avoid', marginBottom: 18 }}>
+            <div className="md-title-sm" style={{ color: 'var(--md-primary)', marginBottom: 8 }}>
+              {g}
+            </div>
+            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 7 }}>
+              {(openAll || ql ? items : items.slice(0, 4)).map((it) => (
+                <li
+                  key={it}
+                  style={{
+                    display: 'flex',
+                    gap: 9,
+                    alignItems: 'flex-start',
+                    fontSize: 13.5,
+                    color: 'var(--md-on-surface-variant)',
+                  }}
+                >
+                  <Icon name="check" size={16} color="var(--md-good)" stroke={2.4} style={{ flex: 'none', marginTop: 1 }} />
+                  {it}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+      {!ql && !openAll && (
+        <button className="mbtn mbtn--text" style={{ marginTop: 4 }} onClick={() => setOpenAll(true)}>
+          {t('autobahn:equipment.showAll', { total })}
+          <Icon name="chevron-down" size={16} />
+        </button>
+      )}
+      {entries.length === 0 && <p className="md-body-sm">{t('autobahn:equipment.noResults', { q })}</p>}
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// CO₂ / energy-efficiency label
+// ---------------------------------------------------------------------------
+
+export interface Co2LabelProps {
+  vehicle: VehicleDetail;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** CO₂ / energy-efficiency label (EU-style stepped colour band). Handles PHEV. */
+export const Co2Label: React.FunctionComponent<Co2LabelProps> = ({ vehicle, t }) => {
+  const p = vehicle.phev;
+  const idx = Math.max(0, CO2_CLASSES.indexOf((p ? p.co2classW : vehicle.co2class) as (typeof CO2_CLASSES)[number]));
+  const stats: ReadonlyArray<readonly [string, string]> = p
+    ? [
+        [t('autobahn:eco.stat.powerConsumptionWeighted'), p.consEl],
+        [t('autobahn:eco.stat.fuelConsumptionWeighted'), p.consFuel],
+        [t('autobahn:eco.stat.fuelConsumptionDischarged'), p.consDis],
+        [t('autobahn:eco.stat.co2WeightedCombined'), p.co2w],
+      ]
+    : [
+        [t('autobahn:eco.stat.consumptionCombined'), vehicle.cons],
+        [t('autobahn:eco.stat.co2Emissions'), vehicle.co2],
+        [t('autobahn:eco.stat.co2Class'), vehicle.co2class],
+      ];
+  return (
+    <div className="mcard" style={{ padding: 22 }}>
+      <h2 className="md-headline-sm" style={{ marginBottom: 14 }}>
+        {t('autobahn:eco.heading')}
+      </h2>
+      <div className="co2-stats">
+        {stats.map(([l, v]) => (
+          <div key={l}>
+            <div className="md-label-sm">{l}</div>
+            <div className="md-title-sm" style={{ fontSize: 16 }}>
+              {v}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="co2-scale">
+        {CO2_CLASSES.map((c, i) => (
+          <div key={c} className={'co2-seg' + (i === idx ? ' co2-seg--on' : '')} style={{ background: CO2_COLORS[i] }}>
+            {c}
+          </div>
+        ))}
+      </div>
+      {p ? (
+        <p className="md-label-sm" style={{ margin: '10px 0 0' }}>
+          {t('autobahn:eco.co2ClassPrefix')} <b style={{ color: 'var(--md-on-surface)' }}>{p.co2classW}</b>{' '}
+          {t('autobahn:eco.weightedCombined')} · <b style={{ color: 'var(--md-on-surface)' }}>{p.co2classD}</b>{' '}
+          {t('autobahn:eco.dischargedCombined')} · {t('autobahn:eco.energyClassWltpSuffix')}
+        </p>
+      ) : (
+        <p className="md-label-sm" style={{ margin: '10px 0 0' }}>
+          {t('autobahn:eco.energyClass')}
+        </p>
+      )}
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Free-text vehicle description (Fahrzeugbeschreibung)
+// ---------------------------------------------------------------------------
+
+export interface VehicleDescriptionProps {
+  vehicle: VehicleDetail;
+  /**
+   * Pre-composed description text. When omitted a sensible default is built from
+   * the vehicle's typed fields (matching the design's template sentence).
+   */
+  text?: string;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+function defaultDescription(v: VehicleDetail, t: TranslationFunction): string {
+  return t('autobahn:description.defaultBody', {
+    make: v.make,
+    model: v.model,
+    trim: v.trim,
+    power: v.power,
+    gear: v.gear,
+    owners: v.owners,
+    reg: v.reg,
+    km: v.km.toLocaleString('de-DE'),
+    color: v.color,
+  });
+}
+
+/** Free-text vehicle description with a "Mehr anzeigen" clamp (pure view state). */
+export const VehicleDescription: React.FunctionComponent<VehicleDescriptionProps> = ({ vehicle, text, t }) => {
+  const [open, setOpen] = useState(false);
+  const body = text ?? defaultDescription(vehicle, t);
+  return (
+    <div className="mcard" style={{ padding: 22 }}>
+      <h2 className="md-headline-sm" style={{ marginBottom: 12 }}>
+        {t('autobahn:description.heading')}
+      </h2>
+      <p
+        className="md-body"
+        style={{ margin: 0, maxHeight: open ? 'none' : 96, overflow: 'hidden', position: 'relative' }}
+      >
+        {body}
+      </p>
+      <button className="mbtn mbtn--text" style={{ marginTop: 8, padding: 0 }} onClick={() => setOpen((o) => !o)}>
+        {open ? t('autobahn:description.showLess') : t('autobahn:description.showMore')}
+        <Icon name={open ? 'chevron-up' : 'chevron-down'} size={16} />
+      </button>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Trust strip
+// ---------------------------------------------------------------------------
+
+/** [kebab-case lucide icon, label]. */
+export type TrustItem = readonly [icon: string, label: string];
+
+export interface TrustStripProps {
+  /** trust badges; defaults to auto.de's four standard promises. */
+  items?: ReadonlyArray<TrustItem>;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** auto.de's four standard promises — [icon, i18n label key]. */
+const DEFAULT_TRUST: ReadonlyArray<TrustItem> = [
+  ['shield-check', 'autobahn:trust.warranty'],
+  ['undo-2', 'autobahn:trust.return'],
+  ['truck', 'autobahn:trust.delivery'],
+  ['badge-check', 'autobahn:trust.inspection'],
+];
+
+/** Horizontal trust-signal strip. */
+export const TrustStrip: React.FunctionComponent<TrustStripProps> = ({ items, t }) => (
+  <div className="trust-strip">
+    {(items ?? DEFAULT_TRUST.map(([ic, key]) => [ic, t(key)] as TrustItem)).map(([ic, label]) => (
+      <div key={label}>
+        <Icon name={ic} size={17} color="var(--md-primary)" stroke={2} style={{ flex: 'none' }} />
+        {label}
+      </div>
+    ))}
+  </div>
+);
+
+// ---------------------------------------------------------------------------
+// Price history + market band (NEEDS-DATA by default)
+// ---------------------------------------------------------------------------
+
+export interface PriceHistoryProps {
+  vehicle: VehicleDetail;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/**
+ * Price-history sparkline + market-value position bar.
+ *
+ * NEEDS-DATA: the sparkline needs `priceHistory` (with at least two points) and
+ * the position bar needs the full market band (`marketLow` / `marketAvg` /
+ * `marketHigh`). Either section that lacks real data renders the
+ * NEEDS_DATA_LABEL ('Daten folgt') marker — we never draw a fake trend or
+ * position. Both are needs-data by default, so until W3b supplies them this card
+ * shows the markers.
+ */
+export const PriceHistory: React.FunctionComponent<PriceHistoryProps> = ({ vehicle, t }) => {
+  const pts = vehicle.priceHistory;
+  const hasHistory = !!pts && pts.length >= 2;
+  const hasMarket =
+    vehicle.marketLow != null &&
+    vehicle.marketAvg != null &&
+    vehicle.marketHigh != null &&
+    vehicle.marketHigh > vehicle.marketLow;
+
+  // Nothing real to show yet — hide the whole card instead of rendering stubs.
+  if (!hasHistory && !hasMarket) return null;
+
+  // --- history sparkline (only when real points exist) ---
+  let historyBlock: React.ReactNode;
+  if (hasHistory) {
+    const prices = pts!.map((p) => p.price);
+    const lo = Math.min(...prices);
+    const hi = Math.max(...prices);
+    const W = 280;
+    const H = 70;
+    const x = (i: number) => (i / (pts!.length - 1)) * W;
+    const y = (p: number) => H - ((p - lo) / (hi - lo || 1)) * H;
+    const last = pts![pts!.length - 1];
+    const line = pts!.map((p, i) => `${i === 0 ? 'M' : 'L'} ${x(i).toFixed(1)} ${y(p.price).toFixed(1)}`).join(' ');
+    const area = `${line} L ${W} ${H} L 0 ${H} Z`;
+    const drop = vehicle.listPrice != null ? vehicle.listPrice - vehicle.price : null;
+    historyBlock = (
+      <div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
+          {drop != null && drop > 0 ? (
+            <>
+              <StatChip tone="good" icon="trending-down">
+                {t('autobahn:priceHistory.dropAmount', { amount: eur(drop) })}
+              </StatChip>
+              <span className="md-label-sm">{t('autobahn:priceHistory.sinceListing')}</span>
+            </>
+          ) : (
+            <span className="md-label-sm">{t('autobahn:priceHistory.label')}</span>
+          )}
+        </div>
+        <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="78" preserveAspectRatio="none" style={{ overflow: 'visible' }}>
+          <defs>
+            <linearGradient id="phg" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="var(--md-primary)" stopOpacity=".22" />
+              <stop offset="100%" stopColor="var(--md-primary)" stopOpacity="0" />
+            </linearGradient>
+          </defs>
+          <path d={area} fill="url(#phg)" />
+          <path d={line} fill="none" stroke="var(--md-primary)" strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
+          <circle cx={x(pts!.length - 1)} cy={y(last.price)} r="4.5" fill="var(--md-primary)" stroke="#fff" strokeWidth="2" />
+        </svg>
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
+          <span className="md-label-sm">{pts![0].label}</span>
+          <span className="md-label-sm">{last.label}</span>
+        </div>
+      </div>
+    );
+  } else {
+    historyBlock = (
+      <div>
+        <div className="md-title-sm" style={{ marginBottom: 12 }}>
+          {t('autobahn:priceHistory.title')}
+        </div>
+        <p className="md-body-sm" style={{ margin: 0, fontStyle: 'italic', color: 'var(--md-on-surface-variant)' }}>
+          {t('autobahn:common.needsData')}
+        </p>
+      </div>
+    );
+  }
+
+  // --- market-value position (only when the full band exists) ---
+  let marketBlock: React.ReactNode;
+  if (hasMarket) {
+    const mpos = Math.max(
+      0,
+      Math.min(1, (vehicle.price - vehicle.marketLow!) / (vehicle.marketHigh! - vehicle.marketLow!)),
+    );
+    const delta = vehicle.marketAvg! - vehicle.price;
+    marketBlock = (
+      <div>
+        <div className="md-title-sm" style={{ marginBottom: 12 }}>
+          {t('autobahn:marketValue.heading')}
+        </div>
+        <div
+          style={{
+            position: 'relative',
+            height: 10,
+            borderRadius: 'var(--md-r-full)',
+            background: 'linear-gradient(90deg,#0F7B43,#C7B53A 55%,#D4502B)',
+          }}
+        >
+          <span
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: `calc(${mpos * 100}% - 9px)`,
+              transform: 'translateY(-50%)',
+              width: 18,
+              height: 18,
+              borderRadius: '50%',
+              background: '#fff',
+              boxShadow: 'var(--md-e2), 0 0 0 2px var(--md-primary)',
+            }}
+          />
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
+          <span className="md-label-sm">{eur(vehicle.marketLow!)} €</span>
+          <span className="md-label-sm">{eur(vehicle.marketHigh!)} €</span>
+        </div>
+        {delta > 0 && (
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              marginTop: 12,
+              padding: '10px 12px',
+              borderRadius: 'var(--md-r-sm)',
+              background: 'var(--md-good-container)',
+            }}
+          >
+            <Icon name="badge-check" size={18} color="var(--md-on-good-container)" />
+            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--md-on-good-container)' }}>
+              {t('autobahn:marketValue.belowAverage', { rating: t('autobahn:tier.' + vehicle.rating), amount: eur(delta) })}
+            </span>
+          </div>
+        )}
+      </div>
+    );
+  } else {
+    marketBlock = (
+      <div>
+        <div className="md-title-sm" style={{ marginBottom: 12 }}>
+          {t('autobahn:marketValue.heading')}
+        </div>
+        <p className="md-body-sm" style={{ margin: 0, fontStyle: 'italic', color: 'var(--md-on-surface-variant)' }}>
+          {t('autobahn:common.needsData')}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mcard" id="vdp-preis" style={{ padding: 22 }}>
+      <h2 className="md-headline-sm" style={{ marginBottom: 4 }}>
+        {t('autobahn:priceMarket.heading')}
+      </h2>
+      <p className="md-body-sm" style={{ marginBottom: 18 }}>
+        {t('autobahn:priceMarket.description')}
+      </p>
+      <div className="pmv-grid">
+        {historyBlock}
+        {marketBlock}
+      </div>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Protection products (CNP Santander upsell) — optional, non-functional UI
+// ---------------------------------------------------------------------------
+
+/** [kebab-case lucide icon, name, description, monthly price EUR]. */
+export type ProtectionProduct = readonly [icon: string, name: string, desc: string, price: number];
+
+export interface ProtectionProductsProps {
+  /** the upsell products; defaults to the design's four CNP Santander packages. */
+  items?: ReadonlyArray<ProtectionProduct>;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/**
+ * The design's four CNP Santander packages — [icon, product name (proper noun,
+ * also the selection key), i18n description key, monthly example price EUR].
+ */
+const DEFAULT_PROTECTION: ReadonlyArray<ProtectionProduct> = [
+  ['shield-check', 'Safe Plus', 'autobahn:protection.items.safePlus.desc', 9],
+  ['life-buoy', 'Drive Pro', 'autobahn:protection.items.drivePro.desc', 7],
+  ['wrench', 'Smart Repair', 'autobahn:protection.items.smartRepair.desc', 12],
+  ['rotate-ccw', 'Smart Return', 'autobahn:protection.items.smartReturn.desc', 10],
+];
+
+/**
+ * Partner attach products (CNP Santander) sold alongside the financing. Kept as a
+ * presentational upsell demo: the selectable rows are pure VIEW state (no store /
+ * order side effects, the prices are example values), and the catalogue is a prop
+ * with sane defaults. Functional ordering is out of scope for W3a.
+ */
+export const ProtectionProducts: React.FunctionComponent<ProtectionProductsProps> = ({ items, t }) => {
+  const products: ReadonlyArray<ProtectionProduct> =
+    items ?? DEFAULT_PROTECTION.map(([ic, name, descKey, price]) => [ic, name, t(descKey), price] as ProtectionProduct);
+  const [sel, setSel] = useState<Record<string, boolean>>({});
+  const chosen = products.filter(([, n]) => sel[n]);
+  const sum = chosen.reduce((a, [, , , p]) => a + p, 0);
+  return (
+    <div className="mcard" style={{ padding: 20 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+        <span
+          style={{
+            width: 34,
+            height: 34,
+            borderRadius: 'var(--md-r-full)',
+            background: 'var(--md-sc)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: 'none',
+          }}
+        >
+          <Icon name="umbrella" size={18} color="var(--md-on-surface-variant)" />
+        </span>
+        <div>
+          <div className="md-title-sm">{t('autobahn:protection.heading')}</div>
+          <div className="md-label-sm">{t('autobahn:protection.subtitle')}</div>
+        </div>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {products.map(([ic, name, desc, price]) => (
+          <button
+            key={name}
+            onClick={() => setSel((s) => ({ ...s, [name]: !s[name] }))}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 12,
+              width: '100%',
+              textAlign: 'left',
+              cursor: 'pointer',
+              padding: '10px 12px',
+              borderRadius: 'var(--md-r-md)',
+              background: sel[name] ? 'var(--md-primary-container)' : 'var(--md-sc-low)',
+              border: '1px solid ' + (sel[name] ? 'var(--md-primary)' : 'transparent'),
+              transition: 'background var(--dur-1), border-color var(--dur-1)',
+            }}
+          >
+            <Icon
+              name={ic}
+              size={19}
+              stroke={1.8}
+              color={sel[name] ? 'var(--md-on-primary-container)' : 'var(--md-on-surface-variant)'}
+              style={{ flex: 'none' }}
+            />
+            <span style={{ flex: 1, minWidth: 0 }}>
+              <span className="md-title-sm" style={{ display: 'block', fontSize: 13.5 }}>
+                {name}
+              </span>
+              <span className="md-label-sm" style={{ display: 'block', fontSize: 11.5 }}>
+                {desc}
+              </span>
+            </span>
+            <span style={{ flex: 'none', display: 'flex', alignItems: 'center', gap: 8 }}>
+              <span className="num md-label-sm" style={{ fontWeight: 600 }}>
+                +{price} €/mtl.
+              </span>
+              <span
+                style={{
+                  width: 20,
+                  height: 20,
+                  borderRadius: '50%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  background: sel[name] ? 'var(--md-primary)' : 'transparent',
+                  border: sel[name] ? 0 : '1.5px solid var(--md-outline)',
+                }}
+              >
+                {sel[name] && <Icon name="check" size={13} stroke={3} color="#fff" />}
+              </span>
+            </span>
+          </button>
+        ))}
+      </div>
+      {sum > 0 && (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'baseline',
+            marginTop: 12,
+            paddingTop: 10,
+            borderTop: '1px solid var(--md-outline-variant)',
+          }}
+        >
+          <span className="md-label-sm">
+            {t('autobahn:protection.packagesSelected', { count: chosen.length })}
+          </span>
+          <span className="num" style={{ fontWeight: 700, color: 'var(--md-primary)' }}>
+            +{sum} €/mtl.
+          </span>
+        </div>
+      )}
+      <div className="md-label-sm" style={{ marginTop: 10, fontSize: 11.5 }}>
+        {t('autobahn:protection.exampleValues', { partner: 'CNP Santander Insurance' })}
+      </div>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// In-page anchor nav (mobile)
+// ---------------------------------------------------------------------------
+
+/** [target element id, label]. */
+export type VdpAnchor = readonly [id: string, label: string];
+
+export interface VdpAnchorsProps {
+  /** anchor chips; defaults to the four VDP sections. */
+  items?: ReadonlyArray<VdpAnchor>;
+  /**
+   * Optional navigation handler. When provided it OWNS the scroll (e.g. the page
+   * in W3b). When omitted the component falls back to scrolling the page's own
+   * element with that id into view — intrinsic anchor-nav behaviour on the
+   * document, not a data source.
+   */
+  onNavigate?: (id: string) => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** the four VDP sections — [target element id, i18n label key]. */
+const DEFAULT_ANCHORS: ReadonlyArray<VdpAnchor> = [
+  ['vdp-daten', 'autobahn:anchors.data'],
+  ['vdp-ausstattung', 'autobahn:anchors.equipment'],
+  ['vdp-preis', 'autobahn:anchors.priceMarket'],
+  ['vdp-check', 'autobahn:anchors.inspection'],
+];
+
+/** Sticky in-page anchor nav (mobile) — quiet chips. */
+export const VdpAnchors: React.FunctionComponent<VdpAnchorsProps> = ({ items, onNavigate, t }) => {
+  const anchors: ReadonlyArray<VdpAnchor> =
+    items ?? DEFAULT_ANCHORS.map(([id, key]) => [id, t(key)] as VdpAnchor);
+  const go = (id: string) => {
+    if (onNavigate) {
+      onNavigate(id);
+      return;
+    }
+    if (typeof document === 'undefined') return;
+    const el = document.getElementById(id);
+    if (!el) return;
+    let r = el.getBoundingClientRect();
+    if (!r.height && el.firstElementChild) r = el.firstElementChild.getBoundingClientRect();
+    window.scrollTo({ top: r.top + window.scrollY - 60, behavior: 'smooth' });
+  };
+  return (
+    <div className="vdp-anchors show-mobile" style={{ background: 'var(--md-sc-low)' }}>
+      {anchors.map(([id, l]) => (
+        <button key={id} className="chip" onClick={() => go(id)} style={{ flex: 'none' }}>
+          {l}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Desktop sticky summary bar
+// ---------------------------------------------------------------------------
+
+export interface VdpStickyBarProps {
+  vehicle: VehicleDetail;
+  /** thumbnail image URL (already resolved) for the docked bar. */
+  image: string;
+  /**
+   * Whether the bar is docked/visible. Controlled by the page (W3b owns the
+   * scroll position → show toggle), keeping this component pure — no window
+   * scroll listener here.
+   */
+  show: boolean;
+  /** primary CTA click. */
+  onSecure?: () => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** Desktop sticky summary bar (AS24 pattern) — docks to top, driven by `show`. */
+export const VdpStickyBar: React.FunctionComponent<VdpStickyBarProps> = ({ vehicle, image, show, onSecure, t }) => (
+  <div className={'vdp-stickytop hide-mobile' + (show ? ' vdp-stickytop--on' : '')}>
+    <div className="container" style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '10px 24px' }}>
+      <img
+        src={image}
+        alt=""
+        style={{
+          width: 64,
+          height: 44,
+          objectFit: 'cover',
+          borderRadius: 'var(--md-r-sm)',
+          background: '#fff',
+          border: '1px solid var(--md-outline-variant)',
+          flex: 'none',
+        }}
+      />
+      <div style={{ minWidth: 0, flex: 1 }}>
+        <div className="md-title-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          {vehicle.make} {vehicle.model} · {vehicle.trim}
+        </div>
+        <div className="md-label-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          {fmtKm(vehicle.km)} · {vehicle.reg} · {vehicle.gear}
+        </div>
+      </div>
+      <div style={{ textAlign: 'right', flex: 'none' }}>
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, justifyContent: 'flex-end' }}>
+          <span className="md-label-sm">{t('autobahn:sticky.from')}</span>
+          <span className="num" style={{ fontWeight: 700, fontSize: 20, color: 'var(--md-primary)', letterSpacing: '-.4px' }}>
+            {vehicle.monthly} €
+          </span>
+          <span className="md-label-sm">{t('autobahn:sticky.perMonth')}</span>
+        </div>
+        <div className="md-label-sm">{t('autobahn:sticky.purchasePrice', { price: eur(vehicle.price) })}</div>
+      </div>
+      <Button variant="filled" icon="shield-check" style={{ flex: 'none' }} onClick={onSecure}>
+        {t('autobahn:sticky.secureOffer')}
+      </Button>
+    </div>
+  </div>
+);
+
+// ---------------------------------------------------------------------------
+// Mobile sticky CTA bar
+// ---------------------------------------------------------------------------
+
+export interface VdpBottomBarProps {
+  vehicle: VehicleDetail;
+  /** primary CTA click. */
+  onSecure?: () => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** Mobile sticky bottom CTA bar — rate + Kaufpreis + "Angebot sichern". */
+export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({ vehicle, onSecure, t }) => (
+  <div className="vdp-bottom-bar show-mobile">
+    <div style={{ flex: 1, minWidth: 0 }}>
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, whiteSpace: 'nowrap' }}>
+        <span className="md-label-sm">{t('autobahn:bottom.from')}</span>
+        <span className="num" style={{ fontWeight: 700, fontSize: 22, color: 'var(--md-primary)', letterSpacing: '-.5px' }}>
+          {vehicle.monthly} €
+        </span>
+        <span className="md-label-sm">{t('autobahn:bottom.perMonth')}</span>
+      </div>
+      <div className="md-label-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+        {t('autobahn:bottom.purchasePrice', { price: eur(vehicle.price) })}
+      </div>
+    </div>
+    <Button variant="filled" icon="shield-check" style={{ flex: 'none' }} onClick={onSecure}>
+      {t('autobahn:bottom.secureOffer')}
+    </Button>
+  </div>
+);
+
+// ---------------------------------------------------------------------------
+// 130-Punkte-Check block
+// ---------------------------------------------------------------------------
+
+export interface InspectionBlockProps {
+  /** pass categories; e.g. ['Karosserie & Lack', 'Motor & Antrieb', …]. */
+  categories: string[];
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** 130-Punkte-Check block — the auto.de inspection promise, all categories pass. */
+export const InspectionBlock: React.FunctionComponent<InspectionBlockProps> = ({ categories, t }) => (
+  <div className="mcard mcard--filled" id="vdp-check" style={{ padding: 22 }}>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
+      <Icon name="badge-check" size={24} color="var(--md-primary)" />
+      <h2 className="md-headline-sm">{t('autobahn:inspection.passed')}</h2>
+    </div>
+    <div className="eq-cols">
+      {categories.map((c) => (
+        <div
+          key={c}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 9,
+            fontSize: 13.5,
+            color: 'var(--md-on-surface-variant)',
+            marginBottom: 10,
+          }}
+        >
+          <Icon name="check-circle" size={18} color="var(--md-good)" stroke={2} style={{ flex: 'none' }} />
+          {c}
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+// ---------------------------------------------------------------------------
+// Finanzierungs-/Leasingdetails popup (desktop modal / mobile bottom-sheet)
+// ---------------------------------------------------------------------------
+
+export interface FinanceDetailsModalProps {
+  /** open flag (controlled by the page). */
+  open: boolean;
+  /** active payment mode — drives labels + which legal example shows. */
+  mode: 'fin' | 'leasing' | 'cash';
+  price: number;
+  monthly: number;
+  apr: number;
+  down: number;
+  term: number;
+  /** leasing annual mileage (km/yr), shown only in leasing mode. */
+  annualMileage?: number;
+  /** REAL figures from the financing config (NOT computed — balloon/Schlussrate makes monthly·term wrong). */
+  netLoanAmount?: number;
+  /** Schlussrate (balloon final installment); shown only when > 0. */
+  finalInstallment?: number;
+  /** Gesamt(rückzahlungs)betrag from the config; shown only when > 0 (never the wrong monthly·term). */
+  grossAmount?: number;
+  /** Sollzinssatz p.a. (%); shown only when > 0. */
+  nominalRate?: number;
+  /** slider bounds — when the change handlers are supplied, the modal shows adjustment sliders. */
+  downMin?: number;
+  downMax?: number;
+  downStep?: number;
+  termMin?: number;
+  termMax?: number;
+  termStep?: number;
+  /** discrete selectable terms (months) for the Laufzeit chips. */
+  termOptions?: number[];
+  annualMileageMin?: number;
+  annualMileageMax?: number;
+  annualMileageStep?: number;
+  /** slider change handlers (same as the calculator); they recompute the rate via the page. */
+  onDownChange?: (down: number) => void;
+  onTermChange?: (term: number) => void;
+  onAnnualMileageChange?: (km: number) => void;
+  onClose: () => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/**
+ * Full payment breakdown + legal example, opened from the calculator's
+ * "Finanzierungsdetails" / "Leasingdetails" link (matches production, which uses a popup).
+ * Desktop = centered modal, mobile = bottom-sheet (CSS). All figures are derived from the
+ * live calculator props (no fabricated Sollzins/Schlussrate — only what we can compute).
+ */
+export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalProps> = ({
+  open,
+  mode,
+  price,
+  monthly,
+  apr,
+  down,
+  term,
+  annualMileage,
+  netLoanAmount,
+  finalInstallment,
+  grossAmount,
+  nominalRate,
+  downMin,
+  downMax,
+  downStep = 100,
+  termMin,
+  termMax,
+  termStep = 6,
+  termOptions,
+  annualMileageMin = 5000,
+  annualMileageMax = 60000,
+  annualMileageStep = 5000,
+  onDownChange,
+  onTermChange,
+  onAnnualMileageChange,
+  onClose,
+  t,
+}) => {
+  if (!open) return null;
+  const isLease = mode === 'leasing';
+  const title = isLease ? t('autobahn:modal.leasingDetails') : t('autobahn:modal.financingDetails');
+  // adjustable only for fin/leasing, and only when the page supplies the change handlers + bounds.
+  const adjustable = mode !== 'cash' && !!onDownChange && downMin != null && downMax != null && termMin != null && termMax != null;
+  // discrete term chip values (supplied periods, else derived from the bounds).
+  const termVals =
+    termOptions && termOptions.length
+      ? termOptions
+      : (() => {
+          const out: number[] = [];
+          for (let v = termMin as number; v <= (termMax as number); v += termStep || 12) out.push(v);
+          return out.length ? out : [term];
+        })();
+  const pct = (n: number) => `${n.toFixed(2).replace('.', ',')} %`;
+  // Only REAL figures (from the financing config). Balloon financing means monthly·term is NOT the
+  // total, so Schlussrate + Gesamtbetrag come from the config and are omitted when unavailable —
+  // never a fabricated/misleading total.
+  const netto = netLoanAmount != null ? netLoanAmount : Math.max(0, price - down);
+  const rows: Array<[string, string]> = [
+    [t('autobahn:modal.vehiclePrice'), `${eur(price)} €`],
+    [isLease ? t('autobahn:modal.leasingAmount') : t('autobahn:modal.netLoanAmount'), `${eur(netto)} €`],
+    [t('autobahn:modal.downPayment'), `${eur(down)} €`],
+    ...(isLease && annualMileage != null ? ([[t('autobahn:modal.annualMileage'), `${eur(annualMileage)} km`]] as Array<[string, string]>) : []),
+    [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
+    ...(nominalRate != null && nominalRate > 0 ? ([[t('autobahn:modal.nominalRate'), pct(nominalRate)]] as Array<[string, string]>) : []),
+    [t('autobahn:modal.effectiveRate'), pct(apr)],
+    ...(finalInstallment != null && finalInstallment > 0 ? ([[t('autobahn:modal.finalInstallment'), `${eur(finalInstallment)} €`]] as Array<[string, string]>) : []),
+    [isLease ? t('autobahn:modal.leasingRate') : t('autobahn:modal.monthlyRate'), t('autobahn:modal.ratePerMonth', { amount: eur(monthly) })],
+    ...(grossAmount != null && grossAmount > 0 ? ([[isLease ? t('autobahn:modal.totalAmount') : t('autobahn:modal.totalRepayment'), `${eur(grossAmount)} €`]] as Array<[string, string]>) : []),
+  ];
+  return (
+    <div className="fin-modal-scrim" onClick={onClose}>
+      <div className="fin-modal" role="dialog" aria-modal="true" aria-label={title} onClick={(e) => e.stopPropagation()}>
+        <div className="fin-modal-head">
+          <h2 className="md-headline-sm" style={{ margin: 0 }}>
+            {title}
+          </h2>
+          <button className="icon-btn" onClick={onClose} aria-label={t('autobahn:modal.close')}>
+            <Icon name="x" size={20} />
+          </button>
+        </div>
+        <div className="fin-modal-body">
+          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 14 }}>
+            <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
+              {eur(monthly)} €
+            </span>
+            <span className="md-label-sm">{t('autobahn:finance.perMonth')}</span>
+          </div>
+          {/* adjustment sliders — change a value and every figure below recomputes live (via the page) */}
+          {adjustable && (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 18 }}>
+              <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 as number}
+                  max={downMax as number}
+                  step={downStep}
+                  value={down}
+                  onChange={onDownChange as (n: number) => void}
+                  fmt={(v) => `${eur(Number(v))} €`}
+                />
+              </div>
+              {isLease && 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={termVals} value={term} onChange={onTermChange as (n: number) => void} t={t} />
+              </div>
+            </div>
+          )}
+          {rows.map(([l, v], i) => (
+            <div
+              key={l}
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                gap: 12,
+                padding: '9px 0',
+                borderBottom: i < rows.length - 1 ? '1px solid var(--md-outline-variant)' : 0,
+              }}
+            >
+              <span className="md-label-sm">{l}</span>
+              <span className="num" style={{ fontSize: 13.5, fontWeight: 600 }}>
+                {v}
+              </span>
+            </div>
+          ))}
+          <p className="md-label-sm" style={{ marginTop: 16, lineHeight: 1.55 }}>
+            {isLease ? t('autobahn:modal.legalLeasing') : t('autobahn:modal.legalFinancing')}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Customer ratings (auto.de Google reviews) — REAL data, loaded by the page
+// ---------------------------------------------------------------------------
+
+export interface CustomerRatingsProps {
+  /** the loaded reviews (REAL — from the WP json-quotes source). */
+  reviews: VdpReview[];
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/**
+ * Customer-rating section (the legacy VDP's "Kundenmeinungen", rebuilt on the
+ * Autobahn card). Shows the auto.de average (DERIVED from the loaded reviews — not
+ * invented) + a grid of review cards (avatar, name, stars, quote). The reviews are
+ * the SAME real source the legacy CustomerQuotes uses (auto.de Google reviews via
+ * the WordPress json-quotes feed); the page loads them and passes them in. When no
+ * reviews load, the page renders nothing (no fabricated content).
+ */
+export const CustomerRatings: React.FunctionComponent<CustomerRatingsProps> = ({ reviews, t }) => {
+  const [showAll, setShowAll] = useState(false);
+  if (!reviews || !reviews.length) return null;
+  const count = reviews.length;
+  const avg = reviews.reduce((s, r) => s + (r.rating || 0), 0) / count;
+  const shown = showAll ? reviews : reviews.slice(0, 4);
+  return (
+    <section className="mcard" id="vdp-bewertungen" style={{ padding: 22, marginTop: 44 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', marginBottom: 18 }}>
+        <h2 className="md-headline-sm" style={{ margin: 0 }}>
+          {t('autobahn:reviews.title')}
+        </h2>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginLeft: 'auto' }}>
+          <span className="num" style={{ fontWeight: 800, fontSize: 26, color: 'var(--md-on-surface)', letterSpacing: '-.5px' }}>
+            {avg.toLocaleString('de-DE', { minimumFractionDigits: 1, maximumFractionDigits: 1 })}
+          </span>
+          <span>
+            <Stars value={avg} size={16} />
+            <span className="md-label-sm" style={{ display: 'block' }}>
+              {t('autobahn:reviews.ratingCount', { count })} · via Google
+            </span>
+          </span>
+        </div>
+      </div>
+      <div className="eq-cols">
+        {shown.map((r) => (
+          <div
+            key={r.id}
+            className="mcard mcard--filled"
+            style={{ breakInside: 'avoid', marginBottom: 16, padding: 16 }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
+              {r.image ? (
+                <img
+                  src={r.image}
+                  alt=""
+                  loading="lazy"
+                  style={{ width: 40, height: 40, borderRadius: '50%', objectFit: 'cover', flex: 'none', background: 'var(--md-sc)' }}
+                />
+              ) : (
+                <span
+                  style={{
+                    width: 40,
+                    height: 40,
+                    borderRadius: '50%',
+                    flex: 'none',
+                    background: 'var(--md-primary-container)',
+                    color: 'var(--md-on-primary-container)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontWeight: 700,
+                  }}
+                >
+                  {(r.name || '?').charAt(0).toUpperCase()}
+                </span>
+              )}
+              <div style={{ minWidth: 0 }}>
+                <div className="md-title-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                  {r.name}
+                </div>
+                <Stars value={r.rating} />
+              </div>
+            </div>
+            <p className="md-body-sm" style={{ margin: 0, color: 'var(--md-on-surface-variant)' }}>
+              {r.review}
+            </p>
+          </div>
+        ))}
+      </div>
+      {reviews.length > 4 && (
+        <button className="mbtn mbtn--text" style={{ marginTop: 4 }} onClick={() => setShowAll((a) => !a)}>
+          {showAll ? t('autobahn:ratings.showLess') : t('autobahn:ratings.showMore', { count })}
+          <Icon name={showAll ? 'chevron-up' : 'chevron-down'} size={16} />
+        </button>
+      )}
+    </section>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Enquiry block — low-friction "Frage zum Fahrzeug" lead form
+// ---------------------------------------------------------------------------
+
+export interface VdpEnquiryProps {
+  /** car title for the prefilled message + heading context. */
+  carTitle: string;
+  /** auto.de-ID reference, woven into the prefilled message when present. */
+  autoDeId?: string;
+  /** sales hotline shown in the aside (tap-to-call). */
+  salesPhone?: string;
+  /**
+   * Submit handler — the page wires this to the REAL contact channel
+   * (carStore.submitContactForm). Returns a promise; the form shows a thank-you on
+   * resolve and an inline error on reject.
+   */
+  onSubmit: (data: { name: string; email: string; phone: string; message: string }) => Promise<void> | void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+const enquiryInput: React.CSSProperties = {
+  width: '100%',
+  height: 46,
+  padding: '0 14px',
+  borderRadius: 'var(--md-r-sm)',
+  border: '1px solid var(--md-outline-variant)',
+  background: 'var(--md-sc-lowest)',
+  color: 'var(--md-on-surface)',
+  font: 'inherit',
+  fontSize: 14,
+};
+
+/** field with a small floating-style label above the input. */
+const EnquiryField: React.FunctionComponent<{
+  label: string;
+  children: React.ReactNode;
+}> = ({ label, children }) => (
+  <label style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
+    <span className="md-label-sm" style={{ fontWeight: 600 }}>
+      {label}
+    </span>
+    {children}
+  </label>
+);
+
+/** [icon, i18n label key] — resolved against the drilled t in the component. */
+const ENQUIRY_BENEFITS: ReadonlyArray<[string, string]> = [
+  ['clock', 'autobahn:enquiry.benefits.fastResponse'],
+  ['shield-check', 'autobahn:enquiry.benefits.freeAndNonBinding'],
+  ['hand-coins', 'autobahn:enquiry.benefits.financingAdvice'],
+];
+
+/**
+ * Vehicle enquiry — an enriched two-pane lead block: a left trust/benefits aside (persönliche
+ * Beratung, response time, hotline) and a right structured form (preferred-contact toggle, named
+ * fields, editable prefilled message), wired to the REAL submit (carStore.submitContactForm).
+ */
+export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
+  carTitle,
+  autoDeId,
+  salesPhone = '0800 40 30 182',
+  onSubmit,
+  t,
+}) => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [pref, setPref] = useState<'email' | 'phone'>('email');
+  const [message, setMessage] = useState(
+    autoDeId
+      ? t('autobahn:enquiry.prefilledMessageWithId', { carTitle, autoDeId })
+      : t('autobahn:enquiry.prefilledMessage', { carTitle })
+  );
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState('');
+
+  const emailOk = /.+@.+\..+/.test(email);
+  const phoneOk = phone.replace(/\D/g, '').length >= 6;
+  // the preferred channel is required; the other stays optional.
+  const valid = name.trim().length > 1 && (pref === 'email' ? emailOk : phoneOk);
+
+  const submit = async (): Promise<void> => {
+    if (!valid || sending) return;
+    setSending(true);
+    setError('');
+    const note = t('autobahn:enquiry.preferredContact', {
+      channel: pref === 'email' ? t('autobahn:enquiry.contactMethod.email') : t('autobahn:enquiry.contactMethod.phone'),
+    });
+    try {
+      await onSubmit({ name: name.trim(), email: email.trim(), phone: phone.trim(), message: message.trim() + note });
+      setSent(true);
+    } catch (e) {
+      setError(t('autobahn:enquiry.form.sendError'));
+    } finally {
+      setSending(false);
+    }
+  };
+
+  if (sent) {
+    return (
+      <section className="mcard mcard--filled" id="vdp-kontakt" style={{ padding: 22, marginTop: 24 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <Icon name="check-circle" size={24} color="var(--md-good)" />
+          <div>
+            <div className="md-title-sm">{t('autobahn:enquiry.success.title')}</div>
+            <div className="md-body-sm">{t('autobahn:enquiry.success.message')}</div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="mcard" id="vdp-kontakt" style={{ padding: 0, overflow: 'hidden', marginTop: 24 }}>
+      <div className="enquiry-grid">
+        {/* trust / benefits aside */}
+        <aside className="enquiry-aside">
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+            <span className="enquiry-ico">
+              <Icon name="headset" size={20} color="var(--md-on-primary-container)" />
+            </span>
+            <h2 className="md-title" style={{ margin: 0, fontSize: 19 }}>
+              {t('autobahn:enquiry.personalConsultation')}
+            </h2>
+          </div>
+          <p className="md-body-sm" style={{ marginBottom: 16 }}>
+            {t('autobahn:enquiry.aside.description')}
+          </p>
+          <ul className="enquiry-benefits">
+            {ENQUIRY_BENEFITS.map(([ic, key]) => (
+              <li key={key}>
+                <Icon name={ic} size={17} color="var(--md-primary)" stroke={2} />
+                {t(key)}
+              </li>
+            ))}
+          </ul>
+          <a className="enquiry-phone" href={`tel:${salesPhone.replace(/\s/g, '')}`}>
+            <Icon name="phone" size={16} />
+            {salesPhone}
+          </a>
+        </aside>
+
+        {/* form */}
+        <div className="enquiry-form">
+          <div style={{ marginBottom: 14 }}>
+            <div className="md-label-sm" style={{ fontWeight: 600, marginBottom: 7 }}>
+              {t('autobahn:enquiry.contactMethod.heading')}
+            </div>
+            <div style={{ display: 'flex', gap: 8 }}>
+              <button
+                type="button"
+                className={'chip' + (pref === 'email' ? ' chip--filter chip--selected' : '')}
+                onClick={() => setPref('email')}
+              >
+                <Icon name="mail" size={15} />
+                {t('autobahn:enquiry.contactMethod.email')}
+              </button>
+              <button
+                type="button"
+                className={'chip' + (pref === 'phone' ? ' chip--filter chip--selected' : '')}
+                onClick={() => setPref('phone')}
+              >
+                <Icon name="phone" size={15} />
+                {t('autobahn:enquiry.contactMethod.phone')}
+              </button>
+            </div>
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', gap: 12 }}>
+            <EnquiryField label={t('autobahn:enquiry.form.nameLabel')}>
+              <input style={enquiryInput} placeholder={t('autobahn:enquiry.form.namePlaceholder')} value={name} onChange={(e) => setName(e.target.value)} aria-label={t('autobahn:enquiry.form.nameAria')} />
+            </EnquiryField>
+            <EnquiryField label={pref === 'email' ? t('autobahn:enquiry.form.emailLabelRequired') : t('autobahn:enquiry.form.emailLabel')}>
+              <input style={enquiryInput} type="email" placeholder={t('autobahn:enquiry.form.emailPlaceholder')} value={email} onChange={(e) => setEmail(e.target.value)} aria-label={t('autobahn:enquiry.contactMethod.email')} />
+            </EnquiryField>
+            <EnquiryField label={pref === 'phone' ? t('autobahn:enquiry.form.phoneLabelRequired') : t('autobahn:enquiry.form.phoneLabel')}>
+              <input style={enquiryInput} type="tel" placeholder={t('autobahn:enquiry.form.phonePlaceholder')} value={phone} onChange={(e) => setPhone(e.target.value)} aria-label={t('autobahn:enquiry.contactMethod.phone')} />
+            </EnquiryField>
+          </div>
+          <div style={{ marginTop: 12 }}>
+            <EnquiryField label={t('autobahn:enquiry.form.messageLabel')}>
+              <textarea
+                style={{ ...enquiryInput, height: 92, padding: '10px 14px', resize: 'vertical' }}
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                aria-label={t('autobahn:enquiry.form.messageAria')}
+              />
+            </EnquiryField>
+          </div>
+          {error && (
+            <div className="md-label-sm" style={{ color: 'var(--md-error)', marginTop: 8 }}>
+              {error}
+            </div>
+          )}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 16, flexWrap: 'wrap' }}>
+            <Button variant="filled" size="lg" icon="send" disabled={!valid || sending} onClick={submit}>
+              {sending ? t('autobahn:enquiry.form.sending') : t('autobahn:enquiry.sendButton')}
+            </Button>
+            <span className="md-label-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+              <Icon name="lock" size={13} />
+              {t('autobahn:enquiry.security')}
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// "So einfach geht's" steps
+// ---------------------------------------------------------------------------
+
+/** [title, description]. */
+export type HowItWorksStep = readonly [title: string, desc: string];
+
+export interface HowItWorksProps {
+  /** the numbered steps; defaults to the design's four-step flow. */
+  steps?: ReadonlyArray<HowItWorksStep>;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** Lucide icon per step index: Angebot / Beratung / Bezahlung / Übergabe. */
+const STEP_ICONS = ['bookmark', 'message-circle', 'credit-card', 'truck'] as const;
+
+/** the design's four-step flow — [title key, description key]. */
+const DEFAULT_STEPS: ReadonlyArray<HowItWorksStep> = [
+  ['autobahn:steps.step1.title', 'autobahn:steps.step1.description'],
+  ['autobahn:steps.step2.title', 'autobahn:steps.step2.description'],
+  ['autobahn:steps.step3.title', 'autobahn:steps.step3.description'],
+  ['autobahn:steps.step4.title', 'autobahn:steps.step4.description'],
+];
+
+/** "So einfach geht's" — icon-step cards with connector line (professional redesign). */
+export const HowItWorks: React.FunctionComponent<HowItWorksProps> = ({ steps, t }) => {
+  const items: ReadonlyArray<HowItWorksStep> =
+    steps ?? DEFAULT_STEPS.map(([titleKey, descKey]) => [t(titleKey), t(descKey)] as HowItWorksStep);
+  return (
+    <section className="hiw-section" style={{ marginTop: 44 }}>
+      <h2 className="md-headline-sm" style={{ marginBottom: 28, textAlign: 'center' }}>
+        {t('autobahn:howItWorks.title')}
+      </h2>
+      <div className="steps-4 hiw-grid">
+        {items.map(([title, desc], i) => (
+          <div key={title} className="hiw-step">
+            <div className="hiw-icon-wrap">
+              <Icon name={STEP_ICONS[i] || 'star'} size={24} color="#fff" stroke={1.8} />
+              <span className="hiw-num">{i + 1}</span>
+            </div>
+            <div className="hiw-title">{title}</div>
+            <p className="hiw-desc">{desc}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};