// Maison 57 — Lage v2: Zoom-Erzählung von außen nach innen (Makro → Mikro).
const {
  SectionWord: LSectionWord, Reveal: LReveal, RevealImage: LRevealImage, LineMask: LLineMask,
} = window.Maison57DesignSystem_40d525;
const LIMG = '../../assets/renderings/';
const LSECTION = 'clamp(4rem, 8vw, 6.5rem)';
const LCountUp = window.Maison57DesignSystem_40d525.CountUp;

/* Distanz-Zeile — Mikroanimation 3: die Hairline zeichnet sich von links,
   die Zahl zählt hoch, gestaffelt 60ms pro Zeile. */
function DistRow({ label, value, index = 0, strong = false }) {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  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.4 });
    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 m = String(value).match(/^(\D*?)(\d+)(.*)$/);
  const delay = index * 60;
  return (
    <div ref={ref} style={{ opacity: vis ? 1 : 0, transition: `opacity 500ms ease ${delay}ms` }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 'var(--space-6)', padding: 'var(--space-4) 0' }}>
        <span style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'var(--umbra)' }}>{label}</span>
        <span className="tabular" style={{ fontFamily: strong ? 'var(--font-display)' : 'var(--font-text)', fontSize: strong ? 'clamp(1.1rem, 1.6vw, 1.4rem)' : 'var(--text-small)', color: strong ? 'var(--umbra)' : 'var(--umbra-60)', fontVariantNumeric: 'tabular-nums lining-nums' }}>
          {vis && m ? <><span>{m[1]}</span><LCountUp value={parseInt(m[2], 10)} delay={delay} duration={700} /><span>{m[3]}</span></> : value}
        </span>
      </div>
      <div style={{ borderBottom: '1px solid var(--sandstein)', transform: vis ? 'scaleX(1)' : 'scaleX(0)', transformOrigin: 'left', transition: `transform 700ms var(--ease-reveal) ${delay}ms` }}></div>
    </div>
  );
}

/* 1 · Auftakt full-bleed: Luftbild mit Blick über Wien, Headline links. */
function LageHero() {
  return (
    <section style={{ position: 'relative', minHeight: '72vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden', marginTop: '-88px' }}>
      <img src={LIMG + 'aerial-twin-buildings.jpg'} alt="Luftbild mit Blick über Wien"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(24,30,24,0.6) 0%, rgba(24,30,24,0.05) 55%, rgba(24,30,24,0.28) 100%)' }}></div>
      <div style={{ position: 'relative', maxWidth: 'var(--content-max)', width: '100%', margin: '0 auto', padding: '0 var(--page-inset-lg) clamp(3rem, 6vw, 5rem)', boxSizing: 'border-box' }}>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, color: 'var(--warmweiss)', fontSize: 'clamp(2.5rem, 5vw, 4.5rem)', lineHeight: 1.08, letterSpacing: '-0.01em', margin: 0, maxWidth: '18ch' }}>
          <LLineMask>Wo der 17. Bezirk in den</LLineMask>
          <LLineMask delay={120}><span style={{ fontStyle: 'italic' }}>Wienerwald</span> übergeht.</LLineMask>
        </h1>
      </div>
    </section>
  );
}

/* 2 · Makrolage — Sektionswort "Wien", zwei Textspalten + Distanz-Band. */
function Makrolage() {
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: `${LSECTION} var(--page-inset-lg)` }}>
      <LSectionWord word="Wien">
        <div className="m57-cols2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(1.5rem, 4vw, 3rem)' }}>
          <LReveal>
            <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', lineHeight: 1.8, color: 'var(--umbra-90)', margin: 0 }}>
              Dornbach liegt am westlichen Stadtrand, dort, wo die Stadt in Weinberge und Wald ausläuft. Die Nachreihengasse gehört zur letzten grünen Reihe davor.
            </p>
          </LReveal>
          <LReveal delay={140}>
            <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', lineHeight: 1.8, color: 'var(--umbra-90)', margin: 0 }}>
              Der Bogen zwischen Stadt und Wald bleibt kurz: die Linie 43 fährt direkt Richtung Ring, das Auto erreicht den Gürtel in wenigen Minuten.
            </p>
          </LReveal>
        </div>
        <div style={{ marginTop: 'clamp(2.5rem, 5vw, 4rem)', borderTop: '1px solid var(--sandstein)' }}>
          {window.M57_MACRO.map((m, i) => (
            <DistRow key={m.label} label={m.label} value={m.value} index={i} strong />
          ))}
        </div>
        <LReveal delay={200}>
          <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-micro)', color: 'var(--umbra-60)', margin: 'var(--space-3) 0 0' }}>
            Richtwerte, vor Go-live zu verifizieren.
          </p>
        </LReveal>
        <LageKarte />
      </LSectionWord>
    </section>
  );
}

