// Maison 57 — Wohnungen: erst das Gefühl, dann das Werkzeug.
// Kopf, Wohngefühl, Kategorie-Highlights (aus der Flächenaufstellung), Material,
// Flexizone/Freiflächen, Typen-Galerie, Finder (Liste + Gebäudeschnitt), Vormerkung.
const {
  FilterToggle, ApartmentRow, Button: WBtn, TextLink: WTextLink,
  Reveal: WReveal, WordReveal: WWordReveal, LineMask: WLineMask, RevealImage: WRevealImage,
} = window.Maison57DesignSystem_40d525;
const WIMG = '../../assets/renderings/';
const WStore = window.M57Store;
const planHref = (plan) => plan ? '../../assets/plaene/' + String(plan).padStart(2, '0') + '.pdf' : null;
const WSECTION = 'clamp(4rem, 8vw, 6.5rem)';

/* Kategorie-Highlights — je Wohnungskategorie die Kennzahlen aus der
   Flächenaufstellung, vor Ausstattung und Highlights. Deep-Link in den Finder. */
function KategorieHighlights({ onFinder }) {
  const cats = [
    { img: 'family-garden-bench.jpg', name: 'Gartenwohnungen', geschoss: 'Erdgeschoss', facts: [['Einheiten', '10'], ['Zimmer', '2 bis 3'], ['Wohnfläche', 'ab 53,3 m²'], ['Garten', 'bis 217,5 m²']], filter: { frei: ['Garten'] } },
    { img: 'garden-lounge-day.jpg', name: 'Stadtwohnungen', geschoss: '1. und 2. Obergeschoss', facts: [['Einheiten', '16'], ['Zimmer', '2 bis 3'], ['Wohnfläche', 'ab 54,2 m²'], ['Balkon', 'bis 26,6 m²']], filter: { frei: ['Balkon'] } },
    { img: 'rooftop-terrace-night.jpg', name: 'Dachgeschoss', geschoss: 'Dachgeschoss', facts: [['Einheiten', '5'], ['Zimmer', '3 bis 4'], ['Wohnfläche', 'ab 50,1 m²'], ['Dachterrasse', 'bis 68,7 m²']], filter: { geschoss: 'DG' } },
  ];
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--page-inset-lg)' }}>
      <h2 style={{ overflow: 'hidden', margin: '0 0 clamp(2rem, 3.5vw, 3rem)', paddingBottom: '0.12em' }}>
        <WLineMask innerStyle={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.75rem, 3vw, 2.75rem)', letterSpacing: '-0.015em', color: 'var(--umbra)' }}>Drei Arten zu wohnen</WLineMask>
      </h2>
      <div className="m57-teaser" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(1.5rem, 3vw, 2.5rem)' }}>
        {cats.map((c, i) => (
          <WReveal key={c.name} delay={i * 120}>
            <div>
              <WRevealImage src={WIMG + c.img} alt={c.name} ratio="4 / 3" delay={i * 120} />
              <div style={{ marginTop: 'var(--space-4)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: '1.4rem', color: 'var(--umbra)' }}>{c.name}</div>
                <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)', marginTop: '0.15rem' }}>{c.geschoss}</div>
                <div style={{ borderTop: '1px solid var(--sandstein)', marginTop: 'var(--space-4)' }}>
                  {c.facts.map((f) => (
                    <div key={f[0]} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: 'var(--space-2) 0', borderBottom: '1px solid var(--sandstein-40)' }}>
                      <span style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'var(--umbra-60)' }}>{f[0]}</span>
                      <span className="tabular" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'var(--umbra)', fontVariantNumeric: 'tabular-nums' }}>{f[1]}</span>
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 'var(--space-4)' }}>
                  <WTextLink onClick={() => onFinder(c.filter)}>Im Finder ansehen</WTextLink>
                </div>
              </div>
            </div>
          </WReveal>
        ))}
      </div>
    </section>
  );
}

function ViewSwitch({ view, setView }) {
  const tabStyle = (active) => ({
    background: 'none', border: 'none', cursor: 'pointer', padding: '0.2rem 0',
    fontFamily: 'var(--font-text)', fontSize: 'var(--text-body)',
    color: active ? 'var(--umbra)' : 'var(--umbra-60)', fontWeight: active ? 500 : 400,
    borderBottom: active ? '2px solid var(--waldgruen)' : '2px solid transparent',
  });
  return (
    <div style={{ display: 'flex', gap: 'var(--space-6)' }}>
      <button style={tabStyle(view === 'liste')} onClick={() => setView('liste')}>Liste</button>
      <button style={tabStyle(view === 'gebaeude')} onClick={() => setView('gebaeude')}>Gebäude</button>
    </div>
  );
}

