// =============================================================
// Wireframe — Über die ZVK + Service-Bereich
// =============================================================

// -------- Über die ZVK -----------------------------------------
function WFUeberUns() {
  return (
    <WFFrame label="08 Über die ZVK" path="/ueber-uns" width={1280} note="Vertrauen durch Transparenz · Z1">
      <WFNav active="Über die ZVK" />
      <div style={{ padding: 28 }}>
        <WFModule label="Auftrag & Geschichte">
          <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 }}>Seit 1970</div>
              <WFHeading level={1} width="80%" />
              <WFHeading level={1} width="50%" />
              <div style={{ height: 8 }}></div>
              <WFLines count={3} widths={['90%', '75%', '60%']} />
            </div>
            <WFBox kind="image" h={220} label="Historisches Bild · Gründung" />
          </div>
        </WFModule>

        <WFModule label="Zeitstrahl · Meilensteine">
          <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(5, 1fr)', position: 'relative' }}>
              {['1970', '198x', '199x', '20xx', 'Heute'].map(y => (
                <div key={y} style={{ textAlign: 'center' }}>
                  <div style={{ width: 14, height: 14, borderRadius: '50%', background: wfColors.ink, margin: '0 auto' }}></div>
                  <div style={{ fontSize: 14, fontWeight: 700, marginTop: 10 }}>{y}</div>
                  <div style={{ fontSize: 10, color: wfColors.mute }}>Meilenstein</div>
                </div>
              ))}
            </div>
          </div>
        </WFModule>

        <WFModule label="Unser Team · Foto-Galerie" req="C-03 · F-06">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
            {Array.from({ length: 12 }).map((_, i) => (
              <div key={i} style={{ textAlign: 'center' }}>
                <WFBox kind="image" h={120} label="" />
                <div style={{ fontSize: 12, fontWeight: 700, marginTop: 6 }}>Name</div>
                <div style={{ fontSize: 10, color: wfColors.mute }}>Rolle · Durchwahl</div>
              </div>
            ))}
          </div>
          <WFAnnot style={{ marginTop: 12 }}>Filter: Zielgruppen-Zuständigkeit (Betriebe · Versicherte · Rentner).</WFAnnot>
        </WFModule>

        <WFModule label="Zahlen & Fakten" req="C-08">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            {[
              { h: '~16.000', s: 'Versicherte' },
              { h: '~2.000', s: 'Betriebe' },
              { h: 'xx Mio €', s: 'ausgezahlte Leistungen /Jahr' },
              { h: '55+ Jahre', s: 'Tradition' },
            ].map(k => (
              <div key={k.h} style={{ border: `1px solid ${wfColors.line}`, padding: 18 }}>
                <div style={{ fontSize: 26, fontWeight: 800 }}>{k.h}</div>
                <div style={{ fontSize: 11, color: wfColors.mute, marginTop: 4 }}>{k.s}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 14, fontSize: 11, textDecoration: 'underline' }}>→ Jahresbericht ansehen (PDF)</div>
        </WFModule>

        <WFModule label="Aufsicht & Transparenz" req="R-04">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {[
              { t: 'BaFin-Aufsicht', s: 'Bundesanstalt für Finanzdienstleistungsaufsicht' },
              { t: 'Tarifvertragsparteien', s: 'Gewerkschaft · Arbeitgeber' },
              { t: 'Aufsichtsrat', s: 'Paritätisch besetzt' },
            ].map(c => (
              <div key={c.t} style={{ border: `1px solid ${wfColors.line}`, padding: 18 }}>
                <div style={{ fontSize: 14, fontWeight: 700 }}>{c.t}</div>
                <div style={{ fontSize: 11, color: wfColors.mute, marginTop: 4 }}>{c.s}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 14, display: 'flex', gap: 18, fontSize: 11 }}>
            <span style={{ textDecoration: 'underline' }}>↓ AVB (PDF)</span>
            <span style={{ textDecoration: 'underline' }}>↓ Geschäftsbericht</span>
          </div>
        </WFModule>

        <WFModule label="Partner">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            {['BBW', 'Innungen', 'Partner 3', 'Partner 4'].map(p => (
              <WFBox key={p} h={80} label={p} />
            ))}
          </div>
        </WFModule>
      </div>
      <WFFooter />
    </WFFrame>
  );
}

