// Maison 57 — Ausstattung (BAB V1.0). Zwei Blöcke: In der Wohnung, Im Haus.
// Produktkacheln (echte Assets), Zeilen-Hairline-Listen, herausgehobene Blöcke
// mit Text + Grafik (Bauteilaktivierung, KNX). Alle Angaben aus der BAB,
// "oder gleichwertig" wird mitgeführt. Keine erfundenen Zahlen.
const {
  SectionWord: ASectionWord, Reveal: AReveal, LineMask: ALineMask,
} = window.Maison57DesignSystem_40d525;
const AIMG = '../../assets/ausstattung/';

/* Styles für die inline-SVG-Grafiken (Farben aus den Seiten-CSS-Variablen). */
function GrafikStyles() {
  return (
    <style>{`
      .m57-svg { width: 100%; height: auto; display: block; }
      .m57-svg text { font-family: var(--font-text); fill: var(--umbra); }
      .m57-svg .title { font-size: 12px; letter-spacing: 0.14em; fill: var(--umbra-60); }
      .m57-svg .num { font-family: var(--font-display); font-size: 15px; fill: var(--waldgruen); }
      .m57-svg .l-h { font-size: 12.5px; fill: var(--umbra); }
      .m57-svg .l-t, .m57-svg .cap { font-size: 11px; fill: var(--umbra-60); }
      .m57-svg .room-l, .m57-svg .dev-l, .m57-svg .wp-l, .m57-svg .r-h { font-size: 10px; letter-spacing: 0.06em; fill: var(--umbra-60); }
      .m57-svg .r-h { font-size: 13px; letter-spacing: 0; fill: var(--umbra); }
      .m57-svg .slab, .m57-svg .device, .m57-svg .wp { fill: var(--warmweiss); stroke: var(--umbra); stroke-width: 1; }
      .m57-svg .screen { fill: var(--creme); stroke: var(--sandstein); stroke-width: 1; }
      .m57-svg .floor { fill: var(--sandstein-40); stroke: var(--umbra); stroke-width: 1; }
      .m57-svg .earth { fill: url(#erde); stroke: none; }
      .m57-svg .ground { stroke: var(--umbra); stroke-width: 1.5; }
      .m57-svg .wall { stroke: var(--sandstein); stroke-width: 1; }
      .m57-svg .pipe { stroke: var(--waldgruen); stroke-width: 1.4; fill: none; }
      .m57-svg .ray { stroke: var(--waldgruen); stroke-width: 1.2; fill: none; opacity: 0.7; }
      .m57-svg .lead, .m57-svg .row { stroke: var(--sandstein); stroke-width: 1; fill: none; }
      .m57-svg .pipe-dot { fill: var(--waldgruen); }
      .m57-svg .dot { fill: var(--umbra); }
      .m57-svg .dot-g { fill: var(--waldgruen); }
      .m57-svg .ico { stroke: var(--umbra); stroke-width: 1; fill: none; }

      /* Animation: Basis = sichtbarer Endzustand (print/reduced). Rohre fließen
         und Strahlung pulsiert dauerhaft; Text/Icons blenden einmalig ein. */
      @media (prefers-reduced-motion: no-preference) {
        .m57-anim .ray { opacity: 0; }
        .m57-anim .pipe-dot, .m57-anim .dot-g { opacity: 0; }
        .m57-anim .ico { opacity: 0; }
        .m57-anim .dot, .m57-anim .lead, .m57-anim .l-h, .m57-anim .l-t, .m57-anim .num, .m57-anim .r-h, .m57-anim .row { opacity: 0; }
        .m57-anim.is-in .pipe { stroke-dasharray: 9 6; animation: m57flow 1.4s linear infinite; }
        .m57-anim.is-in .pipe-dot { animation: m57fade 500ms ease forwards, m57blink 2.6s ease-in-out infinite; }
        .m57-anim.is-in .pipe-dot:nth-of-type(2) { animation-delay: 260ms, 0.3s; }
        .m57-anim.is-in .pipe-dot:nth-of-type(3) { animation-delay: 320ms, 0.6s; }
        .m57-anim.is-in .pipe-dot:nth-of-type(4) { animation-delay: 380ms, 0.9s; }
        .m57-anim.is-in .pipe-dot:nth-of-type(5) { animation-delay: 440ms, 1.2s; }
        .m57-anim.is-in .pipe-dot:nth-of-type(6) { animation-delay: 500ms, 1.5s; }
        .m57-anim.is-in .pipe-dot:nth-of-type(7) { animation-delay: 560ms, 1.8s; }
        .m57-anim.is-in .ray { animation: m57pulse 2.4s ease-in-out infinite; }
        .m57-anim.is-in .ray:nth-of-type(1) { animation-delay: 0ms; }
        .m57-anim.is-in .ray:nth-of-type(2) { animation-delay: 300ms; }
        .m57-anim.is-in .ray:nth-of-type(3) { animation-delay: 600ms; }
        .m57-anim.is-in .ray:nth-of-type(4) { animation-delay: 900ms; }
        .m57-anim.is-in .dot-g { animation: m57fade 400ms ease 200ms forwards, m57blink 2.2s ease-in-out 0.6s infinite; }
        .m57-anim.is-in .ico { animation: m57fade 500ms ease forwards; }
        .m57-anim.is-in .ico:nth-of-type(1) { animation-delay: 300ms; }
        .m57-anim.is-in .ico:nth-of-type(2) { animation-delay: 420ms; }
        .m57-anim.is-in .ico:nth-of-type(3) { animation-delay: 540ms; }
        .m57-anim.is-in .dot { animation: m57fade 400ms ease forwards; }
        .m57-anim.is-in .lead { animation: m57fade 500ms ease forwards; }
        .m57-anim.is-in .num { animation: m57rise 500ms var(--ease-reveal) forwards; }
        .m57-anim.is-in .l-h { animation: m57rise 500ms var(--ease-reveal) forwards; }
        .m57-anim.is-in .l-t { animation: m57fade 500ms ease forwards; }
        .m57-anim.is-in .r-h { animation: m57fade 500ms ease forwards; }
        .m57-anim.is-in .row { animation: m57fade 500ms ease forwards; }
        .m57-anim.is-in .dot, .m57-anim.is-in .lead, .m57-anim.is-in .num, .m57-anim.is-in .l-h, .m57-anim.is-in .l-t, .m57-anim.is-in .r-h { animation-delay: 700ms; }
      }
      @keyframes m57flow { to { stroke-dashoffset: -15; } }
      @keyframes m57pulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.75; } }
      @keyframes m57blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
      @keyframes m57fade { from { opacity: 0; } to { opacity: 1; } }
      @keyframes m57rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
    `}</style>
  );
}

