// Maison 57 — Startseite v2: Linien-Rückgrat, asymmetrisches Grid, Full-bleed-Rhythmus.
// Bild, Grid, Bild, Grid, Grün, Grid, Bild, Formular.
const {
  TextLink, SectionWord, GreenBlock, GreenBlockItem,
  Reveal, RevealImage, LineMask, CountUp, WordReveal,
} = window.Maison57DesignSystem_40d525;

const IMG = '../../assets/renderings/';
const SECTION = 'clamp(4rem, 8vw, 6.5rem)';

/* 1 · Hero — full height, headline bottom-left in three offset lines,
   image zooms 1.06 → 1.0 and scrolls at 0.85x (subtle parallax). */
function HomeHero() {
  const [on, setOn] = React.useState(false);
  const imgRef = React.useRef(null);
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setOn(true); return; }
    const t = setTimeout(() => setOn(true), 60);
    const off = window.onPageScroll ? window.onPageScroll((e) => {
      if (imgRef.current) imgRef.current.style.translate = `0 ${(e.target.scrollTop * 0.15).toFixed(1)}px`;
    }) : null;
    return () => { clearTimeout(t); if (off) off(); };
  }, []);
  const H = 'clamp(3rem, 6.5vw, 6rem)';
  return (
    <section id="top" style={{ position: 'relative', minHeight: '100dvh', display: 'flex', overflow: 'hidden', marginTop: '-88px' }}>
      <img ref={imgRef} src={IMG + 'aerial-twin-buildings.jpg'} alt="Maison 57, Zwillingsbau am grünen Hang mit Blick über Wien"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '112%', objectFit: 'cover',
          transform: on ? 'scale(1)' : 'scale(1.06)', transition: 'transform 1200ms var(--ease-reveal)', willChange: 'transform' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(28,36,28,0.28) 0%, rgba(28,36,28,0) 34%, rgba(28,36,28,0.58) 100%)' }}></div>
      <div className="m57-loc" style={{ position: 'relative', marginTop: 'auto', width: '100%', maxWidth: 'var(--content-max)', margin: 'auto auto 0', padding: '0 var(--page-inset-lg) clamp(3.5rem, 7vw, 6rem)', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--space-12)', boxSizing: 'border-box' }}>
        <div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, color: 'var(--warmweiss)', fontSize: H, lineHeight: 1.06, letterSpacing: '-0.015em', margin: '0 0 clamp(1.75rem, 3.5vw, 2.75rem)' }}>
            <LineMask delay={0}>Maison 57,</LineMask>
            <LineMask delay={120} innerStyle={{ marginLeft: '0.9em' }}>wo Wien</LineMask>
            <LineMask delay={240} innerStyle={{ marginLeft: '1.8em' }}>in den Wald übergeht.</LineMask>
          </h1>
        </div>
        <Reveal delay={700} y={12} style={{ flex: 'none', paddingBottom: '0.35rem' }}>
          <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', letterSpacing: '0.02em', color: 'rgba(251,249,244,0.8)', margin: 0, textAlign: 'right', lineHeight: 1.7 }}>
            31 Eigentumswohnungen, 1170 Wien.<br />Und Neuwaldegg ums Eck.
          </p>
        </Reveal>
      </div>
      <style>{`
        .m57-heroCta:hover { background: var(--creme) !important; }
        .m57-heroCta-roll { position: relative; overflow: hidden; display: block; line-height: 1.2; }
        .m57-heroCta-roll > span { display: block; transition: transform 450ms var(--ease-reveal); }
        .m57-heroCta-roll > span[aria-hidden] { position: absolute; left: 0; top: 100%; }
        .m57-heroCta:hover .m57-heroCta-roll > span { transform: translateY(-100%); }
        .m57-heroCta-arrow { transition: transform var(--dur-ui) ease; display: inline-block; }
        .m57-heroCta:hover .m57-heroCta-arrow { transform: translateX(4px); }
        @media (prefers-reduced-motion: reduce) { .m57-heroCta-roll > span { transition: none; } .m57-heroCta:hover .m57-heroCta-roll > span { transform: none; } }
      `}</style>
    </section>
  );
}

/* 2 · Editorial statement — sticky, scroll-gescrubbt: die Wörter stehen in
   ganz leichtem Hellgrau und färben sich Wort für Wort nach Umbra, während
   der Leser durch die 240vh hohe Sektion scrollt. Viel Leere davor/danach. */
