/* WorldMapCompare — Atlantik-Establishing-Shot (Weltkarte mit beiden Markern)
   darunter permanent sichtbare 2-Spalten-Compare (DE links · US rechts).
   Hover auf Marker = Spotlight (dimmt die andere Seite leicht), kein Toggle. */

const WMAP_CSS = `
@keyframes wmap-pulse { 0%{transform:scale(1);opacity:0.5} 100%{transform:scale(2.4);opacity:0} }
@keyframes wmap-dash { to { stroke-dashoffset: -28; } }
@keyframes wmap-fly { 0%{stroke-dashoffset: 600} 100%{stroke-dashoffset: 0} }

.v-wmap { background: var(--v-ink); color: var(--v-paper); padding: 104px 0 112px; position: relative; overflow: hidden; }
.v-wmap-inner { max-width: 1320px; margin: 0 auto; padding: 0 32px; position: relative; }

/* === Map Establishing Shot === */
.v-wmap-canvas {
  position: relative;
  margin-top: 56px;
  background: radial-gradient(ellipse at 50% 40%, rgba(201,166,107,0.05), transparent 65%);
  border-top: 1px solid rgba(247,243,236,0.08);
  border-bottom: 1px solid rgba(247,243,236,0.08);
  padding: 24px 0 16px;
}
.v-wmap-svg { width: 100%; height: auto; display: block; }

.v-wmap-land { fill: rgba(247,243,236,0.055); stroke: rgba(247,243,236,0.14); stroke-width: 0.6; transition: fill 260ms, stroke 260ms; }
.v-wmap-land.is-us { fill: rgba(201,166,107,0.09); stroke: rgba(201,166,107,0.45); }
.v-wmap-land.is-de { fill: rgba(197,58,80,0.1); stroke: rgba(224,122,136,0.55); }
.v-wmap-canvas.spotlight-us .v-wmap-land:not(.is-us) { fill: rgba(247,243,236,0.025); stroke: rgba(247,243,236,0.07); }
.v-wmap-canvas.spotlight-de .v-wmap-land:not(.is-de) { fill: rgba(247,243,236,0.025); stroke: rgba(247,243,236,0.07); }

.v-wmap-arc { fill: none; stroke: rgba(201,166,107,0.55); stroke-width: 1.1; stroke-dasharray: 4 8; animation: wmap-dash 3.4s linear infinite; }

.v-wmap-marker { cursor: default; outline: none; }
.v-wmap-marker-halo { fill: currentColor; opacity: 0.45; transform-origin: center; transform-box: fill-box; animation: wmap-pulse 2.6s ease-out infinite; }
.v-wmap-marker-ring { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.6; }
.v-wmap-marker-dot { fill: currentColor; }
.v-wmap-marker-core { fill: var(--v-paper); opacity: 0.85; }
.v-wmap-marker.us { color: var(--v-brass-300); }
.v-wmap-marker.de { color: #E07A88; }

.v-wmap-marker-label-wrap { pointer-events: none; }
.v-wmap-marker-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 2.4px; text-transform: uppercase; fill: currentColor; opacity: 0.9; }
.v-wmap-marker-sublabel { font-family: var(--font-serif); font-style: italic; font-size: 13px; fill: var(--v-paper); opacity: 0.72; }

.v-wmap-meta { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(247,243,236,0.4); }
.v-wmap-meta-arc { display: inline-flex; align-items: center; gap: 8px; color: var(--v-brass-300); opacity: 0.7; }
.v-wmap-meta-arc::before { content: ''; width: 22px; height: 1px; border-top: 1px dashed currentColor; }

/* === Compare Grid (permanent sichtbar) === */
.v-wmap-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 64px; position: relative; }
.v-wmap-compare::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(to bottom, transparent, rgba(247,243,236,0.15) 12%, rgba(247,243,236,0.15) 88%, transparent); }

.v-wmap-col { padding: 36px 40px; display: flex; flex-direction: column; gap: 24px; position: relative; }
.v-wmap-col.de { padding-left: 0; padding-right: 48px; }
.v-wmap-col.us { padding-right: 0; padding-left: 48px; }

.v-wmap-col-head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid rgba(247,243,236,0.08); }
.v-wmap-col-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2.8px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.v-wmap-col-eyebrow::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(255,255,255,0.05); }
.v-wmap-col.de .v-wmap-col-eyebrow { color: #E07A88; }
.v-wmap-col.us .v-wmap-col-eyebrow { color: var(--v-brass-300); }

.v-wmap-col-title { font-family: var(--font-serif); font-weight: 300; font-size: 30px; letter-spacing: -0.02em; line-height: 1.12; color: var(--v-paper); margin: 0; }
.v-wmap-col-title em { font-style: italic; font-weight: 400; }
.v-wmap-col.de .v-wmap-col-title em { color: #E07A88; }
.v-wmap-col.us .v-wmap-col-title em { color: var(--v-brass-300); }

.v-wmap-chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.v-wmap-chart { background: rgba(247,243,236,0.025); border: 1px solid rgba(247,243,236,0.08); padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.v-wmap-chart-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(247,243,236,0.55); }
.v-wmap-chart-v { font-family: var(--font-serif); font-size: 34px; font-weight: 400; line-height: 1; font-style: italic; letter-spacing: -0.02em; }
.v-wmap-col.de .v-wmap-chart-v { color: #E07A88; }
.v-wmap-col.us .v-wmap-chart-v { color: var(--v-brass-300); }
.v-wmap-chart-note { font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: rgba(247,243,236,0.68); line-height: 1.35; }

/* Mini bar visualization inside chart */
.v-wmap-bar { height: 6px; background: rgba(247,243,236,0.08); position: relative; overflow: hidden; margin-top: 2px; }
.v-wmap-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; transition: width 600ms; }
.v-wmap-col.de .v-wmap-bar-fill { background: #E07A88; }
.v-wmap-col.us .v-wmap-bar-fill { background: var(--v-brass-300); }
.v-wmap-bar.neg .v-wmap-bar-fill { left: auto; right: 50%; }
.v-wmap-bar.neg { background: rgba(247,243,236,0.08); }
.v-wmap-bar::before { content: ''; position: absolute; top: -2px; bottom: -2px; left: 50%; width: 1px; background: rgba(247,243,236,0.2); }
.v-wmap-bar.pos::before { display: none; }

.v-wmap-kpis { display: flex; flex-direction: column; }
.v-wmap-kpi { padding: 18px 0; border-top: 1px solid rgba(247,243,236,0.08); display: grid; grid-template-columns: 1fr; gap: 4px; }
.v-wmap-kpi-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(247,243,236,0.5); }
.v-wmap-kpi-v { font-family: var(--font-serif); font-size: 22px; font-weight: 400; color: var(--v-paper); line-height: 1.2; }
.v-wmap-kpi-v em { font-style: italic; font-weight: 400; }
.v-wmap-col.de .v-wmap-kpi-v em { color: #E07A88; }
.v-wmap-col.us .v-wmap-kpi-v em { color: var(--v-brass-300); }
.v-wmap-kpi-note { font-family: var(--font-serif); font-size: 12.5px; color: rgba(247,243,236,0.6); line-height: 1.4; margin-top: 4px; }

.v-wmap-footer { margin-top: 48px; text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(247,243,236,0.35); }

@media (max-width: 1024px) {
  .v-wmap { padding: 72px 0 88px; }
  .v-wmap-compare { grid-template-columns: 1fr; gap: 0; }
  .v-wmap-compare::before { display: none; }
  .v-wmap-col, .v-wmap-col.de, .v-wmap-col.us { padding: 32px 0; border-top: 1px solid rgba(247,243,236,0.08); }
  .v-wmap-col:first-child { border-top: none; }
  .v-wmap-col-title { font-size: 26px; }
}
@media (max-width: 640px) {
  .v-wmap-inner { padding: 0 20px; }
  .v-wmap-chart-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .v-wmap-chart { padding: 14px 12px 12px; }
  .v-wmap-chart-v { font-size: 26px; }
  .v-wmap-col-title { font-size: 22px; }
  .v-wmap-kpi-v { font-size: 18px; }
  .v-wmap-marker-sublabel { display: none; }
}
`;