function FilterBar({ f, set }) {
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 55, background: 'var(--surface-card)', borderTop: '1px solid var(--sandstein)', borderBottom: '1px solid var(--sandstein)' }}>
      <div className="m57-filterbar" style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: 'var(--space-5) var(--page-inset-lg)', display: 'flex', gap: 'var(--space-10)', flexWrap: 'wrap' }}>
        <FilterToggle label="Zimmer" options={['2', '3', '4']} value={f.zimmer} onChange={(v) => set('zimmer', v)} />
        <FilterToggle label="Haus" options={[{ value: '5', label: '5' }, { value: '7', label: '7' }]} value={f.haus} onChange={(v) => set('haus', v)} />
        <FilterToggle label="Geschoss" options={['EG', '1.OG', '2.OG', 'DG']} value={f.geschoss} onChange={(v) => set('geschoss', v)} />
        <FilterToggle label="Freifläche" multiple options={['Garten', 'Balkon', 'Dachterrasse']} value={f.frei} onChange={(v) => set('frei', v)} />
      </div>
    </div>
  );
}

function ListHead() {
  return (
    <div className="m57-listhead" style={{ display: 'grid', gridTemplateColumns: '5rem 3rem 5rem 4rem 1fr 1.4fr 6rem 1.5rem', gap: '1rem', padding: '0 0.5rem var(--space-3)', borderBottom: '1px solid var(--sandstein)', fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)' }}>
      <span>Top</span><span>Haus</span><span>Geschoss</span><span>Zimmer</span><span style={{ textAlign: 'right' }}>Wohnfläche</span><span>Freifläche</span><span>Status</span><span></span>
    </div>
  );
}

/* Geschoss-Schnitt: beide Häuser gestapelt, Zellen flächenproportional zur
   Wohnfläche, Status-Färbung, Hover-Sync mit der Geschossliste, Klick öffnet Detail. */
function Schnitt({ units, active, onHover, onOpen }) {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  const floors = ['DG', '2.OG', '1.OG', 'EG'];
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setVis(true); return; }
    const el = ref.current; if (!el) return;
    let done = false;
    const show = () => { if (!done) { done = true; setVis(true); io.disconnect(); } };
    const io = new IntersectionObserver((es) => { if (es[0].isIntersecting) show(); }, { threshold: 0.25 });
    io.observe(el);
    const t = setTimeout(() => { const r = el.getBoundingClientRect(); const vh = window.innerHeight || 800; if (r.top < vh + 80 && r.bottom > -80) show(); }, 1000);
    return () => { clearTimeout(t); io.disconnect(); };
  }, []);
  const cell = (u, isHot) => ({
    flex: (u.flaecheNum || 60), minWidth: 0, textAlign: 'center', padding: '0.85rem 0.25rem',
    fontSize: 'var(--text-micro)', fontVariantNumeric: 'tabular-nums', cursor: 'pointer',
    borderRight: '1px solid ' + (isHot ? 'rgba(251,249,244,0.28)' : 'var(--sandstein-40)'),
    background: isHot ? 'var(--waldgruen)' : 'transparent',
    color: isHot ? 'var(--warmweiss)' : (u.status === 'verkauft' ? 'var(--sandstein)' : u.status === 'reserviert' ? 'var(--umbra-60)' : 'var(--umbra)'),
    transition: 'background-color 200ms var(--ease-reveal), color 200ms ease',
  });
  return (
    <div ref={ref}>
      <div className="m57-building" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2rem, 5vw, 4rem)' }}>
        {[5, 7].map((h) => (
          <div key={h}>
            <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)', marginBottom: 'var(--space-3)' }}>Schnitt Haus {h}, Geschosse gestapelt</div>
            <div style={{ borderBottom: '3px solid var(--umbra)' }}>
              {floors.map((fl, fi) => {
                const onFloor = units.filter((u) => u.haus === h && u.geschoss === fl);
                return (
                  <div key={fl} style={{ display: 'flex', border: '1px solid var(--sandstein)', borderBottom: 'none', transform: vis ? 'scaleY(1)' : 'scaleY(0)', transformOrigin: 'bottom', opacity: vis ? 1 : 0, transition: `transform 500ms var(--ease-reveal) ${fi * 90}ms, opacity 500ms ease ${fi * 90}ms` }}>
                    <div style={{ width: '3rem', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-text)', fontSize: 'var(--text-micro)', padding: '0.6rem 0', color: 'var(--umbra-60)', borderRight: '1px solid var(--sandstein)', background: 'var(--surface-card)' }}>{fl}</div>
                    <div style={{ flex: 1, display: 'flex' }}>
                      {onFloor.length === 0
                        ? <div style={{ flex: 1, padding: '0.85rem 0', textAlign: 'center', color: 'var(--sandstein)', fontSize: 'var(--text-micro)' }}>—</div>
                        : onFloor.map((u) => {
                          const isHot = active && active.id === u.id;
                          return (
                            <div key={u.id} className="tabular" onMouseEnter={() => onHover(u)} onMouseLeave={() => onHover(null)} onClick={() => onOpen && onOpen(u)} title={'Top ' + u.top + ' · ' + u.flaeche + ' m²'} style={cell(u, isHot)}>{u.top}</div>
                          );
                        })}
                    </div>
                  </div>
                );
              })}
              <div style={{ display: 'flex', background: 'var(--umbra)', color: 'var(--warmweiss)' }}>
                <div style={{ width: '3rem', flex: 'none' }}></div>
                <div style={{ flex: 1, padding: '0.3rem 0', textAlign: 'center', fontSize: 'var(--text-micro)', letterSpacing: '0.04em' }}>Tiefgarage</div>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 'var(--space-6)', flexWrap: 'wrap', marginTop: 'var(--space-4)', fontFamily: 'var(--font-text)', fontSize: 'var(--text-micro)', color: 'var(--umbra-60)' }}>
        <span>Fläche der Zellen maßstäblich zur Wohnfläche</span>
        <span style={{ color: 'var(--umbra)' }}>■ verfügbar</span>
        <span style={{ color: 'var(--umbra-60)' }}>■ reserviert</span>
        <span style={{ color: 'var(--sandstein)' }}>■ verkauft</span>
      </div>
    </div>
  );
}

