const Sparkline = ({ path, fill, color = 'currentColor', tone = 'up' }) => (
  <svg className={`v-hero-spark tone-${tone}`} viewBox="0 0 100 36" preserveAspectRatio="none" aria-hidden="true">
    <line x1="0" y1="35.5" x2="100" y2="35.5" stroke="currentColor" strokeWidth="0.5" strokeOpacity="0.35"/>
    {fill && <path d={fill} fill={color} fillOpacity="0.08" stroke="none"/>}
    <path d={path} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" vectorEffect="non-scaling-stroke"/>
    <circle cx="100" cy={tone === 'up' ? 6 : tone === 'down' ? 28 : 21} r="2" fill={color}/>
  </svg>
);

const Hero = ({ onBook }) => (
  <section className="v-hero" data-screen-label="01 Hero">
    <div className="v-hero-left">
      <div className="v-hero-dateline">
        <span>Für deutsche Investoren · Seit 2023</span>
      </div>
      <h1 className="v-h-hero">
        Der Cashflow, den Deutschland<br/>nicht mehr liefert. <em>Strukturiert</em><br/>in den USA.
      </h1>
      <p className="v-hero-sub">
        Wir begleiten deinen Kauf von der LLC-Gründung bis zur Übergabe an das lokale Property Management — <strong>komplett remote</strong>, auf Basis echter Cashflow-Zahlen.
      </p>
      <div className="v-hero-btns">
        <button className="v-btn-primary" onClick={onBook}>Strategiegespräch buchen</button>
        <button className="v-btn-outline" onClick={() => document.getElementById('prozess')?.scrollIntoView({behavior:'smooth'})}>So läuft's ab</button>
      </div>
      <div className="v-hero-qs">
        <div className="v-hero-q"><strong>Ab 60.000 € EK</strong>Für Investoren mit Kapital und Zeithorizont.</div>
        <div className="v-hero-q"><strong>100 % Remote</strong>Kein US-Aufenthalt nötig.</div>
        <div className="v-hero-q"><strong>Bonitätsaufbau inklusive</strong>US-Credit-Score für zukünftige Finanzierungen.</div>
      </div>
    </div>
    <div className="v-hero-right">
      <div className="v-hero-versus">
        <div className="v-hero-versus-head">
          <span className="v-hero-versus-num">01 · Der Sprung</span>
        </div>
        <div className="v-hero-versus-grid">
          <div className="v-hero-versus-col de">
            <div className="v-hero-versus-img de-real">
              <img src="./img/de-hero.webp" alt="Deutsche Gründerzeit-Fassade — Beispiel"/>
              {/* <span className="v-hero-versus-img-tag de">Gründerzeit · Beispiel</span> */}
            </div>
            <div className="v-hero-versus-col-title de">Deutschland stagniert.</div>
            {[
              ['Reales BIP seit 2019', '0 %', 'big'],
              ['Bevölkerung bis 2050', '−5 %', 'big'],
              ['Finanzierung', 'Nur mit Bonität + SCHUFA', ''],
              ['EK-Rendite', '< 5 %', 'big'],
              ['Cashflow', <>0<em>/ Mo.</em></>, 'big'],
              ['Regulierung', 'Mieterschutz extrem', ''],
              ['Räumungsdauer', '6 – 9 Monate', ''],
            ].map(([k, v, mod], i) => (
              <div key={i} className={`v-hero-versus-row de ${mod}`}>
                <span className="v-hero-versus-k">{k}</span>
                <span className="v-hero-versus-v">{v}</span>
              </div>
            ))}
          </div>
          <div className="v-hero-versus-col us">
            <div className="v-hero-versus-img">
              <img src="./house-1.webp?v=2" alt="Cleveland Duplex — Beispielbild"/>
              {/* <span className="v-hero-versus-img-tag">Cleveland · Beispiel</span> */}
            </div>
            <div className="v-hero-versus-col-title us">USA wächst.</div>
            {[
              ['Reales BIP seit 2019', '+17 %', 'big'],
              ['Bevölkerung bis 2050', '+14 %', 'big'],
              ['Finanzierung', '70 % FK · ohne SCHUFA', ''],
              ['EK-Rendite', '> 15 %', 'big'],
              ['Cashflow', <>+1.000 $<em>/ Mo.</em></>, 'big'],
              ['Regulierung', 'Landlord-friendly', ''],
              ['Räumungsdauer', '4 – 6 Wochen', ''],
            ].map(([k, v, mod], i) => (
              <div key={i} className={`v-hero-versus-row us ${mod}`}>
                <span className="v-hero-versus-k">{k}</span>
                <span className="v-hero-versus-v">{v}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="v-hero-versus-close" aria-hidden="true"></div>
      </div>
      {/* FALLSTUDIEN-BLOCK — vorübergehend disabled
      <div className="v-hero-proof">
        <div className="v-hero-proof-head">
          <span className="v-hero-proof-eyebrow">02 · Fallstudien</span>
          <div className="v-hero-proof-title">Deals unserer Investoren. <em>Keine Musterrechnungen.</em></div>
        </div>
        <a className="v-hero-proof-case" href="#fallstudien" onClick={(e)=>{e.preventDefault();document.getElementById('fallstudien')?.scrollIntoView({behavior:'smooth'});}}>
          <div className="v-hero-proof-case-img">
            <img src="./house-2.webp?v=2" alt="Cleveland Duplex Fallstudie"/>
          </div>
          <div className="v-hero-proof-case-body">
            <span className="v-hero-proof-case-label">Fallstudie · Cleveland, OH · Duplex · 2024</span>
            <div className="v-hero-proof-case-metrics">
              <span className="v-hero-proof-m"><strong>$85k</strong><em>Invest</em></span>
              <span className="v-hero-proof-arrow">→</span>
              <span className="v-hero-proof-m"><strong>+$1.100</strong><em>/ Mo.</em></span>
              <span className="v-hero-proof-m"><strong>15,5 %</strong><em>EK-Rendite</em></span>
            </div>
          </div>
          <span className="v-hero-proof-case-arrow" aria-hidden="true">↗</span>
        </a>
        <a className="v-hero-proof-cta" href="#fallstudien" onClick={(e)=>{e.preventDefault();document.getElementById('fallstudien')?.scrollIntoView({behavior:'smooth'});}}>Alle Fallstudien ansehen →</a>
      </div>
      */}
    </div>
  </section>
);

const HeroChart = ({ side = 'both', dark = false }) => {
  const showDE = side === 'both' || side === 'de';
  const showUS = side === 'both' || side === 'us';
  const grid = dark ? '#2A2420' : '#D4CEBF';
  const base = dark ? '#4A4239' : '#9A8F84';
  const axis = dark ? '#6B6259' : '#9A8F84';
  const deC = dark ? '#D47A82' : '#7A1F28';
  const usC = dark ? '#C9A66B' : '#4A5A70';
  return (
    <div className={`v-chart-section ${dark ? 'v-chart-dark' : ''}`}>
      <div className="v-chart-head">
        <div className="v-chart-title">{side === 'de' ? 'Deutschland' : side === 'us' ? 'USA' : 'DE ↔ US'}</div>
        <div className="v-chart-ticker">2019 → 2025</div>
      </div>
      <div className="v-chart-label">indexiert 2019-Q1 = 100</div>
      <svg viewBox="0 0 440 185" style={{width:'100%',overflow:'visible'}}>
        <line x1="36" y1="14" x2="432" y2="14" stroke={grid} strokeWidth="0.5"/>
        <line x1="36" y1="62" x2="432" y2="62" stroke={grid} strokeWidth="0.5"/>
        <line x1="36" y1="110" x2="432" y2="110" stroke={base} strokeWidth="0.8"/>
        <line x1="36" y1="158" x2="432" y2="158" stroke={grid} strokeWidth="0.5"/>
        <text x="30" y="17" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>+20 %</text>
        <text x="30" y="65" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>+10 %</text>
        <text x="30" y="113" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>Basis</text>
        <text x="30" y="161" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>−10 %</text>
        {showDE && (<g>
          <polyline points="36,110 50.7,109.7 65.3,107.9 80,109.5 94.7,119.3 109.3,161 124,123.8 138.7,119.3 153.3,122.2 168,111.2 182.7,110.8 197.3,108.2 212,104.9 226.7,104.2 241.3,102.8 256,104.5 270.7,106.8 285.3,107.1 300,107.1 314.7,108.5 329.3,109 344,110.2 358.7,110.1 373.3,109.3 388,107.5 402.7,108.5 417.3,108.6 432,107.2" fill="none" stroke={deC} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round"/>
          <circle cx="36" cy="110" r="2.5" fill={deC}/>
          <circle cx="109.3" cy="161" r="2" fill={deC}/>
          <circle cx="432" cy="107.2" r="2.5" fill={deC}/>
          <text x="426" y="122" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="8" fontWeight="600" fill={deC}>100,6</text>
          <text x="426" y="134" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="7" fill={deC}>▲ +0,6 %</text>
        </g>)}
        {showUS && (<g>
          <polyline points="36,110 50.7,106 65.3,100.3 80,97 94.7,103.5 109.3,141.8 124,107 138.7,101.5 153.3,94.7 168,86.3 182.7,82.1 197.3,73.4 212,74.7 226.7,73.9 241.3,70.2 256,66.7 270.7,62.9 285.3,59.6 300,53.4 314.7,48.9 329.3,47.8 344,43 358.7,38.5 373.3,35.9 388,36.8 402.7,31.6 417.3,25.6 432,24.9" fill="none" stroke={usC} strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round"/>
          <circle cx="36" cy="110" r="2.5" fill={usC}/>
          <circle cx="109.3" cy="141.8" r="2" fill={usC}/>
          <circle cx="432" cy="24.9" r="2.8" fill={usC}/>
          <text x="426" y="38" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="8" fontWeight="600" fill={usC}>117,7</text>
          <text x="426" y="50" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="7" fill={usC}>▲ +17,7 %</text>
        </g>)}
        <text x="58" y="172" textAnchor="middle" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>2019</text>
        <text x="116.7" y="172" textAnchor="middle" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>2020</text>
        <text x="175.3" y="172" textAnchor="middle" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>2021</text>
        <text x="234" y="172" textAnchor="middle" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>2022</text>
        <text x="292.7" y="172" textAnchor="middle" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>2023</text>
        <text x="351.3" y="172" textAnchor="middle" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>2024</text>
        <text x="410" y="172" textAnchor="middle" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>2025</text>
      </svg>
      <div className="v-legend">
        {showDE && <div className="v-legend-item"><div className="v-dot" style={{background:deC}}/>Deutschland</div>}
        {showUS && <div className="v-legend-item"><div className="v-dot" style={{background:usC}}/>USA</div>}
        <span style={{fontSize:9,color:axis,fontStyle:'italic',marginLeft:8}}>· indexiert: 2019-Q1 = 100</span>
      </div>
      <div className="v-chart-note">Quellen: <a href="https://fred.stlouisfed.org/series/GDPC1" target="_blank" rel="noopener">FRED</a> · <a href="https://fred.stlouisfed.org/series/CLVMNACSCAB1GQDE" target="_blank" rel="noopener">Eurostat</a></div>
    </div>
  );
};

const HeroPopChart = ({ side = 'both', dark = false }) => {
  const showDE = side === 'both' || side === 'de';
  const showUS = side === 'both' || side === 'us';
  const grid = dark ? '#2A2420' : '#D4CEBF';
  const base = dark ? '#4A4239' : '#9A8F84';
  const axis = dark ? '#6B6259' : '#9A8F84';
  const deC = dark ? '#D47A82' : '#7A1F28';
  const usC = dark ? '#C9A66B' : '#4A5A70';
  return (
    <div className={`v-chart-section ${dark ? 'v-chart-dark' : ''}`}>
      <div className="v-chart-head">
        <div className="v-chart-title">{side === 'de' ? 'Deutschland' : side === 'us' ? 'USA' : 'DE ↔ US'}</div>
        <div className="v-chart-ticker">2024 → 2050</div>
      </div>
      <div className="v-chart-label">in Millionen</div>
      <svg viewBox="0 0 440 185" style={{width:'100%',overflow:'visible'}}>
        <line x1="36" y1="14" x2="432" y2="14" stroke={grid} strokeWidth="0.5"/>
        <line x1="36" y1="62" x2="432" y2="62" stroke={grid} strokeWidth="0.5"/>
        <line x1="36" y1="110" x2="432" y2="110" stroke={base} strokeWidth="0.8"/>
        <line x1="36" y1="158" x2="432" y2="158" stroke={grid} strokeWidth="0.5"/>
        <text x="30" y="17" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>+20 %</text>
        <text x="30" y="65" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>+10 %</text>
        <text x="30" y="113" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>Basis</text>
        <text x="30" y="161" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>−10 %</text>
        {showDE && (<g>
          <polyline points="36,110 115.2,109.5 194.4,111.9 273.6,116.7 352.8,124.9 432,135.9" fill="none" stroke={deC} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round"/>
          <circle cx="36" cy="110" r="2.5" fill={deC}/>
          <circle cx="115.2" cy="109.5" r="2" fill={deC}/>
          <circle cx="194.4" cy="111.9" r="2" fill={deC}/>
          <circle cx="273.6" cy="116.7" r="2" fill={deC}/>
          <circle cx="352.8" cy="124.9" r="2" fill={deC}/>
          <circle cx="432" cy="135.9" r="2.5" fill={deC}/>
          <text x="42" y="123" textAnchor="start" fontFamily="DM Mono,monospace" fontSize="7.5" fill={deC}>83,5 Mio.</text>
          <text x="426" y="149" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="8" fontWeight="600" fill={deC}>79,0 Mio.</text>
          <text x="426" y="161" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="7" fill={deC}>▼ −5,4 %</text>
        </g>)}
        {showUS && (<g>
          <polyline points="36,110 115.2,91.3 194.4,76.4 273.6,63.4 352.8,51.9 432,40.4" fill="none" stroke={usC} strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round"/>
          <circle cx="36" cy="110" r="2.5" fill={usC}/>
          <circle cx="115.2" cy="91.3" r="2" fill={usC}/>
          <circle cx="194.4" cy="76.4" r="2" fill={usC}/>
          <circle cx="273.6" cy="63.4" r="2" fill={usC}/>
          <circle cx="352.8" cy="51.9" r="2" fill={usC}/>
          <circle cx="432" cy="40.4" r="2.5" fill={usC}/>
          <text x="42" y="102" textAnchor="start" fontFamily="DM Mono,monospace" fontSize="7.5" fill={usC}>331 Mio.</text>
          <text x="426" y="54" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="8" fontWeight="600" fill={usC}>379 Mio.</text>
          <text x="426" y="66" textAnchor="end" fontFamily="DM Mono,monospace" fontSize="7" fill={usC}>▲ +14,5 %</text>
        </g>)}
        <text x="36" y="172" textAnchor="middle" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>2024</text>
        <text x="115.2" y="172" textAnchor="middle" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>2030</text>
        <text x="194.4" y="172" textAnchor="middle" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>2035</text>
        <text x="273.6" y="172" textAnchor="middle" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>2040</text>
        <text x="352.8" y="172" textAnchor="middle" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>2045</text>
        <text x="432" y="172" textAnchor="middle" fontFamily="DM Mono,monospace" fontSize="8" fill={axis}>2050</text>
      </svg>
      <div className="v-legend">
        {showDE && <div className="v-legend-item"><div className="v-dot" style={{background:deC}}/>Deutschland</div>}
        {showUS && <div className="v-legend-item"><div className="v-dot" style={{background:usC}}/>USA</div>}
        <span style={{fontSize:9,color:axis,fontStyle:'italic',marginLeft:8}}>· indexiert: 2024 = 100</span>
      </div>
      <div className="v-chart-note">Quelle: UN World Population Prospects 2024.</div>
    </div>
  );
};

const HeroRisks = () => (
  <div className="v-chart-section">
    <div className="v-chart-head">
      <div className="v-chart-title">Fiskalische Risiken</div>
      <div className="v-chart-ticker">Deutschland</div>
    </div>
    <div className="v-chart-label">Regulatorisches &amp; fiskalisches Umfeld</div>
    <div className="v-risk-list">
      {[
        ['Mietregulierung','Mietpreisbremse, Mietendeckel, Kündigungsschutz'],
        ['Sanierung','GEG, Heizungsgesetz, Sanierungspflichten'],
        ['Steuer & Offenlegung','Steuererhöhungen, Debatten um Lastenausgleich und Vermögensabgaben'],
        ['Eurozone-Risiken','Gemeinsame Haftung, TARGET2-Salden, Schuldenstände im Euroraum'],
      ].map(([l,b],i)=>(
        <div key={i} className="v-risk-item">
          <div className="v-risk-label">{l}</div>
          <div className="v-risk-body">{b}</div>
        </div>
      ))}
    </div>
  </div>
);

Object.assign(window, { Hero: Hero, Hero1: Hero, HeroChart, HeroPopChart, HeroRisks });