/* 2b · Lagekarte — reduzierte, schematische Karte: Waldkante, Straßenzüge,
   Linie 43, Markierungspunkt. Linien zeichnen sich beim Eintritt, der Punkt
   pulsiert zweimal. Kein Karten-Widget, ein stilles Bild. */
function LageKarte() {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  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();
    }, 1200);
    return () => { clearTimeout(t); io.disconnect(); };
  }, []);

  const path = (d, color, width, delay, dash) => (
    <path d={d} fill="none" stroke={color} strokeWidth={width} pathLength="1"
      strokeDasharray={dash || '1'}
      strokeDashoffset={vis ? 0 : 1}
      style={{ transition: `stroke-dashoffset 1200ms var(--ease-reveal) ${delay}ms` }} />
  );
  const label = (x, y, text, anchor) => (
    <text x={x} y={y} textAnchor={anchor || 'start'}
      style={{ fontFamily: 'var(--font-text)', fontSize: '12px', fill: 'var(--umbra-60)', opacity: vis ? 1 : 0, transition: 'opacity 600ms ease 1000ms' }}>
      {text}
    </text>
  );

  return (
    <div ref={ref} style={{ marginTop: 'clamp(2.5rem, 5vw, 4rem)' }}>
      <svg viewBox="0 0 800 440" role="img" aria-label="Schematische Lagekarte: Maison 57 zwischen Wienerwald und Stadt" style={{ width: '100%', height: 'auto', display: 'block', border: '1px solid var(--sandstein)', background: 'var(--warmweiss)' }}>
        <style>{`
          @keyframes m57ring { 0% { transform: scale(0.4); opacity: 0.55; } 100% { transform: scale(2.6); opacity: 0; } }
          .m57-ring { transform-box: fill-box; transform-origin: center; animation: m57ring 1.9s var(--ease-reveal) 1.2s 2 both; }
          @media (prefers-reduced-motion: reduce) { .m57-ring { animation: none; opacity: 0; } }
        `}</style>
        {/* Waldkante — der Wienerwald als ruhige Fläche links */}
        <path d="M0,0 L250,0 C215,70 235,130 205,190 C180,240 195,310 165,360 C145,395 150,420 140,440 L0,440 Z"
          fill="rgba(47,70,54,0.07)" stroke="none" style={{ opacity: vis ? 1 : 0, transition: 'opacity 900ms ease 200ms' }} />
        {path('M250,0 C215,70 235,130 205,190 C180,240 195,310 165,360 C145,395 150,420 140,440', 'var(--waldgruen)', 1.2, 100)}
        {/* Straßenzüge Richtung Stadt */}
        {path('M270,60 C380,95 520,110 800,80', 'var(--sandstein)', 1, 350)}
        {path('M255,200 C420,215 600,240 800,220', 'var(--sandstein)', 1, 500)}
        {path('M230,340 C400,350 620,390 800,370', 'var(--sandstein)', 1, 650)}
        {path('M320,20 C330,150 310,300 340,440', 'var(--sandstein)', 1, 800)}
        {path('M520,40 C540,180 520,320 560,440', 'var(--sandstein)', 1, 900)}
        {/* Linie 43 — leicht betont */}
        {path('M262,168 C420,180 610,205 800,190', 'var(--umbra-60)', 1.4, 1000, '0.04 0.012')}
        {label(560, 182, 'Linie 43 → Ring')}
        {/* Marker Maison 57 an der Waldkante */}
        <circle className="m57-ring" cx="238" cy="178" r="10" fill="none" stroke="var(--waldgruen)" strokeWidth="1" />
        <circle className="m57-ring" cx="238" cy="178" r="10" fill="none" stroke="var(--waldgruen)" strokeWidth="1" style={{ animationDelay: '2.1s' }} />
        <circle cx="238" cy="178" r="6" fill="var(--waldgruen)" style={{ opacity: vis ? 1 : 0, transition: 'opacity 400ms ease 1100ms' }} />
        {label(256, 158, 'Maison 57 · Nachreihengasse 5-7')}
        {label(70, 230, 'Wienerwald')}
        {label(240, 400, 'Dornbach')}
        {label(740, 300, 'Wien', 'end')}
      </svg>
      <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)' }}>
        Schematische Darstellung, nicht maßstabsgetreu.
      </div>
    </div>
  );
}

