// Maison 57 — Wohnungen v2, Kapitel 1: erst das Gefühl, dann das Werkzeug.
const {
  SectionWord: WSSectionWord, Reveal: WSReveal, RevealImage: WSRevealImage,
  TextLink: WSTextLink, LineMask: WSLineMask,
} = window.Maison57DesignSystem_40d525;
const WSIMG = '../../assets/renderings/';
const WSSECTION = 'clamp(4rem, 8vw, 6.5rem)';

/* 1 · Auftakt — ruhiger Seitenkopf auf dem Grid, kein Bild. */
function WohnungenKopf() {
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: `clamp(7rem, 12vw, 11rem) var(--page-inset-lg) ${WSSECTION}` }}>
      <WSSectionWord word="Wohnungen" noRule>
        <div className="m57-cols2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(1.5rem, 4vw, 3rem)' }}>
          <WSReveal>
            <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', lineHeight: 1.8, color: 'var(--umbra-90)', margin: 0 }}>
              31 Einheiten mit 2 bis 4 Zimmern, ca. 53 bis 128 m², Erstbezug. Jede Wohnung hat eine eigene Freifläche: Garten, Terrasse, Balkon oder Dachterrasse.
            </p>
          </WSReveal>
          <WSReveal delay={140}>
            <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', lineHeight: 1.8, color: 'var(--umbra-90)', margin: 0 }}>
              Preise auf Anfrage. Verkaufspläne liegen je Top als PDF vor, die Beratung übernimmt Elisabeth Rohr Real Estate persönlich.
            </p>
          </WSReveal>
        </div>
      </WSSectionWord>
    </section>
  );
}

/* 2b · Material-Collage — das Herzstück: gepinnte Sektion, links der stehende
   Serifen-Satz, rechts komponieren sich vier Kacheln + eine Zahl-Kachel
   schrittweise (clip-path), danach minimaler Gegen-Parallax. Die Kacheln
   sind image-slot-Platzhalter: echte Material-Nahaufnahmen bitte hineinziehen,
   niemals Außen-Renderings. Mobil: vertikale, versetzte Folge ohne Pin. */
