// =============================================================
// Wireframe — Zielgruppen-Landings (Betriebe, Versicherte, Rentner)
// =============================================================

// ---------- Shared persona-hero + kontaktform + faq ------------
function WFPersonaHero({ title, claim, ctas = [] }) {
  // ctas can be ['label'] strings or ['label', '/to'] tuples
  return (
    <WFModule label="Persona-Hero" req="F-09">
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 24, alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: wfColors.mute, marginBottom: 10 }}>{title}</div>
          <WFHeading level={1} width="90%" />
          <WFHeading level={1} width="60%" />
          <div style={{ height: 8 }}></div>
          <WFLines count={2} widths={['80%', '60%']} />
          <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
            {ctas.map((c, i) => {
              const [label, to] = Array.isArray(c) ? c : [c, null];
              return <WFLink key={i} to={to}><WFButton label={label} kind={i === 0 ? 'primary' : 'ghost'} /></WFLink>;
            })}
          </div>
        </div>
        <WFBox kind="image" h={220} label="Persona-Bild (Betrieb / Werkstatt)" />
      </div>
    </WFModule>
  );
}

function WFKontaktBlock() {
  return (
    <WFModule label="Kontaktformular · Themenrouting" req="F-05">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        <div>
          <WFHeading level={3} width="60%" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 8 }}>
            <div style={{ height: 36, border: `1px solid ${wfColors.line}`, padding: '8px 12px', fontSize: 11, color: wfColors.mute }}>▾  Anliegen wählen …</div>
            <div style={{ height: 36, border: `1px solid ${wfColors.line}`, padding: '8px 12px', fontSize: 11, color: wfColors.mute }}>Name</div>
            <div style={{ height: 36, border: `1px solid ${wfColors.line}`, padding: '8px 12px', fontSize: 11, color: wfColors.mute }}>E-Mail</div>
            <div style={{ height: 90, border: `1px solid ${wfColors.line}`, padding: '8px 12px', fontSize: 11, color: wfColors.mute }}>Nachricht …</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 10, color: wfColors.mute }}>
              <span style={{ width: 12, height: 12, border: `1px solid ${wfColors.line}` }}></span>
              Einwilligung Datenschutz · Double-Opt-In
            </div>
            <div style={{ marginTop: 4 }}><WFButton label="Anfrage senden" /></div>
          </div>
        </div>
        <div>
          <WFHeading level={3} width="60%">Ihr Ansprechpartner</WFHeading>
          <div style={{ display: 'flex', gap: 14, marginTop: 10 }}>
            <WFBox kind="image" w={120} h={140} label="Foto" />
            <div>
              <div style={{ fontSize: 14, fontWeight: 700 }}>Vorname Nachname</div>
              <div style={{ fontSize: 11, color: wfColors.mute, marginBottom: 10 }}>Rolle</div>
              <div style={{ fontSize: 20, fontWeight: 700 }}>0xxxx / xx xx xx</div>
              <div style={{ fontSize: 11, color: wfColors.mute }}>Mo–Fr 8:00 – 16:00 Uhr</div>
            </div>
          </div>
        </div>
      </div>
    </WFModule>
  );
}

function WFFaqBlock({ title = 'Häufige Fragen' }) {
  return (
    <WFModule label="Häufige Fragen · Top-10" req="F-08">
      <WFHeading level={2}>{title}</WFHeading>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {[1, 2, 3, 4, 5, 6, 7].map(i => (
          <div key={i} style={{
            padding: '14px 4px',
            borderBottom: `1px solid ${wfColors.line}`,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            gap: 20,
          }}>
            <div style={{ flex: 1 }}><WFLines count={1} widths={[`${60 + (i * 4) % 30}%`]} /></div>
            <div style={{ fontSize: 14, color: wfColors.mute }}>+</div>
          </div>
        ))}
      </div>
      <WFLink to="/service/haeufige-fragen" style={{ marginTop: 14, fontSize: 11, textDecoration: 'underline' }}>→ Alle Fragen ansehen (ZVK A–Z)</WFLink>
    </WFModule>
  );
}