/* Natural-Earth-inspirierte stark vereinfachte Kontinent-Silhouetten, Atlantik-zentriert.
   viewBox 0 0 1000 460 (breiter, kompakter Landscape). */
const WMAP_PATHS = {
  northAmerica: 'M 40 110 L 72 92 L 108 86 L 150 78 L 195 72 L 238 80 L 268 96 L 298 108 L 320 128 L 318 156 L 300 178 L 278 196 L 258 218 L 234 242 L 210 258 L 184 270 L 160 278 L 138 284 L 114 276 L 96 256 L 78 228 L 62 196 L 50 162 Z M 220 270 L 238 284 L 246 306 L 232 318 L 218 312 L 212 292 Z M 260 48 L 296 42 L 318 56 L 312 74 L 286 80 L 264 70 Z',
  southAmerica: 'M 240 310 L 268 308 L 288 322 L 300 348 L 302 378 L 296 408 L 282 432 L 262 444 L 242 438 L 228 412 L 222 380 L 226 348 L 232 324 Z',
  europe: 'M 478 112 L 510 104 L 540 106 L 568 112 L 590 122 L 598 138 L 590 156 L 568 166 L 540 168 L 512 164 L 488 156 L 476 140 L 474 124 Z M 502 92 L 522 86 L 534 94 L 524 104 L 508 102 Z',
  africa: 'M 496 178 L 534 172 L 572 178 L 596 198 L 608 230 L 608 266 L 596 302 L 578 330 L 554 344 L 526 340 L 502 322 L 488 296 L 482 266 L 484 234 L 490 206 Z',
  asia: 'M 608 96 L 658 88 L 720 84 L 780 88 L 840 96 L 890 110 L 920 128 L 930 152 L 918 176 L 894 194 L 862 204 L 822 208 L 778 204 L 734 196 L 688 186 L 648 172 L 620 154 L 608 132 Z M 860 218 L 890 216 L 908 232 L 898 248 L 872 250 L 854 236 Z M 798 226 L 830 222 L 848 238 L 836 254 L 808 256 L 790 240 Z',
  australia: 'M 832 328 L 880 322 L 920 332 L 932 354 L 920 374 L 888 384 L 854 380 L 828 366 L 822 346 Z',
  uk: 'M 456 128 L 472 122 L 482 134 L 478 148 L 464 150 L 454 140 Z',
  scandinavia: 'M 556 66 L 578 60 L 592 72 L 594 96 L 580 108 L 564 102 L 552 86 Z',
  japan: 'M 908 152 L 926 146 L 940 160 L 934 176 L 918 180 L 906 168 Z',
};

