// =============================================================
// Wireframe — Startseite /
// =============================================================

function WFHome() {
  return (
    <WFFrame label="01 Startseite" path="/" width={1280} note="5-Sekunden-Orientierung · Z1 · F-01 · F-02">
      <WFNav active="" />

      {/* Hero */}
      <div style={{ padding: '28px' }}>
        <WFModule label="Hero · Mehrwert & Vertrauensbildung" req="C-04">
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24, alignItems: 'center' }}>
            <div>
              <WFHeading level={1} width="80%" />
              <WFHeading level={1} width="60%" />
              <div style={{ height: 10 }}></div>
              <WFLines count={2} widths={['90%', '65%']} />
            </div>
            <WFBox kind="image" h={240} label="Steinmetz bei der Arbeit" />
          </div>
        </WFModule>

        {/* Kennzahlen */}
        <WFModule label="Kennzahlen-Band" req="C-08">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
            {['~16.000 Versicherte', '~2.000 Betriebe', 'Seit 1970', 'BaFin-beaufsichtigt'].map(k => (
              <div key={k} style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 24, fontWeight: 700 }}>{k.split(' ')[0]}</div>
                <div style={{ fontSize: 11, color: wfColors.mute, marginTop: 4 }}>{k.split(' ').slice(1).join(' ')}</div>
              </div>
            ))}
          </div>
        </WFModule>

        {/* Persona-Kacheln */}
        <WFModule label="Unsere Leistungen — drei Persona-Kacheln" req="F-01">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            <WFPersonaTile to="/fuer-betriebe"    title="Für Betriebe" sub="Arbeitgeber · monatliche Meldung" cta="Zum Meldeportal" />
            <WFPersonaTile to="/fuer-versicherte" title="Für Versicherte" sub="Angestellte · Rente verstehen" cta="Renteninformation verstehen" />
            <WFPersonaTile to="/fuer-rentner"     title="Für Rentner" sub="Auszahlung · Bescheid · Änderungen" cta="Auszahlungstermine" />
          </div>
          <WFAnnot style={{ marginTop: 10 }}>Hinweis: „Ihre Rente ansehen" entfällt — kein digitales Portal verfügbar. Stattdessen Erklärung der Renteninformation.</WFAnnot>
        </WFModule>

        {/* Servicekacheln */}
        <WFModule label="Servicekacheln — Direkteinstieg" req="F-02">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            <WFServiceTile to="/service/meldeportal"     title="Meldeportal" ext />
            <WFServiceTile to="/service/haeufige-fragen" title="Häufige Fragen" />
            <WFServiceTile to="/service/downloads"       title="Downloads" />
            <WFServiceTile to="/service/kontakt"         title="Ansprechpartner finden" />
          </div>
          <WFAnnot style={{ marginTop: 10 }}>Abkürzung an der Hierarchie vorbei — häufigste Aufgaben direkt von der Startseite.</WFAnnot>
        </WFModule>

        {/* ZukunftStein Teaser */}
        <WFModule label="Produkt-Teaser · Zusatzrente ZukunftStein" req="F-04">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, alignItems: 'center' }}>
            <div>
              <WFHeading level={2} width="70%" />
              <WFLines count={3} />
              <div style={{ marginTop: 14 }}>
                <WFLink to="/leistungen/zukunftstein"><WFButton label="Rechenbeispiel ansehen" /></WFLink>
              </div>
            </div>
            <WFBox kind="fill" h={160} label="Rechenbeispiel-Teaser (mini)" />
          </div>
        </WFModule>

        {/* Menschen-Band */}
        <WFModule label={'Menschen-Band · „Rufen Sie mich an"'} req="F-06 · C-03">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            {[1, 2, 3, 4].map(i => (
              <div key={i} style={{ textAlign: 'center' }}>
                <WFBox kind="image" h={120} label="Mitarbeiter-Foto" />
                <div style={{ fontSize: 13, fontWeight: 700, marginTop: 8 }}>Vorname Nachname</div>
                <div style={{ fontSize: 11, color: wfColors.mute }}>Rolle · Durchwahl</div>
              </div>
            ))}
          </div>
        </WFModule>

        {/* Aktuelles */}
        <WFModule label="Aktuelles (V1 inaktiv — Modul vorbereitet)" req="F-12 · Should">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {[1, 2, 3].map(i => (
              <div key={i} style={{ border: `1px solid ${wfColors.line}`, padding: 14 }}>
                <div style={{ fontSize: 10, letterSpacing: '.1em', textTransform: 'uppercase', color: wfColors.mute }}>Datum · Kategorie</div>
                <div style={{ height: 8 }}></div>
                <WFHeading level={3} width="85%" />
                <WFLines count={2} />
              </div>
            ))}
          </div>
        </WFModule>
      </div>

      <WFFooter />
    </WFFrame>
  );
}

window.WFHome = WFHome;