@bytebrand/fe-ui-core-autobahn 1.0.54 → 1.0.56

package/vdp/FinanceCalculator.tsx

@@ -1,651 +1,746 @@
-// Autobahn (auto.de redesign) — VDP offer / finance card (Finanzierung / Leasing /
-// Barzahlung).
-//
-// Structure (desktop rethink, tabs-on-top): payment-type TABS at the top (MD3 underline tabs),
-// then the rate (with any discount), then the "Rate anpassen" rate-editor, then the primary
-// "Angebot sichern" request CTA, and finally the Finanzierungs-/Leasingdetails info + popup link
-// at the foot. Laufzeit is chosen via chips (discrete terms), not a slider.
-//
-// CONTROLLED / PRESENTATIONAL — computes NOTHING financial: `mode`, `monthly`, `down`, `term` and
-// the slider/chip bounds all arrive as props; segment/slider/chip changes are reported back via
-// `onModeChange` / `onDownChange` / `onTermChange`. The real numbers come from `financingStore`.
-// The only local state is the `adjust` expander (pure view state).
-//
-// Renders correctly only inside a `<div className="md3">` subtree.
-
-import React, { useState } from 'react';
-import { TranslationFunction } from '../types';
-
-import { Button, Icon } from '../ui';
-import { TIER_LABELS, TIER_KEYS, TIER_COLORS } from '../constants';
-
-/** Payment mode segment keys. Mirrors the design's ['fin','leasing','cash']. */
-export type FinanceMode = 'fin' | 'leasing' | 'cash';
-
-export interface SliderProps {
-  min: number;
-  max: number;
-  step?: number;
-  value: number;
-  onChange: (value: number) => void;
-  /** formats the min/max end labels (and is reused by callers for the value). */
-  fmt?: (v: number) => React.ReactNode;
-  /** render the current value in a floating bubble above the thumb (Figma sheet sliders). */
-  bubble?: boolean;
-}
-
-/**
- * Range slider with a filled track and min/max end labels. The track fill is a
- * linear-gradient driven by the value's position; the design's `.mslider` class
- * styles the thumb/rail. With `bubble` the current value floats above the thumb
- * (mockup "Rate anpassen" sliders) instead of the caller printing it elsewhere.
- */
-export const Slider: React.FunctionComponent<SliderProps> = ({ min, max, step = 1, value, onChange, fmt = (v) => v, bubble }) => {
-  const span = max - min;
-  const pct = span > 0 ? ((value - min) / span) * 100 : 0;
-  return (
-    <div>
-      <div style={{ position: 'relative', paddingTop: bubble ? 38 : 0 }}>
-        {bubble && (
-          // thumb is 22px wide: interpolate the bubble anchor between half-thumb insets so it
-          // tracks the thumb center (a plain pct% drifts at the rail ends)
-          <span className="slider-bubble num" style={{ left: `calc(11px + (100% - 22px) * ${pct / 100})` }}>
-            {fmt(value)}
-          </span>
-        )}
-        <input
-          type="range"
-          className="mslider"
-          min={min}
-          max={max}
-          step={step}
-          value={value}
-          onChange={(e) => onChange(Number(e.target.value))}
-          style={{ background: `linear-gradient(90deg, var(--md-primary) ${pct}%, var(--md-sc-highest) ${pct}%)` }}
-        />
-      </div>
-      {!bubble && (
-        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
-          <span className="md-label-sm">{fmt(min)}</span>
-          <span className="md-label-sm">{fmt(max)}</span>
-        </div>
-      )}
-    </div>
-  );
-};
-
-/**
- * Segmented price-evaluation bar (Figma: 5 discrete tier segments, NOT a gradient) with a
- * white ring marker. `leftPct` overrides the marker position (the Marktwert gauge positions
- * it continuously); default = centered on the tier segment.
- */
-export const EvalBar: React.FunctionComponent<{ tier: number; leftPct?: number }> = ({ tier, leftPct }) => (
-  <div className="fin-eval-bar">
-    {TIER_COLORS.map((c, i) => (
-      <span key={i} className="fin-eval-seg" style={{ background: c }} />
-    ))}
-    <div
-      className="fin-eval-thumb"
-      style={{ left: `${leftPct != null ? leftPct : (tier + 0.5) * 20}%`, borderColor: TIER_COLORS[Math.max(0, Math.min(4, tier))] }}
-    />
-  </div>
-);
-
-/** Figma CTA icon — document with a check-in-circle badge over its bottom-right corner
- *  (no single lucide glyph matches; composed from file-text + a knocked-out check-circle).
- *  The badge backdrop assumes a filled (primary) button. */
-export const DocCheckIcon: React.FunctionComponent<{ size?: number }> = ({ size = 19 }) => {
-  // inline width/height on BOTH icons — `.mbtn .lucide { width/height: 18px }` otherwise
-  // inflates the badge to full icon size and it swallows the document
-  const badge = Math.max(9, Math.round(size * 0.5));
-  return (
-    <span style={{ position: 'relative', display: 'inline-flex', flex: 'none' }}>
-      <Icon name="file-text" size={size} stroke={2} style={{ width: size, height: size }} />
-      <span
-        style={{
-          position: 'absolute',
-          right: -3,
-          bottom: -2,
-          display: 'flex',
-          borderRadius: '50%',
-          background: 'var(--md-primary)',
-          padding: 1,
-        }}
-      >
-        <Icon name="check-circle" size={badge} stroke={2.8} style={{ width: badge, height: badge }} />
-      </span>
-    </span>
-  );
-};
-
-export interface TermChipsProps {
-  /** the selectable term values (months), e.g. [12,24,36,48,60,72]. */
-  options: number[];
-  value: number;
-  onChange: (term: number) => void;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-/** Laufzeit selector — discrete term values as tappable chips (replaces the fiddly slider). */
-export const TermChips: React.FunctionComponent<TermChipsProps> = ({ options, value, onChange, t }) => (
-  <div className="term-chips" role="group" aria-label={t('autobahn:finance.termSelection')}>
-    {options.map((m) => (
-      <button
-        key={m}
-        type="button"
-        aria-pressed={m === value}
-        className={'term-chip' + (m === value ? ' on' : '')}
-        onClick={() => onChange(m)}
-      >
-        {m}
-        <span className="tc-unit">{t('autobahn:finance.monthUnit')}</span>
-      </button>
-    ))}
-  </div>
-);
-
-export interface CalcRowProps {
-  label: React.ReactNode;
-  /** when true, drops the bottom hairline (last row). */
-  last?: boolean;
-  children?: React.ReactNode;
-}
-
-/** One label/value row inside the "Rate anpassen" / "Details" expander. */
-export const CalcRow: React.FunctionComponent<CalcRowProps> = ({ label, last, children }) => (
-  <div
-    className="calcrow"
-    style={{
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'baseline',
-      gap: 12,
-      padding: '8px 0',
-      borderBottom: last ? 0 : '1px solid var(--md-outline-variant)',
-    }}
-  >
-    <span className="md-label-sm calcrow-label">{label}</span>
-    <span className="num calcrow-value" style={{ fontSize: 13.5, fontWeight: 600 }}>
-      {children}
-    </span>
-  </div>
-);
-
-export interface FinanceCalculatorProps {
-  /** active payment mode (controlled). */
-  mode: FinanceMode;
-  /** purchase price in EUR (the cash mode hero). */
-  price: number;
-  /** previous/list price — when > price, shown struck through as the UVP in cash mode (real discount). */
-  listPrice?: number;
-  /** auto.de-ID reference code — shown with the financing/leasing condition line. */
-  autoDeId?: string;
-  /** price-rating label, e.g. 'Guter Preis' — drives the Preisbewertung indicator. */
-  ratingLabel?: string;
-  /** computed monthly rate in EUR for the current mode — supplied, NOT computed here. */
-  monthly: number;
-  /** struck old monthly rate (fe-financing oldMonthlyInstallment, isStrikeShown-gated) —
-   *  rendered as the red line-through figure next to the hero rate (fin/leasing only). */
-  oldMonthly?: number;
-  /** effective annual rate (%) for the current mode — supplied, NOT computed here. */
-  apr: number;
-  /** current down payment in EUR (controlled). */
-  down: number;
-  /** current term in months (controlled). */
-  term: number;
-  /** down-payment slider bounds. */
-  downMin: number;
-  downMax: number;
-  /** down-payment slider step (EUR). */
-  downStep?: number;
-  /** term slider bounds (months) — used to derive chip options when termOptions is absent. */
-  termMin: number;
-  termMax: number;
-  /** term slider step (months). */
-  termStep?: number;
-  /** the discrete selectable terms (months) for the Laufzeit chips. */
-  termOptions?: number[];
-  /** annual mileage in km (controlled) — leasing/financing Laufleistung/Jahr. Omit to hide the slider. */
-  annualMileage?: number;
-  /** annual-mileage slider bounds + step (km). */
-  annualMileageMin?: number;
-  annualMileageMax?: number;
-  annualMileageStep?: number;
-  /** annual-mileage slider changed. */
-  onAnnualMileageChange?: (km: number) => void;
-  /** phone number shown on the secondary CTA (touch only). */
-  phone?: string;
-  /** primary CTA click (Angebot sichern). */
-  onSecure?: () => void;
-  /** secondary CTA click (phone). */
-  onCall?: () => void;
-  /** open the Finanzierungs-/Leasingdetails popup (full breakdown + legal, expanded). Omit to hide the link. */
-  onShowDetails?: () => void;
-  /** mobile only: open the "Rate anpassen" / "Details anzeigen" sheet (collapsed/default view).
-   *  Omit to hide the trigger row (falls back to the desktop inline expander). */
-  onOpenAdjust?: () => void;
-  /** mode segment changed. */
-  onModeChange: (mode: FinanceMode) => void;
-  /** down-payment slider changed. */
-  onDownChange: (down: number) => void;
-  /** term changed. */
-  onTermChange: (term: number) => void;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-}
-
-const eur = (n: number): string => n.toLocaleString('de-DE');
-
-/** build a [min..max] step range (fallback term options when none are supplied). */
-const range = (min: number, max: number, step: number): number[] => {
-  const out: number[] = [];
-  for (let v = min; v <= max; v += step || 12) out.push(v);
-  return out.length ? out : [min];
-};
-
-/** quiet primary-colored text link (Finanzierungsdetails / Details anzeigen). */
-const DetailsLink: React.FunctionComponent<{ label: string; onClick: () => void }> = ({ label, onClick }) => (
-  <button
-    type="button"
-    onClick={onClick}
-    style={{
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: 5,
-      background: 'none',
-      border: 0,
-      padding: 0,
-      cursor: 'pointer',
-      color: 'var(--md-primary)',
-      font: 'inherit',
-      fontSize: 13,
-      fontWeight: 600,
-    }}
-  >
-    <Icon name="info" size={15} color="var(--md-primary)" />
-    {label}
-  </button>
-);
-
-/** "Rate anpassen" / "Details anzeigen" expander toggle button. */
-export const expanderBtnStyle: React.CSSProperties = {
-  width: '100%',
-  background: 'none',
-  border: 0,
-  cursor: 'pointer',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  padding: '10px 0 2px',
-  color: 'var(--md-primary)',
-  fontWeight: 600,
-  fontSize: 14,
-};
-
-const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
-  mode,
-  price,
-  listPrice,
-  autoDeId,
-  ratingLabel,
-  monthly,
-  oldMonthly,
-  down,
-  term,
-  downMin,
-  downMax,
-  downStep = 500,
-  termMin,
-  termMax,
-  termStep = 6,
-  termOptions,
-  annualMileage,
-  annualMileageMin = 5000,
-  annualMileageMax = 60000,
-  annualMileageStep = 5000,
-  onAnnualMileageChange,
-  phone = '0800 40 30 182',
-  onSecure,
-  onCall,
-  onShowDetails,
-  onOpenAdjust,
-  onModeChange,
-  onDownChange,
-  onTermChange,
-  t,
-}) => {
-  // Pure view state only — whether the adjust/details expander is open.
-  const [adjust, setAdjust] = useState(false);
-  const isCash = mode === 'cash';
-  const terms = termOptions && termOptions.length ? termOptions : range(termMin, termMax, termStep);
-  const showStrike = listPrice != null && listPrice > price;
-  // price-evaluation tier from the rating label (defaults to 'Guter Preis' tier when unmapped).
-  const tierIdx = TIER_LABELS.indexOf(ratingLabel as (typeof TIER_LABELS)[number]);
-  const evalTier = tierIdx >= 0 ? tierIdx : 1;
-  const evalTierLabel = t('autobahn:tier.' + TIER_KEYS[evalTier]);
-  // condition summary (current selection) — the auto.de-ID lives with the details link, not here.
-  const condParts: string[] = [];
-  if (!isCash) {
-    condParts.push(
-      mode === 'leasing' && annualMileage != null
-        ? t('autobahn:finance.kmPerYear', { value: eur(annualMileage) })
-        : t('autobahn:finance.downPaymentLabel', { value: eur(down) }),
-    );
-    condParts.push(t('autobahn:finance.monthsLabel', { months: term, count: term }));
-  }
-  const condLine = condParts.length ? `${t('autobahn:finance.exampleLabel')} ${condParts.join(' · ')}` : '';
-
-  return (
-    <div className="mcard mcard--elevated" style={{ padding: 20 }}>
-      {/* header — desktop only; mobile goes straight into the tabs (see mockup: no card
-          title above Finanzierung/Leasing/Kaufen on phone). */}
-      <div className="fin-card-header hide-mobile" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
-        <span
-          style={{
-            width: 34,
-            height: 34,
-            borderRadius: 'var(--md-r-full)',
-            background: 'var(--md-primary-container)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flex: 'none',
-          }}
-        >
-          <Icon name="tag" size={18} color="var(--md-on-primary-container)" />
-        </span>
-        <div style={{ fontFamily: 'var(--md-font-display)', fontSize: 18, fontWeight: 700 }}>{t('autobahn:finance.headerTitle')}</div>
-      </div>
-
-      {/* payment-type TABS on top */}
-      <div className="fin-tabs" role="tablist">
-        {(
-          [
-            ['fin', 'autobahn:finance.mode.financing'],
-            ['leasing', 'autobahn:finance.mode.leasing'],
-            ['cash', 'autobahn:finance.mode.cash'],
-          ] as Array<[FinanceMode, string]>
-        ).map(([k, labelKey]) => (
-          <button
-            key={k}
-            type="button"
-            role="tab"
-            aria-selected={mode === k}
-            className={'fin-tab' + (mode === k ? ' on' : '')}
-            onClick={() => onModeChange(k)}
-          >
-            {k === 'cash' ? (
-              <>
-                {/* mockup names the cash tab "Kaufen" on phone; desktop keeps "Barzahlung" */}
-                <span className="hide-mobile">{t(labelKey)}</span>
-                <span className="show-mobile" style={{ justifyContent: 'center' }}>
-                  {t('autobahn:card.price.buy')}
-                </span>
-              </>
-            ) : (
-              t(labelKey)
-            )}
-          </button>
-        ))}
-      </div>
-
-      {/* 2-col grid: rate|pill (row 1) + condLine|bar (row 2) — fixed right column prevents wrapping */}
-      <div className="fin-price-grid">
-        {/* col 1 row 1: hero rate — Figma: "329 €" all-big, then a small stacked column with
-            the struck old rate ABOVE "/mtl." (round 11; was a single baseline row) */}
-        <div className="fin-rate-main">
-          {/* mobile Kaufen (Figma round 14): struck list price ABOVE the price, right-aligned,
-              tight to the figure — replaces the Festpreis + UVP lines, which stay desktop-only */}
-          {isCash && showStrike && (
-            <div className="show-mobile" style={{ justifyContent: 'flex-end', lineHeight: 1, marginBottom: -5 }}>
-              <s className="num fin-rate-old">{eur(listPrice as number)} €</s>
-            </div>
-          )}
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-            {isCash ? (
-              <>
-                {/* phone: ONE unbreakable "13.249 €" span (a separate € span wraps to its own
-                    line); desktop keeps the number + quiet small € pair */}
-                <span
-                  className="num show-mobile"
-                  style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px', whiteSpace: 'nowrap' }}
-                >
-                  {eur(price)} €
-                </span>
-                <span
-                  className="num hide-mobile"
-                  style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
-                >
-                  {eur(price)}
-                </span>
-                <span className="md-body-sm hide-mobile" style={{ fontWeight: 600 }}>€</span>
-              </>
-            ) : (
-              <>
-                <span
-                  className="num"
-                  style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
-                >
-                  {eur(Math.round(monthly))} €
-                </span>
-                <span className="fin-rate-unit">
-                  {/* struck old rate (REAL oldMonthlyInstallment; SRP strikes the same source) */}
-                  {oldMonthly != null && <s className="num fin-rate-old">{eur(Math.round(oldMonthly))} €</s>}
-                  <span>{t('autobahn:finance.perMonth')}</span>
-                </span>
-              </>
-            )}
-          </div>
-          {isCash && <div className="md-label-sm hide-mobile">{t('autobahn:finance.fixedPrice')}</div>}
-          {isCash && showStrike && (
-            <div className="fin-kauf hide-mobile">
-              {t('autobahn:finance.uvp')} <s>{eur(listPrice as number)} €</s>
-            </div>
-          )}
-        </div>
-        {/* col 2 row 1: price-rating pill (Figma: bold colored label, NO icon) */}
-        <div>
-          {ratingLabel && (
-            <span
-              className="fin-eval-pill"
-              style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
-              aria-label={t('autobahn:finance.priceRatingAria', { rating: evalTierLabel })}
-            >
-              {evalTierLabel}
-            </span>
-          )}
-        </div>
-        {/* col 1 row 2: condition line */}
-        <div className="fin-cond">{condLine}</div>
-        {/* col 2 row 2: segmented evaluation bar (Figma: discrete tiers, not a gradient) */}
-        <div>{ratingLabel && <EvalBar tier={evalTier} />}</div>
-      </div>
-
-      {/* ============================== DESKTOP (≥601px) — unchanged ============================== */}
-      <div className="hide-mobile">
-        {/* RATE EDIT (Rate anpassen) — between the rate and the request CTA */}
-        <div className="fin-adjust">
-          <button onClick={() => setAdjust((a) => !a)} style={expanderBtnStyle}>
-            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
-              <Icon name={isCash ? 'list' : 'sliders-horizontal'} size={16} color="var(--md-primary)" />
-              {isCash ? t('autobahn:finance.detailsShow') : t('autobahn:finance.adjustRate')}
-            </span>
-            <Icon name={adjust ? 'chevron-up' : 'chevron-down'} size={18} color="var(--md-primary)" />
-          </button>
-          {adjust &&
-            (isCash ? (
-              <div style={{ marginTop: 4 }}>
-                <CalcRow label={t('autobahn:finance.paymentLabel')}>{t('autobahn:finance.paymentValue')}</CalcRow>
-                <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
-                <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
-                  {t('autobahn:finance.deliveryValue')}
-                </CalcRow>
-              </div>
-            ) : (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 8 }}>
-                <div>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
-                    <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
-                    <span className="num" style={{ fontWeight: 700 }}>
-                      {eur(down)} €
-                    </span>
-                  </div>
-                  <Slider
-                    min={downMin}
-                    max={downMax}
-                    step={downStep}
-                    value={down}
-                    onChange={onDownChange}
-                    fmt={(v) => `${eur(Number(v))} €`}
-                  />
-                </div>
-                {annualMileage != null && onAnnualMileageChange && (
-                  <div>
-                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
-                      <span className="md-title-sm">{t('autobahn:finance.annualMileageLabel')}</span>
-                      <span className="num" style={{ fontWeight: 700 }}>
-                        {eur(annualMileage)} km
-                      </span>
-                    </div>
-                    <Slider
-                      min={annualMileageMin}
-                      max={annualMileageMax}
-                      step={annualMileageStep}
-                      value={annualMileage}
-                      onChange={onAnnualMileageChange}
-                      fmt={(v) => `${eur(Number(v))} km`}
-                    />
-                  </div>
-                )}
-                <div>
-                  <div className="md-title-sm" style={{ marginBottom: 8 }}>
-                    {t('autobahn:finance.termSelection')}
-                  </div>
-                  <TermChips options={terms} value={term} onChange={onTermChange} t={t} />
-                </div>
-                <div>
-                  <CalcRow label={t('autobahn:finance.purchasePrice')}>{eur(price)} €</CalcRow>
-                  <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
-                  <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
-                    {t('autobahn:finance.deliveryValue')}
-                  </CalcRow>
-                </div>
-              </div>
-            ))}
-        </div>
-
-        {/* REQUEST CTA */}
-        <Button variant="filled" block size="lg" icon="shield-check" style={{ marginTop: 14 }} onClick={onSecure}>
-          {t('autobahn:finance.secureOffer')}
-        </Button>
-        {/* phone CTA — touch only (hidden on desktop via .fin-call) */}
-        <div className="fin-call">
-          <Button variant="outlined" block icon="phone" onClick={onCall}>
-            {phone}
-          </Button>
-        </div>
-
-        {/* auto.de-ID in front of the Finanzierungs-/Leasingdetails link — one row, under everything */}
-        {(autoDeId || (!isCash && onShowDetails)) && (
-          <div className="fin-info">
-            {autoDeId && <span className="fin-id">auto.de-ID {autoDeId}</span>}
-            {!isCash && onShowDetails && (
-              <DetailsLink
-                label={mode === 'leasing' ? t('autobahn:finance.leasingDetails') : t('autobahn:finance.financingDetails')}
-                onClick={onShowDetails}
-              />
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* ============================== MOBILE (≤600px) — new layout ============================== */}
-      <div className="show-mobile" style={{ flexDirection: 'column' }}>
-        {/* side-by-side CTAs — mockup ratio ~2:1, with the tiny auto.de-ID sitting
-            directly under the Anrufen button (not in its own full-width row). */}
-        <div className="fin-cta-row" style={{ display: 'flex', gap: 10, marginTop: 14, alignItems: 'flex-start' }}>
-          {/* Figma CTA icon: document + check badge (composed — no single lucide glyph) */}
-          <Button variant="filled" size="lg" style={{ flex: 2 }} onClick={onSecure}>
-            <DocCheckIcon />
-            {t('autobahn:finance.secureOffer')}
-          </Button>
-          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
-            <Button variant="outlined" size="lg" icon="phone" block onClick={onCall}>
-              {t('autobahn:finance.callCta')}
-            </Button>
-            {autoDeId && (
-              <span
-                className="num"
-                style={{ fontSize: 10, fontWeight: 700, color: 'var(--md-primary)', textAlign: 'center', whiteSpace: 'nowrap' }}
-              >
-                auto.de ID: {autoDeId}
-              </span>
-            )}
-          </div>
-        </div>
-
-        {/* Persönliche Beratung (left) · divider · Finanzierungs-/Leasingdetails or hint (right) */}
-        <div className="fin-info">
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0, flex: 1 }}>
-            <Icon name="user" size={18} color="var(--md-on-surface-variant)" style={{ flex: 'none' }} />
-            <div style={{ minWidth: 0 }}>
-              <div className="md-label-sm" style={{ fontWeight: 700, color: 'var(--md-on-surface)' }}>
-                {t('autobahn:finance.personalConsultation')}
-              </div>
-              <div className="md-label-sm">{t('autobahn:finance.personalConsultationSub')}</div>
-            </div>
-          </div>
-          <span style={{ width: 1, alignSelf: 'stretch', background: 'var(--md-outline-variant)', flex: 'none' }} />
-          {!isCash && onShowDetails ? (
-            <button
-              type="button"
-              onClick={onShowDetails}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 8,
-                background: 'none',
-                border: 0,
-                padding: 0,
-                cursor: 'pointer',
-                font: 'inherit',
-                color: 'var(--md-on-surface)',
-                textAlign: 'left',
-              }}
-            >
-              <Icon name="info" size={18} color="var(--md-on-surface-variant)" style={{ flex: 'none' }} />
-              {/* no max-width: "Finanzierungsdetails" is one unbreakable word — capping the
-                  span clipped it mid-word instead of wrapping */}
-              <span className="md-label-sm" style={{ lineHeight: 1.5 }}>
-                {mode === 'leasing' ? t('autobahn:finance.leasingDetails') : t('autobahn:finance.financingDetails')}
-              </span>
-            </button>
-          ) : (
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--md-on-surface-variant)' }}>
-              <Icon name="info" size={15} />
-              <span className="md-label-sm">{t('autobahn:finance.financingLeasingPossible')}</span>
-            </div>
-          )}
-        </div>
-
-        {/* "Rate anpassen" / "Details anzeigen" — opens the full bottom sheet (not an inline expander) */}
-        {onOpenAdjust && (
-          <button
-            type="button"
-            onClick={onOpenAdjust}
-            style={{ ...expanderBtnStyle, borderTop: '1px solid var(--md-outline-variant)', marginTop: 4, padding: '14px 0 2px' }}
-          >
-            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
-              <Icon name={isCash ? 'list' : 'sliders-horizontal'} size={16} color="var(--md-primary)" />
-              {isCash ? t('autobahn:finance.detailsShow') : t('autobahn:finance.adjustRate')}
-            </span>
-            <Icon name="chevron-right" size={18} color="var(--md-primary)" />
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default FinanceCalculator;
+// Autobahn (auto.de redesign) — VDP offer / finance card (Finanzierung / Leasing /
+// Barzahlung).
+//
+// Structure (desktop rethink, tabs-on-top): payment-type TABS at the top (MD3 underline tabs),
+// then the rate (with any discount), then the "Rate anpassen" rate-editor, then the primary
+// "Angebot sichern" request CTA, and finally the Finanzierungs-/Leasingdetails info + popup link
+// at the foot. Laufzeit is chosen via chips (discrete terms), not a slider.
+//
+// CONTROLLED / PRESENTATIONAL — computes NOTHING financial: `mode`, `monthly`, `down`, `term` and
+// the slider/chip bounds all arrive as props; segment/slider/chip changes are reported back via
+// `onModeChange` / `onDownChange` / `onTermChange`. The real numbers come from `financingStore`.
+// The only local state is the `adjust` expander (pure view state).
+//
+// Renders correctly only inside a `<div className="md3">` subtree.
+
+import React, { useState } from 'react';
+import { TranslationFunction } from '../types';
+
+import { Button, Icon } from '../ui';
+import { TIER_LABELS, TIER_KEYS, TIER_COLORS } from '../constants';
+
+/** Payment mode segment keys. Mirrors the design's ['fin','leasing','cash']. */
+export type FinanceMode = 'fin' | 'leasing' | 'cash';
+
+export interface SliderProps {
+  min: number;
+  max: number;
+  step?: number;
+  value: number;
+  onChange: (value: number) => void;
+  /** formats the min/max end labels (and is reused by callers for the value). */
+  fmt?: (v: number) => React.ReactNode;
+  /** render the current value in a floating bubble above the thumb (Figma sheet sliders). */
+  bubble?: boolean;
+  /** space reserved below the rail for the bubble's tail (Figma differs per sheet: fin vs leasing). */
+  bubblePaddingBottom?: number;
+}
+
+/**
+ * Range slider with a filled track and min/max end labels. The track fill is a
+ * linear-gradient driven by the value's position; the design's `.mslider` class
+ * styles the thumb/rail. With `bubble` the current value floats above the thumb
+ * (mockup "Rate anpassen" sliders) instead of the caller printing it elsewhere.
+ */
+export const Slider: React.FunctionComponent<SliderProps> = ({
+  min,
+  max,
+  step = 1,
+  value,
+  onChange,
+  fmt = (v) => v,
+  bubble,
+  bubblePaddingBottom = 34,
+}) => {
+  const span = max - min;
+  const pct = span > 0 ? ((value - min) / span) * 100 : 0;
+  return (
+    <div>
+      <div style={{ position: 'relative', paddingTop: bubble ? 44 : 0, paddingBottom: bubble ? bubblePaddingBottom : 0 }}>
+        {bubble && (
+          // thumb is 22px wide: interpolate the bubble anchor between half-thumb insets so it
+          // tracks the thumb center (a plain pct% drifts at the rail ends)
+          <span className="slider-bubble num" style={{ left: `calc(11px + (100% - 22px) * ${pct / 100})` }}>
+            {fmt(value)}
+          </span>
+        )}
+        <input
+          type="range"
+          className="mslider"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={(e) => onChange(Number(e.target.value))}
+          style={{ background: `linear-gradient(90deg, var(--md-primary) ${pct}%, var(--md-sc-highest) ${pct}%)` }}
+        />
+      </div>
+      {!bubble && (
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
+          <span className="md-label-sm">{fmt(min)}</span>
+          <span className="md-label-sm">{fmt(max)}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Segmented price-evaluation bar (Figma: 5 discrete tier segments, NOT a gradient) with a
+ * white ring marker. `leftPct` overrides the marker position (the Marktwert gauge positions
+ * it continuously); default = centered on the tier segment.
+ */
+export const EvalBar: React.FunctionComponent<{ tier: number; leftPct?: number }> = ({ tier, leftPct }) => (
+  <div className="fin-eval-bar">
+    {TIER_COLORS.map((c, i) => (
+      <span key={i} className="fin-eval-seg" style={{ background: c }} />
+    ))}
+    <div
+      className={`fin-eval-thumb${TIER_KEYS[Math.max(0, Math.min(4, tier))] === 'good' ? ' fin-eval-thumb--good' : ''}`}
+      style={{ left: `${leftPct != null ? leftPct : (tier + 0.5) * 20}%`, borderColor: TIER_COLORS[Math.max(0, Math.min(4, tier))] }}
+    />
+  </div>
+);
+
+/** Figma CTA icon — document with a check-in-circle badge over its bottom-right corner
+ *  (no single lucide glyph matches; composed from file-text + a knocked-out check-circle).
+ *  The badge backdrop assumes a filled (primary) button. */
+export const DocCheckIcon: React.FunctionComponent<{ size?: number }> = ({ size = 19 }) => {
+  // inline width/height on BOTH icons — `.mbtn .lucide { width/height: 18px }` otherwise
+  // inflates the badge to full icon size and it swallows the document
+  const badge = Math.max(9, Math.round(size * 0.5));
+  return (
+    <span style={{ position: 'relative', display: 'inline-flex', flex: 'none' }}>
+      <Icon name="file-text" size={size} stroke={2} style={{ width: size, height: size }} />
+      <span
+        style={{
+          position: 'absolute',
+          right: -3,
+          bottom: -2,
+          display: 'flex',
+          borderRadius: '50%',
+          background: 'var(--md-primary)',
+          padding: 1,
+        }}
+      >
+        <Icon name="check-circle" size={badge} stroke={2.8} style={{ width: badge, height: badge }} />
+      </span>
+    </span>
+  );
+};
+
+export interface TermChipsProps {
+  /** the selectable term values (months), e.g. [12,24,36,48,60,72]. */
+  options: number[];
+  value: number;
+  onChange: (term: number) => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** Laufzeit selector — discrete term values as tappable chips (replaces the fiddly slider). */
+export const TermChips: React.FunctionComponent<TermChipsProps> = ({ options, value, onChange, t }) => (
+  <div className="term-chips" role="group" aria-label={t('autobahn:finance.termSelection')}>
+    {options.map((m) => (
+      <button
+        key={m}
+        type="button"
+        aria-pressed={m === value}
+        className={'term-chip' + (m === value ? ' on' : '')}
+        onClick={() => onChange(m)}
+      >
+        {m}
+        <span className="tc-unit">{t('autobahn:finance.monthUnit')}</span>
+      </button>
+    ))}
+  </div>
+);
+
+export interface CalcRowProps {
+  label: React.ReactNode;
+  /** when true, drops the bottom hairline (last row). */
+  last?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+/** One label/value row inside the "Rate anpassen" / "Details" expander. */
+export const CalcRow: React.FunctionComponent<CalcRowProps> = ({ label, last, children, className }) => (
+  <div
+    className={'calcrow' + (className ? ' ' + className : '')}
+    style={{
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'baseline',
+      gap: 12,
+      padding: '8px 0',
+      borderBottom: last ? 0 : '1px solid var(--md-outline-variant)',
+    }}
+  >
+    <span className="md-label-sm calcrow-label">{label}</span>
+    <span className="num calcrow-value" style={{ fontSize: 13.5, fontWeight: 600 }}>
+      {children}
+    </span>
+  </div>
+);
+
+export interface FinanceCalculatorProps {
+  /** active payment mode (controlled). */
+  mode: FinanceMode;
+  /** purchase price in EUR (the cash mode hero). */
+  price: number;
+  /** previous/list price — when > price, shown struck through as the UVP in cash mode (real discount). */
+  listPrice?: number;
+  /** auto.de-ID reference code — shown with the financing/leasing condition line. */
+  autoDeId?: string;
+  /** price-rating label, e.g. 'Guter Preis' — drives the Preisbewertung indicator. */
+  ratingLabel?: string;
+  /** computed monthly rate in EUR for the current mode — supplied, NOT computed here. */
+  monthly: number;
+  /** struck old monthly rate (fe-financing oldMonthlyInstallment, isStrikeShown-gated) —
+   *  rendered as the red line-through figure next to the hero rate (fin/leasing only). */
+  oldMonthly?: number;
+  /** effective annual rate (%) for the current mode — supplied, NOT computed here. */
+  apr: number;
+  /** current down payment in EUR (controlled). */
+  down: number;
+  /** current term in months (controlled). */
+  term: number;
+  /** down-payment slider bounds. */
+  downMin: number;
+  downMax: number;
+  /** down-payment slider step (EUR). */
+  downStep?: number;
+  /** term slider bounds (months) — used to derive chip options when termOptions is absent. */
+  termMin: number;
+  termMax: number;
+  /** term slider step (months). */
+  termStep?: number;
+  /** the discrete selectable terms (months) for the Laufzeit chips. */
+  termOptions?: number[];
+  /** annual mileage in km (controlled) — leasing/financing Laufleistung/Jahr. Omit to hide the slider. */
+  annualMileage?: number;
+  /** annual-mileage slider bounds + step (km). */
+  annualMileageMin?: number;
+  annualMileageMax?: number;
+  annualMileageStep?: number;
+  /** annual-mileage slider changed. */
+  onAnnualMileageChange?: (km: number) => void;
+  /** phone number shown on the secondary CTA (touch only). */
+  phone?: string;
+  /** primary CTA click (Angebot sichern). */
+  onSecure?: () => void;
+  /** secondary CTA click (phone). */
+  onCall?: () => void;
+  /** open the Finanzierungs-/Leasingdetails popup (full breakdown + legal, expanded). Omit to hide the link. */
+  onShowDetails?: () => void;
+  /** mobile only: open the "Rate anpassen" / "Details anzeigen" sheet (collapsed/default view).
+   *  Omit to hide the trigger row (falls back to the desktop inline expander). */
+  onOpenAdjust?: () => void;
+  /** mode segment changed. */
+  onModeChange: (mode: FinanceMode) => void;
+  /** down-payment slider changed. */
+  onDownChange: (down: number) => void;
+  /** term changed. */
+  onTermChange: (term: number) => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+const eur = (n: number): string => n.toLocaleString('de-DE');
+
+/** build a [min..max] step range (fallback term options when none are supplied). */
+const range = (min: number, max: number, step: number): number[] => {
+  const out: number[] = [];
+  for (let v = min; v <= max; v += step || 12) out.push(v);
+  return out.length ? out : [min];
+};
+
+/** quiet primary-colored text link (Finanzierungsdetails / Details anzeigen). */
+const DetailsLink: React.FunctionComponent<{ label: string; onClick: () => void }> = ({ label, onClick }) => (
+  <button
+    type="button"
+    onClick={onClick}
+    style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 5,
+      background: 'none',
+      border: 0,
+      padding: 0,
+      cursor: 'pointer',
+      color: 'var(--md-primary)',
+      font: 'inherit',
+      fontSize: 13,
+      fontWeight: 600,
+    }}
+  >
+    <Icon name="info" size={15} color="var(--md-primary)" />
+    {label}
+  </button>
+);
+
+/** "Rate anpassen" / "Details anzeigen" expander toggle button. */
+export const expanderBtnStyle: React.CSSProperties = {
+  width: '100%',
+  background: 'none',
+  border: 0,
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '10px 0 2px',
+  color: 'var(--md-primary)',
+  fontWeight: 600,
+  fontSize: 14,
+};
+
+const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
+  mode,
+  price,
+  listPrice,
+  autoDeId,
+  ratingLabel,
+  monthly,
+  oldMonthly,
+  down,
+  term,
+  downMin,
+  downMax,
+  downStep = 500,
+  termMin,
+  termMax,
+  termStep = 6,
+  termOptions,
+  annualMileage,
+  annualMileageMin = 5000,
+  annualMileageMax = 60000,
+  annualMileageStep = 5000,
+  onAnnualMileageChange,
+  phone = '0800 40 30 182',
+  onSecure,
+  onCall,
+  onShowDetails,
+  onOpenAdjust,
+  onModeChange,
+  onDownChange,
+  onTermChange,
+  t,
+}) => {
+  // Pure view state only — whether the adjust/details expander is open.
+  const [adjust, setAdjust] = useState(false);
+  const isCash = mode === 'cash';
+  const terms = termOptions && termOptions.length ? termOptions : range(termMin, termMax, termStep);
+  const showStrike = listPrice != null && listPrice > price;
+  // price-evaluation tier from the rating label (defaults to 'Guter Preis' tier when unmapped).
+  const tierIdx = TIER_LABELS.indexOf(ratingLabel as (typeof TIER_LABELS)[number]);
+  const evalTier = tierIdx >= 0 ? tierIdx : 1;
+  const evalTierLabel = t('autobahn:tier.' + TIER_KEYS[evalTier]);
+  // condition summary (current selection) — the auto.de-ID lives with the details link, not here.
+  const condParts: string[] = [];
+  if (!isCash) {
+    condParts.push(
+      mode === 'leasing' && annualMileage != null
+        ? t('autobahn:finance.kmPerYear', { value: eur(annualMileage) })
+        : t('autobahn:finance.downPaymentLabel', { value: eur(down) }),
+    );
+    condParts.push(t('autobahn:finance.monthsLabel', { months: term, count: term }));
+  }
+  const condLine = condParts.length ? `${t('autobahn:finance.exampleLabel')} ${condParts.join(' · ')}` : '';
+
+  return (
+    <div className="mcard mcard--elevated fin-calc-card" style={{ padding: 20 }}>
+      {/* header — desktop only; mobile goes straight into the tabs (see mockup: no card
+          title above Finanzierung/Leasing/Kaufen on phone). */}
+      <div className="fin-card-header hide-mobile" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
+        <span
+          style={{
+            width: 34,
+            height: 34,
+            borderRadius: 'var(--md-r-full)',
+            background: 'var(--md-primary-container)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: 'none',
+          }}
+        >
+          <Icon name="tag" size={18} color="var(--md-on-primary-container)" />
+        </span>
+        <div style={{ fontFamily: 'var(--md-font-display)', fontSize: 18, fontWeight: 700 }}>{t('autobahn:finance.headerTitle')}</div>
+      </div>
+
+      {/* payment-type TABS on top */}
+      <div className="fin-tabs" role="tablist">
+        {(
+          [
+            ['fin', 'autobahn:finance.mode.financing'],
+            ['leasing', 'autobahn:finance.mode.leasing'],
+            ['cash', 'autobahn:finance.mode.cash'],
+          ] as Array<[FinanceMode, string]>
+        ).map(([k, labelKey]) => (
+          <button
+            key={k}
+            type="button"
+            role="tab"
+            aria-selected={mode === k}
+            className={'fin-tab' + (mode === k ? ' on' : '')}
+            onClick={() => onModeChange(k)}
+          >
+            {k === 'cash' ? (
+              <>
+                {/* mockup names the cash tab "Kaufen" on phone; desktop keeps "Barzahlung" */}
+                <span className="hide-mobile">{t(labelKey)}</span>
+                <span className="show-mobile" style={{ justifyContent: 'center' }}>
+                  {t('autobahn:card.price.buy')}
+                </span>
+              </>
+            ) : (
+              t(labelKey)
+            )}
+          </button>
+        ))}
+      </div>
+
+      {/* 2-col grid: rate|pill (row 1) + condLine|bar (row 2) — fixed right column prevents wrapping */}
+      <div className="fin-price-grid" style={isCash ? { gap: '0px 16px' } : undefined}>
+        {/* col 1 row 1: hero rate — Figma: "329 €" all-big, then a small stacked column with
+            the struck old rate ABOVE "/mtl." (round 11; was a single baseline row) */}
+        <div className="fin-rate-main">
+          {/* mobile Kaufen (Figma round 14): struck list price ABOVE the price, right-aligned,
+              tight to the figure — replaces the Festpreis + UVP lines, which stay desktop-only */}
+          {isCash && showStrike && (
+            <div className="show-mobile" style={{ justifyContent: 'flex-end', lineHeight: 1, marginTop: 7 }}>
+              <s className="num fin-rate-old fin-rate-old-list">
+                {eur(listPrice as number)} €<sup>2</sup>
+              </s>
+            </div>
+          )}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
+            {isCash ? (
+              <>
+                {/* phone: ONE unbreakable "13.249 €" span (a separate € span wraps to its own
+                    line); desktop keeps the number + quiet small € pair */}
+                <span
+                  className={`num show-mobile fin-rate-cash-mobile${
+                    (() => {
+                      const digits = String(Math.round(price as number)).length;
+                      if (digits >= 8) return ' fin-rate-cash-mobile--len8';
+                      if (digits === 7) return ' fin-rate-cash-mobile--len7';
+                      if (digits === 6) return ' fin-rate-cash-mobile--len6';
+                      return '';
+                    })()
+                  }`}
+                  style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px', whiteSpace: 'nowrap' }}
+                >
+                  {eur(price)} €<sup>1</sup>
+                </span>
+                <span
+                  className="num hide-mobile"
+                  style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
+                >
+                  {eur(price)}
+                </span>
+                <span className="md-body-sm hide-mobile" style={{ fontWeight: 600 }}>€</span>
+              </>
+            ) : (
+              <>
+                <span
+                  className={`num fin-rate-hero${
+                    (() => {
+                      const digits = String(Math.round(monthly)).length;
+                      if (digits >= 6) return ' fin-rate-hero--len6';
+                      if (digits === 5) return ' fin-rate-hero--len5';
+                      if (digits === 4) return ' fin-rate-hero--len4';
+                      return '';
+                    })()
+                  }`}
+                  style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
+                >
+                  {eur(Math.round(monthly))}<span style={{ marginLeft: 6 }}>€</span>
+                </span>
+                <span className="fin-rate-unit">
+                  {/* struck old rate (REAL oldMonthlyInstallment; SRP strikes the same source) */}
+                  {oldMonthly != null && (
+                    <>
+                      <span className="fin-rate-example-label">{t('autobahn:finance.exampleLabel')}</span>
+                      <s
+                        className={`num fin-rate-old fin-rate-example-price${
+                          String(Math.round(oldMonthly)).length >= 5
+                            ? ' fin-rate-example-price--len5'
+                            : String(Math.round(oldMonthly)).length === 4
+                              ? ' fin-rate-example-price--len4'
+                              : ''
+                        }`}
+                      >
+                        {eur(Math.round(oldMonthly))} €<sup>2</sup>
+                      </s>
+                    </>
+                  )}
+                  <span className="fin-rate-example-suffix">
+                    {t('autobahn:finance.perMonth')}<sup>3</sup>
+                  </span>
+                </span>
+              </>
+            )}
+          </div>
+          {isCash && <div className="md-label-sm hide-mobile">{t('autobahn:finance.fixedPrice')}</div>}
+          {isCash && showStrike && (
+            <div className="fin-kauf hide-mobile">
+              {t('autobahn:finance.uvp')} <s>{eur(listPrice as number)} €</s>
+            </div>
+          )}
+        </div>
+        {/* col 2: pill + eval bar grouped together (display:contents on desktop — no-op,
+            preserves the original rate|pill / cond|bar auto-placement; mobile turns this into
+            a real flex column so the two stack tight with a fixed 16px gap). */}
+        <div className="fin-eval-col">
+          {/* col 2 row 1: price-rating pill (Figma: bold colored label, NO icon) */}
+          <div className="fin-eval-pill-cell">
+            {ratingLabel && (
+              <span
+                className={`fin-eval-pill${TIER_KEYS[evalTier] === 'good' ? ' fin-eval-pill--good' : ''}`}
+                style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
+                aria-label={t('autobahn:finance.priceRatingAria', { rating: evalTierLabel })}
+              >
+                {evalTierLabel}
+              </span>
+            )}
+          </div>
+          {/* segmented evaluation bar (Figma: discrete tiers, not a gradient) */}
+          <div className="fin-eval-bar-cell">{ratingLabel && <EvalBar tier={evalTier} />}</div>
+        </div>
+        {/* col 1 row 2: condition line */}
+        <div className="fin-cond">{condLine}</div>
+      </div>
+
+      {/* ============================== DESKTOP (≥601px) — unchanged ============================== */}
+      <div className="hide-mobile">
+        {/* RATE EDIT (Rate anpassen) — between the rate and the request CTA */}
+        <div className="fin-adjust">
+          <button onClick={() => setAdjust((a) => !a)} style={expanderBtnStyle}>
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
+              <Icon name={isCash ? 'list' : 'sliders-horizontal'} size={16} color="var(--md-primary)" />
+              {isCash ? t('autobahn:finance.detailsShow') : t('autobahn:finance.adjustRate')}
+            </span>
+            <Icon name={adjust ? 'chevron-up' : 'chevron-down'} size={18} color="var(--md-primary)" />
+          </button>
+          {adjust &&
+            (isCash ? (
+              <div style={{ marginTop: 4 }}>
+                <CalcRow label={t('autobahn:finance.paymentLabel')}>{t('autobahn:finance.paymentValue')}</CalcRow>
+                <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
+                <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
+                  {t('autobahn:finance.deliveryValue')}
+                </CalcRow>
+              </div>
+            ) : (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 8 }}>
+                <div>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+                    <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
+                    <span className="num" style={{ fontWeight: 700 }}>
+                      {eur(down)} €
+                    </span>
+                  </div>
+                  <Slider
+                    min={downMin}
+                    max={downMax}
+                    step={downStep}
+                    value={down}
+                    onChange={onDownChange}
+                    fmt={(v) => `${eur(Number(v))} €`}
+                  />
+                </div>
+                {annualMileage != null && onAnnualMileageChange && (
+                  <div>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+                      <span className="md-title-sm">{t('autobahn:finance.annualMileageLabel')}</span>
+                      <span className="num" style={{ fontWeight: 700 }}>
+                        {eur(annualMileage)} km
+                      </span>
+                    </div>
+                    <Slider
+                      min={annualMileageMin}
+                      max={annualMileageMax}
+                      step={annualMileageStep}
+                      value={annualMileage}
+                      onChange={onAnnualMileageChange}
+                      fmt={(v) => `${eur(Number(v))} km`}
+                    />
+                  </div>
+                )}
+                <div>
+                  <div className="md-title-sm" style={{ marginBottom: 8 }}>
+                    {t('autobahn:finance.termSelection')}
+                  </div>
+                  <TermChips options={terms} value={term} onChange={onTermChange} t={t} />
+                </div>
+                <div>
+                  <CalcRow label={t('autobahn:finance.purchasePrice')}>{eur(price)} €</CalcRow>
+                  <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
+                  <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
+                    {t('autobahn:finance.deliveryValue')}
+                  </CalcRow>
+                </div>
+              </div>
+            ))}
+        </div>
+
+        {/* REQUEST CTA */}
+        <Button variant="filled" block size="lg" icon="shield-check" style={{ marginTop: 14 }} onClick={onSecure}>
+          {t('autobahn:finance.secureOffer')}
+        </Button>
+        {/* phone CTA — touch only (hidden on desktop via .fin-call) */}
+        <div className="fin-call">
+          <Button variant="outlined" block icon="phone" onClick={onCall}>
+            {phone}
+          </Button>
+        </div>
+
+        {/* auto.de-ID in front of the Finanzierungs-/Leasingdetails link — one row, under everything */}
+        {(autoDeId || (!isCash && onShowDetails)) && (
+          <div className="fin-info">
+            {autoDeId && <span className="fin-id">auto.de-ID {autoDeId}</span>}
+            {!isCash && onShowDetails && (
+              <DetailsLink
+                label={mode === 'leasing' ? t('autobahn:finance.leasingDetails') : t('autobahn:finance.financingDetails')}
+                onClick={onShowDetails}
+              />
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* ============================== MOBILE (≤600px) — new layout ============================== */}
+      <div className="show-mobile" style={{ flexDirection: 'column' }}>
+        {/* side-by-side CTAs — mockup ratio ~2:1, with the tiny auto.de-ID sitting
+            directly under the Anrufen button (not in its own full-width row). */}
+        <div className="fin-cta-row" style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
+          {/* Figma CTA icon: document + check badge (composed — no single lucide glyph) */}
+          <Button
+            variant="filled"
+            size="lg"
+            style={{ width: 216, height: 50, paddingLeft: 0, paddingRight: 9, gap: 18 }}
+            onClick={onSecure}
+          >
+            <DocCheckIcon size={23} />
+            {t('autobahn:finance.secureOffer')}
+          </Button>
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
+            <Button variant="outlined" size="lg" icon="phone" style={{ width: 112, height: 50 }} onClick={onCall}>
+              {t('autobahn:finance.callCta')}
+            </Button>
+            {autoDeId && (
+              <span
+                className="num"
+                style={{ fontSize: 10, fontWeight: 700, color: 'var(--md-primary)', textAlign: 'center', whiteSpace: 'nowrap' }}
+              >
+                auto.de ID: {autoDeId}
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Persönliche Beratung (left) · divider · Finanzierungs-/Leasingdetails or hint (right) */}
+        <div className="fin-info">
+          <div className="fin-info-main" style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0, flex: 1 }}>
+            <Icon name="user" size={26} color="var(--md-on-surface-variant)" style={{ flex: 'none' }} />
+            <div style={{ minWidth: 0 }}>
+              <div className="md-label-sm" style={{ fontWeight: 700, color: 'var(--md-on-surface)' }}>
+                {t('autobahn:finance.personalConsultation')}
+              </div>
+              <div className="md-label-sm fin-info-sub">{t('autobahn:finance.personalConsultationSub')}</div>
+            </div>
+          </div>
+          <span
+            style={{
+              width: 1,
+              alignSelf: 'stretch',
+              background: 'var(--md-outline-variant)',
+              flex: 'none',
+              marginLeft: 13,
+              marginRight: 13,
+            }}
+          />
+          {!isCash && onShowDetails ? (
+            <button
+              type="button"
+              className="fin-info-details-btn"
+              onClick={onShowDetails}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                background: 'none',
+                border: 0,
+                padding: 0,
+                cursor: 'pointer',
+                font: 'inherit',
+                color: 'var(--md-on-surface)',
+                textAlign: 'left',
+              }}
+            >
+              <Icon name="info" size={24} color="var(--md-on-surface-variant)" style={{ flex: 'none' }} />
+              {/* no max-width: "Finanzierungsdetails" is one unbreakable word — capping the
+                  span clipped it mid-word instead of wrapping */}
+              <span className="md-label-sm fin-info-details-label">
+                {mode === 'leasing' ? (
+                  t('autobahn:finance.leasingDetails')
+                ) : (
+                  <>
+                    Finanzierungs-
+                    <br />
+                    Details
+                  </>
+                )}
+              </span>
+            </button>
+          ) : (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--md-on-surface-variant)' }}>
+              <Icon name="info" size={24} />
+              <span className="md-label-sm fin-financing-leasing-note">
+                {(() => {
+                  // hard break right after "&" (not a soft wrap-if-needed hint) — always
+                  // two lines: "Finanzierung &" / "Leasing möglich"; derived from the
+                  // translated string itself so it works for either locale.
+                  const raw = t('autobahn:finance.financingLeasingPossible');
+                  const splitAt = raw.indexOf(' & ');
+                  if (splitAt === -1) return raw;
+                  const before = raw.slice(0, splitAt).split(' ').join(' ');
+                  const after = raw.slice(splitAt + 3).split(' ').join(' ');
+                  return (
+                    <>
+                      {before} &
+                      <br />
+                      {after}
+                    </>
+                  );
+                })()}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* "Rate anpassen" / "Details anzeigen" — opens the full bottom sheet (not an inline expander) */}
+        {onOpenAdjust && (
+          <button
+            type="button"
+            onClick={onOpenAdjust}
+            style={{ ...expanderBtnStyle, borderTop: '1px solid var(--md-outline-variant)', marginTop: 11, padding: '11px 0 2px 21px' }}
+          >
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 21 }}>
+              <Icon name="sliders-horizontal" size={23} color="var(--md-primary)" />
+              <span className="fin-adjust-btn-label">
+                {isCash ? t('autobahn:finance.detailsShow') : t('autobahn:finance.adjustRate')}
+              </span>
+            </span>
+            <Icon name="chevron-right" size={23} color="var(--md-primary)" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FinanceCalculator;