/* §6.4 · Mikrolage als große Serifen-Hover-Liste: aktiver Eintrag Umbra, Rest
   Sandstein, rechts das Bild mit Gehminuten (Kreuzblende). Hover Desktop, Tap Mobile. */
function Mikrolage() {
  const items = [
    { label: 'Wienerwald', min: 4, m: '300 m', img: 'garden-firepit-sunset.jpg' },
    { label: 'Volksschule Dornbach', min: 4, m: '320 m', img: 'family-garden-bench.jpg' },
    { label: 'Schwarzenbergpark', min: 8, m: '650 m', img: 'garden-lounge-day.jpg' },
    { label: 'Neuwaldegger Bad', min: 7, m: '550 m', img: 'garden-lounge-dusk.jpg' },
    { label: 'Linie 43 Richtung Ring', min: 6, m: '480 m', img: 'rooftop-terrace-night.jpg' },
  ];
  const [active, setActive] = React.useState(0);
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: `${LSECTION} var(--page-inset-lg) 0` }}>
      <LSectionWord word="Ums Eck">
        <div className="m57-microloc" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 'clamp(2rem, 5vw, 4rem)', alignItems: 'start' }}>
          <div style={{ borderTop: '1px solid var(--sandstein)' }}>
            {items.map((it, i) => {
              const on = active === i;
              return (
                <div key={it.label} onMouseEnter={() => setActive(i)} onClick={() => setActive(i)}
                  style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 'var(--space-5)', padding: 'clamp(0.7rem, 1.4vw, 1.1rem) 0', borderBottom: '1px solid var(--sandstein-40)', cursor: 'pointer' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.5rem, 3vw, 2.5rem)', lineHeight: 1.1, color: on ? 'var(--umbra)' : 'var(--sandstein)', transition: 'color 300ms ease' }}>{it.label}</span>
                  <span className="tabular" style={{ flex: 'none', fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: on ? 'var(--umbra-90)' : 'var(--sandstein)', fontVariantNumeric: 'tabular-nums', transition: 'color 300ms ease', textAlign: 'right' }}>{it.min} Min.<br /><span style={{ fontSize: 'var(--text-micro)' }}>{it.m}</span></span>
                </div>
              );
            })}
          </div>
          <div style={{ position: 'sticky', top: '96px' }}>
            <div style={{ position: 'relative', aspectRatio: '3 / 4', border: '1px solid var(--sandstein)', overflow: 'hidden' }}>
              {items.map((it, i) => (
                <img key={it.img} src={LIMG + it.img} alt={it.label}
                  style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: active === i ? 1 : 0, transition: 'opacity 400ms var(--ease-reveal)' }} />
              ))}
              <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: 'var(--space-5)', background: 'linear-gradient(to top, rgba(24,30,24,0.6), rgba(24,30,24,0))' }}>
                <span className="tabular" style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(2rem, 4vw, 3rem)', color: 'var(--warmweiss)' }}>{items[active].min}</span>
                <span style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'rgba(251,249,244,0.85)', marginLeft: '0.5rem' }}>Gehminuten</span>
              </div>
            </div>
          </div>
        </div>
        <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-micro)', color: 'var(--umbra-60)', margin: 'var(--space-4) 0 0' }}>Gehminuten konservativ geschätzt, vor Go-live zu verifizieren.</p>
        <div style={{ marginTop: 'clamp(2.5rem, 5vw, 4rem)' }}>
          <window.Maison57DesignSystem_40d525.Button variant="filled" href="#vormerkung">Vormerkung anfragen</window.Maison57DesignSystem_40d525.Button>
        </div>
      </LSectionWord>
    </section>
  );
}

/* 5 · Bildstrecke — voll, dann zwei versetzt auf dem Grid, dann voll. */
function Caption({ children }) {
  return (
    <LReveal delay={120}>
      <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)' }}>
        {children}
      </div>
    </LReveal>
  );
}

