/* DealsHighlight — Editorial deals showcase. 1 großes + 2 kleinere Cards. */
const DEALS_HIGHLIGHT_CSS = `
.dh-section { background: var(--v-ink); color: var(--v-paper); padding: 120px 80px 140px; }
.dh-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; margin-bottom: 64px; }
.dh-head-left { max-width: 820px; display: flex; flex-direction: column; align-items: center; }
.dh-eyebrow { font-family: var(--font-mono); font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: rgba(247,243,236,0.7); display: inline-flex; align-items: center; gap: 14px; margin-bottom: 28px; font-weight: 400; }
.dh-eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--v-brass); }
.dh-title { font-family: var(--font-serif); font-weight: 300; font-size: 62px; line-height: 1.05; letter-spacing: -0.02em; color: var(--v-paper); margin: 0; text-align: center; }
.dh-title em { font-style: italic; font-weight: 400; color: var(--v-brass-300); }
.dh-cta { display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; border: 1px solid rgba(247,243,236,0.35); background: transparent; color: var(--v-paper); font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 400; cursor: pointer; transition: all 200ms ease; text-decoration: none; }
.dh-cta:hover { background: rgba(247,243,236,0.08); border-color: var(--v-paper); }
.dh-cta .arrow { transition: transform 200ms ease; }
.dh-cta:hover .arrow { transform: translateX(4px); }

.dh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dh-card { display: flex; flex-direction: column; cursor: pointer; transition: transform 280ms ease; text-decoration: none; color: inherit; height: 100%; }
.dh-card:hover { transform: translateY(-4px); }
.dh-card-image { position: relative; overflow: hidden; height: 460px; background: rgba(247,243,236,0.05); margin-bottom: 28px; }
.dh-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.dh-card:hover .dh-card-image img { transform: scale(1.04); }
.dh-card-status { position: absolute; top: 20px; left: 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; padding: 7px 12px; background: rgba(20,18,16,0.78); color: var(--v-paper); backdrop-filter: blur(8px); display: inline-flex; align-items: center; gap: 8px; }
.dh-card-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--v-brass-300); }
.dh-card-status.is-sold::before { background: rgba(247,243,236,0.45); }
.dh-card-status.is-reserved::before { background: var(--v-brass); }

.dh-card-yield { position: absolute; top: 16px; right: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 14px; background: rgba(20,18,16,0.78); color: var(--v-brass-300); backdrop-filter: blur(10px); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.dh-card-yield::before { content: ''; width: 6px; height: 6px; background: var(--v-brass-300); display: inline-block; }

.dh-card-meta-top { font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: rgba(247,243,236,0.65); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.dh-card-meta-top .sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(247,243,236,0.45); display: inline-block; }
.dh-card-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 0 18px; }
/* Stack the Kaufpreis/EK box and the Cashflow box vertically at all
   widths. The 2-col side-by-side layout left each box too narrow for
   the longest label "CASHFLOW / MONAT" + value on one line, so the
   value bled past the right edge of the box (and at narrow widths,
   past the right edge of the card itself). Vertical stack gives the
   labels the full card width and keeps the brass-bordered Cashflow
   box visually distinct. */
.dh-card-stats { display: grid; grid-template-columns: 1fr; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(247,243,236,0.18); margin-top: auto; min-width: 0; }
.dh-stat-box { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: rgba(247,243,236,0.04); border: 1px solid rgba(247,243,236,0.10); min-width: 0; }
.dh-stat-box.is-cf { background: rgba(201, 166, 107, 0.10); border-color: rgba(201, 166, 107, 0.4); display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.dh-stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dh-stat-row + .dh-stat-row { padding-top: 10px; border-top: 1px solid rgba(247,243,236,0.10); }
.dh-stat-box.is-cf .dh-stat-row + .dh-stat-row { padding-top: 0; border-top: none; }
.dh-stat-box.is-cf .dh-stat-row.dh-stat-row-sub { padding: 0 0 10px; border-bottom: 1px solid rgba(201, 166, 107, 0.22); margin-bottom: 6px; }
.dh-stat-box.is-cf .dh-stat-row.dh-stat-row-sub .dh-stat-value { font-size: 22px; color: var(--v-paper); text-align: right; }
.dh-stat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(247,243,236,0.6); white-space: nowrap; }
.dh-stat-box.is-cf .dh-stat-label { color: var(--v-brass-300); }
.dh-stat-value { font-family: var(--font-serif); font-size: 22px; font-weight: 400; color: var(--v-paper); letter-spacing: -0.01em; line-height: 1; text-align: right; white-space: nowrap; }
.dh-stat-box.is-cf .dh-stat-value { color: var(--v-brass); font-size: 22px; }
.dh-stat-value .unit { font-style: normal; font-size: 0.62em; font-weight: 400; color: rgba(247,243,236,0.55); letter-spacing: 0; margin-left: 4px; font-family: var(--font-mono); }
.dh-stat-box.is-cf .dh-stat-value .unit { color: rgba(201, 166, 107, 0.6); }

@media (max-width: 1200px) {
  .dh-section { padding: 96px 48px 110px; }
  .dh-title { font-size: 48px; }
  .dh-card-image { height: 360px; }
  .dh-card-title { font-size: 22px; }
  .dh-stat-value { font-size: 19px; }
  .dh-stat-box.is-cf .dh-stat-value { font-size: 19px; }
  .dh-stat-label { font-size: 10.5px; }
}

/* Medium screens: tighten gaps + image height. Stat boxes are already
   stacked vertically at all widths (see .dh-card-stats above). */
@media (max-width: 1100px) and (min-width: 901px) {
  .dh-grid { gap: 20px; }
  .dh-card-image { height: 280px; }
}

@media (max-width: 900px) {
  .dh-section { padding: 72px 28px 88px; }
  .dh-head { margin-bottom: 44px; }
  .dh-title { font-size: 38px; }
  .dh-grid { grid-template-columns: 1fr; gap: 32px; }
  .dh-card-image { height: 320px; }
}

@media (max-width: 560px) {
  .dh-section { padding: 56px 22px 64px; }
  .dh-title { font-size: 30px; }
  .dh-card-stats { gap: 12px; }
  .dh-stat-box { padding: 14px 14px; }
  .dh-cta { width: 100%; justify-content: center; }
}
`;