const WMAP_DATA = {
  us: {
    label: 'USA',
    sublabel: 'Ohio · Primärmarkt',
    markerXY: [230, 180],
    eyebrow: 'USA · Die Chance',
    title: <>Größter Markt der Welt,<br/>mit <em>Wachstumsdynamik</em></>,
    charts: [
      { k: 'Reales BIP seit 2019', v: '+17,7 %', note: 'Breitere Beschäftigungsbasis, höhere Mieterbonität.', pct: 88, pos: true },
      { k: 'Bevölkerung bis 2050', v: '+14,5 %', note: '331 → 379 Mio. Wachsende Nachfrage.', pct: 72, pos: true },
    ],
    kpis: [
      { k: 'Räumung bei Zahlungsverzug', v: <>4 – 6 <em>Wochen</em></>, note: 'Beispiel Ohio: standardisiertes Verfahren, feste Fristenkette.' },
      { k: 'Regulatorisches Umfeld', v: <>Landlord-<em>friendly</em></>, note: 'Keine Mietpreisbremse, keine umfassenden Sanierungspflichten.' },
      { k: 'Finanzierung', v: <>DSCR · <em>70 – 80 %</em></>, note: 'Kredit aus Cashflow der Immobilie. Persönliches Einkommen irrelevant.' },
    ],
  },
  de: {
    label: 'Deutschland',
    sublabel: 'Stagnation',
    markerXY: [542, 140],
    eyebrow: 'Deutschland · Das Problem',
    title: <>Stabiles Fundament,<br/><em>strukturelle Hemmnisse</em></>,
    charts: [
      { k: 'Reales BIP seit 2019', v: '+0,6 %', note: 'Praktisch Stagnation. OECD: 0,3 % 2025, 1,0 % 2026.', pct: 3, pos: true },
      { k: 'Bevölkerung bis 2050', v: '−5,4 %', note: '83,5 → 79,0 Mio. Rückläufige Nachfrage.', pct: 27, pos: false },
    ],
    kpis: [
      { k: 'Räumung bei Zahlungsverzug', v: <>6 – 9 <em>Monate</em></>, note: 'Mehrstufiges Kündigungs- und Räumungsverfahren. Gerichtsabhängig.' },
      { k: 'Regulatorisches Umfeld', v: <>Mieter-<em>schutz</em></>, note: 'Mietpreisbremse, GEG-Sanierungspflichten, Eigenbedarfsrecht.' },
      { k: 'Finanzierung', v: <>Bonität + <em>SCHUFA</em></>, note: 'Persönliche Bonitätsprüfung Pflicht. Nachbeleihung eingeschränkt.' },
    ],
  },
};