/* Produktkachel: Bild + Bezeichnung + Hersteller/Spezifikation. */
function ProductTile({ img, name, spec, delay = 0, contain = false }) {
  return (
    <AReveal delay={delay}>
      <div>
        <div style={{ aspectRatio: '1 / 1', overflow: 'hidden', border: '1px solid var(--sandstein)', background: 'var(--warmweiss)' }}>
          <img src={AIMG + img} alt={name} style={{ width: '100%', height: '100%', objectFit: contain ? 'contain' : 'cover', display: 'block', padding: contain ? '12%' : 0, boxSizing: 'border-box' }} />
        </div>
        <div style={{ borderTop: '1px solid var(--sandstein)', marginTop: 'var(--space-3)', paddingTop: 'var(--space-2)' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: '1.05rem', color: 'var(--umbra)' }}>{name}</div>
          <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)', marginTop: '0.15rem', lineHeight: 1.5 }}>{spec}</div>
        </div>
      </div>
    </AReveal>
  );
}

/* Zeilen-Hairline-Liste (selbsterklärende Punkte). */
function ZeilenListe({ items }) {
  return (
    <div style={{ borderTop: '1px solid var(--sandstein)' }}>
      {items.map((t, i) => (
        <AReveal key={i} delay={Math.min(i, 6) * 50}>
          <div style={{ display: 'flex', gap: 'var(--space-5)', padding: 'var(--space-3) 0', borderBottom: '1px solid var(--sandstein-40)' }}>
            <span className="tabular" style={{ flex: 'none', width: '2rem', fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)', fontVariantNumeric: 'tabular-nums' }}>{String(i + 1).padStart(2, '0')}</span>
            <span style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', lineHeight: 1.6, color: 'var(--umbra)' }}>{t}</span>
          </div>
        </AReveal>
      ))}
    </div>
  );
}

/* Herausgehobener Block: links Text (Sub, Headline, Absatz), rechts Grafik/Bild. */
function HighlightBlock({ sub, headline, children, media, mediaCaption, reverse = false }) {
  return (
    <AReveal>
      <div className="m57-cols2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2rem, 5vw, 4rem)', alignItems: 'center' }}>
        <div style={{ order: reverse ? 2 : 0 }}>
          <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--umbra-60)', marginBottom: 'var(--space-3)' }}>{sub}</div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.5rem, 2.2vw, 2rem)', letterSpacing: '-0.015em', color: 'var(--umbra)', margin: '0 0 var(--space-4)', lineHeight: 1.1 }}>{headline}</h3>
          <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', lineHeight: 1.7, color: 'var(--umbra-90)', margin: 0, maxWidth: '46ch' }}>{children}</p>
        </div>
        <div>
          <div style={{ border: '1px solid var(--sandstein)', background: 'var(--warmweiss)', padding: 'clamp(1rem, 2.5vw, 2rem)' }}>{media}</div>
          {mediaCaption && <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-micro)', color: 'var(--umbra-60)', marginTop: 'var(--space-3)' }}>{mediaCaption}</div>}
        </div>
      </div>
    </AReveal>
  );
}

