/* MarketCompare — Two alternating blocks (DE → USA), expandable item rows. */
const MARKET_COMPARE_CSS = `
#problem .v-section-header { max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; }
#problem .v-section-header .v-eyebrow { justify-content: center; }
#problem .v-section-header .v-section-sub { margin-left: auto; margin-right: auto; }

.mc-wrap { max-width: 1320px; margin: 80px auto 0; padding: 0 16px; display: flex; flex-direction: column; gap: 100px; }

.mc-block { display: flex; flex-direction: column; }

.mc-body { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.mc-block.is-us .mc-body { direction: rtl; }
.mc-block.is-us .mc-body > * { direction: ltr; }

.mc-image { position: relative; overflow: hidden; min-height: 580px; background: var(--v-paper-deep); }
.mc-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-image-tag { position: absolute; bottom: 22px; left: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; padding: 8px 14px; background: rgba(20,18,16,0.78); color: var(--v-paper); backdrop-filter: blur(8px); }

.mc-stack { display: flex; flex-direction: column; gap: 14px; }
.mc-stack-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.mc-eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--v-ink-sub); display: inline-flex; align-items: center; gap: 14px; font-weight: 400; }
.mc-eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--v-bordeaux); }
.mc-block.is-us .mc-eyebrow::before { background: var(--v-brass); }
.mc-headline { font-family: var(--font-serif); font-weight: 300; font-size: 48px; line-height: 1.04; letter-spacing: -0.02em; color: var(--v-ink); margin: 0; }
.mc-headline em { font-style: italic; font-weight: 400; }
.mc-block.is-de .mc-headline em { color: var(--v-ink-sub); }
.mc-block.is-us .mc-headline em { color: var(--v-bordeaux); }

.mc-card-featured { background: var(--v-ink); color: var(--v-paper); padding: 28px 30px 26px; display: flex; flex-direction: column; gap: 12px; }
.mc-block.is-us .mc-card-featured { background: var(--v-bordeaux); }
.mc-card-featured-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(247,243,236,0.65); display: inline-flex; align-items: center; gap: 10px; }
.mc-card-featured-eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--v-brass-300); }
.mc-block.is-us .mc-card-featured-eyebrow::before { background: var(--v-paper); }
.mc-card-featured-title { font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; color: var(--v-paper); margin: 0; }
.mc-card-featured-title em { font-style: italic; color: var(--v-brass-300); }
.mc-block.is-us .mc-card-featured-title em { color: var(--v-paper); font-weight: 500; }
.mc-card-featured-desc { font-family: var(--font-serif); font-size: 15.5px; font-weight: 300; color: rgba(247,243,236,0.88); line-height: 1.55; margin: 0; }

.mc-row { background: var(--v-card); border: 1px solid var(--v-border-soft); transition: border-color 240ms ease; overflow: hidden; }
.mc-row.is-open { border-color: var(--v-border-strong); }
.mc-row-trigger { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 22px; background: transparent; border: none; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: background 240ms ease; }
.mc-row-trigger:hover { background: var(--v-paper); }
.mc-row-icon { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--v-bordeaux); }
.mc-block.is-us .mc-row-icon { color: var(--v-brass-900); }
.mc-row-icon svg { width: 22px; height: 22px; }
.mc-row-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-row-title { font-family: var(--font-serif); font-size: 19px; font-weight: 500; color: var(--v-ink); line-height: 1.2; }
.mc-row-sub { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v-ink-muted); }
.mc-row-chev { color: var(--v-ink-muted); transition: transform 280ms ease, color 240ms ease; flex-shrink: 0; display: inline-flex; }
.mc-row.is-open .mc-row-chev { transform: rotate(90deg); color: var(--v-ink); }

.mc-row-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms ease; }
.mc-row.is-open .mc-row-expand { grid-template-rows: 1fr; }
.mc-row-expand > div { overflow: hidden; }
.mc-row-expand-inner { padding: 0 22px 22px 64px; }
.mc-row-expand-inner p { font-family: var(--font-serif); font-size: 15.5px; line-height: 1.6; color: var(--v-ink-sub); margin: 0; font-weight: 300; }

@media (max-width: 1100px) {
  .mc-headline { font-size: 38px; }
  .mc-body { gap: 36px; }
  .mc-card-featured { padding: 22px 24px 22px; }
  .mc-card-featured-title { font-size: 22px; }
  .mc-row-title { font-size: 17px; }
  .mc-image { min-height: 520px; }
}

@media (max-width: 900px) {
  .mc-wrap { gap: 72px; margin-top: 56px; }
  .mc-body, .mc-block.is-us .mc-body { grid-template-columns: 1fr; gap: 28px; direction: ltr; }
  /* aspect-ratio alone drives height once we stack to 1 col — keeping the
     desktop min-height here forces the container wider than its column
     (min-height * 4/3 > viewport on phones), so reset it. */
  .mc-image { min-height: 0; aspect-ratio: 4 / 3; width: 100%; max-width: 100%; }
  .mc-headline { font-size: 32px; }
  .mc-row-expand-inner { padding: 0 18px 18px 56px; }
}

@media (max-width: 560px) {
  .mc-wrap { gap: 56px; }
  .mc-headline { font-size: 26px; }
  .mc-card-featured { padding: 20px 20px 18px; }
  .mc-card-featured-title { font-size: 19px; }
  .mc-row-trigger { padding: 16px 18px; gap: 12px; }
  .mc-row-title { font-size: 16px; }
  .mc-row-expand-inner { padding: 0 18px 16px 52px; }
}
`;

