/* ProblemUSACompare — Scannable Vergleichs-Tabelle (DE ↔ USA).
   Sticky column headers, color-coded values, one row per KPI.
   Charts als kompakter Detail-Block danach. */
const PROBLEM_CSS = `
.v-cmp { max-width: 1280px; margin: 40px auto 0; padding: 0 32px; }
.v-cmp-table { width: 100%; border-top: 1px solid var(--v-border); }
.v-cmp-head { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0; padding: 20px 0 18px; border-bottom: 1px solid var(--v-border); position: sticky; top: 0; background: var(--v-paper); z-index: 5; }
.v-cmp-head-cell { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.v-cmp-head-cell.metric { color: var(--v-ink-muted); }
.v-cmp-head-cell.de { color: var(--v-bordeaux); }
.v-cmp-head-cell.us { color: var(--v-brass); }
.v-cmp-head-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }

.v-cmp-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0; padding: 22px 0; border-bottom: 1px solid var(--v-border); align-items: center; transition: background 180ms; }
.v-cmp-row:hover { background: rgba(247,243,236,0.4); }
.v-cmp-row:last-child { border-bottom: none; }

.v-cmp-metric { display: flex; flex-direction: column; gap: 4px; padding-right: 24px; }
.v-cmp-metric-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--v-ink-muted); }
.v-cmp-metric-name { font-family: var(--font-serif); font-size: 17px; font-weight: 400; color: var(--v-ink); line-height: 1.25; letter-spacing: -0.01em; }

.v-cmp-cell { display: flex; flex-direction: column; gap: 4px; padding-right: 16px; }
.v-cmp-cell-v { font-family: var(--font-serif); font-size: 26px; font-weight: 300; line-height: 1; letter-spacing: -0.02em; font-style: italic; }
.v-cmp-cell-v small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; margin-left: 6px; font-style: normal; opacity: 0.7; }
.v-cmp-cell-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.3px; line-height: 1.45; color: var(--v-ink-sub); }
.v-cmp-cell.de .v-cmp-cell-v { color: var(--v-bordeaux); }
.v-cmp-cell.us .v-cmp-cell-v { color: var(--v-ink); }
.v-cmp-cell.us { position: relative; }
.v-cmp-cell.us::before { content: ''; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 6px solid var(--v-brass); border-top: 5px solid transparent; border-bottom: 5px solid transparent; opacity: 0.55; }
.v-cmp-row.neutral .v-cmp-cell.us::before { display: none; }

.v-cmp-winner { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--v-brass); margin-top: 6px; }
.v-cmp-winner::before { content: '✓'; font-size: 11px; }

/* Kontext-Charts unter der Tabelle */
.v-cmp-context { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 40px; border-top: 1px solid var(--v-border); }
.v-cmp-context-block { display: flex; flex-direction: column; gap: 16px; }
.v-cmp-context-head { display: flex; flex-direction: column; gap: 6px; }
.v-cmp-context-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--v-ink-muted); }
.v-cmp-context-title { font-family: var(--font-serif); font-size: 20px; font-weight: 400; color: var(--v-ink); letter-spacing: -0.01em; }
.v-cmp-context-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 900px) {
  .v-cmp { padding: 0 20px; }
  .v-cmp-head { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 0 14px; }
  .v-cmp-head-cell.metric { display: none; }
  .v-cmp-row { grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px 0 18px; position: relative; }
  .v-cmp-metric { grid-column: 1 / -1; padding-right: 0; margin-bottom: 4px; }
  .v-cmp-metric-name { font-size: 15px; }
  .v-cmp-cell-v { font-size: 22px; }
  .v-cmp-cell.us::before { display: none; }
  .v-cmp-context { grid-template-columns: 1fr; gap: 28px; }
  .v-cmp-context-dual { grid-template-columns: 1fr; }
}
`;

const CMP_ROWS = [
  {
    num: '01', name: 'Reales BIP seit 2019',
    de: { v: '+0,6 %', note: 'Praktisch Stagnation' },
    us: { v: '+17,7 %', note: 'Wachsende Beschäftigungsbasis' },
  },
  {
    num: '02', name: 'Bevölkerung bis 2050',
    de: { v: '−5,4 %', note: '83,5 → 79,0 Mio.' },
    us: { v: '+14,5 %', note: '331 → 379 Mio.' },
  },
  {
    num: '03', name: 'Typische EK-Rendite',
    de: { v: '< 5 %', note: 'Nach Kosten & Regulierung' },
    us: { v: '15 – 25 %', note: 'Cash-on-Cash, ausgewählte Märkte' },
  },
  {
    num: '04', name: 'Cashflow pro Objekt / Mo.',
    de: { v: '≈ 0 €', note: 'Netto nach allen Kosten' },
    us: { v: '+1.000 $', note: 'Typisch für begleitete Deals' },
  },
  {
    num: '05', name: 'Finanzierung',
    de: { v: 'SCHUFA', note: 'Persönliche Bonität Pflicht' },
    us: { v: 'DSCR · 70 – 80 %', note: 'Kredit aus Cashflow, ohne Einkommensnachweis' },
  },
  {
    num: '06', name: 'Nachbeleihung nach Aufwertung',
    de: { v: 'Ausgeschlossen', note: 'Skalierung über Cash-out-Refi nicht möglich' },
    us: { v: 'Ja · ≈ 6 – 12 Mo.', note: 'Cash-out-Refi nach Aufwertung Standard' },
  },
  {
    num: '07', name: 'Regulatorisches Umfeld',
    de: { v: 'Mieterschutz', note: 'Mietpreisbremse · GEG · Eigenbedarf' },
    us: { v: 'Landlord-friendly', note: 'Marktauswahl entscheidend' },
  },
  {
    num: '08', name: 'Räumung bei Zahlungsverzug',
    de: { v: '6 – 9 Monate', note: 'Gerichtsabhängig' },
    us: { v: '4 – 6 Wochen', note: 'Standardverfahren, feste Fristen' },
  },
];

const CmpRow = ({ r }) => (
  <div className="v-cmp-row">
    <div className="v-cmp-metric">
      <span className="v-cmp-metric-num">{r.num}</span>
      <span className="v-cmp-metric-name">{r.name}</span>
    </div>
    <div className="v-cmp-cell de">
      <div className="v-cmp-cell-v">{r.de.v}</div>
      <div className="v-cmp-cell-note">{r.de.note}</div>
    </div>
    <div className="v-cmp-cell us">
      <div className="v-cmp-cell-v">{r.us.v}</div>
      <div className="v-cmp-cell-note">{r.us.note}</div>
    </div>
  </div>
);

const ProblemUSACompare = () => (
  <>
    <style dangerouslySetInnerHTML={{ __html: PROBLEM_CSS }} />
    <section className="v-section" id="problem" data-screen-label="03 DE vs USA">
      <SectionHeader
        eyebrow="Deutschland ↔ USA · Vergleich"
        headline={`„Der deutsche Wohnimmobilienmarkt ist als Investitionsmarkt <em>strukturell ausgereizt</em>.“`}
        sub="DE vs. USA — acht Kennzahlen, nüchtern gegenübergestellt."
      />

      <WorldMapMini/>
    </section>
  </>
);

Object.assign(window, { ProblemUSACompare });