// CaseStudies — Kompakte 3-Spalten-Übersicht (nutzt v-markets-strip Layout)
const CASES = [
  {
    num: '01',
    img: './house-1.webp?v=2',
    imgAlt: 'Cleveland Heights · Beispielbild',
    city: 'Cleveland Heights',
    state: 'Ohio',
    strategy: 'Turnkey Buy-and-Hold',
    price: '205.000 $',
    equity: '106.000 $',
    rent: '60.840 $',
    cfYr: '1.824 $',
    coc: '20,58 %',
  },
  {
    num: '02',
    featured: true,
    tag: 'Featured',
    img: './house-2.webp?v=2',
    imgAlt: 'University Circle · Beispielbild',
    city: 'University Circle',
    state: 'Ohio',
    strategy: 'Light Value-Add + Hold',
    price: '110.000 $',
    equity: '70.123 $',
    rent: '44.880 $',
    cfYr: '1.441 $',
    coc: '23,98 %',
  },
  {
    num: '03',
    img: './house-3.webp?v=2',
    imgAlt: 'Mount Pleasant · Beispielbild',
    city: 'Mount Pleasant',
    state: 'Ohio',
    strategy: 'Stabilisierte Multifamily',
    price: '155.000 $',
    equity: '43.800 $',
    rent: '43.800 $',
    cfYr: '1.671 $',
    coc: '23,93 %',
  },
];

const CaseCard = ({ c }) => (
  <div className={`v-market ${c.featured ? 'featured' : ''}`}>
    {c.img && (
      <div className="v-market-img">
        <img src={c.img} alt={c.imgAlt}/>
        <span className="v-market-img-num">Case {c.num}</span>
      </div>
    )}
    {c.tag && <div className="v-market-tag">{c.tag}</div>}
    <div className="v-market-name">{c.city}</div>
    <div className="v-market-state">{c.state} · Case {c.num}</div>
    <div className="v-market-row"><span className="v-market-k">Strategie</span><span className="v-market-v" style={{fontSize:12,fontStyle:'italic'}}>{c.strategy}</span></div>
    <div className="v-market-row"><span className="v-market-k">Kaufpreis</span><span className="v-market-v">{c.price}</span></div>
    <div className="v-market-row"><span className="v-market-k">Eigenkapital</span><span className="v-market-v">{c.equity}</span></div>
    <div className="v-market-row"><span className="v-market-k">Jahresnettokaltmiete</span><span className="v-market-v">{c.rent}</span></div>
    <div className="v-market-headline">
      <div className="v-market-headline-item">
        <span className="v-market-headline-k">Cash-on-Cash</span>
        <span className="v-market-headline-v">{c.coc}</span>
      </div>
      <div className="v-market-headline-item">
        <span className="v-market-headline-k">Netto-CF p.M.</span>
        <span className="v-market-headline-v">{c.cfYr}</span>
      </div>
    </div>
  </div>
);

const CaseStudies = () => (
  <section className="v-section on-dark" id="fallstudien" data-screen-label="06 Fallstudien">
    <SectionHeader
      eyebrow="Fallstudien · Reale Transaktionen"
      headline={`Drei Deals,<br/>drei <em>Szenarien</em>`}
      sub="Indikative Zahlen aus begleiteten Transaktionen im Primärmarkt Cleveland. EK-Rendite (Cash-on-Cash) berechnet auf eingesetztes Eigenkapital, vor Steuern, nach Tilgung und laufenden Kosten."
    />
    <div className="v-markets-strip">
      {CASES.map((c,i)=><CaseCard key={i} c={c}/>)}
    </div>
    <Disclaimer dark strong="Wichtiger Hinweis:">
      Alle Zahlen basieren auf abgeschlossenen, anonymisierten Transaktionen im Zeitraum 2024/2025. Indikativ, keine Anlageempfehlung und keine Prognose zukünftiger Ergebnisse. Laufende Kosten enthalten Property Tax, Insurance, Property Management (10 %), Maintenance/CapEx (10 %) und Vakanz-Reserve (10 %).
    </Disclaimer>
  </section>
);

Object.assign(window, { CaseStudies });