@bytebrand/fe-ui-core-autobahn 1.0.60 → 1.0.62

package/vdp/FinanceCalculator.tsx

@@ -329,24 +329,35 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
 }) => {
   // Pure view state only — whether the adjust/details expander is open.
   const [adjust, setAdjust] = useState(false);
+  // whether the "UVP-Rate" footnote popover (fin/leasing) is open — same widget as CarCard's.
+  const [uvpTooltipOpen, setUvpTooltipOpen] = 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.
+  // both green tiers ('top' and 'good') collapse onto one "Top-Preis" claim (same convention as
+  // CarCard's PriceEvalCol) — footnote 4 carries the disclaimer text.
+  const isGoodTier = TIER_KEYS[evalTier] === 'good';
+  const evalTierLabel = isGoodTier ? t('autobahn:tier.top') : t('autobahn:tier.' + TIER_KEYS[evalTier]);
+  const evalPillColor = isGoodTier ? TIER_COLORS[0] : TIER_COLORS[evalTier];
+  // condition summary (current selection) + its own details link — financing: "0 € Anzahlung ·
+  // 60 Monate · Finanzierungsdetails"; leasing: "25.000 € Sonderzahlung · 60 Mon. · 10.000
+  // km/Jahr · Details" (same wording/order as CarCard's own PriceTerms leaseTerms).
   const condParts: string[] = [];
-  if (!isCash) {
+  if (mode === 'leasing') {
     condParts.push(
-      mode === 'leasing' && annualMileage != null
-        ? t('autobahn:finance.kmPerYear', { value: eur(annualMileage) })
-        : t('autobahn:finance.downPaymentLabel', { value: eur(down) }),
+      ...t('autobahn:card.price.leaseTerms', {
+        firstInstallment: eur(down),
+        months: term,
+        mileage: annualMileage != null ? eur(annualMileage) : '',
+      }).split(' · '),
     );
+  } else if (!isCash) {
+    condParts.push(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 }}>
@@ -410,10 +421,48 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
           {/* 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 className="show-mobile" style={{ justifyContent: 'flex-end', alignItems: 'baseline', gap: 4, lineHeight: 1, marginTop: 7 }}>
+              <span style={{ fontSize: 13, color: 'var(--md-on-surface-variant)' }}>{t('autobahn:finance.uvp')}</span>
+              <span
+                className={`num pp-hero-old${
+                  String(Math.round(listPrice as number)).length === 5
+                    ? ' pp-hero-old--len5'
+                    : String(Math.round(listPrice as number)).length === 4
+                      ? ' pp-hero-old--len4'
+                      : ''
+                }`}
+              >
+                {eur(Math.round(listPrice as number))} €
+                <span
+                  className="pp-eyebrow-badge"
+                  role="button"
+                  tabIndex={0}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setUvpTooltipOpen((v) => !v);
+                  }}
+                >
+                  2
+                </span>
+                {uvpTooltipOpen && (
+                  <div className="pp-uvp-tooltip" onClick={(e) => e.stopPropagation()}>
+                    <button
+                      type="button"
+                      className="pp-uvp-tooltip-close"
+                      aria-label={t('autobahn:modal.close')}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setUvpTooltipOpen(false);
+                      }}
+                    >
+                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M5 5L15 15M15 5L5 15" stroke="white" strokeWidth={2.4} strokeLinecap="round" />
+                      </svg>
+                    </button>
+                    <div className="pp-uvp-tooltip-body">{t('autobahn:card.price.uvpListTooltipBody')}</div>
+                  </div>
+                )}
+              </span>
             </div>
           )}
           <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
@@ -463,7 +512,44 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                   {/* struck old rate (REAL oldMonthlyInstallment; SRP strikes the same source) */}
                   {oldMonthly != null && (
                     <>
-                      <span className="fin-rate-example-label">{t('autobahn:finance.exampleLabel')}</span>
+                      <span className="pp-eyebrow">
+                        {t('autobahn:card.price.uvpRateLabel')}
+                        <span
+                          className="pp-eyebrow-badge"
+                          role="button"
+                          tabIndex={0}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setUvpTooltipOpen((v) => !v);
+                          }}
+                        >
+                          3
+                        </span>
+                        {uvpTooltipOpen && (
+                          <div className="pp-uvp-tooltip" onClick={(e) => e.stopPropagation()}>
+                            <button
+                              type="button"
+                              className="pp-uvp-tooltip-close"
+                              aria-label={t('autobahn:modal.close')}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setUvpTooltipOpen(false);
+                              }}
+                            >
+                              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M5 5L15 15M15 5L5 15" stroke="white" strokeWidth={2.4} strokeLinecap="round" />
+                              </svg>
+                            </button>
+                            <div className="pp-uvp-tooltip-body">
+                              {t(
+                                mode === 'leasing'
+                                  ? 'autobahn:card.price.uvpRateTooltipBodyLeasing'
+                                  : 'autobahn:card.price.uvpRateTooltipBody',
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </span>
                       <s
                         className={`num fin-rate-old fin-rate-example-price${
                           String(Math.round(oldMonthly)).length >= 5
@@ -473,12 +559,12 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                               : ''
                         }`}
                       >
-                        {eur(Math.round(oldMonthly))} €<sup>2</sup>
+                        {eur(Math.round(oldMonthly))} €
                       </s>
                     </>
                   )}
                   <span className="fin-rate-example-suffix">
-                    {t('autobahn:finance.perMonth')}<sup>3</sup>
+                    {t('autobahn:finance.perMonth')}
                   </span>
                 </span>
               </>
@@ -499,19 +585,38 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
           <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)` }}
+                className={`fin-eval-pill${isGoodTier ? ' fin-eval-pill--good' : ''}`}
+                style={{ color: evalPillColor, background: `color-mix(in srgb, ${evalPillColor} 16%, transparent)` }}
                 aria-label={t('autobahn:finance.priceRatingAria', { rating: evalTierLabel })}
               >
                 {evalTierLabel}
+                {isGoodTier && <sup>4</sup>}
               </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>
+        {/* col 1 row 2: condition line — financing "0 € Anzahlung · 60 Monate · Finanzierungsdetails",
+            leasing "25.000 € Sonderzahlung · 60 Mon. · 10.000 km/Jahr · Details" */}
+        <div className="fin-cond">
+          {!isCash &&
+            condParts.map((part, i) => (
+              <React.Fragment key={i}>
+                {i > 0 && <span className="cc-terms-dot"> · </span>}
+                {part}
+              </React.Fragment>
+            ))}
+          {!isCash && onShowDetails && (
+            <>
+              <span className="cc-terms-dot"> · </span>
+              {/* plain underlined text link, same onShowDetails handler as .fin-info used to open. */}
+              <button type="button" className="cc-terms-link" onClick={onShowDetails}>
+                {mode === 'leasing' ? t('autobahn:card.price.detailsLink') : t('autobahn:finance.financingDetails')}
+              </button>
+            </>
+          )}
+        </div>
       </div>
 
       {/* ============================== DESKTOP (≥601px) — unchanged ============================== */}
@@ -642,84 +747,10 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
           </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>
-          )}
+        {/* Persönliche Beratung — icon + one line (the details link now lives in .fin-cond above) */}
+        <div className="fin-info" style={{ justifyContent: 'flex-start', paddingLeft: 15 }}>
+          <Icon name="user" size={26} color="var(--md-on-surface-variant)" style={{ flex: 'none', marginRight: 20 }} />
+          <span className="fin-info-line">{t('autobahn:finance.personalConsultationLine')}</span>
         </div>
 
         {/* "Rate anpassen" / "Details anzeigen" — opens the full bottom sheet (not an inline expander) */}

package/vdp/VdpModules.tsx

@@ -28,7 +28,7 @@ import { Button, Dropdown, DropdownOption, Icon, Spec, StatChip, Stars, Switch }
 import { CO2_CLASSES, CO2_COLORS, TIER_LABELS, TIER_KEYS, TIER_COLORS, TIER_BACKGROUNDS } from '../constants';
 import { defaultVdpSpecs, EquipmentGroups, PriceRatingBands, VehicleDetail, VdpSpec, VdpReview } from './types';
 import { CalcRow, DocCheckIcon, EvalBar, expanderBtnStyle, FinanceMode, Slider, TermChips } from './FinanceCalculator';
-import { formatEur as eur, formatPct as pct, buildFinanceExampleLine } from '../utils/financeFormat';
+import { formatEur as eur, formatPct as pct } from '../utils/financeFormat';
 
 /** Figma "check with open arc" glyph (modern lucide circle-check-big; the bundled lucide
  *  0.288 only ships the closed-circle variant, so the two paths are inlined). */
@@ -1957,54 +1957,76 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   // total, so Schlussrate + Gesamtbetrag come from the config and are omitted when unavailable —
   // never a fabricated/misleading total.
   const netto = netLoanAmount != null ? netLoanAmount : Math.max(0, price - down);
-  const rows: Array<[string, string]> = [
+  // "Rundum-Sorglos-Paket" one-time fee only counts toward the breakdown when the customer
+  // actually has it switched on (cash mode forces it on upstream) AND a real cost is known.
+  const hasAddServices = !!withAddServices && addServicesCost != null && addServicesCost > 0;
+  // Grand total (Figma "Gesamtbelastung inkl. Anzahlung & Paket") — down payment + the config's
+  // real Gesamtbetrag + the package fee. Only shown when Gesamtbetrag is known (never fabricated).
+  const totalCost = grossAmount != null && grossAmount > 0 ? down + grossAmount + (hasAddServices ? (addServicesCost as number) : 0) : undefined;
+  const rows: Array<[string, string, boolean?]> = [
     [t('autobahn:modal.vehiclePrice'), `${eur(price)} €`],
-    [isLease ? t('autobahn:modal.leasingAmount') : t('autobahn:modal.netLoanAmount'), `${eur(netto)} €`],
+    [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
     [t('autobahn:modal.downPayment'), `${eur(down)} €`],
     ...(isLease && annualMileage != null ? ([[t('autobahn:modal.annualMileage'), `${eur(annualMileage)} km`]] as Array<[string, string]>) : []),
-    [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
+    [
+      isLease ? t('autobahn:modal.leasingRateCount', { count: term }) : t('autobahn:modal.monthlyRateCount', { count: term }),
+      `${eur(monthly)} €`,
+    ],
+    ...(finalInstallment != null && finalInstallment > 0 ? ([[t('autobahn:modal.finalInstallment'), `${eur(finalInstallment)} €`]] as Array<[string, string]>) : []),
+    ...(hasAddServices ? ([[t('autobahn:modal.addServicesRow'), `${eur(addServicesCost as number)} €`]] as Array<[string, string]>) : []),
     ...(nominalRate != null && nominalRate > 0 ? ([[t('autobahn:modal.nominalRate'), pct(nominalRate)]] as Array<[string, string]>) : []),
     [t('autobahn:modal.effectiveRate'), pct(apr)],
-    ...(finalInstallment != null && finalInstallment > 0 ? ([[t('autobahn:modal.finalInstallment'), `${eur(finalInstallment)} €`]] as Array<[string, string]>) : []),
-    [isLease ? t('autobahn:modal.leasingRate') : t('autobahn:modal.monthlyRate'), t('autobahn:modal.ratePerMonth', { amount: eur(monthly) })],
+    [isLease ? t('autobahn:modal.leasingAmount') : t('autobahn:modal.netLoanAmount'), `${eur(netto)} €`],
     ...(grossAmount != null && grossAmount > 0 ? ([[isLease ? t('autobahn:modal.totalAmount') : t('autobahn:modal.totalRepayment'), `${eur(grossAmount)} €`]] as Array<[string, string]>) : []),
+    ...(totalCost != null
+      ? ([[hasAddServices ? t('autobahn:modal.totalCostWithPackage') : t('autobahn:modal.totalCost'), `${eur(totalCost)} €`, true]] as Array<
+          [string, string, boolean]
+        >)
+      : []),
+    ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPrice'), `${eur(listPrice)} €`]] as Array<[string, string]>) : []),
   ];
-  const breakdownRows = rows.map(([l, v], i) => (
+  const breakdownRows = rows.map(([l, v, bold], i) => (
     <div
       key={l}
       style={{
         display: 'flex',
-        justifyContent: 'space-between',
-        gap: 12,
-        padding: '9px 0',
-        borderBottom: i < rows.length - 1 ? '1px solid var(--md-outline-variant)' : 0,
+        alignItems: 'baseline',
+        gap: 8,
+        padding: '7px 0',
+        borderTop: '1px solid rgba(212, 221, 231, 0.95)',
       }}
     >
-      <span className="md-label-sm">{l}</span>
-      <span className="num" style={{ fontSize: 13.5, fontWeight: 600 }}>
+      <span
+        style={{
+          fontFamily: 'Arial, Helvetica, sans-serif',
+          fontStyle: 'normal',
+          fontWeight: bold ? 700 : 400,
+          fontSize: 13,
+          lineHeight: '13px',
+          color: '#0e2238',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {l}
+      </span>
+      <span
+        className="num"
+        style={{
+          fontFamily: 'Arial, Helvetica, sans-serif',
+          fontStyle: 'normal',
+          fontWeight: bold ? 700 : 400,
+          fontSize: 13,
+          lineHeight: '13px',
+          color: '#0e2238',
+          whiteSpace: 'nowrap',
+          marginLeft: 'auto',
+        }}
+      >
         {v}
       </span>
     </div>
   ));
 
-  // mobile sheet footnote — the Figma representative example: real figures inline
-  // ("³ Fahrzeugpreis: … €; Effektiver Jahreszins: … %; …") followed by the PangV sentence.
-  // Only REAL config figures are included; absent ones are simply omitted — shared logic with
-  // the Meta AIA marketing-image renderer, see ../utils/financeFormat.ts.
-  const exampleLine = buildFinanceExampleLine(
-    { price, apr, down, netLoanAmount, nominalRate, finalInstallment, grossAmount },
-    {
-      vehiclePrice: t('autobahn:modal.exampleVehiclePrice'),
-      priceSuffix: t('autobahn:modal.examplePriceSuffix'),
-      apr: t('autobahn:modal.exampleApr'),
-      nominal: t('autobahn:modal.exampleNominal'),
-      net: t('autobahn:modal.exampleNet'),
-      down: t('autobahn:modal.exampleDown'),
-      final: t('autobahn:modal.exampleFinal'),
-      gross: t('autobahn:modal.exampleGross'),
-    },
-  );
-
   return (
     <div className="fin-modal-scrim" onClick={onClose}>
       <div
@@ -2408,7 +2430,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 </div>
 
                 {/* centered ⓘ details toggle (mockup shows no chevron) */}
-                <button type="button" onClick={() => setShowBreakdown((v) => !v)} style={{ ...expanderBtnStyle, justifyContent: 'center', padding: '2px 0' }}>
+                <button type="button" onClick={() => setShowBreakdown((v) => !v)} style={{ ...expanderBtnStyle, justifyContent: 'center', padding: '2px 0 20px' }}>
                   <span
                     style={{
                       display: 'inline-flex',
@@ -2425,27 +2447,180 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     {isLease ? t('autobahn:modal.leasingDetails') : t('autobahn:modal.financingDetails')}
                   </span>
                 </button>
-                {/* mobile mockup shows NO row-by-row breakdown table (round 9 review) — the Figma
-                    footnote: real figures inline, then the PangV sentence (round 12). */}
+                {/* mobile "Finanzierungsdetails" toggle reveals the same row-by-row breakdown
+                    table as desktop (breakdownRows, built once above) instead of the old
+                    condensed footnote line. */}
                 {showBreakdown && (
-                  <div>
+                  <>
+                    <div style={{ marginBottom: 5 }}>
+                      <p
+                        style={{
+                          fontFamily: 'Arial, Helvetica, sans-serif',
+                          fontWeight: 700,
+                          fontSize: 16,
+                          lineHeight: '18px',
+                          color: '#0E2238',
+                          margin: 0,
+                          marginBottom: 5,
+                          paddingTop: 10,
+                          borderTop: '1px solid rgba(212, 221, 231, 0.95)',
+                        }}
+                      >
+                        {t('autobahn:modal.representativeExample')}
+                      </p>
+                      <p
+                        style={{
+                          fontFamily: 'Arial, Helvetica, sans-serif',
+                          fontWeight: 700,
+                          fontSize: 9,
+                          lineHeight: '12px',
+                          color: '#5B6B7F',
+                          marginBottom: 5,
+                        }}
+                      >
+                        {t('autobahn:modal.vatDisclaimer')}
+                      </p>
+                      {breakdownRows}
+                    </div>
+                    <div
+                      style={{
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                        gap: 10,
+                        background: '#FAFBFD',
+                        border: '1px solid #D4DDE7',
+                        borderRadius: 6,
+                        padding: 10,
+                        marginBottom: 10,
+                      }}
+                    >
+                      <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ flex: 'none' }}>
+                        <path d="M2.7002 9.00001L13.5002 3.60001L24.3002 9.00001H2.7002Z" stroke="#0E2238" strokeWidth="1.6" strokeLinejoin="round" />
+                        <path d="M4.49961 10.8H22.4996M5.39961 21.6H21.5996M3.59961 24.3H23.3996" stroke="#0E2238" strokeWidth="1.6" strokeLinecap="round" />
+                        <path d="M7.2002 10.8V21.6M11.7002 10.8V21.6M15.3002 10.8V21.6M19.8002 10.8V21.6" stroke="#0E2238" strokeWidth="1.6" />
+                      </svg>
+                      <div>
+                        <p
+                          style={{
+                            fontFamily: 'Arial, Helvetica, sans-serif',
+                            fontWeight: 700,
+                            fontSize: 14,
+                            lineHeight: '13px',
+                            color: '#0E2238',
+                            margin: 0,
+                            marginBottom: 3,
+                          }}
+                        >
+                          {t('autobahn:modal.lenderLabel')}
+                        </p>
+                        <p
+                          style={{
+                            fontFamily: 'Arial, Helvetica, sans-serif',
+                            fontWeight: 400,
+                            fontSize: 12,
+                            lineHeight: '13px',
+                            color: '#0E2238',
+                            margin: 0,
+                          }}
+                        >
+                          {t('autobahn:modal.lenderName')}
+                        </p>
+                      </div>
+                    </div>
                     <p
-                      className="md-label-sm"
                       style={{
+                        fontFamily: 'Arial, Helvetica, sans-serif',
+                        fontWeight: 700,
+                        fontSize: 13.3,
+                        lineHeight: '17px',
+                        color: '#0E2238',
                         margin: 0,
-                        paddingTop: 12.5,
+                        marginBottom: 7,
+                      }}
+                    >
+                      {t('autobahn:modal.legalNoticesTitle')}
+                    </p>
+                    <ul style={{ margin: 0, marginBottom: 3, paddingLeft: 16, display: 'flex', flexDirection: 'column', gap: 3 }}>
+                      {[
+                        t('autobahn:modal.legalNoticeCreditworthiness'),
+                        t('autobahn:modal.legalNoticeExample'),
+                        t('autobahn:modal.legalNoticeTwoThirds'),
+                        t('autobahn:modal.legalNoticeVat'),
+                        t('autobahn:modal.legalNoticeAddServices'),
+                      ].map((notice) => (
+                        <li
+                          key={notice}
+                          style={{
+                            fontFamily: 'Arial, Helvetica, sans-serif',
+                            fontWeight: 400,
+                            fontSize: 12,
+                            lineHeight: '12px',
+                            color: '#0E2238',
+                          }}
+                        >
+                          {notice}
+                        </li>
+                      ))}
+                    </ul>
+                    <p
+                      style={{
                         fontFamily: 'Arial, Helvetica, sans-serif',
                         fontWeight: 400,
-                        fontSize: 10,
-                        lineHeight: '10px',
-                        color: '#000000',
+                        fontSize: 12,
+                        lineHeight: '12px',
+                        color: '#0E2238',
+                        margin: 0,
+                        paddingBottom: 10,
+                        borderBottom: '1px solid rgba(212, 221, 231, 0.95)',
                       }}
                     >
-                      {exampleLine}
-                      <br />
-                      {isLease ? t('autobahn:modal.legalLeasing') : t('autobahn:modal.legalFinancing')}
+                      {t('autobahn:modal.listPriceFootnote')}
                     </p>
-                  </div>
+                    <div className="fin-sheet-cta-row" style={{ display: 'flex', gap: 7, paddingBottom: 15 }}>
+                      <Button
+                        variant="filled"
+                        size="lg"
+                        style={{
+                          width: 286,
+                          height: 50,
+                          background: '#005CFF',
+                          borderRadius: 16,
+                          justifyContent: 'flex-start',
+                          paddingLeft: 47,
+                          paddingRight: 47,
+                          fontFamily: 'Arial, Helvetica, sans-serif',
+                          fontWeight: 700,
+                          fontSize: 14,
+                          lineHeight: '16px',
+                          textAlign: 'center',
+                          color: '#FFFFFF',
+                        }}
+                        onClick={onSecure}
+                      >
+                        <span style={{ display: 'inline-flex', marginRight: 18 }}>
+                          <DocCheckIcon size={23} />
+                        </span>
+                        {t('autobahn:finance.requestRate')}
+                      </Button>
+                      {/* padding:0 — mbtn--lg's 30px side padding left no room for the icon at width 52 */}
+                      <Button
+                        variant="outlined"
+                        size="lg"
+                        icon="phone"
+                        className="fin-sheet-call-btn"
+                        style={{
+                          width: 50,
+                          height: 50,
+                          flex: 'none',
+                          padding: 0,
+                          background: '#FFFFFF',
+                          border: '1.6px solid #005CFF',
+                          borderRadius: 16,
+                        }}
+                        onClick={onCall}
+                      />
+                    </div>
+                  </>
                 )}
               </>
             )}