const ChevRight = () => (
  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M6 4l6 5-6 5"/></svg>
);
const TrendDownIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7l7 7 4-4 7 7"/><path d="M14 17h7v-7"/></svg>
);
const TrendUpIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 17l7-7 4 4 7-7"/><path d="M14 7h7v7"/></svg>
);
const ScaleIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v16"/><path d="M5 9l-3 6h6z"/><path d="M19 9l-3 6h6z"/><path d="M5 9c2 0 5-1 7-1s5 1 7 1"/></svg>
);
const ClockIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
);
const CashIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="6" width="18" height="12" rx="1.5"/><circle cx="12" cy="12" r="2.5"/></svg>
);
const KeyIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="8" cy="15" r="4"/><path d="M11 13l9-9"/><path d="M17 6l3 3"/></svg>
);

const DE_BLOCK = {
  className: 'is-de',
  eyebrow: 'Deutschland · 2026',
  headline: <>Stagnierender <em>Investitionsmarkt.</em></>,
  image: { src: './de3.jpg', tag: 'Deutschland · BIP +0,6 % seit 2019', alt: 'Deutscher Wohnungsmarkt — Stagnation' },
  featured: {
    eyebrow: 'Kennzahl',
    title: <>Strukturell <em>ausgereizt.</em></>,
    desc: 'Reales BIP +0,6 % seit 2019. Bevölkerung −5,4 % bis 2050. Typische EK-Rendite < 5 % — nach Kosten und Regulierung.',
  },
  items: [
    { icon: <KeyIcon/>, title: 'SCHUFA-Pflicht', sub: 'Persönliche Bonität · Einkommensnachweis',
      long: 'Banken in Deutschland prüfen jeden Investor persönlich: Einkommen, SCHUFA, bestehende Verbindlichkeiten. Wer keine perfekte Bonität hat — oder einmal eine Selbstständigkeit gestartet hat — fliegt aus dem Raster, unabhängig vom Cashflow der Immobilie.' },
    { icon: <ScaleIcon/>, title: 'Mietpreisbremse · GEG', sub: 'Regulierung · Eigenbedarf restriktiv',
      long: 'Die Mietpreisbremse limitiert Anpassungen an Marktmieten, das Gebäudeenergiegesetz erzwingt Sanierungspflichten ohne Refinanzierung. Eigenbedarfskündigungen werden gerichtlich kassiert. Der Vermieter trägt das volle Risiko.' },
    { icon: <ClockIcon/>, title: 'Räumung 6 – 9 Monate', sub: 'Gerichtsabhängig · Mieterschutz',
      long: 'Bei Zahlungsausfall dauert eine Räumung in deutschen Großstädten typisch 6 – 9 Monate, in Ausnahmefällen 12+ Monate. Mietausfälle, Anwalts- und Gerichtskosten trägt der Vermieter — ohne Garantie auf späteren Vollstreckungserfolg.' },
    { icon: <TrendDownIcon/>, title: 'Cashflow ≈ 0 € / Mo.', sub: 'Netto nach allen Kosten',
      long: 'Nach Tilgung, Hausgeld, Instandhaltung, Verwalter und Steuern bleibt im typischen deutschen Bestandsobjekt nahezu nichts übrig. Wertschöpfung kam historisch über Wertsteigerung — die seit 2022 stagniert oder fällt.' },
  ],
};