const WorldMapCompare = () => {
  const [spotlight, setSpotlight] = React.useState(null); // 'us' | 'de' | null

  const clear = () => setSpotlight(null);

  const Col = ({ side }) => {
    const d = WMAP_DATA[side];
    return (
      <div className={`v-wmap-col ${side}`}
           onMouseEnter={() => setSpotlight(side)}
           onMouseLeave={clear}>
        <div className="v-wmap-col-head">
          <div className="v-wmap-col-eyebrow">{d.eyebrow}</div>
          <h3 className="v-wmap-col-title">{d.title}</h3>
        </div>

        <div className="v-wmap-chart-row">
          {d.charts.map((c, i) => (
            <div key={i} className="v-wmap-chart">
              <div className="v-wmap-chart-k">{c.k}</div>
              <div className="v-wmap-chart-v">{c.v}</div>
              <div className={`v-wmap-bar ${c.pos ? 'pos' : 'neg'}`}>
                <div className="v-wmap-bar-fill" style={{ width: `${c.pct}%` }}/>
              </div>
              <div className="v-wmap-chart-note">{c.note}</div>
            </div>
          ))}
        </div>

        <div className="v-wmap-kpis">
          {d.kpis.map((kpi, i) => (
            <div key={i} className="v-wmap-kpi">
              <div className="v-wmap-kpi-k">{kpi.k}</div>
              <div className="v-wmap-kpi-v">{kpi.v}</div>
              <div className="v-wmap-kpi-note">{kpi.note}</div>
            </div>
          ))}
        </div>
      </div>
    );
  };

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: WMAP_CSS }} />
      <section className="v-wmap" id="weltkarte" data-screen-label="03 Weltkarte">
        <div className="v-wmap-inner">
          <SectionHeader
            eyebrow="Zwei Märkte · Ein Atlantik"
            headline={`Ein Blick auf die Welt —<br/>zwei <em>Investitionsrealitäten</em>`}
            sub="Makro-Rahmenbedingungen im direkten Vergleich. Scroll für Details."
          />

          <div className={`v-wmap-canvas ${spotlight ? `spotlight-${spotlight}` : ''}`}>
            <svg className="v-wmap-svg" viewBox="0 0 1000 460" aria-label="Weltkarte Deutschland versus USA">
              <defs>
                <pattern id="wmap-dotgrid" x="0" y="0" width="14" height="14" patternUnits="userSpaceOnUse">
                  <circle cx="7" cy="7" r="0.7" fill="rgba(247,243,236,0.05)"/>
                </pattern>
              </defs>
              <rect x="0" y="0" width="1000" height="460" fill="url(#wmap-dotgrid)"/>

              {/* Landmassen — Atlantik-zentriert */}
              <path d={WMAP_PATHS.northAmerica} className={`v-wmap-land is-us`}/>
              <path d={WMAP_PATHS.southAmerica} className="v-wmap-land"/>
              <path d={WMAP_PATHS.europe} className="v-wmap-land is-de"/>
              <path d={WMAP_PATHS.uk} className="v-wmap-land"/>
              <path d={WMAP_PATHS.scandinavia} className="v-wmap-land"/>
              <path d={WMAP_PATHS.africa} className="v-wmap-land"/>
              <path d={WMAP_PATHS.asia} className="v-wmap-land"/>
              <path d={WMAP_PATHS.japan} className="v-wmap-land"/>
              <path d={WMAP_PATHS.australia} className="v-wmap-land"/>

              {/* Atlantik-Bogen */}
              <path
                d={`M ${WMAP_DATA.us.markerXY[0]} ${WMAP_DATA.us.markerXY[1]} Q 386 40 ${WMAP_DATA.de.markerXY[0]} ${WMAP_DATA.de.markerXY[1]}`}
                className="v-wmap-arc"
              />

              {/* Marker */}
              {Object.entries(WMAP_DATA).map(([k, m]) => {
                const [x, y] = m.markerXY;
                const labelAnchor = k === 'us' ? 'start' : 'end';
                const labelDx = k === 'us' ? 20 : -20;
                return (
                  <g key={k}
                     className={`v-wmap-marker ${k}`}
                     transform={`translate(${x} ${y})`}
                     onMouseEnter={() => setSpotlight(k)}
                     onMouseLeave={clear}>
                    <circle className="v-wmap-marker-halo" r="10"/>
                    <circle className="v-wmap-marker-ring" r="18"/>
                    <circle className="v-wmap-marker-dot" r="6"/>
                    <circle className="v-wmap-marker-core" r="2"/>
                    <g className="v-wmap-marker-label-wrap" transform={`translate(${labelDx} 4)`}>
                      <text className="v-wmap-marker-label" textAnchor={labelAnchor}>{m.label}</text>
                      <text className="v-wmap-marker-sublabel" textAnchor={labelAnchor} y="18">{m.sublabel}</text>
                    </g>
                  </g>
                );
              })}
            </svg>
            <div className="v-wmap-meta">
              <span>Quelle · Destatis · BEA · UN · OECD</span>
              <span className="v-wmap-meta-arc">Atlantik · 6.650 km</span>
            </div>
          </div>

          <div className="v-wmap-compare">
            <Col side="de"/>
            <Col side="us"/>
          </div>

          <div className="v-wmap-footer">Direkter Vergleich · Stand 2026</div>
        </div>
      </section>
    </>
  );
};

window.WorldMapCompare = WorldMapCompare;