// Am Waldrain, Ausstattung (BAB V1.0) als Akkordeon: In der Wohnung, Im Haus,
// Energie und Tiefgarage, Steuerung und Temperatur (mit Grafiken), Sonderausstattung.
// Alle Angaben aus der BAB, "oder gleichwertig" wird mitgefuehrt. 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>
  );
}


/* Zeilen-Hairline-Liste (selbsterklärende Punkte). */
function ZeilenListe({ items, offen = false }) {
  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: offen && i === items.length - 1 ? 'none' : '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>
  );
}

/* Produktreihe: Bild und Angaben aus dem Farb- und Materialkonzept (Moser
   Architects, 21.09.2026). Bilder in assets/ausstattung/fmk/. */
const FMK = '/assets/ausstattung/fmk/';
function ProduktReihe({ items }) {
  return (
    <div className="m57-produkte" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 'clamp(1rem, 2vw, 1.5rem)', marginTop: 'var(--space-8)' }}>
      {items.map((it) => (
        <figure key={it.img} style={{ margin: 0 }}>
          <div style={{ aspectRatio: '4 / 3', overflow: 'hidden', background: 'var(--warmweiss)' }}>
            <img src={FMK + it.img + '.webp'} alt={it.titel} loading="lazy" style={{ width: '100%', height: '100%', objectFit: it.contain ? 'contain' : 'cover', display: 'block' }} />
          </div>
          <figcaption style={{ marginTop: 'var(--space-3)' }}>
            <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', fontWeight: 500, color: 'var(--umbra)' }}>{it.titel}</div>
            <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', color: 'var(--umbra-60)', marginTop: '0.15rem' }}>{it.bereich}</div>
            <div style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--text-label)', lineHeight: 1.55, color: 'var(--umbra-60)', marginTop: '0.2rem' }}>{it.info}</div>
          </figcaption>
        </figure>
      ))}
    </div>
  );
}

const PRODUKTE_WOHNUNG = [
  { img: 'parkett-v1-eiche-pure', bereich: 'Boden Wohnbereich V1', titel: 'Weitzer Parkett, Eiche Pure', info: 'Diele 77728, ruhig, geölt, 1000 x 125 mm' },
  { img: 'parkett-v2-eiche-natur', bereich: 'Boden Wohnbereich V2', titel: 'Weitzer Parkett, Eiche Natur', info: 'Diele 77765, ruhig, geölt, 1000 x 125 mm' },
  { img: 'bad-v1-saime-neutra-tortora', bereich: 'Bad V1, Boden und Wände', titel: 'Saime Neutra, Tortora', info: 'Feinsteinzeug, 60 x 60 cm' },
  { img: 'bad-v2-rak-lounge-elfenbein', bereich: 'Bad V2, Boden und Wände', titel: 'RAK Lounge, elfenbein', info: 'Feinsteinzeug, matt, 30 x 60 cm' },
  { img: 'waschtisch-laufen-val', bereich: 'Waschtisch Bad', titel: 'Laufen VAL', info: 'Keramik weiß, unterbaufähig, 75 cm breit', contain: true },
  { img: 'terrasse-alpen-grigio', bereich: 'Terrasse und Balkon', titel: 'Feinsteinzeug Alpen, Grigio', info: 'matt, 60 x 60 x 2 cm' },
  { img: 'zipscreen-roma', bereich: 'Sonnenschutz', titel: 'ROMA zipSCREEN', info: 'RAL 7022 Umbragrau, Unterputzkasten, motorbetrieben' },
];
const PRODUKTE_WUNSCH = [
  { img: 'pool-edelstahl', bereich: 'Garten', titel: 'Edelstahl-Überlaufpool', info: 'Pool Partner, 600 x 300 cm, 150 cm tief' },
  { img: 'whirlpool-jacuzzi-alimia', bereich: 'Terrasse', titel: 'Whirlpool Jacuzzi Alimia', info: 'Durchmesser 212 cm, Höhe 90 cm' },
  { img: 'sauna-thermalux-kuubi', bereich: 'Garten', titel: 'Sauna Thermalux Alu Kuubi', info: 'Weiß' },
];