function BuildingView({ units, onOpen }) {
  const houses = [5, 7];
  const floors = ['DG', '2.OG', '1.OG', 'EG'];
  const [hot, setHot] = React.useState(null);
  return (
    <div>
      <div className="m57-building" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2rem, 5vw, 4rem)', paddingTop: 'clamp(1rem, 2vw, 1.5rem)' }}>
      {houses.map((h) => (
        <div key={h}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--text-title)', color: 'var(--umbra)', margin: '0 0 var(--space-5)' }}>Haus {h}</h3>
          <div style={{ border: '1px solid var(--sandstein)' }}>
            {floors.map((fl) => {
              const onFloor = units.filter((u) => u.haus === h && u.geschoss === fl);
              return (
                <div key={fl} style={{ borderBottom: fl === 'EG' ? 'none' : '1px solid var(--sandstein)', padding: 'var(--space-4) var(--space-5)', display: 'flex', alignItems: 'center', gap: 'var(--space-5)' }}>
                  <span style={{ width: '3.5rem', flex: 'none', fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)' }}>{fl}</span>
                  <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
                    {onFloor.length === 0 ? <span style={{ color: 'var(--sandstein)', fontSize: 'var(--text-small)' }}>keine</span> : onFloor.map((u) => (
                      <button key={u.top} onClick={() => onOpen(u)} onMouseEnter={() => setHot(u)} onMouseLeave={() => setHot(null)} className="tabular"
                        style={{ cursor: 'pointer', fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', fontVariantNumeric: 'tabular-nums',
                          padding: '0.35rem 0.6rem', border: '1px solid ' + (hot && hot.id === u.id ? 'var(--waldgruen)' : 'var(--sandstein)'),
                          background: hot && hot.id === u.id ? 'var(--waldgruen)' : (u.status === 'verkauft' ? 'transparent' : 'var(--surface-card)'),
                          color: hot && hot.id === u.id ? 'var(--warmweiss)' : (u.status === 'verkauft' ? 'var(--sandstein)' : 'var(--umbra)'),
                          textDecoration: u.status === 'verkauft' ? 'line-through' : 'none', transition: 'background-color 180ms ease, border-color 180ms ease, color 180ms ease' }}>
                        {u.top} · {u.flaeche} m²
                      </button>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      ))}
      </div>
    </div>
  );
}

function EmptyState({ onReset }) {
  return (
    <div style={{ padding: 'clamp(4rem, 8vw, 7rem) 0', textAlign: 'center' }}>
      <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-body)', color: 'var(--umbra-90)', margin: '0 0 var(--space-4)' }}>Keine Wohnung entspricht dieser Auswahl.</p>
      <WTextLink onClick={onReset} arrow={false}>Filter zurücksetzen</WTextLink>
    </div>
  );
}

function Finder({ initialFilter, onOpenDetail }) {
  const [view, setView] = React.useState('liste');
  const [, force] = React.useReducer((x) => x + 1, 0);
  React.useEffect(() => WStore.subscribe(force), []);
  const [f, setF] = React.useState({ zimmer: null, haus: null, geschoss: null, frei: [], ...(initialFilter || {}) });
  React.useEffect(() => { if (initialFilter) setF((s) => ({ zimmer: null, haus: null, geschoss: null, frei: [], ...initialFilter })); }, [initialFilter]);
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
  const reset = () => setF({ zimmer: null, haus: null, geschoss: null, frei: [] });
  const all = WStore.units();
  const units = all.filter((u) => {
    if (f.zimmer && String(u.zimmer) !== f.zimmer) return false;
    if (f.haus && String(u.haus) !== f.haus) return false;
    if (f.geschoss && u.geschoss !== f.geschoss) return false;
    if (f.frei.length && !f.frei.includes(u.freiflaeche)) return false;
    return true;
  });
  const verfuegbar = all.filter((u) => u.status === 'verfuegbar').length;
  const listKey = JSON.stringify(f) + view;
  return (
    <div id="finder">
      <style>{`
        @keyframes m57rowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
        @media (prefers-reduced-motion: reduce) { .m57-rowin { animation: none !important; } }
      `}</style>
      <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--page-inset-lg) clamp(2rem, 4vw, 3rem)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 'var(--space-8)', flexWrap: 'wrap' }}>
        <WReveal>
          <div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.75rem, 3vw, 2.75rem)', letterSpacing: '-0.015em', color: 'var(--umbra)', margin: 0 }}>Der Wohnungsfinder</h2>
            <p className="tabular" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)', margin: 'var(--space-3) 0 0', fontVariantNumeric: 'tabular-nums' }}>Noch {verfuegbar} von 31 Wohnungen verfügbar, {units.length} in Ihrer Auswahl.</p>
          </div>
        </WReveal>
        <WReveal delay={120}><ViewSwitch view={view} setView={setView} /></WReveal>
      </div>
      <FilterBar f={f} set={set} />
      <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: 'clamp(2.5rem, 5vw, 4rem) var(--page-inset-lg) 0' }}>
        {units.length === 0 ? (
          <EmptyState onReset={reset} />
        ) : view === 'liste' ? (
          <div key={listKey}>
            <ListHead />
            {units.map((u, i) => (
              <div key={u.id} className="m57-rowin" style={{ animation: `m57rowIn 350ms var(--ease-reveal) both`, animationDelay: `${i * 40}ms` }}>
                <ApartmentRow unit={u} onClick={() => onOpenDetail(u)} />
              </div>
            ))}
          </div>
        ) : (
          <div key={listKey} className="m57-rowin" style={{ animation: `m57rowIn 350ms var(--ease-reveal) both` }}>
            <BuildingView units={units} onOpen={onOpenDetail} />
          </div>
        )}
      </div>
    </div>
  );
}