function Ausstattung() {
  const S = 'clamp(4rem, 8vw, 6.5rem)';
  const wohnung = [
    'Eichenparkett von Weitzer, geölt (V1 Eiche Pure, V2 Eiche Natur)',
    'Keramikfliesen im Bad (Saime Neutra oder RAK Lounge), Wände raumhoch',
    'Sanitär von LAUFEN, Armaturen Hansgrohe AXOR Citterio',
    'Handtuchheizkörper Zehnder mit elektrischem Sommerbetrieb',
    'Wohnungseingangstür in Sicherheitsklasse RC3, fünffach verriegelt',
    'Flächenbündige Innentüren, teils raumhoch, teils Schiebetüren',
    'Fußbodenheizung mit Einzelraumregelung in jedem Aufenthaltsraum und im Bad',
    'Holz-Alu-Fenster mit Dreifachverglasung, verdeckte Beschläge',
    'JUNG Schalterprogramm A550 oder LS 990 (oder gleichwertig)',
  ];
  const haus = [
    'Personenlift für bis zu 13 Personen, ab Tiefgarage in alle Geschosse, Kabine Edelstahl mit Spiegel',
    'Stiegenhaus mit Feinsteinzeug (Saime Frammenta Taupe oder Global Grey, 60x60 cm, matt, Kreuzverband)',
    'Fassade mit Vollwärmeschutz aus Steinwolle und Edelputz, ruhige horizontale Bänderung',
    'Hauseingang mit Alu-Tür, elektrischem Türöffner und Gegensprechanlage',
    'Eigenes Kellerabteil je Wohnung, Schließanlage für Haus und Zutritt',
    'klimaaktiv Gold in Planung für beide Baukörper',
  ];
  return (
    <div>
      <GrafikStyles />
      {/* A · In der Wohnung */}
      <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--page-inset-lg)' }}>
        <ASectionWord word="Ausstattung">
          <div>
            <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--umbra-60)', marginBottom: 'var(--space-4)' }}>In der Wohnung</div>
            {/* Produktkacheln */}
            <div className="m57-teaser" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'clamp(1rem, 2vw, 1.5rem)', marginBottom: 'var(--space-8)' }}>
              <ProductTile img="parkett-eiche.webp" name="Eichenparkett" spec="Weitzer Diele, geölt, ca. 1000×125 mm" delay={0} />
              <ProductTile img="fliese-saime-tortora.webp" name="Badkeramik" spec="Saime Neutra, Tortora, 60×60 cm" delay={80} />
              <ProductTile img="armatur-axor-citterio.jpeg" name="Armatur" spec="Hansgrohe AXOR Citterio" delay={160} contain />
              <ProductTile img="schalter-jung-ls990.webp" name="Schalter" spec="JUNG LS 990, KNX-fähig" delay={240} contain />
            </div>
            <ZeilenListe items={wohnung} />
          </div>
        </ASectionWord>
      </section>

      {/* Herausgehoben: KNX + Bauteilaktivierung */}
      <div style={{ paddingTop: S }}></div>
      <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--page-inset-lg)', display: 'grid', gap: S }}>
        <HighlightBlock sub="Steuerung" headline="Ihr Zuhause, mit einem Griff bedient." media={<KnxGrafik />} mediaCaption="Ein zentrales Tableau im Wohnbereich, Bedienung auch am Taster.">
          Ein zentrales Touchtableau im Wohnbereich steuert Licht, Beschattung und Temperatur, je Raum und zentral. Die elektrischen Zip-Anlagen lassen sich einzeln oder über ein sonnenstandsgeführtes Zeitprogramm bedienen.
        </HighlightBlock>
        <HighlightBlock reverse sub="Temperatur" headline="Temperiert, nicht geheizt." media={<BauteilGrafik />} mediaCaption="Schematischer Schnitt. Wasser temperiert die Betondecke, die Decke temperiert den Raum.">
          In den Decken von Maison 57 liegen wasserführende Rohre, die den Beton selbst zur ruhigen Temperaturfläche machen. Im Winter gibt die Decke sanfte Wärme ab, im Sommer nimmt sie Wärme auf und kühlt. Gespeist wird das aus Erdwärme über Tiefensonden, serienmäßig in jeder Wohnung.
        </HighlightBlock>
      </section>

      {/* B · Im Haus */}
      <div style={{ paddingTop: S }}></div>
      <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--page-inset-lg)' }}>
        <ASectionWord word="Im Haus">
          <div>
            <ZeilenListe items={haus} />
            <div className="m57-cols2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2rem, 5vw, 4rem)', marginTop: 'var(--space-10)' }}>
              <AReveal>
                <div>
                  <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--umbra-60)', marginBottom: 'var(--space-2)' }}>Energie</div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: '1.4rem', color: 'var(--umbra)', margin: '0 0 var(--space-3)' }}>Erdwärme und Photovoltaik</h3>
                  <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', lineHeight: 1.7, color: 'var(--umbra-90)', margin: 0, maxWidth: '44ch' }}>Geheizt und gekühlt wird über eine Sole-Wasser-Wärmepumpe mit Tiefensonden, Eigenstrom liefert die Photovoltaik am Dach. Kein Gas, planbare Betriebskosten.</p>
                </div>
              </AReveal>
              <AReveal delay={100}>
                <div>
                  <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--umbra-60)', marginBottom: 'var(--space-2)' }}>Tiefgarage</div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: '1.4rem', color: 'var(--umbra)', margin: '0 0 var(--space-3)' }}>Stellplatz mit E-Laden</h3>
                  <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', lineHeight: 1.7, color: 'var(--umbra-90)', margin: 0, maxWidth: '44ch' }}>Je Wohnung ein Tiefgaragenstellplatz und ein Fahrradabstellplatz. Alle Stellplätze sind für eine E-Ladebox vorbereitet, versperrbar und verkabelt. Die Zufahrtsrampe ist elektrisch beheizt.</p>
                </div>
              </AReveal>
            </div>
          </div>
        </ASectionWord>
        <p style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-micro)', color: 'var(--umbra-60)', margin: 'var(--space-8) 0 0', maxWidth: '70ch' }}>
          Alle Angaben laut Bau- und Ausstattungsbeschreibung (BAB V1.0). Der Bauträger behält sich gleichwertige Produkte vor.
        </p>
      </section>
    </div>
  );
}