// -------- Service Übersicht ------------------------------------
function WFServiceHome() {
  return (
    <WFFrame label="09 Service · Übersicht" path="/service" width={1280} note="Aufgaben-orientierter Hub · ersetzt alte Downloads-Liste">
      <WFNav active="Service" />
      <div style={{ padding: 28 }}>
        <WFModule label="Hero · Was möchten Sie tun?">
          <WFHeading level={1} width="70%" />
          <WFLines count={1} widths={['55%']} />
        </WFModule>

        <WFModule label="Aufgaben-Kacheln">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {[
              ['Lohnsumme melden',          '/service/meldeportal'],
              ['Adresse ändern',            '/fuer-rentner'],
              ['Bescheid anfordern',        '/service/kontakt'],
              ['Beratung zu ZukunftStein',  '/leistungen/zukunftstein'],
              ['Rente beantragen',          '/service/kontakt'],
              ['Todesfall melden',          '/fuer-hinterbliebene'],
            ].map(([t, to]) => (
              <WFLink key={t} to={to} style={{ display: 'block' }}>
                <div style={{ border: `1px solid ${wfColors.line}`, padding: 18, minHeight: 110 }}>
                  <div style={{ width: 22, height: 22, background: wfColors.fill, marginBottom: 14 }}></div>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{t}</div>
                  <div style={{ fontSize: 10, color: wfColors.mute, marginTop: 6 }}>Zielgruppe · Dauer · Kanal</div>
                </div>
              </WFLink>
            ))}
          </div>
        </WFModule>

        <WFModule label="Meldeportal (extern) · großer Einstieg" req="F-09">
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24, alignItems: 'center', border: `1px solid ${wfColors.line}`, padding: 22 }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: wfColors.mute }}>Für Betriebe</div>
              <WFHeading level={2} width="80%" />
              <WFLines count={2} />
              <div style={{ marginTop: 14 }}><WFLink to="/service/meldeportal"><WFButton label="Meldeportal öffnen ↗" /></WFLink></div>
            </div>
            <WFBox h={160} label="Screenshot Meldeportal" />
          </div>
        </WFModule>

        <WFModule label="Formulare & Downloads · kategorisiert" req="F-07">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {['Für Betriebe', 'Für Versicherte', 'Für Rentner'].map(c => (
              <WFLink key={c} to="/service/downloads" style={{ display: 'block' }}>
                <div style={{ border: `1px solid ${wfColors.line}`, padding: 16 }}>
                  <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 10 }}>{c}</div>
                  {[1, 2, 3].map(i => (
                    <div key={i} style={{ padding: '8px 0', borderTop: `1px solid ${wfColors.line}`, fontSize: 11, display: 'flex', justifyContent: 'space-between', color: wfColors.mute }}>
                      <span>Formular-Name</span><span>↓</span>
                    </div>
                  ))}
                </div>
              </WFLink>
            ))}
          </div>
        </WFModule>

        <WFModule label="Häufige Fragen · Einstieg ZVK A–Z" req="F-08">
          <WFLink to="/service/haeufige-fragen">
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, border: `1px solid ${wfColors.line}`, padding: 18 }}>
              <div style={{ flex: 1, height: 44, border: `1px solid ${wfColors.line}`, padding: '12px 14px', fontSize: 12, color: wfColors.mute }}>🔍  Frage oder Stichwort suchen …</div>
              <div style={{ fontSize: 11, textDecoration: 'underline' }}>A–Z-Ansicht</div>
            </div>
          </WFLink>
        </WFModule>

        <WFKontaktBlock />
      </div>
      <WFFooter />
    </WFFrame>
  );
}

// -------- Meldeportal (Info-Seite vor dem externen Portal) -----
function WFMeldeportal() {
  return (
    <WFFrame label="10 Service · Meldeportal" path="/service/meldeportal" width={1280} note="Info-Seite vor Sprung ins externe Portal">
      <WFNav active="Service" />
      <div style={{ padding: 28 }}>
        <WFModule label="Hero">
          <WFHeading level={1} width="70%" />
          <WFLines count={2} widths={['70%', '50%']} />
          <div style={{ marginTop: 18 }}>
            <WFLink to="/service/meldeportal"><WFButton label="Jetzt Meldung starten ↗" /></WFLink>
            <WFAnnot style={{ marginTop: 10 }}>Öffnet externes Portal in neuem Tab.</WFAnnot>
          </div>
        </WFModule>

        <WFModule label="Was Sie brauchen · Checkliste">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {['Zugangsdaten Meldeportal', 'Bruttolohnsummen des Vormonats', 'Mitarbeiterstand', 'BAV-Vereinbarungen'].map(i => (
              <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13 }}>
                <span style={{ width: 14, height: 14, border: `1px solid ${wfColors.line}` }}></span>{i}
              </div>
            ))}
          </div>
        </WFModule>

        <WFModule label="So läuft eine monatliche Meldung · Schritt für Schritt">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            {['Anmelden', 'Lohnsummen eingeben', 'Prüfen', 'Abschicken'].map((s, i) => (
              <div key={s} style={{ border: `1px solid ${wfColors.line}`, padding: 16 }}>
                <div style={{ fontSize: 24, fontWeight: 800, color: wfColors.line }}>0{i + 1}</div>
                <div style={{ fontSize: 13, fontWeight: 700, marginTop: 4 }}>{s}</div>
                <WFLines count={2} />
              </div>
            ))}
          </div>
        </WFModule>

        <WFModule label="Fristen & Kalender" req="UC-B-01">
          <WFBox h={180} label="Jahreskalender mit Fristen (monatlich)" />
        </WFModule>

        <WFModule label="Hilfe & Support">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {['Anleitung (PDF)', 'Erklärvideo', 'Hotline Betriebe'].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>
      </div>
      <WFFooter />
    </WFFrame>
  );
}