function WohnungenScreen({ onOpenDetail, onVormerkung, initialFinder }) {
  const [finderFilter, setFinderFilter] = React.useState(initialFinder || null);
  const toFinder = (filter) => {
    setFinderFilter(filter || {});
    const el = document.getElementById('finder');
    const sc = window.__m57Scroller;
    if (el && sc) sc.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
  };
  React.useEffect(() => {
    if (initialFinder) { const t = setTimeout(() => toFinder(initialFinder), 350); return () => clearTimeout(t); }
  }, []);
  return (
    <div>
      <WohnungenKopf />
      <FullBleed img={WIMG + 'garden-lounge-dusk.jpg'} alt="Abendlicht zwischen den Häusern" height="66vh">
        <p style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(1.5rem, 2.6vw, 2.25rem)', color: 'var(--warmweiss)', margin: 0 }}>
          <WWordReveal text="Räume, die dem *Licht* folgen." color="var(--warmweiss)" dimColor="rgba(251,249,244,0.35)" />
        </p>
      </FullBleed>
      <div style={{ paddingTop: WSECTION }}></div>
      <WohnungenTypen onFinder={toFinder} />
      <div style={{ paddingTop: WSECTION }}></div>
      <MaterialCollage />
      <div style={{ paddingTop: WSECTION }}></div>
      {window.Ausstattung ? <window.Ausstattung /> : null}
      <div style={{ paddingTop: WSECTION }}></div>
      <BesonderheitenDuo onFinder={toFinder} />
      <div style={{ paddingTop: WSECTION }}></div>
      <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--page-inset-lg)' }}>
        <WBtn variant="filled" href="#vormerkung">Vormerkung anfragen</WBtn>
      </section>
      <div style={{ paddingTop: WSECTION }}></div>
      <Finder initialFilter={finderFilter} onOpenDetail={onOpenDetail} />
      <div style={{ paddingTop: WSECTION }}></div>
      {window.FAQ ? <window.FAQ /> : null}
      <div style={{ paddingTop: WSECTION }}></div>
      <VormerkungSection />
    </div>
  );
}