function EditorialStatement() {
  const outer = React.useRef(null);
  const [p, setP] = React.useState(0);

  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setP(1); return; }
    const sc = window.__m57Scroller;
    if (!sc) { setP(1); return; }
    const onScroll = () => {
      const o = outer.current;
      if (!o) return;
      const vh = window.innerHeight || 800;
      const r = o.getBoundingClientRect();
      const range = r.height - vh;
      setP(Math.min(1, Math.max(0, -r.top / (range || 1))));
    };
    sc.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => sc.removeEventListener('scroll', onScroll);
  }, []);

  const text = 'Maison 57 verbindet die *Ruhe* des Waldrands mit der *Nähe* zur Stadt. Zwei Häuser, ein Hang, und Neuwaldegg ums Eck.';
  const words = text.split(/\s+/);
  const n = words.length;

  return (
    <section ref={outer} style={{ height: '240vh', position: 'relative', margin: `${SECTION} 0` }}>
      <div style={{ position: 'sticky', top: 0, height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 var(--page-inset-lg)' }}>
        <p style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.6rem, 2.9vw, 2.5rem)', lineHeight: 1.42, color: 'var(--umbra)', margin: 0, maxWidth: '30ch', textAlign: 'center' }}>
          {words.map((w, i) => {
            const wp = Math.min(1, Math.max(0, p * (n + 3) - i));
            const italic = w.startsWith('*') && w.endsWith('*');
            const clean = italic ? w.slice(1, -1) : w;
            return (
              <span key={i} style={{
                color: wp > 0.5 ? 'var(--umbra)' : '#DDD9CE',
                transition: 'color 200ms linear',
                fontStyle: italic ? 'italic' : undefined,
              }}>{clean}{i < n - 1 ? ' ' : ''}</span>
            );
          })}
        </p>
      </div>
    </section>
  );
}

/* 3 · Projekt — section word left, two text columns right, one hard image. */
function ProjektGrid() {
  return (
    <section id="projekt" style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: `0 var(--page-inset-lg) ${SECTION}` }}>
      <SectionWord word="Projekt">
        <div className="m57-cols2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(1.5rem, 4vw, 3rem)' }}>
          <Reveal>
            <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', lineHeight: 1.8, color: 'var(--umbra-90)', margin: 0 }}>
              An der Nachreihengasse 5-7 entstehen 31 Eigentumswohnungen in zwei Baukörpern, terrassiert am Hang. Haus 5 und Haus 7 teilen sich einen Garten, eine Tiefgarage und den Blick ins Grüne.
            </p>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', lineHeight: 1.8, color: 'var(--umbra-90)', margin: 0 }}>
              Alle Einheiten haben 2 bis 4 Zimmer und eine eigene Freifläche. Geheizt und gekühlt wird mit Erdwärme, gebaut wird für die nächsten fünfzig Jahre.
            </p>
          </Reveal>
        </div>
        <div style={{ marginTop: 'clamp(2.5rem, 5vw, 4rem)', maxWidth: '66%' }} className="m57-projimg">
          <RevealImage src={IMG + 'garden-lounge-day.jpg'} alt="Gemeinschaftsgarten zwischen den Häusern" ratio="16 / 10" />
          <Reveal delay={220}>
            <div style={{ borderTop: '1px solid var(--sandstein)', marginTop: 'var(--space-4)', paddingTop: 'var(--space-3)', fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)' }}>
              Der Gemeinschaftsgarten zwischen Haus 5 und Haus 7, Rendering.
            </div>
          </Reveal>
        </div>
      </SectionWord>
    </section>
  );
}

/* 5 · Fakten-Band — vier ganze Zahlen, groß, zwischen zwei durchgezogenen
   Hairlines; viel Innen-Padding links und rechts. */
function FaktenBand() {
  const facts = [
    { el: <CountUp value={31} />, l: 'Wohnungen' },
    { el: <CountUp value={4} prefix="2-" />, l: 'Zimmer' },
    { el: <CountUp value={128} prefix="53-" suffix=" m²" />, l: 'Wohnfläche' },
    { el: <CountUp value={2026} />, l: 'Erstbezug' },
  ];
  return (
    <section style={{ borderTop: '1px solid var(--sandstein)', borderBottom: '1px solid var(--sandstein)', padding: 'clamp(10rem, 15vw, 14rem) 0' }}>
      <div className="m57-facts" style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 clamp(3rem, 9vw, 9rem)', display: 'grid', gridTemplateColumns: 'repeat(4, auto)', justifyContent: 'space-between', gap: 'var(--space-8)' }}>
        {facts.map((f, i) => (
          <div key={f.l}>
            <Reveal delay={i * 90}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(2.5rem, 4.2vw, 3.75rem)', lineHeight: 1.05, color: 'var(--umbra)' }}>{f.el}</div>
            </Reveal>
            <Reveal delay={i * 90 + 150}>
              <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)', marginTop: '0.6rem' }}>{f.l}</div>
            </Reveal>
          </div>
        ))}
      </div>
    </section>
  );
}