function MaterialCollage() {
  const outer = React.useRef(null);
  const [p, setP] = React.useState(0);
  const [pin, setPin] = React.useState(false);
  const [mini, setMini] = React.useState(false);

  React.useEffect(() => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const mobile = window.matchMedia('(max-width: 760px)').matches;
    if (mobile) {
      setMini(true);
      if (reduce) { setP(1); return; }
      // whileInView: p rampt einmalig 0 -> 1 (kein Pinning)
      const o = outer.current; if (!o) { setP(1); return; }
      let raf, start;
      const run = (ts) => { if (!start) start = ts; const k = Math.min(1, (ts - start) / 1400); setP(k); if (k < 1) raf = requestAnimationFrame(run); };
      const io = new IntersectionObserver((es) => { if (es[0].isIntersecting) { raf = requestAnimationFrame(run); io.disconnect(); } }, { threshold: 0.3 });
      io.observe(o);
      const t = setTimeout(() => { if (p === 0) setP(1); }, 2600);
      return () => { io.disconnect(); cancelAnimationFrame(raf); clearTimeout(t); };
    }
    if (reduce) { setP(1); return; }
    setPin(true);
    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, Math.round((-r.top / (range || 1)) * 100) / 100)));
    };
    sc.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    const t = setTimeout(() => setP((old) => (old === 0 ? 1 : old)), 2600);
    return () => { sc.removeEventListener('scroll', onScroll); clearTimeout(t); };
  }, []);

  const tiles = [
    { id: 'mat-a', kind: 'img', src: '../../assets/ausstattung/parkett-eiche.webp', word: 'Eichenparkett', z: 1, dock: 0.05, clipFrom: 'none',   left: '0%',  top: '2%',  width: '42%', ratio: '4 / 5', par: 0.5 },
    { id: 'mat-c', kind: 'img', src: '../../assets/ausstattung/fliese-saime-tortora.webp', word: 'Badkeramik', z: 2, dock: 0.22, clipFrom: 'right',  left: '58%', top: '0%',  width: '34%', ratio: '3 / 4', par: 0.7 },
    { id: 'mat-t', kind: 'img', img: 'garden-firepit-sunset.jpg', word: 'Terrasse', z: 3, dock: 0.42, clipFrom: 'bottom', left: '28%', top: '38%', width: '42%', ratio: '3 / 2', par: 1.0 },
    { id: 'mat-e', kind: 'img', src: '../../assets/ausstattung/armatur-axor-citterio.jpeg', word: 'AXOR Citterio', z: 4, dock: 0.58, clipFrom: 'bottom', left: '6%', top: '64%', width: '22%', ratio: '1 / 1', par: 1.3, contain: true },
  ];
  const clip = (t) => {
    if (t.clipFrom === 'none' || p >= t.dock) return 'inset(0 0 0 0)';
    return t.clipFrom === 'bottom' ? 'inset(100% 0 0 0)' : 'inset(0 0 0 100%)';
  };
  const par = (t) => (p > (t.dock || 0) ? -(p - (t.dock || 0)) * 34 * t.par : 0);

  const tileInner = (t) => t.kind === 'img' ? (
    <div style={{ aspectRatio: t.ratio, overflow: 'hidden', border: '1px solid var(--sandstein)', background: 'var(--warmweiss)' }}>
      <img src={t.src || (WSIMG + t.img)} alt={t.word} style={{ width: '100%', height: '100%', objectFit: t.contain ? 'contain' : 'cover', display: 'block', padding: t.contain ? '10%' : 0, boxSizing: 'border-box' }} />
    </div>
  ) : (
    <div style={{ aspectRatio: t.ratio, background: 'var(--warmweiss)', border: '1px solid var(--sandstein)', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 'clamp(1rem, 2vw, 1.75rem)' }}>
      <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'clamp(1.75rem, 3vw, 2.75rem)', lineHeight: 1, color: 'var(--umbra)' }}>{t.big}</div>
    </div>
  );

  const tile = (t) => (
    <div key={t.id} className="m57-mattile"
      style={(pin || mini)
        ? { position: 'absolute', left: t.left, top: t.top, width: t.width, zIndex: t.z || 1,
            clipPath: clip(t), transition: 'clip-path 750ms var(--ease-reveal)',
            transform: `translateY(${par(t).toFixed(1)}px)` }
        : { width: '100%' }}>
      {tileInner(t)}
      <div className="m57-matword" style={{ borderTop: '1px solid var(--sandstein)', marginTop: '0.6rem', paddingTop: '0.4rem', fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-90)', background: 'var(--creme)', display: 'inline-block', paddingRight: '0.8rem' }}>{t.word}</div>
    </div>
  );

  const numberTile = (
    <div className="m57-mattile"
      style={(pin || mini)
        ? { position: 'absolute', left: '64%', top: '54%', width: '30%', zIndex: 6,
            opacity: p >= 0.8 ? 1 : 0, transform: `translateY(${p >= 0.8 ? 0 : 16}px)`,
            transition: 'opacity 700ms var(--ease-reveal), transform 700ms var(--ease-reveal)' }
        : { width: '100%' }}>
      <div style={{ aspectRatio: '1 / 1', background: 'var(--waldgruen)', color: 'var(--warmweiss)', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 'clamp(1rem, 2vw, 1.75rem)' }}>
        <div className="tabular" style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(2rem, 3.5vw, 3.25rem)', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>100 %</div>
        <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'rgba(251,249,244,0.75)', marginTop: '0.6rem' }}>Erdwärme statt Gas, dreifach verglast, gebaut für fünfzig Jahre.</div>
      </div>
    </div>
  );

  const content = (
    <div className="m57-collage-grid" style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--page-inset-lg)', display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.4fr)', gap: 'clamp(2.5rem, 6vw, 6rem)', alignItems: 'center', width: '100%', boxSizing: 'border-box' }}>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.9rem, 3.4vw, 3rem)', lineHeight: 1.05, letterSpacing: '-0.015em', color: 'var(--umbra)', margin: 0, maxWidth: '14ch' }}>
        Gebaut aus Dingen, die <span style={{ fontStyle: 'italic' }}>bleiben</span>.
      </h2>
      {(pin || mini) ? (
        <div style={{ position: 'relative', height: pin ? 'min(72vh, 620px)' : 'min(52vh, 360px)' }}>
          {tiles.map(tile)}
          {numberTile}
        </div>
      ) : (
        <div className="m57-collage-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(1.5rem, 4vw, 2.5rem)' }}>
          {tiles.map((t, i) => (
            <WSReveal key={t.id} delay={i * 130} style={{ marginTop: i % 2 === 1 ? 'clamp(1.5rem, 4vw, 3rem)' : 0 }}>
              {tile(t)}
            </WSReveal>
          ))}
          <WSReveal delay={4 * 130}>{numberTile}</WSReveal>
        </div>
      )}
      <style>{`
        .m57-mattile { transition: clip-path 750ms var(--ease-reveal); }
        .m57-mattile:hover { translate: 0 -4px; transition: translate 300ms var(--ease-reveal); z-index: 9; }
        .m57-mattile .m57-matword { position: relative; }
        .m57-mattile .m57-matword::after { content: ''; position: absolute; left: 0; right: 0.8rem; bottom: -2px; border-bottom: 1px solid var(--umbra); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-reveal); }
        .m57-mattile:hover .m57-matword::after { transform: scaleX(1); }
        image-slot { width: 100%; height: 100%; display: block; }
      `}</style>
    </div>
  );

  if (!pin) {
    return <section style={{ padding: `0 0 ${WSSECTION}` }}>{content}</section>;
  }
  return (
    <section ref={outer} style={{ height: '280vh', position: 'relative' }}>
      <div style={{ position: 'sticky', top: 0, height: '100vh', display: 'flex', alignItems: 'center' }}>
        {content}
      </div>
    </section>
  );
}