const DEALS_HIGHLIGHT_ITEMS = [
  {
    img: './house-1.webp?v=2',
    status: 'verkauft', statusLabel: 'Abgeschlossen',
    metaTop: ['Cleveland · Ohio'],
    title: 'Triplex in Cleveland Heights',
    kaufpreis: '205.000 $', ek: '106.840 $',
    jahresNetto: '60.840 $',
    cashflowMo: '1.824 $',
    coc: '20,58 %',
    featured: true,
  },
  {
    img: './house-2.webp',
    status: 'verkauft', statusLabel: 'Abgeschlossen',
    metaTop: ['Cleveland · Ohio'],
    title: 'Duplex in University Circle',
    kaufpreis: '110.000 $', ek: '70.123 $',
    jahresNetto: '44.880 $',
    cashflowMo: '1.441 $',
    coc: '23,98 %',
  },
  {
    img: './house-3.webp',
    status: 'verkauft', statusLabel: 'Abgeschlossen',
    metaTop: ['Cleveland · Ohio'],
    title: 'Triplex in Mount Pleasant',
    kaufpreis: '155.000 $', ek: '43.800 $',
    jahresNetto: '43.800 $',
    cashflowMo: '1.671 $',
    coc: '23,93 %',
  },
];

const DealsHighlight = () => {
  const statusClass = (s) => s === 'verkauft' ? 'is-sold' : s === 'reserviert' ? 'is-reserved' : '';
  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: DEALS_HIGHLIGHT_CSS }} />
      <section className="dh-section" id="deals">
        <div className="dh-head">
          <div className="dh-head-left">
            <div className="dh-eyebrow">Deals</div>
            <h2 className="dh-title">Deals unserer <em>Investoren</em>.</h2>
          </div>
          <a className="dh-cta" href="/deals">Alle Deals ansehen <span className="arrow">→</span></a>
        </div>
        <div className="dh-grid">
          {DEALS_HIGHLIGHT_ITEMS.map((d, i) => (
            <a key={i} className={`dh-card ${d.featured ? 'is-featured' : ''}`} href="/deals">
              <div className="dh-card-image">
                <img src={d.img} alt={d.title}/>
                {d.coc && <div className="dh-card-yield">{d.coc} EK-Rendite</div>}
              </div>
              <div className="dh-card-meta-top">
                {d.metaTop.map((m, j) => (
                  <React.Fragment key={j}>
                    <span>{m}</span>
                    {j < d.metaTop.length - 1 && <span className="sep"/>}
                  </React.Fragment>
                ))}
              </div>
              <h3 className="dh-card-title">{d.title}</h3>
              <div className="dh-card-stats">
                <div className="dh-stat-box">
                  <div className="dh-stat-row">
                    <span className="dh-stat-label">Kaufpreis</span>
                    <span className="dh-stat-value">{d.kaufpreis}</span>
                  </div>
                  <div className="dh-stat-row">
                    <span className="dh-stat-label">Eigenkapital</span>
                    <span className="dh-stat-value">{d.ek}</span>
                  </div>
                </div>
                <div className="dh-stat-box is-cf">
                  {d.jahresNetto && (
                    <div className="dh-stat-row dh-stat-row-sub">
                      <span className="dh-stat-label">Jahresmiete</span>
                      <span className="dh-stat-value">{d.jahresNetto}</span>
                    </div>
                  )}
                  <div className="dh-stat-row">
                    <span className="dh-stat-label">Cashflow / Monat</span>
                    <span className="dh-stat-value">{d.cashflowMo}</span>
                  </div>
                </div>
              </div>
            </a>
          ))}
        </div>
      </section>
    </>
  );
};

window.DealsHighlight = DealsHighlight;