/* 6 · Substanz — the green block with accordion rows. */
function Substanz() {
  const items = [
    ['Erdwärme statt Gas', 'Tiefensonden versorgen Heizung und Warmwasser, ohne fossile Energie.'],
    ['Kühlung inklusive', 'Bauteilaktivierung temperiert die Wohnungen im Sommer sanft, serienmäßig.'],
    ['Photovoltaik', 'Eigenstrom für die Allgemeinflächen und die Tiefgarage.'],
    ['Eichenparkett von Weitzer', 'Massives Eichenparkett in allen Wohnräumen.'],
    ['KNX-Smart-Home', 'Licht, Beschattung und Temperatur zentral steuerbar.'],
    ['Tiefgarage mit Wallbox', 'Vorbereitet für Elektromobilität an jedem Stellplatz.'],
  ];
  return (
    <div style={{ padding: `${SECTION} 0` }}>
      <GreenBlock word="Substanz" headline="Gebaut für die nächsten fünfzig Jahre.">
        {items.map((it, i) => (
          <Reveal key={it[0]} delay={i * 60}>
            <GreenBlockItem term={it[0]}>{it[1]}</GreenBlockItem>
          </Reveal>
        ))}
      </GreenBlock>
    </div>
  );
}

/* Weiterführungs-Link am Ende jeder Verteiler-Sektion (§2). Linksbündig im Grid. */
function WeiterLink({ children, onClick, href = '#' }) {
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: 'clamp(1.75rem, 3vw, 2.5rem) var(--page-inset-lg) 0' }}>
      <Reveal><TextLink href={href} onClick={onClick ? (e) => { e.preventDefault(); onClick(); } : undefined}>{children}</TextLink></Reveal>
    </section>
  );
}

/* §2.5 · Typologien-Teaser — drei nummerierte Kacheln, Deep-Link in den
   gefilterten Finder (nie auf die ungefilterte Tabelle). */
function TypologienTeaser({ onDeep }) {
  const items = [
    { no: '01', img: 'family-garden-bench.jpg', label: 'Gartenwohnungen', line: '10 Einheiten, 2 bis 3 Zimmer, ab 53,3 m²', filter: { frei: ['Garten'] } },
    { no: '02', img: 'garden-lounge-day.jpg', label: 'Stadtwohnungen', line: '16 Einheiten, 2 bis 3 Zimmer, ab 54,2 m²', filter: { frei: ['Balkon'] } },
    { no: '03', img: 'rooftop-terrace-night.jpg', label: 'Dachgeschoss', line: '5 Einheiten, 3 bis 4 Zimmer, ab 50,1 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(1.75rem, 3vw, 2.5rem)', paddingBottom: '0.1em' }}>
        <LineMask innerStyle={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.5rem, 2.4vw, 2.25rem)', letterSpacing: '-0.015em', color: 'var(--umbra)' }}>Drei Arten zu wohnen</LineMask>
      </h2>
      <div className="m57-teaser" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(1.25rem, 2.5vw, 2rem)' }}>
        {items.map((it, i) => (
          <Reveal key={it.no} delay={i * 120}>
            <a href="#wohnungen" onClick={(e) => { e.preventDefault(); onDeep(it.filter); }} style={{ display: 'block', textDecoration: 'none', color: 'inherit' }} className="m57-typo">
              <RevealImage src={IMG + it.img} alt={it.label} ratio="4 / 5" delay={i * 120} />
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 'var(--space-4)', borderTop: '1px solid var(--sandstein)', marginTop: 'var(--space-4)', paddingTop: 'var(--space-3)' }}>
                <span style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--space-3)' }}>
                  <span className="tabular" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)' }}>{it.no}</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: '1.2rem', color: 'var(--umbra)' }}>{it.label}</span>
                </span>
                <span className="m57-typo-arrow" aria-hidden="true" style={{ color: 'var(--waldgruen)', transition: 'transform var(--dur-ui) ease' }}>→</span>
              </div>
              <div className="tabular" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'var(--umbra-90)', marginTop: '0.4rem', fontVariantNumeric: 'tabular-nums' }}>{it.line}</div>
            </a>
          </Reveal>
        ))}
      </div>
      <style>{`.m57-typo:hover .m57-typo-arrow { transform: translateX(4px); }`}</style>
    </section>
  );
}

