// =============================================================
// Wireframe — Vorsorge-Produktseiten
// =============================================================

// Shared: Drei-Säulen-Grafik (LoFi)
function WFDreiSaeulen({ highlight }) {
  const steps = [
    { h: 56, w: '100%',  l: 'Gesetzliche Rente', sub: 'Grundabsicherung · staatlich', id: 'gesetz' },
    { h: 72, w: '85%',   l: 'Betriebliche Rentenbeihilfe', sub: 'Obligatorisch · bis 116 €/Monat', id: 'beihilfe' },
    { h: 92, w: '60%',   l: 'Zusatzrente „ZukunftStein"', sub: 'Freiwillig · individuell', id: 'zukunft' },
  ];
  return (
    <div style={{ padding: '10px 0 0' }}>
      <div style={{ display: 'flex', flexDirection: 'column-reverse', alignItems: 'center', gap: 3 }}>
        {steps.map(s => {
          const isHi = highlight === s.id;
          return (
            <div key={s.id} style={{
              width: s.w,
              height: s.h,
              border: `1px solid ${isHi ? wfColors.ink : wfColors.line}`,
              background: isHi ? wfColors.fillDark : wfColors.fill,
              padding: '10px 16px',
              position: 'relative',
            }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>{s.l}</div>
              <div style={{ fontSize: 11, color: wfColors.mute, marginTop: 4 }}>{s.sub}</div>
              {isHi && <div style={{ position: 'absolute', top: 6, right: 10, fontSize: 9, fontFamily: 'ui-monospace,Menlo,monospace', color: wfColors.ink, letterSpacing: '.1em', textTransform: 'uppercase' }}>diese Seite</div>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function WFAufEinenBlick({ items }) {
  return (
    <WFModule label="Auf einen Blick">
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${items.length}, 1fr)`, gap: 14 }}>
        {items.map(i => (
          <div key={i.h} style={{ border: `1px solid ${wfColors.line}`, padding: 16 }}>
            <div style={{ fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', color: wfColors.mute }}>{i.h}</div>
            <div style={{ fontSize: 20, fontWeight: 700, marginTop: 8 }}>{i.v}</div>
          </div>
        ))}
      </div>
    </WFModule>
  );
}

function WFVergleichsTabelle() {
  const rows = [
    ['Status',         'Obligatorisch · kraft Tarifvertrag',    'Freiwillig · individuell'],
    ['Beitrag',        '1,4 % Bruttolohn · Arbeitgeber zahlt',   'Entgeltumwandlung · Arbeitnehmer'],
    ['Leistung',       'bis 116 €/Monat zusätzlich',             'abhängig vom Sparbeitrag'],
    ['Steuer',         '—',                                      'Steuer- und beitragsfrei'],
    ['Abschluss',      'Automatisch durch Anstellung',           'Beratungstermin + Vereinbarung'],
  ];
  return (
    <WFModule label="Vergleich Betriebliche Rentenbeihilfe ↔ ZukunftStein" req="C-06">
      <div style={{ border: `1px solid ${wfColors.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr 1.2fr', background: wfColors.fill, padding: '10px 14px', fontSize: 11, letterSpacing: '.1em', textTransform: 'uppercase', color: wfColors.mute, fontWeight: 700 }}>
          <div></div>
          <div>Betriebliche Rentenbeihilfe</div>
          <div>ZukunftStein</div>
        </div>
        {rows.map(r => (
          <div key={r[0]} style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr 1.2fr', padding: '14px', borderTop: `1px solid ${wfColors.line}`, fontSize: 13, alignItems: 'center' }}>
            <div style={{ fontWeight: 700 }}>{r[0]}</div>
            <div style={{ color: wfColors.mute }}>{r[1]}</div>
            <div style={{ color: wfColors.mute }}>{r[2]}</div>
          </div>
        ))}
      </div>
    </WFModule>
  );
}

// =============================================================
// Betriebliche Rentenbeihilfe
// =============================================================
function WFRentenbeihilfe() {
  return (
    <WFFrame label="05 Produktseite · Betriebliche Rentenbeihilfe" path="/leistungen/betriebliche-rentenbeihilfe" width={1280} note="Paar-Struktur mit ZukunftStein · gleiche Modul-Abfolge">
      <WFNav active="Leistungen" />
      <div style={{ padding: 28 }}>
        <WFModule label="Produkt-Hero">
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24, alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: wfColors.mute, marginBottom: 10 }}>Betriebliche Rentenbeihilfe</div>
              <WFHeading level={1} width="90%" />
              <WFHeading level={1} width="55%" />
              <div style={{ height: 8 }}></div>
              <WFLines count={2} widths={['85%', '60%']} />
            </div>
            <WFBox kind="image" h={220} label="Produktbild · Steinmetzhandwerk" />
          </div>
        </WFModule>

        <WFAufEinenBlick items={[
          { h: 'Für wen', v: 'Alle Beschäftigten' },
          { h: 'Beitrag', v: 'x % des Lohns · arbeitgeberfinanziert' },
          { h: 'Leistung', v: 'bis 116 €/Monat' },
          { h: 'Ab wann', v: 'nach 60 Monaten' },
        ]} />

        <WFModule label="Einordnung — Drei Säulen der Altersvorsorge" req="C-06">
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 28, alignItems: 'center' }}>
            <WFDreiSaeulen highlight="beihilfe" />
            <div>
              <WFHeading level={3} width="70%" />
              <WFLines count={4} />
              <WFAnnot style={{ marginTop: 8 }}>Analog SOKA-Bau-Schema · Terminologie aus dem Flyer.</WFAnnot>
            </div>
          </div>
        </WFModule>

        <WFModule label="So funktioniert es">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, alignItems: 'flex-start' }}>
            {['Arbeitgeber zahlt Beitrag ein', 'Arbeitnehmer sammelt Punkte', 'Auszahlung im Alter'].map((s, i) => (
              <div key={s}>
                <WFBox h={120} label="Diagramm-Schritt" />
                <div style={{ fontSize: 13, fontWeight: 700, marginTop: 10 }}>0{i + 1} · {s}</div>
                <WFLines count={2} />
              </div>
            ))}
          </div>
        </WFModule>

        <WFModule label="Für Arbeitnehmer · Für Betriebe · Für Rentner · Für Hinterbliebene">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {[
              { t: 'Für Arbeitnehmer',   link: '/fuer-versicherte' },
              { t: 'Für Betriebe',       link: '/fuer-betriebe' },
              { t: 'Für Rentner',        link: '/fuer-rentner' },
              { t: 'Für Hinterbliebene', link: '/fuer-hinterbliebene' },
            ].map(({ t, link }) => (
              <WFLink key={t} to={link} style={{ display: 'block' }}>
                <div style={{ border: `1px solid ${wfColors.line}`, padding: 20 }}>
                  <WFHeading level={3}>{t}</WFHeading>
                  <WFLines count={3} />
                  <div style={{ marginTop: 12, fontSize: 11, textDecoration: 'underline' }}>
                    → Zur Seite {t}
                  </div>
                </div>
              </WFLink>
            ))}
          </div>
          <WFAnnot style={{ marginTop: 10 }}>„Für Hinterbliebene" verlinkt auf eigene Zielgruppen-Seite — kein doppelter Content.</WFAnnot>
        </WFModule>

        <WFModule label="Transparenz" req="C-08">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {['Non-Profit', 'Keine Vertriebskosten', 'BaFin-beaufsichtigt'].map(t => (
              <div key={t} style={{ border: `1px solid ${wfColors.line}`, padding: 16 }}>
                <div style={{ fontSize: 13, fontWeight: 700 }}>{t}</div>
                <WFLines count={2} />
              </div>
            ))}
          </div>
        </WFModule>

        <WFModule label="Zahlen">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {[
              { h: '116 €', s: 'max. Beihilfe pro Monat' },
              { h: '360', s: 'Monate für Vollrente' },
              { h: 'quartalsweise', s: 'Auszahlung' },
            ].map(k => (
              <div key={k.h} style={{ textAlign: 'left' }}>
                <div style={{ fontSize: 28, fontWeight: 800 }}>{k.h}</div>
                <div style={{ fontSize: 11, color: wfColors.mute }}>{k.s}</div>
              </div>
            ))}
          </div>
        </WFModule>

        <WFFaqBlock title="Häufige Fragen Betriebliche Rentenbeihilfe" />
        <WFVergleichsTabelle />
        <WFKontaktBlock />
      </div>
      <WFFooter />
    </WFFrame>
  );
}

// =============================================================
// ZukunftStein
// =============================================================
function WFZukunftStein() {
  return (
    <WFFrame label="06 Produktseite · ZukunftStein" path="/leistungen/zukunftstein" width={1280} note="Zentrale Vertriebsseite · Hebel 1 & 2 · F-04">
      <WFNav active="Leistungen" />
      <div style={{ padding: 28 }}>
        <WFModule label="Produkt-Hero">
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24, alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: wfColors.mute, marginBottom: 10 }}>Tarifliche Zusatzrente</div>
              <WFHeading level={1} width="95%" />
              <WFHeading level={1} width="70%" />
              <div style={{ height: 8 }}></div>
              <WFLines count={2} widths={['80%', '55%']} />
              <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
                <WFLink to="/leistungen/zukunftstein"><WFButton label="Rechenbeispiel ansehen" /></WFLink>
                <WFLink to="/service/kontakt"><WFButton label="Beratungstermin" kind="ghost" /></WFLink>
              </div>
            </div>
            <WFBox kind="image" h={220} label={'Emotionales Bild · „Mehr rausholen"'} />
          </div>
        </WFModule>

        <WFModule label="Was ist ZukunftStein?">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <div>
              <WFHeading level={3} width="70%" />
              <WFLines count={4} />
              <WFAnnot style={{ marginTop: 8 }}>Entgeltumwandlung in 3 Sätzen — keine Fachsprache.</WFAnnot>
            </div>
            <WFBox h={160} label="Prinzip-Grafik Brutto → Netto → Vorsorge" />
          </div>
        </WFModule>

        <WFModule label="Einordnung — Drei Säulen der Altersvorsorge" req="C-06">
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 28, alignItems: 'center' }}>
            <WFDreiSaeulen highlight="zukunft" />
            <div>
              <WFHeading level={3} width="70%" />
              <WFLines count={4} />
              <WFAnnot style={{ marginTop: 8 }}>Gleiche Stufen-Grafik wie Betriebliche Rentenbeihilfe · ZukunftStein oben hervorgehoben.</WFAnnot>
            </div>
          </div>
        </WFModule>

        <WFModule label="Rechenbeispiel · interaktiv" req="F-11 · R-05">
          <WFAnnot style={{ marginBottom: 8 }}>Slider-Dummy · Berechnungslogik ZVK-intern</WFAnnot>
          <div style={{ border: `1px solid ${wfColors.line}`, padding: 22 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
              <div>
                <div style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: wfColors.mute, marginBottom: 14 }}>Ihre Eingaben</div>
                {['Alter', 'Bruttolohn', 'Sparbeitrag pro Monat'].map(l => (
                  <div key={l} style={{ marginBottom: 16 }}>
                    <div style={{ fontSize: 12, marginBottom: 6 }}>{l}</div>
                    <div style={{ height: 6, background: wfColors.fill, position: 'relative' }}>
                      <div style={{ position: 'absolute', left: '40%', top: -6, width: 18, height: 18, background: wfColors.ink, borderRadius: '50%' }}></div>
                    </div>
                  </div>
                ))}
                <WFAnnot>Compliance-Klärung offen · siehe R-05.</WFAnnot>
              </div>
              <div style={{ background: wfColors.fill, padding: 20 }}>
                <div style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: wfColors.mute }}>Ihr voraussichtlicher Vorteil</div>
                <div style={{ fontSize: 44, fontWeight: 800, margin: '12px 0' }}>+ xx €</div>
                <div style={{ fontSize: 12, color: wfColors.mute, marginBottom: 14 }}>pro Monat im Alter (Beispielrechnung)</div>
                <WFLines count={2} />
              </div>
            </div>
          </div>
        </WFModule>

        <WFModule label="Vorteile für Arbeitnehmer" req="Hebel 1">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <div>
              <WFHeading level={3} width="60%" />
              <WFLines count={3} />
              <div style={{ marginTop: 12, fontSize: 11, textDecoration: 'underline' }}>↓ Informationen für Ihren Arbeitgeber</div>
            </div>
            <WFBox kind="image" h={200} label="Beispiel-Flyer (Preview)" />
          </div>
        </WFModule>

        <WFModule label="Vorteile für Betriebe" req="Hebel 2">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <WFBox h={160} label="Aufwand vs. Vorteil · Grafik" />
            <div>
              <WFHeading level={3} width="70%" />
              <WFLines count={4} />
              <div style={{ marginTop: 12, fontSize: 11, textDecoration: 'underline' }}>↓ Informationen für Ihre Angestellten</div>
              <WFAnnot style={{ marginTop: 8 }}>Verwaltungsaufwand minimal · Bindung zum Betrieb stärken.</WFAnnot>
            </div>
          </div>
        </WFModule>

        <WFModule label="So kommen Sie rein · Prozess">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {['Beratungstermin', 'Abschluss über den Betrieb', 'Beitrag startet automatisch'].map((s, i) => (
              <div key={s} style={{ border: `1px solid ${wfColors.line}`, padding: 18 }}>
                <div style={{ fontSize: 28, fontWeight: 800, color: wfColors.line }}>0{i + 1}</div>
                <div style={{ fontSize: 14, fontWeight: 700, marginTop: 6 }}>{s}</div>
                <WFLines count={2} />
              </div>
            ))}
          </div>
        </WFModule>

        <WFVergleichsTabelle />
        <WFFaqBlock title="Häufige Fragen ZukunftStein" />
      </div>
      <WFFooter />
    </WFFrame>
  );
}