// -------- FAQ / ZVK A–Z -----------------------------------------
function WFFaqPage() {
  const clusters = ['Alle', 'Betriebe', 'Versicherte', 'Rentner', 'Produkte', 'Rechtliches'];
  return (
    <WFFrame label="11 Service · Häufige Fragen / ZVK A–Z" path="/service/haeufige-fragen" width={1280} note="Vollansicht · Cluster + A–Z · F-08">
      <WFNav active="Service" />
      <div style={{ padding: 28 }}>
        <WFModule label="Suche & Ansichtswechsel">
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 20 }}>
            <div style={{ height: 54, border: `1px solid ${wfColors.line}`, padding: '16px 18px', fontSize: 14, color: wfColors.mute }}>🔍  Frage, Stichwort oder Begriff suchen …</div>
            <div style={{ display: 'flex', border: `1px solid ${wfColors.line}` }}>
              <div style={{ flex: 1, textAlign: 'center', padding: '16px 0', fontSize: 12, fontWeight: 700, background: wfColors.fill }}>Cluster-Ansicht</div>
              <div style={{ flex: 1, textAlign: 'center', padding: '16px 0', fontSize: 12, color: wfColors.mute }}>A–Z</div>
            </div>
          </div>
        </WFModule>

        <WFModule label="Cluster-Filter">
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {clusters.map((c, i) => (
              <div key={c} style={{
                padding: '8px 14px',
                border: `1px solid ${i === 0 ? wfColors.ink : wfColors.line}`,
                background: i === 0 ? wfColors.ink : 'transparent',
                color: i === 0 ? wfColors.paper : wfColors.ink,
                fontSize: 12,
                fontWeight: 700,
              }}>{c}</div>
            ))}
          </div>
        </WFModule>

        <WFModule label="Fragen-Liste">
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {Array.from({ length: 12 }).map((_, i) => (
              <div key={i} style={{
                padding: '16px 4px',
                borderBottom: `1px solid ${wfColors.line}`,
                display: 'grid',
                gridTemplateColumns: '90px 1fr 30px',
                gap: 14,
                alignItems: 'center',
              }}>
                <div style={{ fontSize: 10, letterSpacing: '.12em', textTransform: 'uppercase', color: wfColors.mute }}>{['Betriebe', 'Versicherte', 'Rentner', 'Produkte'][i % 4]}</div>
                <WFLines count={1} widths={[`${55 + (i * 3) % 35}%`]} />
                <div style={{ textAlign: 'right', fontSize: 14, color: wfColors.mute }}>+</div>
              </div>
            ))}
          </div>
        </WFModule>

        <WFModule label="Nicht gefunden? · Kontakt-Bridge">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 20, alignItems: 'center', border: `1px solid ${wfColors.line}`, padding: 22 }}>
            <div>
              <WFHeading level={3}>Ihre Frage war nicht dabei?</WFHeading>
              <WFLines count={1} widths={['60%']} />
            </div>
            <WFLink to="/service/kontakt"><WFButton label="Ansprechpartner finden" /></WFLink>
          </div>
        </WFModule>
      </div>
      <WFFooter />
    </WFFrame>
  );
}