// =============================================================
// Landing Betriebe
// =============================================================
function WFLandingBetriebe() {
  return (
    <WFFrame label="02 Landing · Für Betriebe" path="/fuer-betriebe" width={1280} note="Persona Bernd · 60-Sekunden-Verständnis">
      <WFNav activePersona="Für Betriebe" />
      <div style={{ padding: 28 }}>
        <WFPersonaHero title="Für Betriebe im Steinmetzhandwerk" ctas={[['Zum Meldeportal', '/service/meldeportal'], ['Kontakt', '/service/kontakt']]} />

        <WFModule label="Das System in 3 Schritten">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {['Anmelden', 'Monatlich melden', 'Mitarbeiter profitieren'].map((s, i) => (
              <div key={s} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{ fontSize: 32, fontWeight: 800, color: wfColors.line }}>0{i + 1}</div>
                <div style={{ fontSize: 15, fontWeight: 700 }}>{s}</div>
                <WFLines count={2} />
              </div>
            ))}
          </div>
        </WFModule>

        <WFModule label="Ihr monatlicher Ablauf · Kalender" req="UC-B-01 · F-09">
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 20 }}>
            <WFBox h={200} label="Kalender-Grafik mit Fristen (monatlicher Zyklus)" />
            <div>
              <WFHeading level={3} width="60%" />
              <WFLines count={4} />
              <div style={{ marginTop: 14 }}><WFLink to="/service/meldeportal"><WFButton label="Meldeportal öffnen ↗" /></WFLink></div>
            </div>
          </div>
        </WFModule>

        <WFModule label="Beiträge & Lohnsummen" req="C-01 · R-04">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <div>
              <WFHeading level={3} width="50%" />
              <WFLines count={4} />
              <WFAnnot style={{ marginTop: 8 }}>Klartext statt AVB-Sprache. Detail-Link → AVB-PDF.</WFAnnot>
            </div>
            <WFBox h={150} label="Infografik Beitragsverteilung" />
          </div>
        </WFModule>

        <WFModule label="Ihre häufigsten Aufgaben · Use-Case-Karten" req="UC-B-01…10">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
            {[
              { label: 'Mitarbeiter anmelden', note: 'Neueintritt im Betrieb' },
              { label: 'Mitarbeiter abmelden', note: 'Austritt / Kündigung' },
              { label: 'Lohnsumme melden', note: 'Monatliche Meldepflicht' },
              { label: 'Beiträge prüfen', note: 'Abrechnung & Nachweise' },
              { label: 'Betrieb ummelden', note: 'Adresse · Bankverbindung' },
            ].map(({ label, note }) => (
              <div key={label} style={{ border: `1px solid ${wfColors.line}`, padding: 14, minHeight: 110 }}>
                <div style={{ width: 24, height: 24, background: wfColors.fill, marginBottom: 10 }}></div>
                <div style={{ fontSize: 13, fontWeight: 700 }}>{label}</div>
                <div style={{ fontSize: 10, color: wfColors.mute, marginTop: 6 }}>{note}</div>
              </div>
            ))}
          </div>
        </WFModule>

        <WFModule label="Material für Ihre Mitarbeiter" req="F-07 · UC-B-10 · C-09">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {['Flyer PDF', 'Werkstatt-Plakat', 'Erklärvideo'].map(m => (
              <div key={m} style={{ border: `1px solid ${wfColors.line}`, padding: 14 }}>
                <WFBox h={100} label="Preview" />
                <div style={{ fontSize: 13, fontWeight: 700, marginTop: 10 }}>{m}</div>
                <div style={{ fontSize: 11, color: wfColors.mute, marginTop: 4, textDecoration: 'underline' }}>↓ Download</div>
              </div>
            ))}
          </div>
        </WFModule>

        <WFModule label="ZukunftStein anbieten · Teaser" req="F-04 · Hebel 2">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 20, alignItems: 'center' }}>
            <div>
              <WFHeading level={2} width="60%" />
              <WFLines count={2} widths={['85%', '60%']} />
            </div>
            <WFLink to="/leistungen/zukunftstein"><WFButton label="Mehr zu ZukunftStein" /></WFLink>
          </div>
        </WFModule>

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