/* §2.7 · Lage-Teaser mit Gehminuten-Zeile. */
function LageTeaser({ onLage }) {
  return (
    <div>
      <FullBleed img={IMG + 'rooftop-terrace-night.jpg'} alt="Blick über Wien am Abend" height="72vh">
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.75rem, 3.4vw, 3rem)', color: 'var(--warmweiss)', margin: 0, lineHeight: 1.15, maxWidth: '18ch' }}>
          <LineMask>Wo der 17. Bezirk</LineMask>
          <LineMask delay={120}>in den Wald übergeht.</LineMask>
        </h2>
      </FullBleed>
      <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: 'clamp(2rem, 4vw, 3.5rem) var(--page-inset-lg) 0' }}>
        <Reveal>
          <p className="tabular" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'var(--umbra-90)', margin: 0, fontVariantNumeric: 'tabular-nums' }}>
            Wienerwald 4 Minuten, Volksschule 4 Minuten, Linie 43 6 Minuten, Schwarzenbergpark 8 Minuten.
          </p>
        </Reveal>
      </section>
    </div>
  );
}

/* §2.8 · Highlights — drei ausgewählte Einheiten zum Sofortanfragen. */
function Highlights({ onAnfrage, onOpenDetail }) {
  const { Button } = window.Maison57DesignSystem_40d525;
  const picks = [
    { haus: 5, top: '17+18', img: 'rooftop-terrace-night.jpg', name: 'Dachgeschoss', line: '4 Zimmer, 127,8 m², Dachterrasse' },
    { haus: 7, top: '5', img: 'garden-lounge-day.jpg', name: 'Gartenterrasse', line: '3 Zimmer, 74,7 m², Südlage' },
    { haus: 7, top: '1', img: 'family-garden-bench.jpg', name: 'Gartenwohnung', line: '2 Zimmer, 53,3 m², Privatgarten' },
  ];
  const unitOf = (h, top) => window.M57_UNITS.find((u) => u.haus === h && u.top === top);
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--page-inset-lg)' }}>
      <h2 style={{ overflow: 'hidden', margin: '0 0 clamp(1.5rem, 3vw, 2.25rem)', paddingBottom: '0.12em' }}>
        <LineMask innerStyle={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.5rem, 2.4vw, 2.25rem)', letterSpacing: '-0.015em', color: 'var(--umbra)' }}>Drei, die man gesehen haben sollte</LineMask>
      </h2>
      <div className="m57-teaser" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(1.25rem, 2.5vw, 2rem)' }}>
        {picks.map((p, i) => {
          const u = unitOf(p.haus, p.top);
          return (
            <Reveal key={p.haus + p.top} delay={i * 120}>
              <div>
                <div style={{ overflow: 'hidden', aspectRatio: '4 / 3', border: '1px solid var(--sandstein)' }}>
                  <img src={IMG + p.img} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                </div>
                <div style={{ borderTop: '1px solid var(--sandstein)', marginTop: 'var(--space-4)', paddingTop: 'var(--space-4)' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 'var(--space-4)' }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: '1.2rem', color: 'var(--umbra)' }}>{p.name}</span>
                    <span className="tabular" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)', fontVariantNumeric: 'tabular-nums' }}>Haus {p.haus}, Top {p.top}</span>
                  </div>
                  <div className="tabular" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'var(--umbra-90)', marginTop: '0.4rem', fontVariantNumeric: 'tabular-nums' }}>{p.line}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-5)', marginTop: 'var(--space-4)', flexWrap: 'wrap' }}>
                    <Button variant="filled" onClick={() => onAnfrage(u)}>Sofort anfragen</Button>
                    <a onClick={(e) => { e.preventDefault(); onOpenDetail(u); }} href="#" style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', fontWeight: 500, color: 'var(--waldgruen)' }}>Details →</a>
                  </div>
                </div>
              </div>
            </Reveal>
          );
        })}
      </div>
    </section>
  );
}