function Bildstrecke() {
  return (
    <div style={{ paddingTop: LSECTION }}>
      <FullBleed img={LIMG + 'garden-firepit-sunset.jpg'} alt="Der Hang im Abendlicht" height="70vh">
        <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'rgba(251,249,244,0.85)', margin: 0 }}>Der Hang im Abendlicht.</p>
      </FullBleed>
      <section className="m57-offset2" style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: `${LSECTION} var(--page-inset-lg)`, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2rem, 5vw, 5rem)' }}>
        <div style={{ paddingTop: 'clamp(3rem, 7vw, 6rem)' }}>
          <LRevealImage src={LIMG + 'garden-lounge-day.jpg'} alt="Gemeinschaftsgarten" ratio="4 / 5" />
          <Caption>Der Gemeinschaftsgarten zwischen den Häusern.</Caption>
        </div>
        <div>
          <LRevealImage src={LIMG + 'family-garden-bench.jpg'} alt="Am Weg vor dem Haus" ratio="4 / 5" delay={120} />
          <Caption>Ankommen, am Weg vor dem Haus.</Caption>
        </div>
      </section>
      <FullBleed img={LIMG + 'rooftop-terrace-night.jpg'} alt="Blick über Wien am Abend" height="70vh">
        <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'rgba(251,249,244,0.85)', margin: 0 }}>Der Abend über Wien, den oberen Einheiten vorbehalten.</p>
      </FullBleed>
    </div>
  );
}

/* Umgebungsgalerie — statisches Foto-Raster der Umgebung, Bildunterschriften
   im Referenz-Stil (01 — …). Hover hebt leicht, Bild zoomt sanft. */
function Umgebungsgalerie() {
  const shots = [
    { img: 'garden-firepit-sunset.jpg', cap: 'Wienerwald, Waldrand ab 300 m', span: 2 },
    { img: 'family-garden-bench.jpg', cap: 'Schwarzenbergpark, 8 Gehminuten', span: 1 },
    { img: 'garden-lounge-day.jpg', cap: 'Neuwaldegger Bad, 7 Gehminuten', span: 1 },
    { img: 'rooftop-terrace-night.jpg', cap: 'Blick über die Stadt am Abend', span: 2 },
  ];
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: `${LSECTION} var(--page-inset-lg) 0` }}>
      <LSectionWord word="Umgebung">
        <div className="m57-umgeb" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(1rem, 2vw, 1.5rem)' }}>
          {shots.map((s, i) => (
            <LReveal key={s.img} delay={i * 100} style={{ gridColumn: 'span ' + s.span }}>
              <figure className="m57-umgeb-fig" style={{ margin: 0 }}>
                <div style={{ overflow: 'hidden', aspectRatio: s.span === 2 ? '16 / 9' : '3 / 4' }}>
                  <img src={LIMG + s.img} alt={s.cap} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                </div>
                <figcaption style={{ borderTop: '1px solid var(--sandstein)', marginTop: 'var(--space-3)', paddingTop: 'var(--space-2)', fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)' }}>
                  <span className="tabular" style={{ color: 'var(--umbra)' }}>0{i + 1}</span>&nbsp;&mdash;&nbsp;{s.cap}
                </figcaption>
              </figure>
            </LReveal>
          ))}
        </div>
      </LSectionWord>
      <style>{`
        .m57-umgeb-fig img { transition: transform 700ms var(--ease-reveal); }
        .m57-umgeb-fig:hover img { transform: scale(1.04); }
        @media (max-width: 760px) { .m57-umgeb { grid-template-columns: 1fr !important; } .m57-umgeb > * { grid-column: span 1 !important; } }
      `}</style>
    </section>
  );
}

function LageScreen() {
  return (
    <div>
      <LageHero />
      <Makrolage />
      <FullBleed img={LIMG + 'garden-lounge-dusk.jpg'} alt="Übergang von Stadt zu Grün" height="66vh">
        <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'rgba(251,249,244,0.85)', margin: 0 }}>Wo die Gassen enden, beginnt der Wald.</p>
      </FullBleed>
      <Mikrolage />
      <Umgebungsgalerie />
      <Bildstrecke />
      <VormerkungSection />
    </div>
  );
}

window.LageScreen = LageScreen;