// =============================================================
// Landing Versicherte
// =============================================================
function WFLandingVersicherte() {
  return (
    <WFFrame label="03 Landing · Für Versicherte" path="/fuer-versicherte" width={1280} note={'Persona Melanie · „Du hast schon etwas — und kannst mehr"'}>
      <WFNav activePersona="Für Versicherte" />
      <div style={{ padding: 28 }}>
        <WFPersonaHero title="Für Versicherte" ctas={[['Meine Rente verstehen', '/leistungen/betriebliche-rentenbeihilfe'], ['Kontakt', '/service/kontakt']]} />

        <WFModule label="Das bekommen Sie — automatisch (Betriebliche Rentenbeihilfe)" req="C-01 · C-06">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, alignItems: 'center' }}>
            <div>
              <WFHeading level={2} width="75%" />
              <WFLines count={4} />
              <WFLink to="/leistungen/betriebliche-rentenbeihilfe" style={{ marginTop: 14, fontSize: 11, textDecoration: 'underline' }}>→ Alles zur Betrieblichen Rentenbeihilfe</WFLink>
            </div>
            <WFBox h={180} label="Drei-Säulen-Grafik (Teaser)" />
          </div>
        </WFModule>

        <WFModule label="Das können Sie zusätzlich tun (ZukunftStein)" req="F-04 · F-11">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <div>
              <WFHeading level={2} width="70%" />
              <WFLines count={3} />
              <div style={{ marginTop: 14 }}><WFLink to="/leistungen/zukunftstein"><WFButton label="Rechenbeispiel" /></WFLink></div>
            </div>
            <WFBox h={180} label="Mini-Rechner (Slider + Ergebnis)" />
          </div>
        </WFModule>

        <WFModule label="Lebenslagen · Karten" req="F-13 · UC-M-03…09">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
            {['Jobwechsel', 'Krankheit', 'Elternzeit', 'Umzug', 'Ausland'].map(l => (
              <div key={l} style={{ border: `1px solid ${wfColors.line}`, padding: 14, minHeight: 120 }}>
                <div style={{ width: 24, height: 24, background: wfColors.fill, marginBottom: 10 }}></div>
                <div style={{ fontSize: 13, fontWeight: 700 }}>{l}</div>
                <div style={{ fontSize: 10, color: wfColors.mute, marginTop: 6 }}>Konkrete Antwort in 3 Sätzen</div>
              </div>
            ))}
          </div>
        </WFModule>

        <WFModule label="Ihre Renteninformation verstehen" req="UC-M-02">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <WFBox h={220} label="Musterschreiben mit Erklär-Markern" />
            <div>
              <WFHeading level={3} width="60%" />
              <WFLines count={4} />
            </div>
          </div>
        </WFModule>

        <WFModule label="Ihr Weg zur Rente · Zeitstrahl">
          <div style={{ position: 'relative', padding: '30px 0' }}>
            <div style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: 2, background: wfColors.line }}></div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', position: 'relative' }}>
              {['Beitragszeit', 'Antrag stellen', 'Prüfung', 'Auszahlung'].map((s, i) => (
                <div key={s} style={{ textAlign: 'center' }}>
                  <div style={{ width: 14, height: 14, borderRadius: '50%', background: wfColors.ink, margin: '0 auto' }}></div>
                  <div style={{ fontSize: 12, fontWeight: 700, marginTop: 10 }}>{s}</div>
                </div>
              ))}
            </div>
          </div>
        </WFModule>

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