/* Wohnungen-Vorschau — Sektionswort + gepinnte randlose Galerie. */
function WohnungenVorschau({ onWohnungen }) {
  const items = [
    { img: IMG + 'family-garden-bench.jpg', label: 'Gartenwohnungen', eyebrow: 'Erdgeschoss', count: '10 Tops', meta: '2 bis 3 Zimmer, ab 53,3 m²', sentence: 'Im Erdgeschoss beider Häuser, mit eigenem Garten und vorgelagerter Terrasse. Der Rasen wird zum zweiten Wohnzimmer, die Terrasse zur Schwelle dazwischen.', highlights: [{ icon: 'garten', label: 'Garten' }, { icon: 'terrasse', label: 'Terrasse' }, { icon: 'zimmer', label: '2–3 Zi.' }], filter: { frei: ['Garten'] } },
    { img: IMG + 'garden-lounge-day.jpg', label: 'Stadtwohnungen', eyebrow: 'Obergeschoss', count: '16 Tops', meta: '2 bis 3 Zimmer, ab 54,2 m²', sentence: 'In den Obergeschossen, mit Balkonen in die Baumkronen. Klar geschnitten, viel Licht über den Tag, der Blick geht ins Grüne statt auf die Straße.', highlights: [{ icon: 'balkon', label: 'Balkon' }, { icon: 'licht', label: 'Süd/West' }, { icon: 'zimmer', label: '2–3 Zi.' }], filter: { frei: ['Balkon'] } },
    { img: IMG + 'rooftop-terrace-night.jpg', label: 'Dachgeschoss', eyebrow: 'Dachgeschoss', count: '5 Tops', meta: '3 bis 4 Zimmer, ab 50,1 m²', sentence: 'Ganz oben, mit großzügiger Dachterrasse und dem meisten Licht im Haus. Der Blick reicht über Wien, der Abend gehört hier einfach dazu.', highlights: [{ icon: 'dachterrasse', label: 'Dachterrasse' }, { icon: 'flaeche', label: 'bis 128 m²' }, { icon: 'zimmer', label: '3–4 Zi.' }], filter: { geschoss: 'DG' } },
  ];
  const intro = (
    <h2 style={{ overflow: 'hidden', margin: '0 0 clamp(2rem, 4vw, 3rem)' }}>
      <LineMask innerStyle={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--text-sectionword)', lineHeight: 1.05, letterSpacing: '-0.02em', color: 'var(--umbra)' }}>
        Wohnungen
      </LineMask>
    </h2>
  );
  return <TypeGrid items={items} intro={intro} onOpen={(it) => onWohnungen(it.filter)} />;
}

/* CTA-Zeile — ein Primär-CTA nach einem Überzeugungsmoment, mittig. */
function CtaZeile() {
  const { Button } = window.Maison57DesignSystem_40d525;
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: 'clamp(3rem, 5vw, 4.5rem) var(--page-inset-lg) 0', display: 'flex', justifyContent: 'center' }}>
      <Reveal><Button variant="filled" href="#vormerkung">Vormerkung anfragen</Button></Reveal>
    </section>
  );
}

function HomeScreen({ go, onAnfrage, onOpenDetail }) {
  return (
    <div>
      <HomeHero />
      <EditorialStatement />
      <ProjektGrid />
      <Highlights onAnfrage={onAnfrage} onOpenDetail={onOpenDetail} />
      <div style={{ paddingTop: SECTION }}></div>
      <FullBleed img={IMG + 'family-garden-bench.jpg'} alt="Zwei Häuser am Hang" height="78vh">
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(2rem, 4vw, 3.5rem)', color: 'var(--warmweiss)', margin: 0, lineHeight: 1.15 }}>
          <LineMask>Haus 5. Haus 7.</LineMask>
          <LineMask delay={120}>Ein Hang.</LineMask>
        </h2>
      </FullBleed>
      <div style={{ paddingTop: SECTION }}></div>
      <StatMosaik onAusstattung={() => go('wohnungen')} />
      <div style={{ paddingTop: SECTION }}></div>
      <Substanz />
      <WohnungenVorschau onWohnungen={(f) => go('wohnungen', f)} />
      <div style={{ paddingTop: SECTION }}></div>
      <FullBleed img={IMG + 'rooftop-terrace-night.jpg'} alt="Blick über Wien am Abend" height="72vh"
        link={<a onClick={() => go('lage')} style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', fontWeight: 500, color: 'var(--warmweiss)', cursor: 'pointer', borderBottom: '1px solid rgba(251,249,244,0.5)', paddingBottom: '0.2rem' }}>Zur Lage →</a>}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.75rem, 3.4vw, 3rem)', color: 'var(--warmweiss)', margin: 0, lineHeight: 1.15, maxWidth: '18ch' }}>
          <LineMask>Wo der 17. Bezirk</LineMask>
          <LineMask delay={120}>in den Wald übergeht.</LineMask>
        </h2>
      </FullBleed>
    </div>
  );
}

window.HomeScreen = HomeScreen;