/* 3 · Material und Ausstattung — Zeilenliste, die Liste ist der Luxus. */
function MaterialListe() {
  const rows = [
    ['Eichenparkett von Weitzer', 'Massives Eichenparkett in allen Wohnräumen.'],
    ['Holz-Alu-Fenster', 'Dreifach verglast, mit elektrischen Zip-Screens.'],
    ['Fußbodenheizung', 'Mit Einzelraumregelung in jedem Zimmer.'],
    ['Kühlung inklusive', 'Bauteilaktivierung temperiert im Sommer, serienmäßig.'],
    ['Erdwärme und Photovoltaik', 'Tiefensonden heizen, die Sonne liefert Eigenstrom.'],
    ['KNX-Smart-Home', 'Licht, Beschattung und Temperatur zentral steuerbar.'],
    ['Bäder mit Feinsteinzeug', 'Großformatig verlegt, mit bodengleicher Dusche.'],
    ['Lift bis in die Garage', 'Barrierefrei vom Stellplatz bis zur Wohnungstür.'],
  ];
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: `${WSSECTION} var(--page-inset-lg)` }}>
      <WSSectionWord word="Material">
        <div>
          {rows.map((r, i) => (
            <WSReveal key={r[0]} delay={Math.min(i, 4) * 60}>
              <div style={{ borderBottom: '1px solid var(--sandstein)', padding: 'var(--space-5) 0' }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(1.15rem, 1.7vw, 1.45rem)', color: 'var(--umbra)', marginBottom: '0.3rem' }}>{r[0]}</div>
                  <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', lineHeight: 1.7, color: 'var(--umbra-60)', maxWidth: '28rem' }}>{r[1]}</div>
                </div>
              </div>
            </WSReveal>
          ))}
        </div>
      </WSSectionWord>
    </section>
  );
}

/* 4 · Besonderheiten-Duo — Flexizone und Freiflächen nebeneinander. */
function BesonderheitenDuo({ onFinder }) {
  const blocks = [
    { img: 'garden-lounge-day.jpg', title: 'Die Flexizone', copy: 'Der zuschaltbare Raum: als Arbeitszimmer, Gästezimmer oder Atelier. Zugeschnitten wird erst beim Kauf, nicht am Reißbrett.', filter: { zimmer: '4' }, label: 'Wohnungen mit 4 Zimmern' },
    { img: 'family-garden-bench.jpg', title: 'Die Freiflächen', copy: 'Jede Einheit hat Garten, Terrasse, Balkon oder Dachterrasse. Der Hang macht aus jedem Geschoss eine eigene Aussicht.', filter: { frei: ['Garten'] }, label: 'Gartenwohnungen ansehen' },
  ];
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: `0 var(--page-inset-lg) ${WSSECTION}` }}>
      <div className="m57-duo" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2rem, 5vw, 5rem)' }}>
        {blocks.map((b, i) => (
          <div key={b.title} className={i === 1 ? 'm57-duo-offset' : undefined}>
            <WSRevealImage src={WSIMG + b.img} alt={b.title} ratio="4 / 3" delay={i * 120} />
            <WSReveal delay={i * 120 + 100}>
              <div style={{ borderTop: '1px solid var(--sandstein)', marginTop: 'var(--space-4)', paddingTop: 'var(--space-4)' }}>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.3rem, 2vw, 1.7rem)', color: 'var(--umbra)', margin: '0 0 var(--space-3)' }}>{b.title}</h3>
                <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', lineHeight: 1.8, color: 'var(--umbra-90)', margin: '0 0 var(--space-4)', maxWidth: '44ch' }}>{b.copy}</p>
                <WSTextLink onClick={() => onFinder(b.filter)}>{b.label}</WSTextLink>
              </div>
            </WSReveal>
          </div>
        ))}
      </div>
    </section>
  );
}

/* 5 · Typen-Galerie — mit je einem Satz Wohngefühl. */
function WohnungenTypen({ onFinder }) {
  const items = [
    { img: WSIMG + '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: WSIMG + '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: WSIMG + '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)' }}>
      <WSLineMask innerStyle={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.75rem, 3vw, 2.75rem)', lineHeight: 1.1, letterSpacing: '-0.015em', color: 'var(--umbra)' }}>
        Drei Arten zu wohnen
      </WSLineMask>
    </h2>
  );
  return <TypeGrid items={items} intro={intro} onOpen={(it) => onFinder(it.filter)} />;
}

Object.assign(window, { WohnungenKopf, MaterialCollage, MaterialListe, BesonderheitenDuo, WohnungenTypen });