// =============================================================
// Landing Rentner
// =============================================================
function WFLandingRentner() {
  return (
    <WFFrame label="04 Landing · Für Rentner" path="/fuer-rentner" width={1280} note="Persona Heinz · groß, ruhig, Telefon zuerst">
      <WFNav activePersona="Für Rentner" />
      <div style={{ padding: 28 }}>
        <WFModule label="Direktkontakt-Hero · Telefon zuerst" req="F-06">
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 24, alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: wfColors.mute, marginBottom: 10 }}>Für Rentner</div>
              <WFHeading level={1} width="90%" />
              <div style={{ fontSize: 44, fontWeight: 800, margin: '18px 0 6px', letterSpacing: '.02em' }}>0xxxx / xx xx xx</div>
              <div style={{ fontSize: 14, color: wfColors.mute }}>Sprechzeiten Mo–Fr 8:00 – 16:00 · Sie erreichen direkt Ihre Ansprechpartnerin.</div>
            </div>
            <div style={{ textAlign: 'center' }}>
              <WFBox kind="image" h={200} label="Ansprechpartner-Foto (groß)" />
              <div style={{ fontSize: 15, fontWeight: 700, marginTop: 10 }}>Vorname Nachname</div>
              <div style={{ fontSize: 12, color: wfColors.mute }}>Rentenbezug · Durchwahl</div>
            </div>
          </div>
        </WFModule>

        <WFModule label="Auszahlungstermine · Quartalskalender" req="UC-H-03">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            {['Q1', 'Q2', 'Q3', 'Q4'].map((q, i) => (
              <div key={q} style={{ border: `1px solid ${wfColors.line}`, padding: 18, textAlign: 'center' }}>
                <div style={{ fontSize: 11, color: wfColors.mute, letterSpacing: '.1em', textTransform: 'uppercase' }}>{q}</div>
                <div style={{ fontSize: 28, fontWeight: 800, marginTop: 8 }}>— .—.</div>
                <div style={{ fontSize: 12, color: wfColors.mute, marginTop: 4 }}>Auszahlungstag</div>
              </div>
            ))}
          </div>
        </WFModule>

        <WFModule label="Bescheid-Viewer · mit Erklär-Overlays" req="F-14 · UC-H-02">
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 20 }}>
            <div style={{ position: 'relative' }}>
              <WFBox h={300} label="Musterbescheid (Seitenvorschau)" />
              <div style={{ position: 'absolute', top: 40, left: 40, background: wfColors.annotBg, border: `1px solid ${wfColors.line}`, padding: 6, fontSize: 10, fontFamily: 'ui-monospace,Menlo,monospace' }}>① Punktestand</div>
              <div style={{ position: 'absolute', top: 140, left: 120, background: wfColors.annotBg, border: `1px solid ${wfColors.line}`, padding: 6, fontSize: 10, fontFamily: 'ui-monospace,Menlo,monospace' }}>② Auszahlungsbetrag</div>
            </div>
            <div>
              <WFHeading level={3} width="70%" />
              <WFLines count={5} />
              <WFAnnot style={{ marginTop: 10 }}>Statt reiner PDF-Download-Liste: interaktive Erklärung im Browser.</WFAnnot>
            </div>
          </div>
        </WFModule>

        <WFModule label="Änderungen melden · Formulare + Telefon" req="UC-H-01 · UC-H-04">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {['Adresse ändern', 'Bankverbindung ändern', 'Namensänderung melden'].map(t => (
              <div key={t} style={{ border: `1px solid ${wfColors.line}`, padding: 18 }}>
                <div style={{ fontSize: 15, fontWeight: 700 }}>{t}</div>
                <WFLines count={2} />
                <div style={{ display: 'flex', gap: 10, marginTop: 14, fontSize: 11 }}>
                  <span style={{ textDecoration: 'underline' }}>↓ Formular</span>
                  <span style={{ textDecoration: 'underline' }}>✆ Telefon</span>
                </div>
              </div>
            ))}
          </div>
        </WFModule>

        <WFModule label="Hinterbliebene · eigener Pfad" req="UC-ANG-01…04">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <div>
              <WFHeading level={3} width="60%" />
              <WFLines count={3} />
              <WFAnnot style={{ marginTop: 8 }}>Behutsamer Ton · ruhige Typografie.</WFAnnot>
              <WFLink to="/fuer-hinterbliebene" style={{ marginTop: 14, fontSize: 12, textDecoration: 'underline' }}>→ Zur Seite Für Hinterbliebene</WFLink>
            </div>
            <WFBox kind="image" h={160} label="" />
          </div>
        </WFModule>

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

