// 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).
   Das Bild sitzt mit seiner Unterkante fest auf der Unterkante des
   Containers: objectPosition 50% 100% schneidet bei anderen
   Seitenverhältnissen zuerst oben und dann an den Seiten weg, die
   Parallax-Reserve liegt über dem Container und bleibt unsichtbar. */
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' }}>
      <picture>
        <source media="(max-width: 700px) and (orientation: portrait)" srcSet={IMG + 'exterior-luftbild-neu-hoch.webp'} />
      <img ref={imgRef} src={IMG + 'exterior-luftbild-neu.webp'} alt="Am Waldrain, Luftbild der beiden Häuser mit Blick über Wien" fetchpriority="high"
        style={{ position: 'absolute', left: 0, right: 0, bottom: 0, width: '100%', height: '112%',
          objectFit: 'cover', objectPosition: '50% 100%',
          transform: on ? 'scale(1)' : 'scale(1.06)', transformOrigin: '50% 100%',
          transition: 'transform 1200ms var(--ease-reveal)', willChange: 'transform' }} />
      </picture>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(28,36,28,0.55) 0%, rgba(28,36,28,0.22) 16%, rgba(28,36,28,0) 36%, 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}>Am Waldrain,</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: 'clamp(1.05rem, 1.6vw, 1.45rem)', fontWeight: 500, letterSpacing: '0.01em', color: 'rgba(251,249,244,0.95)', margin: 0, textAlign: 'right', lineHeight: 1.5 }}>
            31 Eigentumswohnungen, 1170 Wien.<br />Fertigstellung Q1 2028.
          </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 = 'Am Waldrain verbindet sich die *Ruhe* des Waldes mit der *Nähe* zur Stadt. Zwei Häuser am Waldrand, stadtnah im 17. Bezirk.';
  const words = text.split(/\s+/);
  const n = words.length;

  return (
    <section ref={outer} style={{ height: '150vh', 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 * 1.4 * (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, mit Blick über Wien, ins Grüne und auf alten Baumbestand. Sie werden umrahmt von Gärten und teilen sich eine Tiefgarage, die Versorgung durch Geothermie und die Ruhe des Waldrands.
            </p>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', lineHeight: 1.8, color: 'var(--umbra-90)', margin: 0 }}>
              Die Wohnungen haben 2 bis 4 Zimmer und eine eigene Freifläche. Geheizt und gekühlt wird mit Erdwärme, zeitgemäß und nachhaltig auch für kommende Generationen.
            </p>
          </Reveal>
        </div>
        <div style={{ marginTop: 'clamp(2.5rem, 5vw, 4rem)', maxWidth: '66%' }} className="m57-projimg">
          <RevealImage src={IMG + 'exterior-garten.webp'} 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="50-" suffix=" m²" />, l: 'Wohnfläche' },
    { el: <CountUp value={2028} prefix="Q1 " />, l: 'Fertigstellung' },
  ];
  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 für Heizung und Warmwasser, ohne fossile Energie.'],
    ['Kühlung inklusive', 'Über den Fußboden mit Erdwärme, serienmäßig; im Dachgeschoss zusätzlich Fan-Coils.'],
    ['Photovoltaik', 'Eigenstrom für die Allgemeinflächen und die Tiefgarage.'],
    ['Eichenparkett von Weitzer', 'Massives Eichenparkett in allen Wohnräumen.'],
    ['Holz-Alu-Fenster', 'Dreifach verglast, mit motorbetriebenem Sonnenschutz.'],
    ['Tiefgarage mit Wallbox', 'Vorbereitung für Elektromobilität an jedem Stellplatz.'],
  ];
  return (
    <div style={{ padding: `${SECTION} 0` }}>
      <GreenBlock word="Substanz" headline="Nachhaltig gebaut und gold-zertifiziert">
        {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: 'interior-wohnen-garten.webp', label: 'Gartenwohnungen', line: '8 Einheiten, 2 bis 4 Zimmer, ab 53,3 m²', filter: { frei: ['Garten'] } },
    { no: '02', img: 'interior-wohnen-balkon.webp', label: 'Stadtwohnungen', line: '18 Einheiten, 2 bis 3 Zimmer, ab 54,2 m²', filter: { frei: ['Balkon'] } },
    { no: '03', img: 'interior-wohnen-terrasse.webp', label: 'Terrassenwohnungen', line: '5 Einheiten, 2 bis 4 Zimmer, ab 50,1 m²', filter: { frei: ['Dachterrasse'] } },
  ];
  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: 'exterior-dachterrasse-h5-top-17-18.webp', name: 'Dachgeschoss', line: '4 Zimmer, 127,8 m², Terrassen 68,7 m²' },
    { haus: 7, top: '5', img: 'interior-wohnen-garten.webp', name: 'Gartenwohnung mit Flexizone', line: '3 Zimmer, 74,7 m², Garten 143,5 m²' },
    { haus: 7, top: '1', img: 'interior-schlafen.webp', name: 'Gartenwohnung', line: '2 Zimmer, 53,3 m², Garten 84,2 m²' },
  ];
  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)' }}>Unsere Highlights</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' }}>
                  <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 + 'interior-wohnen-garten.webp', label: 'Gartenwohnungen', eyebrow: 'Erdgeschoss', count: '8 Tops', meta: '2 bis 4 Zimmer, ab 53,3 m²', sentence: 'Im Erdgeschoss beider Häuser liegen die Terrassen und Eigengärten direkt vor dem Wohnraum. In Haus 7 kommt im Untergeschoss eine Flexizone dazu, zur flexiblen Nutzung.', highlights: [{ icon: 'garten', label: 'Garten' }, { icon: 'terrasse', label: 'Terrasse' }, { icon: 'zimmer', label: '2 bis 4 Zi.' }], filter: { frei: ['Garten'] } },
    { img: IMG + 'interior-wohnen-balkon.webp', label: 'Balkonwohnungen', eyebrow: 'Obergeschoss', count: '18 Tops', meta: '2 bis 3 Zimmer, ab 54,2 m²', sentence: 'Im 1. und 2. Obergeschoss: 2- und 3-Zimmer-Wohnungen mit Balkon oder Loggia, teilweise mit Blick in die Baumkronen.', highlights: [{ icon: 'balkon', label: 'Balkon' }, { icon: 'flaeche', label: '54 bis 72 m²' }, { icon: 'zimmer', label: '2 bis 3 Zi.' }], filter: { frei: ['Balkon'] } },
    { img: IMG + 'interior-wohnen-terrasse.webp', label: 'Terrassenwohnungen', eyebrow: '2. OG und Dachgeschoss', count: '5 Tops', meta: '2 bis 4 Zimmer, ab 50,1 m²', sentence: 'Im 2. Obergeschoss und im Dachgeschoss: Wohnungen bis 128 m² mit großen Terrassen und zusätzlichen Balkonen, mit Blick über Wien.', highlights: [{ icon: 'dachterrasse', label: 'Terrassen' }, { icon: 'flaeche', label: 'bis 128 m²' }, { icon: 'zimmer', label: '2 bis 4 Zi.' }], filter: { frei: ['Dachterrasse'] } },
  ];
  const intro = (
    <h2 style={{ overflow: 'hidden', margin: '0 0 clamp(2rem, 4vw, 3rem)', paddingBottom: '0.12em' }}>
      <LineMask innerStyle={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--text-sectionword)', lineHeight: 1.05, letterSpacing: '-0.02em', color: 'var(--umbra)' }}>
        Wohnen Am Waldrain
      </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" onClick={() => window.__m57ToFinder && window.__m57ToFinder()}>Wohnung 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 + 'exterior-gaerten.webp'} hoch={IMG + 'exterior-gaerten-hoch.webp'} alt="Haus 5 und Haus 7 von den Eigengärten aus gesehen" 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}>Mit Garten, Terrasse, Balkon.</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;