@bytebrand/fe-ui-core-autobahn 1.0.146 → 1.0.148

package/cards/CarCard.tsx

@@ -1,354 +1,384 @@
-// Autobahn (auto.de redesign) — vertical grid car card.
-//
-// Typed React 18 + TS port of `CarCard` from the design kit
-// (docs/redesign/design-source/ui_kits/website/CarCard.jsx). Dense, professional
-// (AutoScout24 / Carvana style); the whole card is clickable. Used on the home
-// page, landing pages and "similar cars" grids.
-//
-// Pure / presentational: all data comes via the `AutobahnCar` prop, all behaviour
-// via injected callbacks. No store/API access — the one guarded `window`-adjacent
-// read is IntersectionObserver (see `eagerMedia` below), feature-checked so a
-// non-browser render (tests without a polyfill) degrades to a no-op, not a crash.
-// Renders correctly only inside a `<div className="md3">` subtree.
-//
-// Differs from the design kit on purpose:
-//  - favorite state is INJECTED (isFavorite + onToggleFavorite) instead of the
-//    design's internal useState, so the parent owns the merkliste.
-//  - the needs-data deal signals (DropChip / SaveChip) only appear when real
-//    `drop` / `savings` data is present.
-
-import React, { useState, useEffect, useRef } from 'react';
-import { TranslationFunction } from '../types';
-
-import { CardCarousel, SaveChip, Button } from '../ui';
-import {
-  SpecLine,
-  EcoLine,
-  SeoLine,
-  DropChip,
-  PercentChip,
-  ZeroDownChip,
-  OfferBadge,
-  PriceTabs,
-  PriceHero,
-  PriceEvalCol,
-  PriceTerms,
-  CardCtaRow,
-  GalleryCounter,
-  GalleryActivityPill,
-  cardSpec,
-  PaymentMode,
-  callDealerSalesPhone,
-  DEALER_SALES_PHONE,
-} from './cardParts';
-import { AutobahnCar } from './types';
-import VdpViewer from '../vdp/VdpViewer';
-
-export interface CarCardProps {
-  /** fully-resolved car view-model. */
-  car: AutobahnCar;
-  /** whether this car is on the user's merkliste (drives the heart). */
-  isFavorite: boolean;
-  /** toggle the favorite; the heart calls this (click is kept off the card). */
-  onToggleFavorite: () => void;
-  /** fired when the card is clicked (opens the detail page). */
-  onOpen: (car: AutobahnCar) => void;
-  /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
-  onMediaEnter?: () => void;
-  /**
-   * Also fire `onMediaEnter` as soon as the card scrolls into view, instead of waiting for a
-   * hover/touch. Off by default — the SRP's grid is effectively unbounded (pagination/infinite
-   * scroll), and firing one getImages() request per card the instant it enters the viewport
-   * reintroduced exactly the failure mode `loadCarImages` was deliberately scoped away from
-   * (SearchNextPage.tsx: "eager per-card getImages() ... raised an error toast PER failed
-   * request, stacked toasts on mobile scroll" whenever the image service is degraded).
-   * Opt into this only for small, BOUNDED grids (e.g. the homepage's ≤6-card "Top-Angebote"),
-   * where without it the gallery's prev/next arrows and image-count dots stay hidden until the
-   * user's first hover/touch on THAT card resolves (async) — on touch devices this reads as
-   * "controls need a preliminary tap", because the very same tap that reveals them is usually
-   * also the tap the user meant as their real interaction with the card.
-   */
-  eagerMedia?: boolean;
-  /** i18n translate fn (drilled from the page). */
-  t: TranslationFunction;
-  /**
-   * Optional admin-only action (e.g. dealer super admins' "Zum Schieberegler hinzufügen").
-   * Rendered as a quiet button at the card foot; the page decides visibility (JWT claim).
-   */
-  adminAction?: { label: string; onClick: () => void };
-  /**
-   * Mobile CTA row (Figma: Angebot anfragen / phone / Rate anpassen) — omitted entirely when
-   * the page hasn't wired these yet (same optional pattern as adminAction), so pages migrate
-   * one at a time instead of all breaking at once.
-   */
-  onRequestOffer?: () => void;
-  onCall?: () => void;
-  /**
-   * opens the shared FinanceDetailsModal "Rate anpassen" sheet for this car (page-owned) —
-   * receives the tab the card was showing (Finanzierung/Leasing/Kaufen) so the sheet opens on
-   * the same one.
-   */
-  onOpenRateAdjust?: (mode: PaymentMode) => void;
-  /**
-   * takes over the "Finanzierungsdetails"/"Details" link under the price row — e.g. navigate to
-   * this car's own VDP and open its finance modal already expanded/scrolled to the breakdown,
-   * instead of the default plain onOpen(car) navigation. Receives the tab the card was showing
-   * (Finanzierung/Leasing/Kaufen) so the destination modal opens on the same one. Optional/
-   * page-owned like onOpenRateAdjust; the mobile CTA row's "Rate anpassen" button is untouched
-   * (still onOpenRateAdjust).
-   */
-  onShowFinancingDetails?: (car: AutobahnCar, mode: PaymentMode) => void;
-}
-
-const CarCard: React.FunctionComponent<CarCardProps> = ({
-  car,
-  isFavorite,
-  onToggleFavorite,
-  onOpen,
-  onMediaEnter,
-  eagerMedia,
-  t,
-  adminAction,
-  onRequestOffer,
-  onCall,
-  onOpenRateAdjust,
-  onShowFinancingDetails,
-}) => {
-  const [mode, setMode] = useState<PaymentMode>('financing');
-  const [photoIndex, setPhotoIndex] = useState(0);
-  const [viewerOpen, setViewerOpen] = useState(false);
-  const mediaRef = useRef<HTMLDivElement | null>(null);
-  // always call the LATEST onMediaEnter without re-arming the observer on every render (the
-  // page callers below construct a fresh closure each render) — the effect itself only needs
-  // to run once per mount.
-  const onMediaEnterRef = useRef(onMediaEnter);
-  onMediaEnterRef.current = onMediaEnter;
-  useEffect(() => {
-    if (!eagerMedia || typeof IntersectionObserver === 'undefined') return undefined;
-    const el = mediaRef.current;
-    if (!el) return undefined;
-    let fired = false;
-    // rootMargin starts the fetch a bit before the card is actually on-screen, so by the time
-    // the user's eye (or finger, on touch) reaches it the gallery has usually already resolved
-    // — the whole point being no tap is required to make prev/next + the counter "real".
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting && !fired) {
-            fired = true;
-            onMediaEnterRef.current && onMediaEnterRef.current();
-            observer.disconnect();
-          }
-        });
-      },
-      { rootMargin: '200px 0px', threshold: 0 },
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [eagerMedia]);
-  // as-good-as-new gate (mileage < 1,000 km AND first registration unknown or < 12 months) —
-  // undefined (older AutobahnCar producer not yet updated) fails OPEN, keeping prior behaviour.
-  const asGoodAsNew = car.asGoodAsNew !== false;
-  const showDrop = asGoodAsNew && car.drop != null;
-  const showSave = asGoodAsNew && !showDrop && car.savings != null && car.savings > 600;
-  const showPct = asGoodAsNew && car.dropPct != null && car.dropPct > 0;
-  const showOfferBadge = !!(car.isNew || showDrop || showSave || showPct || car.zeroDown);
-  // PM call: the badge row only fits 3 pills — when Drop/Save + Percent + ZeroDown are all
-  // active that's already 3, so NEU is dropped rather than causing a 4th to overflow.
-  const activeDealChips = [showDrop || showSave, showPct, !!car.zeroDown].filter(Boolean).length;
-  const showNeu = asGoodAsNew && car.isNew && activeDealChips < 3;
-  return (
-    <article
-      className="mcard mcard--interactive cc-card"
-      onClick={() => onOpen(car)}
-      style={{ display: 'flex', flexDirection: 'column' }}
-    >
-      <div
-        className="cc-media"
-        ref={mediaRef}
-        style={{ position: 'relative' }}
-        onMouseEnter={onMediaEnter}
-        onTouchStart={onMediaEnter}
-      >
-        <CardCarousel images={car.gallery} height="100%" fit="contain" padded={false} onChange={setPhotoIndex} />
-        {/* max two overlays: heart + ONE deal signal — rating moved next to the price */}
-        <div
-          className="cc-fav"
-          style={{ position: 'absolute', top: 14, right: 9, zIndex: 6 }}
-          onClick={(e) => e.stopPropagation()}
-        >
-          {/* Custom heart (not lucide's default 'heart') — scoped here via a hand-rolled
-              button+svg instead of IconButton/Icon's name-based registry lookup, so this
-              doesn't change the "heart" icon anywhere else it's used (e.g. CarRow). Same
-              active/inactive color logic IconButton+Icon had: active fills solid
-              var(--md-primary), inactive stays an outline (previously 'currentColor',
-              now this Figma-exact icon's own #08162A stroke). */}
-          <button
-            className="icon-btn icon-btn--filled"
-            onClick={onToggleFavorite}
-            aria-label={t('autobahn:card.action.save')}
-          >
-            <svg width="22" height="22" viewBox="0 0 22 22" fill={isFavorite ? 'var(--md-primary)' : 'none'} xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M11 18.7915C11 18.7915 4.125 14.8498 4.125 9.34981C4.12463 8.54932 4.37379 7.76862 4.83781 7.11634C5.30183 6.46405 5.95763 5.97262 6.71396 5.71043C7.47029 5.44823 8.28955 5.42831 9.05773 5.65343C9.82591 5.87855 10.5048 6.33752 11 6.96648C11.4952 6.33752 12.1741 5.87855 12.9423 5.65343C13.7105 5.42831 14.5297 5.44823 15.286 5.71043C16.0424 5.97262 16.6982 6.46405 17.1622 7.11634C17.6262 7.76862 17.8754 8.54932 17.875 9.34981C17.875 14.8498 11 18.7915 11 18.7915Z"
-                stroke={isFavorite ? 'var(--md-primary)' : '#08162A'}
-                strokeWidth={1.8}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </button>
-        </div>
-        {/* top-left signal stack (heart is top-right): NEU badge + ONE deal signal + the
-            "⚡ Angebot" badge (own line, Figma) below it. DropChip takes precedence over
-            SaveChip; each only renders when its real data exists. */}
-        {(showOfferBadge || showPct) && (
-          <div
-            className="cc-badges"
-            style={{
-              position: 'absolute',
-              top: 16,
-              left: 10,
-              zIndex: 3,
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'flex-start',
-              gap: 5,
-              maxWidth: 'calc(100% - 52px)',
-            }}
-          >
-            <div style={{ display: 'flex', flexWrap: 'nowrap', gap: 5, alignItems: 'center' }}>
-              {showDrop ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
-              <PercentChip pct={showPct ? car.dropPct : undefined} />
-              <ZeroDownChip
-                t={t}
-                show={car.zeroDown}
-                style={{
-                  // "€0 down payment" (en) doesn't fit the German pill's 104px — only German's
-                  // "0 € Anzahlung" gets the narrow width, every other locale gets more room.
-                  width: t('autobahn:card.price.zeroDown') === '0 € Anzahlung' ? 104 : 125,
-                  height: 30,
-                  padding: 0,
-                  justifyContent: 'center',
-                  background: 'rgb(204, 222, 255)',
-                  border: '1px solid rgba(0, 92, 255, 0.05)',
-                  borderRadius: 15,
-                  fontFamily: 'Arial, Arimo, sans-serif',
-                  fontWeight: 700,
-                  fontSize: 13,
-                  lineHeight: '15px',
-                  color: '#005CFF',
-                }}
-              />
-              {showNeu && <span className="neu-badge">NEU</span>}
-            </div>
-            <OfferBadge show={showOfferBadge} t={t} />
-          </div>
-        )}
-        {/* bottom-left: expand icon + "current | total" photo counter (Figma light pill, node
-            281:1016) — opens the full VdpViewer lightbox; stopPropagation keeps the click off
-            the card's own onOpen (React portals still bubble through the React tree, not the
-            DOM tree, so this guard is needed even though VdpViewer renders via createPortal). */}
-        <div
-          style={{ position: 'absolute', bottom: 10, left: 10, zIndex: 3 }}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <GalleryCounter current={photoIndex + 1} total={car.photos} light onClick={() => setViewerOpen(true)} />
-        </div>
-        {/* bottom-right: eye/heart activity pill — real stats only (Figma "Push Chips / Likes", node 297:1037) */}
-        <div style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 3 }}>
-          <GalleryActivityPill viewsCount={car.viewsCount} favoritesCount={car.favoritesCount} />
-        </div>
-      </div>
-      {/* padding-top: 0 (was 8px) + marginTop: -5 — not just 0, the ask was 0 AND 5px higher
-          still than that zero-padding baseline, so a negative margin pulls the whole block up
-          past where padding-top:0 alone would leave it. Bottom/side padding (8px/18px)
-          untouched. */}
-      <div style={{ padding: '0 18px 8px', marginTop: -3, display: 'flex', flexDirection: 'column', gap: 0, flex: 1 }}>
-        <div>
-          <div className="md-title" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-            {car.make} {car.model}
-          </div>
-          <div className="md-body-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-            {car.trim}
-          </div>
-        </div>
-        <SpecLine items={cardSpec(car)} oneLine />
-        <div className="cc-price" style={{ marginTop: 0, borderTop: '1px solid var(--md-outline-variant)' }}>
-          <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} />
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginTop: 10 }}>
-            <PriceHero car={car} mode={mode} t={t} alwaysShowUnit />
-            <PriceEvalCol car={car} t={t} />
-          </div>
-          {/* same fallback CardCtaRow already uses below: pages that haven't wired a real
-              "Rate anpassen" sheet yet still get a working "Details" link (opens the car). */}
-          <PriceTerms
-            car={car}
-            mode={mode}
-            onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
-            onShowDetails={onShowFinancingDetails ? () => onShowFinancingDetails(car, mode) : undefined}
-            t={t}
-          />
-        </div>
-        {/* Mobile-only row (CardCtaRow itself carries the show-mobile class) — always
-            rendered, with real fallbacks the page can override once it wires its own
-            handlers (e.g. the "Rate anpassen" FinanceDetailsModal sheet). Never hidden. */}
-        <CardCtaRow
-          car={car}
-          mode={mode}
-          onRequestOffer={onRequestOffer || (() => onOpen(car))}
-          onCall={onCall || callDealerSalesPhone}
-          onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
-          t={t}
-        />
-        <EcoLine
-          t={t}
-          car={car}
-          style={{
-            marginTop: 'auto',
-            borderTop: 'none',
-            fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
-            fontStyle: 'normal',
-            fontWeight: 400,
-            fontSize: 11,
-            lineHeight: '11px',
-            textAlign: 'justify',
-            color: '#0e2238',
-          }}
-        />
-        {/* legacy VehicleSmallCard's "SeoText" footer line (full spec + equipment list) —
-            renders nothing when the caller hasn't populated car.seoText. */}
-        <SeoLine car={car} style={{ marginTop: 0 }} />
-        {adminAction && (
-          <div style={{ marginTop: 8 }}>
-            <Button
-              variant="outlined"
-              block
-              onClick={(e) => {
-                e.stopPropagation();
-                adminAction.onClick();
-              }}
-            >
-              {adminAction.label}
-            </Button>
-          </div>
-        )}
-      </div>
-      {viewerOpen && (
-        <div onClick={(e) => e.stopPropagation()}>
-          <VdpViewer
-            images={car.galleryLarge || car.gallery}
-            start={photoIndex}
-            onClose={() => setViewerOpen(false)}
-            t={t}
-            phone={DEALER_SALES_PHONE}
-            onCall={onCall || callDealerSalesPhone}
-            onEmail={onRequestOffer || (() => onOpen(car))}
-          />
-        </div>
-      )}
-    </article>
-  );
-};
-
-export default CarCard;
+// Autobahn (auto.de redesign) — vertical grid car card.
+//
+// Typed React 18 + TS port of `CarCard` from the design kit
+// (docs/redesign/design-source/ui_kits/website/CarCard.jsx). Dense, professional
+// (AutoScout24 / Carvana style); the whole card is clickable. Used on the home
+// page, landing pages and "similar cars" grids.
+//
+// Pure / presentational: all data comes via the `AutobahnCar` prop, all behaviour
+// via injected callbacks. No store/API access — the one guarded `window`-adjacent
+// read is IntersectionObserver (see `eagerMedia` below), feature-checked so a
+// non-browser render (tests without a polyfill) degrades to a no-op, not a crash.
+// Renders correctly only inside a `<div className="md3">` subtree.
+//
+// Differs from the design kit on purpose:
+//  - favorite state is INJECTED (isFavorite + onToggleFavorite) instead of the
+//    design's internal useState, so the parent owns the merkliste.
+//  - the needs-data deal signals (DropChip / SaveChip) only appear when real
+//    `drop` / `savings` data is present.
+
+import React, { useState, useEffect, useRef } from 'react';
+import { TranslationFunction } from '../types';
+
+import { CardCarousel, SaveChip, Button } from '../ui';
+import {
+  SpecLine,
+  EcoLine,
+  SeoLine,
+  DropChip,
+  PercentChip,
+  ZeroDownChip,
+  OfferBadge,
+  PriceTabs,
+  PriceHero,
+  PriceEvalCol,
+  PriceTerms,
+  CardCtaRow,
+  GalleryCounter,
+  GalleryActivityPill,
+  cardSpec,
+  PaymentMode,
+  callDealerSalesPhone,
+  DEALER_SALES_PHONE,
+} from './cardParts';
+import { AutobahnCar } from './types';
+import VdpViewer from '../vdp/VdpViewer';
+
+export interface CarCardProps {
+  /** fully-resolved car view-model. */
+  car: AutobahnCar;
+  /** whether this car is on the user's merkliste (drives the heart). */
+  isFavorite: boolean;
+  /** toggle the favorite; the heart calls this (click is kept off the card). */
+  onToggleFavorite: () => void;
+  /** fired when the card is clicked (opens the detail page). */
+  onOpen: (car: AutobahnCar) => void;
+  /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
+  onMediaEnter?: () => void;
+  /**
+   * Also fire `onMediaEnter` as soon as the card scrolls into view, instead of waiting for a
+   * hover/touch. Off by default — the SRP's grid is effectively unbounded (pagination/infinite
+   * scroll), and firing one getImages() request per card the instant it enters the viewport
+   * reintroduced exactly the failure mode `loadCarImages` was deliberately scoped away from
+   * (SearchNextPage.tsx: "eager per-card getImages() ... raised an error toast PER failed
+   * request, stacked toasts on mobile scroll" whenever the image service is degraded).
+   * Opt into this only for small, BOUNDED grids (e.g. the homepage's ≤6-card "Top-Angebote"),
+   * where without it the gallery's prev/next arrows and image-count dots stay hidden until the
+   * user's first hover/touch on THAT card resolves (async) — on touch devices this reads as
+   * "controls need a preliminary tap", because the very same tap that reveals them is usually
+   * also the tap the user meant as their real interaction with the card.
+   */
+  eagerMedia?: boolean;
+  /** i18n translate fn (drilled from the page). */
+  t: TranslationFunction;
+  /**
+   * Optional admin-only action (e.g. dealer super admins' "Zum Schieberegler hinzufügen").
+   * Rendered as a quiet button at the card foot; the page decides visibility (JWT claim).
+   */
+  adminAction?: { label: string; onClick: () => void };
+  /**
+   * Mobile CTA row (Figma: Angebot anfragen / phone / Rate anpassen) — omitted entirely when
+   * the page hasn't wired these yet (same optional pattern as adminAction), so pages migrate
+   * one at a time instead of all breaking at once.
+   */
+  onRequestOffer?: () => void;
+  onCall?: () => void;
+  /**
+   * opens the shared FinanceDetailsModal "Rate anpassen" sheet for this car (page-owned) —
+   * receives the tab the card was showing (Finanzierung/Leasing/Kaufen) so the sheet opens on
+   * the same one.
+   */
+  onOpenRateAdjust?: (mode: PaymentMode) => void;
+  /**
+   * takes over the "Finanzierungsdetails"/"Details" link under the price row — e.g. navigate to
+   * this car's own VDP and open its finance modal already expanded/scrolled to the breakdown,
+   * instead of the default plain onOpen(car) navigation. Receives the tab the card was showing
+   * (Finanzierung/Leasing/Kaufen) so the destination modal opens on the same one. Optional/
+   * page-owned like onOpenRateAdjust; the mobile CTA row's "Rate anpassen" button is untouched
+   * (still onOpenRateAdjust).
+   */
+  onShowFinancingDetails?: (car: AutobahnCar, mode: PaymentMode) => void;
+}
+
+const CarCard: React.FunctionComponent<CarCardProps> = ({
+  car,
+  isFavorite,
+  onToggleFavorite,
+  onOpen,
+  onMediaEnter,
+  eagerMedia,
+  t,
+  adminAction,
+  onRequestOffer,
+  onCall,
+  onOpenRateAdjust,
+  onShowFinancingDetails,
+}) => {
+  const [mode, setMode] = useState<PaymentMode>('financing');
+  const [photoIndex, setPhotoIndex] = useState(0);
+  const [viewerOpen, setViewerOpen] = useState(false);
+  const mediaRef = useRef<HTMLDivElement | null>(null);
+  // always call the LATEST onMediaEnter without re-arming the observer on every render (the
+  // page callers below construct a fresh closure each render) — the effect itself only needs
+  // to run once per mount.
+  const onMediaEnterRef = useRef(onMediaEnter);
+  onMediaEnterRef.current = onMediaEnter;
+  useEffect(() => {
+    if (!eagerMedia || typeof IntersectionObserver === 'undefined') return undefined;
+    const el = mediaRef.current;
+    if (!el) return undefined;
+    let fired = false;
+    // rootMargin starts the fetch a bit before the card is actually on-screen, so by the time
+    // the user's eye (or finger, on touch) reaches it the gallery has usually already resolved
+    // — the whole point being no tap is required to make prev/next + the counter "real".
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !fired) {
+            fired = true;
+            onMediaEnterRef.current && onMediaEnterRef.current();
+            observer.disconnect();
+          }
+        });
+      },
+      { rootMargin: '200px 0px', threshold: 0 },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [eagerMedia]);
+  // as-good-as-new gate (mileage < 1,000 km AND first registration unknown or < 12 months) —
+  // undefined (older AutobahnCar producer not yet updated) fails OPEN, keeping prior behaviour.
+  const asGoodAsNew = car.asGoodAsNew !== false;
+  const showDrop = asGoodAsNew && car.drop != null;
+  const showSave = asGoodAsNew && !showDrop && car.savings != null && car.savings > 600;
+  const showPct = asGoodAsNew && car.dropPct != null && car.dropPct > 0;
+  const showOfferBadge = !!(car.isNew || showDrop || showSave || showPct || car.zeroDown);
+  // PM call: the badge row only fits 3 pills — when Drop/Save + Percent + ZeroDown are all
+  // active that's already 3, so NEU is dropped rather than causing a 4th to overflow.
+  const activeDealChips = [showDrop || showSave, showPct, !!car.zeroDown].filter(Boolean).length;
+  const showNeu = asGoodAsNew && car.isNew && activeDealChips < 3;
+  // tabs the price block can switch to (PriceTabs shows Leasing only when the car has a lease rate)
+  const paymentModes: PaymentMode[] = car.lease != null ? ['financing', 'leasing', 'buy'] : ['financing', 'buy'];
+  return (
+    <article
+      className="mcard mcard--interactive cc-card"
+      onClick={() => onOpen(car)}
+      style={{ display: 'flex', flexDirection: 'column' }}
+    >
+      <div
+        className="cc-media"
+        ref={mediaRef}
+        style={{ position: 'relative' }}
+        onMouseEnter={onMediaEnter}
+        onTouchStart={onMediaEnter}
+      >
+        <CardCarousel images={car.gallery} height="100%" fit="contain" padded={false} onChange={setPhotoIndex} />
+        {/* max two overlays: heart + ONE deal signal — rating moved next to the price */}
+        <div
+          className="cc-fav"
+          style={{ position: 'absolute', top: 14, right: 9, zIndex: 6 }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Custom heart (not lucide's default 'heart') — scoped here via a hand-rolled
+              button+svg instead of IconButton/Icon's name-based registry lookup, so this
+              doesn't change the "heart" icon anywhere else it's used (e.g. CarRow). Same
+              active/inactive color logic IconButton+Icon had: active fills solid
+              var(--md-primary), inactive stays an outline (previously 'currentColor',
+              now this Figma-exact icon's own #08162A stroke). */}
+          <button
+            className="icon-btn icon-btn--filled"
+            onClick={onToggleFavorite}
+            aria-label={t('autobahn:card.action.save')}
+          >
+            <svg width="22" height="22" viewBox="0 0 22 22" fill={isFavorite ? 'var(--md-primary)' : 'none'} xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M11 18.7915C11 18.7915 4.125 14.8498 4.125 9.34981C4.12463 8.54932 4.37379 7.76862 4.83781 7.11634C5.30183 6.46405 5.95763 5.97262 6.71396 5.71043C7.47029 5.44823 8.28955 5.42831 9.05773 5.65343C9.82591 5.87855 10.5048 6.33752 11 6.96648C11.4952 6.33752 12.1741 5.87855 12.9423 5.65343C13.7105 5.42831 14.5297 5.44823 15.286 5.71043C16.0424 5.97262 16.6982 6.46405 17.1622 7.11634C17.6262 7.76862 17.8754 8.54932 17.875 9.34981C17.875 14.8498 11 18.7915 11 18.7915Z"
+                stroke={isFavorite ? 'var(--md-primary)' : '#08162A'}
+                strokeWidth={1.8}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+        {/* top-left signal stack (heart is top-right): NEU badge + ONE deal signal + the
+            "⚡ Angebot" badge (own line, Figma) below it. DropChip takes precedence over
+            SaveChip; each only renders when its real data exists. */}
+        {(showOfferBadge || showPct) && (
+          <div
+            className="cc-badges"
+            style={{
+              position: 'absolute',
+              top: 16,
+              left: 10,
+              zIndex: 3,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+              gap: 5,
+              maxWidth: 'calc(100% - 52px)',
+            }}
+          >
+            <div style={{ display: 'flex', flexWrap: 'nowrap', gap: 5, alignItems: 'center' }}>
+              {showDrop ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
+              <PercentChip pct={showPct ? car.dropPct : undefined} />
+              <ZeroDownChip
+                t={t}
+                show={car.zeroDown}
+                style={{
+                  // "€0 down payment" (en) doesn't fit the German pill's 104px — only German's
+                  // "0 € Anzahlung" gets the narrow width, every other locale gets more room.
+                  width: t('autobahn:card.price.zeroDown') === '0 € Anzahlung' ? 104 : 125,
+                  height: 30,
+                  padding: 0,
+                  justifyContent: 'center',
+                  background: 'rgb(204, 222, 255)',
+                  border: '1px solid rgba(0, 92, 255, 0.05)',
+                  borderRadius: 15,
+                  fontFamily: 'Arial, Arimo, sans-serif',
+                  fontWeight: 700,
+                  fontSize: 13,
+                  lineHeight: '15px',
+                  color: '#005CFF',
+                }}
+              />
+              {showNeu && <span className="neu-badge">NEU</span>}
+            </div>
+            <OfferBadge show={showOfferBadge} t={t} />
+          </div>
+        )}
+        {/* bottom-left: expand icon + "current | total" photo counter (Figma light pill, node
+            281:1016) — opens the full VdpViewer lightbox; stopPropagation keeps the click off
+            the card's own onOpen (React portals still bubble through the React tree, not the
+            DOM tree, so this guard is needed even though VdpViewer renders via createPortal). */}
+        <div
+          style={{ position: 'absolute', bottom: 10, left: 10, zIndex: 3 }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <GalleryCounter current={photoIndex + 1} total={car.photos} light onClick={() => setViewerOpen(true)} />
+        </div>
+        {/* bottom-right: eye/heart activity pill — real stats only (Figma "Push Chips / Likes", node 297:1037) */}
+        <div style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 3 }}>
+          <GalleryActivityPill viewsCount={car.viewsCount} favoritesCount={car.favoritesCount} />
+        </div>
+      </div>
+      {/* padding-top: 0 (was 8px) + marginTop: -5 — not just 0, the ask was 0 AND 5px higher
+          still than that zero-padding baseline, so a negative margin pulls the whole block up
+          past where padding-top:0 alone would leave it. Bottom/side padding (8px/18px)
+          untouched. */}
+      <div style={{ padding: '0 18px 8px', marginTop: -3, display: 'flex', flexDirection: 'column', gap: 0, flex: 1 }}>
+        <div>
+          <div className="md-title" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {car.make} {car.model}
+          </div>
+          <div className="md-body-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {car.trim}
+          </div>
+        </div>
+        <SpecLine items={cardSpec(car)} oneLine />
+        <div className="cc-price" style={{ marginTop: 0, borderTop: '1px solid var(--md-outline-variant)' }}>
+          <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} />
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginTop: 10 }}>
+            {/* every tab's hero stacked in one grid cell (.cc-hero-stack), only the active one
+                visible, bottom-aligned — Kaufen's struck list price sits on its own line above
+                the price, so without this the row (and the card) grew/shrank by that line on
+                every tab switch. Same trick as .cc-terms-stack below. */}
+            <div className="cc-hero-stack">
+              {paymentModes.map((m) => (
+                <div
+                  key={m}
+                  className={'cc-hero-slot' + (m === mode ? '' : ' cc-hero-slot--hidden')}
+                  aria-hidden={m === mode ? undefined : true}
+                >
+                  <PriceHero car={car} mode={m} t={t} alwaysShowUnit />
+                </div>
+              ))}
+            </div>
+            <PriceEvalCol car={car} t={t} />
+          </div>
+          {/* same fallback CardCtaRow already uses below: pages that haven't wired a real
+              "Rate anpassen" sheet yet still get a working "Details" link (opens the car).
+              Every tab's terms line is rendered into the same grid cell (.cc-terms-stack) and
+              only the active one is visible — the cell is as tall as the tallest line, so the
+              card keeps one height across Finanzierung/Leasing/Kaufen (Leasing's longer line
+              wraps to 2 lines on narrow phones). No change to the visible line itself. */}
+          <div className="cc-terms-stack">
+            {paymentModes.map((m) => (
+              <div
+                key={m}
+                className={'cc-terms-slot' + (m === mode ? '' : ' cc-terms-slot--hidden')}
+                aria-hidden={m === mode ? undefined : true}
+              >
+                <PriceTerms
+                  car={car}
+                  mode={m}
+                  onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
+                  onShowDetails={onShowFinancingDetails ? () => onShowFinancingDetails(car, m) : undefined}
+                  t={t}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+        {/* Mobile-only row (CardCtaRow itself carries the show-mobile class) — always
+            rendered, with real fallbacks the page can override once it wires its own
+            handlers (e.g. the "Rate anpassen" FinanceDetailsModal sheet). Never hidden. */}
+        <CardCtaRow
+          car={car}
+          mode={mode}
+          onRequestOffer={onRequestOffer || (() => onOpen(car))}
+          onCall={onCall || callDealerSalesPhone}
+          onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
+          t={t}
+        />
+        <EcoLine
+          t={t}
+          car={car}
+          style={{
+            marginTop: 'auto',
+            borderTop: 'none',
+            fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            fontSize: 11,
+            lineHeight: '11px',
+            textAlign: 'justify',
+            color: '#0e2238',
+          }}
+        />
+        {/* legacy VehicleSmallCard's "SeoText" footer line (full spec + equipment list) —
+            renders nothing when the caller hasn't populated car.seoText. */}
+        <SeoLine car={car} style={{ marginTop: 0 }} />
+        {adminAction && (
+          <div style={{ marginTop: 8 }}>
+            <Button
+              variant="outlined"
+              block
+              onClick={(e) => {
+                e.stopPropagation();
+                adminAction.onClick();
+              }}
+            >
+              {adminAction.label}
+            </Button>
+          </div>
+        )}
+      </div>
+      {viewerOpen && (
+        <div onClick={(e) => e.stopPropagation()}>
+          <VdpViewer
+            images={car.galleryLarge || car.gallery}
+            start={photoIndex}
+            onClose={() => setViewerOpen(false)}
+            t={t}
+            phone={DEALER_SALES_PHONE}
+            onCall={onCall || callDealerSalesPhone}
+            onEmail={onRequestOffer || (() => onOpen(car))}
+          />
+        </div>
+      )}
+    </article>
+  );
+};
+
+export default CarCard;