// =============================================================
// Landing Hinterbliebene
// =============================================================
function WFLandingHinterbliebene() {
  return (
    <WFFrame label="04b Landing · Für Hinterbliebene" path="/fuer-hinterbliebene" width={1280} note="Behutsamer Ton · Todesfall melden · Anspruch prüfen">
      <WFNav activePersona="Für Rentner" />
      <div style={{ padding: 28 }}>

        <WFModule label="Hero · ruhig, direkt" req="UC-ANG-01">
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 24, alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: wfColors.mute, marginBottom: 10 }}>Für Hinterbliebene</div>
              <WFHeading level={1} width="85%" />
              <WFHeading level={1} width="55%" />
              <div style={{ height: 8 }}></div>
              <WFLines count={2} widths={['80%', '60%']} />
              <div style={{ marginTop: 18 }}>
                <WFLink to="/service/kontakt"><WFButton label="Todesfall melden" kind="primary" /></WFLink>
              </div>
              <WFAnnot style={{ marginTop: 10 }}>Ton: behutsam, klar, keine Bürokratiesprache. Schritt-für-Schritt-Führung.</WFAnnot>
            </div>
            <WFBox kind="image" h={220} label="Ruhiges, würdevolles Bild" />
          </div>
        </WFModule>

        <WFModule label="Was jetzt zu tun ist · 3 Schritte" req="UC-ANG-01…02">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {[
              { s: 'Todesfall melden', n: 'Telefonisch oder per Formular — wir begleiten Sie.' },
              { s: 'Unterlagen einreichen', n: 'Sterbeurkunde, Trauschein, ggf. Geburtsurkunden.' },
              { s: 'Prüfung & Auszahlung', n: 'Wir prüfen den Anspruch und informieren Sie schriftlich.' },
            ].map(({ s, n }, i) => (
              <div key={s}>
                <div style={{ fontSize: 32, fontWeight: 800, color: wfColors.line }}>0{i + 1}</div>
                <div style={{ fontSize: 15, fontWeight: 700, marginTop: 6 }}>{s}</div>
                <div style={{ fontSize: 11, color: wfColors.mute, marginTop: 6 }}>{n}</div>
              </div>
            ))}
          </div>
        </WFModule>

        <WFModule label="Wer hat Anspruch?" req="UC-ANG-01 · C-01">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {['Ehepartner / Lebenspartner', 'Kinder (bis 18 J.)', 'Waisen (bis 27 J.)'].map(t => (
              <div key={t} style={{ border: `1px solid ${wfColors.line}`, padding: 18 }}>
                <div style={{ width: 24, height: 24, background: wfColors.fill, marginBottom: 10 }}></div>
                <div style={{ fontSize: 13, fontWeight: 700 }}>{t}</div>
                <WFLines count={2} />
              </div>
            ))}
          </div>
          <WFAnnot style={{ marginTop: 10 }}>Anspruchsvoraussetzungen in Klartext — kein Verweis auf AVB-Paragraphen.</WFAnnot>
        </WFModule>

        <WFModule label="Benötigte Unterlagen · Checkliste" req="UC-ANG-02">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
            {['Sterbeurkunde', 'Trauschein / Partnerschaftsurkunde', 'Geburtsurkunden (Kinder)', 'Kontoverbindung'].map(t => (
              <div key={t} style={{ border: `1px solid ${wfColors.line}`, padding: 14, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <div style={{ width: 14, height: 14, border: `1px solid ${wfColors.line}`, flexShrink: 0, marginTop: 2 }}></div>
                <div style={{ fontSize: 12 }}>{t}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 12 }}>
            <WFLink to="/service/downloads"><WFButton label="↓ Checkliste als PDF" kind="ghost" /></WFLink>
          </div>
        </WFModule>

        <WFModule label="Direktkontakt · Telefon zuerst" req="F-06">
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 24, alignItems: 'center' }}>
            <div>
              <WFHeading level={3} width="60%" />
              <div style={{ fontSize: 36, fontWeight: 800, margin: '14px 0 6px' }}>0xxxx / xx xx xx</div>
              <div style={{ fontSize: 13, color: wfColors.mute }}>Mo–Fr 8:00 – 16:00 · Sie erreichen direkt Ihre Ansprechpartnerin.</div>
              <div style={{ marginTop: 14 }}><WFLink to="/service/kontakt"><WFButton label="Formular Todesfall melden" /></WFLink></div>
            </div>
            <div style={{ textAlign: 'center' }}>
              <WFBox kind="image" h={180} label="Ansprechperson-Foto" />
              <div style={{ fontSize: 14, fontWeight: 700, marginTop: 10 }}>Vorname Nachname</div>
              <div style={{ fontSize: 11, color: wfColors.mute }}>Hinterbliebene · Durchwahl</div>
            </div>
          </div>
        </WFModule>

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

Object.assign(window, { WFLandingBetriebe, WFLandingVersicherte, WFLandingRentner, WFLandingHinterbliebene, WFPersonaHero, WFKontaktBlock, WFFaqBlock });