function DetailOverlay({ unit, onClose, onAnfrage }) {
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    if (unit) {
      const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      if (reduce) { setShown(true); return; }
      const t = setTimeout(() => setShown(true), 30);
      return () => clearTimeout(t);
    }
    setShown(false);
  }, [unit]);
  const close = () => { setShown(false); setTimeout(onClose, 320); };
  if (!unit) return null;
  const href = planHref(unit.plan);
  const preis = unit.verkaufspreis ? Number(unit.verkaufspreis).toLocaleString('de-AT') + ' €' : 'auf Anfrage';
  const facts = [
    ['Wohnfläche', `ca. ${unit.flaeche} m²`],
    ['Zimmer', `${unit.zimmer}`],
    ['Freifläche', unit.freiflaecheM2 || unit.freiflaeche],
    ['Geschoss', unit.geschoss],
    ['Haus', `Haus ${unit.haus}`],
    ['Stellplatz', 'optional, Tiefgarage'],
    ['Status', window.M57_STATUS_LABEL[unit.status]],
    ['Preis', preis],
  ];
  return (
    <div onClick={close} style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(35,42,32,0.45)', display: 'flex', justifyContent: 'flex-end', opacity: shown ? 1 : 0, transition: 'opacity 320ms var(--ease-reveal)' }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: 'min(760px, 100%)', height: '100%', overflowY: 'auto', background: 'var(--surface-page)', transform: shown ? 'none' : 'translateX(40px)', opacity: shown ? 1 : 0, transition: 'transform 420ms var(--ease-reveal), opacity 320ms var(--ease-reveal)' }}>
        <div style={{ position: 'sticky', top: 0, zIndex: 2, background: 'var(--surface-page)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: 'var(--space-6) var(--space-8)', borderBottom: '1px solid var(--sandstein)' }}>
          <span className="tabular" style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-title)', color: 'var(--umbra)' }}>Haus {unit.haus}, Top {unit.top}</span>
          <button onClick={close} aria-label="Schließen" style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '1.4rem', color: 'var(--umbra-60)', lineHeight: 1 }}>✕</button>
        </div>
        <div style={{ padding: 'var(--space-8)' }}>
          {href ? (
            <div style={{ marginBottom: 'var(--space-8)' }}>
              <window.PlanView src={href} label={'Top ' + unit.top} />
            </div>
          ) : (
            <div style={{ background: 'var(--surface-card)', border: '1px solid var(--sandstein)', aspectRatio: '4 / 3', display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', color: 'var(--umbra-60)', fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', marginBottom: 'var(--space-8)', padding: 'var(--space-6)' }}>Grundriss Top {unit.top}</div>
          )}
          <div style={{ marginBottom: 'var(--space-6)' }}>
            {facts.map((row) => (
              <div key={row[0]} style={{ display: 'flex', justifyContent: 'space-between', padding: 'var(--space-3) 0', borderBottom: '1px solid var(--sandstein)' }}>
                <span style={{ color: 'var(--umbra-60)', fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)' }}>{row[0]}</span>
                <span className="tabular" style={{ color: 'var(--umbra)', fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', fontVariantNumeric: 'tabular-nums' }}>{row[1]}</span>
              </div>
            ))}
          </div>
          <p style={{ color: 'var(--umbra-90)', fontSize: 'var(--text-small)', lineHeight: 1.7, margin: '0 0 var(--space-6)' }}>Eichenparkett von Weitzer, Kühlung über Bauteilaktivierung, KNX-Smart-Home.</p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-8)', flexWrap: 'wrap' }}>
            <WBtn variant="filled" onClick={() => onAnfrage(unit)}>Diese Wohnung anfragen</WBtn>
            {href && <a href={href} target="_blank" rel="noopener" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'var(--waldgruen)', textDecoration: 'underline', textUnderlineOffset: '0.2em' }}>Verkaufsplan als PDF ↗</a>}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WohnungenScreen, DetailOverlay });