// -------- Downloads --------------------------------------------
function WFDownloads() {
  const rows = [
    ['Flyer Rentenbeihilfe',     'Versicherte', 'PDF', '1.2 MB'],
    ['Flyer ZukunftStein',       'Versicherte', 'PDF', '1.1 MB'],
    ['Werkstatt-Plakat A3',      'Betriebe',    'PDF', '3.4 MB'],
    ['AVB · Allgemeine Versicherungsbedingungen', 'Rechtliches', 'PDF', '450 KB'],
    ['Meldeportal-Anleitung',    'Betriebe',    'PDF', '2.8 MB'],
    ['Antrag Rentenbezug',       'Rentner',     'PDF', '320 KB'],
    ['Adressänderung',           'Rentner',     'PDF', '120 KB'],
    ['Bankverbindung ändern',    'Rentner',     'PDF', '120 KB'],
  ];
  return (
    <WFFrame label="12 Service · Downloads" path="/service/downloads" width={1280} note="Kategorisiert statt flache Liste · F-07">
      <WFNav active="Service" />
      <div style={{ padding: 28 }}>
        <WFModule label="Hero">
          <WFHeading level={1} width="60%" />
          <WFLines count={1} widths={['50%']} />
        </WFModule>

        <WFModule label="Filter">
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            {['Alle', 'Betriebe', 'Versicherte', 'Rentner', 'Rechtliches'].map((c, i) => (
              <div key={c} style={{
                padding: '8px 14px',
                border: `1px solid ${i === 0 ? wfColors.ink : wfColors.line}`,
                background: i === 0 ? wfColors.ink : 'transparent',
                color: i === 0 ? wfColors.paper : wfColors.ink,
                fontSize: 12,
                fontWeight: 700,
              }}>{c}</div>
            ))}
          </div>
        </WFModule>

        <WFModule label="Download-Tabelle">
          <div style={{ border: `1px solid ${wfColors.line}` }}>
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 80px', padding: '12px 16px', background: wfColors.fill, fontSize: 10, letterSpacing: '.1em', textTransform: 'uppercase', color: wfColors.mute, fontWeight: 700 }}>
              <div>Dokument</div><div>Zielgruppe</div><div>Format</div><div>Größe</div><div></div>
            </div>
            {rows.map((r, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 80px', padding: '14px 16px', 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 style={{ color: wfColors.mute }}>{r[3]}</div>
                <div style={{ textAlign: 'right', fontSize: 11, textDecoration: 'underline' }}>↓ laden</div>
              </div>
            ))}
          </div>
        </WFModule>
      </div>
      <WFFooter />
    </WFFrame>
  );
}

// -------- Kontakt ----------------------------------------------
function WFKontakt() {
  return (
    <WFFrame label="13 Service · Kontakt" path="/service/kontakt" width={1280} note="Zentrale Kontaktseite · Themenrouting + Team + Anfahrt">
      <WFNav active="Service" />
      <div style={{ padding: 28 }}>
        <WFModule label="Hero">
          <WFHeading level={1} width="50%" />
          <WFLines count={1} widths={['60%']} />
        </WFModule>

        <WFModule label="Direktwege · Anruf / E-Mail / Vor Ort">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {[
              { t: 'Telefon', h: '0xxxx / xx xx xx', s: 'Mo–Fr 8:00 – 16:00' },
              { t: 'E-Mail', h: 'info@zvk-steinmetz.de', s: 'Antwort innerhalb 2 Werktagen' },
              { t: 'Geschäftsstelle', h: 'Straße · PLZ · Stadt', s: 'Termine nach Vereinbarung' },
            ].map(c => (
              <div key={c.t} style={{ border: `1px solid ${wfColors.line}`, padding: 20 }}>
                <div style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: wfColors.mute }}>{c.t}</div>
                <div style={{ fontSize: 18, fontWeight: 800, marginTop: 10 }}>{c.h}</div>
                <div style={{ fontSize: 11, color: wfColors.mute, marginTop: 6 }}>{c.s}</div>
              </div>
            ))}
          </div>
        </WFModule>

        <WFKontaktBlock />

        <WFModule label="Team · nach Zuständigkeit filterbar" req="F-06">
          <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
            {['Alle', 'Betriebe', 'Versicherte', 'Rentner'].map((c, i) => (
              <div key={c} style={{
                padding: '6px 12px',
                border: `1px solid ${i === 0 ? wfColors.ink : wfColors.line}`,
                background: i === 0 ? wfColors.ink : 'transparent',
                color: i === 0 ? wfColors.paper : wfColors.ink,
                fontSize: 11,
                fontWeight: 700,
              }}>{c}</div>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} style={{ border: `1px solid ${wfColors.line}`, padding: 14 }}>
                <WFBox kind="image" h={140} label="" />
                <div style={{ fontSize: 13, fontWeight: 700, marginTop: 10 }}>Name</div>
                <div style={{ fontSize: 11, color: wfColors.mute }}>Rolle · Durchwahl</div>
              </div>
            ))}
          </div>
        </WFModule>

        <WFModule label="Anfahrt · Karte">
          <WFBox h={260} label="Karten-Einbettung · Adresse · Öffi-Anbindung" />
        </WFModule>
      </div>
      <WFFooter />
    </WFFrame>
  );
}

Object.assign(window, { WFUeberUns, WFServiceHome, WFMeldeportal, WFFaqPage, WFDownloads, WFKontakt });