const US_BLOCK = {
  className: 'is-us',
  eyebrow: 'USA · 2026',
  headline: <>Wachsender <em>Cashflow-Markt.</em></>,
  image: { src: './hero-house.jpg', tag: 'USA · BIP +17,7 % seit 2019', alt: 'US-Immobilienmarkt — Wachstum' },
  featured: {
    eyebrow: 'Kennzahl',
    title: <>Strukturell <em>im Wachstum.</em></>,
    desc: 'Reales BIP +17,7 % seit 2019. Bevölkerung +14,5 % bis 2050. Cash-on-Cash-Rendite 15 – 25 % in ausgewählten Märkten.',
  },
  items: [
    { icon: <CashIcon/>, title: 'DSCR · 70 – 80 %', sub: 'Kredit aus Cashflow · ohne Einkommensnachweis',
      long: 'DSCR-Loans (Debt Service Coverage Ratio) bewerten den Cashflow der Immobilie, nicht die persönliche Bonität. Bei DSCR > 1,2 finanzieren US-Banken 70 – 80 % des Kaufpreises — ohne SCHUFA, ohne deutschen Einkommensnachweis.' },
    { icon: <ScaleIcon/>, title: 'Landlord-friendly', sub: 'Marktauswahl entscheidend · klare Regeln',
      long: 'Bundesstaaten wie Ohio, Tennessee oder Indiana sind klar landlord-friendly: Mietverträge sind durchsetzbar, Mieterhöhungen frei verhandelbar, Eviction-Verfahren standardisiert. Marktauswahl ist Pflicht — wir konzentrieren uns auf bewährte Cashflow-Märkte.' },
    { icon: <ClockIcon/>, title: 'Räumung 4 – 6 Wochen', sub: 'Standardverfahren · feste Fristen',
      long: 'Ohio Eviction-Process: Notice → Court Filing → Hearing → Set-Out — typisch 28 – 45 Tage. Anwaltskosten 800 – 1.500 $, Verfahren ist durchstandardisiert und kalkulierbar. Property Manager übernimmt die komplette Abwicklung.' },
    { icon: <TrendUpIcon/>, title: '+1.000 $ / Mo. Cashflow', sub: 'Typisch begleiteter Deal',
      long: 'Bei einem typischen Virtorum-Deal (Cleveland, Duplex, 65 % LTV, 7,2 % Zins) bleibt nach allen Kosten ein monatlicher Cashflow von 800 – 1.200 $. Bei mehreren Einheiten skaliert der Cashflow linear — ohne dass die persönliche Steuerlast in Deutschland wächst.' },
  ],
};

const Block = ({ data }) => {
  const [openIdx, setOpenIdx] = React.useState(null);
  const toggle = (i) => setOpenIdx(prev => prev === i ? null : i);
  return (
    <div className={`mc-block ${data.className}`}>
      <div className="mc-body">
        <div className="mc-image">
          <img src={data.image.src} alt={data.image.alt}/>
          <div className="mc-image-tag">{data.image.tag}</div>
        </div>
        <div className="mc-stack">
          <div className="mc-stack-head">
            <span className="mc-eyebrow">{data.eyebrow}</span>
            <h3 className="mc-headline">{data.headline}</h3>
          </div>
          <div className="mc-card-featured">
            <span className="mc-card-featured-eyebrow">{data.featured.eyebrow}</span>
            <h4 className="mc-card-featured-title">{data.featured.title}</h4>
            <p className="mc-card-featured-desc">{data.featured.desc}</p>
          </div>
          {data.items.map((it, i) => (
            <div key={i} className={`mc-row ${openIdx === i ? 'is-open' : ''}`}>
              <button type="button" className="mc-row-trigger" aria-expanded={openIdx === i} onClick={() => toggle(i)}>
                <span className="mc-row-icon">{it.icon}</span>
                <span className="mc-row-text">
                  <span className="mc-row-title">{it.title}</span>
                  <span className="mc-row-sub">{it.sub}</span>
                </span>
                <span className="mc-row-chev"><ChevRight/></span>
              </button>
              <div className="mc-row-expand">
                <div>
                  <div className="mc-row-expand-inner"><p>{it.long}</p></div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const WorldMapMini = () => (
  <>
    <style dangerouslySetInnerHTML={{ __html: MARKET_COMPARE_CSS }} />
    <div className="mc-wrap">
      <Block data={DE_BLOCK}/>
      <Block data={US_BLOCK}/>
    </div>
  </>
);

window.WorldMapMini = WorldMapMini;