/* 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 }}>
          <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>
  );
}

/* Akkordeon: eine Zeile pro Thema, Nummer, Titel in der Serife, rechts ein
   Plus, das sich zum Kreuz dreht. Die Hoehe faehrt ueber grid-template-rows,
   der Inhalt bleibt gerendert, damit die Grafiken beim Oeffnen anlaufen. */
function Akkordeon({ items, initial = 0 }) {
  const [open, setOpen] = React.useState(initial);
  // Keine eigene Oberlinie: die Linie des Sektionsworts schliesst oben ab.
  return (
    <div>
      {items.map((it, i) => {
        const on = open === i;
        return (
          <div key={it.title} style={{ borderBottom: '1px solid var(--sandstein)' }}>
            <button type="button" aria-expanded={on} onClick={() => setOpen(on ? null : i)}
              style={{ width: '100%', display: 'flex', alignItems: 'baseline', gap: 'var(--space-5)', padding: 'clamp(1rem, 1.8vw, 1.4rem) 0', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', color: 'inherit' }}>
              <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={{ flex: 1, fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.25rem, 2vw, 1.75rem)', lineHeight: 1.15, color: 'var(--umbra)' }}>{it.title}</span>
              <span aria-hidden="true" style={{ flex: 'none', position: 'relative', width: '14px', height: '14px', alignSelf: 'center', transform: on ? 'rotate(45deg)' : 'none', transition: 'transform 400ms var(--ease-reveal)' }}>
                <span style={{ position: 'absolute', left: 0, right: 0, top: '6.5px', height: '1px', background: 'var(--umbra)' }}></span>
                <span style={{ position: 'absolute', top: 0, bottom: 0, left: '6.5px', width: '1px', background: 'var(--umbra)' }}></span>
              </span>
            </button>
            <div style={{ display: 'grid', gridTemplateRows: on ? '1fr' : '0fr', transition: 'grid-template-rows 500ms var(--ease-reveal)' }}>
              <div style={{ overflow: 'hidden', minHeight: 0 }}>
                <div style={{ padding: `0.25rem 0 clamp(1.75rem, 3vw, 2.5rem) calc(2rem + var(--space-5))`, opacity: on ? 1 : 0, transition: 'opacity 350ms ease' }} className="m57-akk-inhalt">
                  {it.content}
                </div>
              </div>
            </div>
          </div>
        );
      })}
      <style>{`@media (max-width: 620px) { .m57-akk-inhalt { padding-left: 0 !important; } }`}</style>
    </div>
  );
}

function Ausstattung() {
  const wohnung = [
    'Eichenparkett von Weitzer, geölt (V1 Eiche Pure, V2 Eiche Natur)',
    'Feinsteinzeug im Bad (Saime Neutra Tortora oder RAK Lounge elfenbein), Wände raumhoch',
    'Sanitär von LAUFEN (Waschtisch VAL, Wand-WC Kartell by Laufen), Armaturen Hansgrohe Rebris S',
    'Handtuchheizkörper Zehnder mit elektrischem Sommerbetrieb',
    'Wohnungseingangstür in Sicherheitsklasse RC3, fünffach verriegelt',
    'Innentüren mit 220 cm Durchgangslichte',
    'Fußbodenheizung und Fußbodenkühlung, Raumthermostat in jedem Aufenthaltsraum und im Bad',
    'Holz-Alu-Fenster mit Dreifachverglasung, verdeckte Beschläge',
    'Sonnenschutz zipSCREEN in Umbragrau, Unterputzkasten, motorbetrieben, Bedienung über Taster',
    'Terrassen und Balkone in Feinsteinzeug (Alpen Grigio, 60 x 60 cm)',
    'JUNG Schalterprogramm A550, Licht und Sonnenschutz über Schalter und Taster',
  ];
  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',
    'Auszeichnung klimaaktiv Gold (in Planung)',
  ];
  // Sonderwuensche laut Ausstattungsliste inkl. Sonderwuensche, Stand 10.09.2026.
  const wunsch = [
    'Zusätzliche Kühlung über Fan-Coils (Anschlüsse in jeder Wohnung vorbereitet, im Dachgeschoss serienmäßig)',
    'Wandfliesen in Komplettausführung in Bad und WC',
    'Pflanztrog und Gartenabstellraum bei den Gartenwohnungen',
    'Pool (Edelstahl, 6 x 3 m), Whirlpool (Jacuzzi Alimia) oder Sauna (Thermalux Kuubi) im Eigengarten',
    'Dachterrassen-Erweiterung auf rund 90 m² mit Outdoor-Küche und Indoor-Sauna bei den Dachgeschoss-Einheiten',
  ];
  const h3 = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: '1.4rem', color: 'var(--umbra)', margin: '0 0 var(--space-3)' };
  const p = { fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', lineHeight: 1.7, color: 'var(--umbra-90)', margin: 0, maxWidth: '44ch' };
  const micro = { fontFamily: 'var(--font-text)', fontSize: 'var(--text-micro)', color: 'var(--umbra-60)', margin: 'var(--space-3) 0 0' };

  const items = [
    { title: 'In der Wohnung', content: <><ZeilenListe items={wohnung} offen /><ProduktReihe items={PRODUKTE_WOHNUNG} /></> },
    { title: 'Im Haus', content: <ZeilenListe items={haus} offen /> },
    {
      title: 'Energie und Tiefgarage',
      content: (
        <div className="m57-cols2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2rem, 5vw, 4rem)' }}>
          <div>
            <h3 style={h3}>Erdwärme und Photovoltaik</h3>
            <p style={p}>Geheizt und gekühlt wird über eine Sole-Wasser-Wärmepumpe mit Tiefensonden und die Fußbodenflächen, Eigenstrom liefert die Photovoltaik am Dach. Kein Gas, planbare Betriebskosten.</p>
          </div>
          <div>
            <h3 style={h3}>Stellplatz mit E-Laden</h3>
            <p style={p}>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>
        </div>
      ),
    },
    {
      title: 'Sonderausstattung auf Wunsch',
      content: (
        <div style={{ maxWidth: '62ch' }}>
          <ZeilenListe items={wunsch} />
          <p style={micro}>Sonderwünsche je nach Einheit und Bauphase, Details im Beratungsgespräch.</p>
          <ProduktReihe items={PRODUKTE_WUNSCH} />
        </div>
      ),
    },
  ];

  return (
    <div>
      <GrafikStyles />
      <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--page-inset-lg)' }}>
        <ASectionWord word="Ausstattung">
          <Akkordeon items={items} initial={0} />
          {/* Heizsystem wieder als eigener, sichtbarer Block (Kundenwunsch 02.10.2026). */}
          <div style={{ marginTop: 'clamp(3rem, 6vw, 5rem)' }}>
            <HighlightBlock reverse sub="Heizen und Kühlen" headline="Warm im Winter, kühl im Sommer." media={<BodenGrafik />} mediaCaption="Schematischer Schnitt. Wasser temperiert den Boden, der Boden temperiert den Raum.">
              Geheizt und gekühlt wird über den Fußboden. Im Winter gibt er sanfte Wärme ab, im Sommer nimmt er Wärme aus dem Raum auf und kühlt, gespeist aus Erdwärme über Tiefensonden. In den Dachgeschosswohnungen ergänzen Fan-Coils die Kühlung, in allen anderen Wohnungen sind die Anschlüsse dafür vorbereitet.
            </HighlightBlock>
          </div>
          <p style={{ ...micro, margin: 'var(--space-8) 0 0', maxWidth: '70ch' }}>
            Alle Angaben laut Bau- und Ausstattungsbeschreibung mit Korrekturen des Vertriebs (08.10.2026), Ausstattungsliste inkl. Sonderwünsche (10.09.2026) und Farb- und Materialkonzept (21.09.2026). Der Bauträger behält sich gleichwertige Produkte vor.
          </p>
        </ASectionWord>
      </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 BodenGrafik() { return <InlineSVG src={AIMG + 'fussboden-temperierung.svg'} />; }