window.Ausstattung = Ausstattung;

/* Lädt eine SVG-Datei und injiziert sie inline, damit die Klassen aus
   GrafikStyles (CSS-Variablen der Seite) greifen. */
function InlineSVG({ src }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    let cancelled = false;
    fetch(src).then((r) => r.text()).then((txt) => {
      if (cancelled || !ref.current) return;
      ref.current.innerHTML = txt.replace('<svg ', '<svg class="m57-svg" ');
      const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      if (reduce) { ref.current.classList.add('is-in'); return; }
      const io = new IntersectionObserver((es) => {
        if (es[0].isIntersecting) { ref.current && ref.current.classList.add('is-in'); io.disconnect(); }
      }, { threshold: 0.35 });
      io.observe(ref.current);
      setTimeout(() => {
        if (!ref.current || ref.current.classList.contains('is-in')) return;
        const r = ref.current.getBoundingClientRect();
        const vh = window.innerHeight || 800;
        if (r.top < vh && r.bottom > 0) ref.current.classList.add('is-in');
      }, 1200);
    }).catch(() => {});
    return () => { cancelled = true; };
  }, [src]);
  return <div ref={ref} className="m57-anim"></div>;
}
function BauteilGrafik() { return <InlineSVG src={AIMG + 'bauteilaktivierung.svg'} />; }
function KnxGrafik() { return <InlineSVG src={AIMG + 'knx-smarthome.svg'} />; }