// =============================================================
// Vergleich (eigene Seite)
// =============================================================
function WFVergleich() {
  return (
    <WFFrame label="07 Vergleich beider Produkte" path="/leistungen/vergleich" width={1280} note="Direkter Gegenüberstellungs-Hub · verweist auf beide Produktseiten">
      <WFNav active="Leistungen" />
      <div style={{ padding: 28 }}>
        <WFModule label="Seiten-Hero">
          <WFHeading level={1} width="70%" />
          <WFHeading level={1} width="40%" />
          <div style={{ height: 8 }}></div>
          <WFLines count={2} widths={['80%', '55%']} />
        </WFModule>

        <WFModule label="Drei-Säulen-Grafik · neutrale Ansicht" req="C-06">
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 28, alignItems: 'center' }}>
            <WFDreiSaeulen />
            <div>
              <WFHeading level={3} width="70%" />
              <WFLines count={4} />
            </div>
          </div>
        </WFModule>

        <WFVergleichsTabelle />

        <WFModule label="Entscheidungshilfe — Welches Produkt betrifft mich?">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
            {[
              { t: 'Sie sind angestellt im Steinmetzhandwerk', a: 'Dann erhalten Sie automatisch die Betriebliche Rentenbeihilfe.', to: '/leistungen/betriebliche-rentenbeihilfe' },
              { t: 'Sie möchten zusätzlich vorsorgen',          a: 'ZukunftStein ist optional und lohnt sich insbesondere bei …', to: '/leistungen/zukunftstein' },
            ].map(c => (
              <WFLink key={c.t} to={c.to} style={{ display: 'block' }}>
                <div style={{ border: `1px solid ${wfColors.line}`, padding: 20 }}>
                  <WFHeading level={3}>{c.t}</WFHeading>
                  <WFLines count={2} />
                  <div style={{ marginTop: 12, fontSize: 11, textDecoration: 'underline' }}>→ Passende Produktseite</div>
                </div>
              </WFLink>
            ))}
          </div>
        </WFModule>

        <WFFaqBlock title="Häufige Fragen zum Vergleich" />
      </div>
      <WFFooter />
    </WFFrame>
  );
}

Object.assign(window, { WFRentenbeihilfe, WFZukunftStein, WFVergleich, WFDreiSaeulen, WFVergleichsTabelle });