<?php
if (!defined('ABSPATH')) exit;

add_action('init', function () {
  if (!function_exists('register_block_pattern')) return;

  register_block_pattern_category('juconnect', [
    'label' => __('JuConnect', 'juconnect'),
  ]);

  register_block_pattern('juconnect/hero-pagehead', [
    'title'       => __('Hero (Styleguide)', 'juconnect'),
    'categories'  => ['juconnect'],
    'description' => __('Hero wie im lokalen Styleguide (einspaltig).', 'juconnect'),
    'content'     => <<<HTML
<!-- wp:group {"className":"hero"} -->
<div class="wp-block-group hero"><!-- wp:group {"className":"hero__inner"} -->
<div class="wp-block-group hero__inner"><!-- wp:heading {"level":1,"className":"h1"} -->
<h1 class="h1">Hilfen zur Erziehung - strukturiert und verlaesslich</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"lead"} -->
<p class="lead">Informationen fuer oeffentliche Traeger und Kooperationspartner.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"row wrap"} -->
<div class="wp-block-buttons row wrap"><!-- wp:button {"className":"btn--primary"} -->
<div class="wp-block-button btn--primary"><a class="wp-block-button__link wp-element-button" href="#kontakt">Kontakt</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"btn--secondary"} -->
<div class="wp-block-button btn--secondary"><a class="wp-block-button__link wp-element-button" href="#leistungen">Leistungen</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
  ]);

  register_block_pattern('juconnect/section-grid-3', [
    'title'      => __('Section + 3 Cards', 'juconnect'),
    'categories' => ['juconnect'],
    'content'    => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">Leistungen</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Kurz erklaert - Details findest du auf den Unterseiten.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"grid grid--3"} -->
<div class="wp-block-group grid grid--3"><!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
<h4 class="h4">Card 1</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Kurzbeschreibung.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
<h4 class="h4">Card 2</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Kurzbeschreibung.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
<h4 class="h4">Card 3</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Kurzbeschreibung.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
  ]);

  register_block_pattern('juconnect/steps-4', [
    'title'      => __('Ablauf (4 Steps)', 'juconnect'),
    'categories' => ['juconnect'],
    'content'    => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">So laeuft's ab</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Transparent und nachvollziehbar.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"grid grid--4"} -->
<div class="wp-block-group grid grid--4">
<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
<h4 class="h4">1. Anfrage</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Kontakt aufnehmen, kurz klaeren.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
<h4 class="h4">2. Erstgespraech</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Ziele, Rahmen, Erwartungen.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
<h4 class="h4">3. Start</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Plan + regelmaessige Termine.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
<h4 class="h4">4. Review</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Fortschritt messen, nachsteuern.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
</div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
  ]);

  register_block_pattern('juconnect/steps-4-with-graphic-right', [
    'title'      => __('Ablauf (4 Steps) + Grafik rechts', 'juconnect'),
    'categories' => ['juconnect'],
    'content'    => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">So laeuft's ab</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Transparent und nachvollziehbar.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"grid grid--2"} -->
<div class="wp-block-group grid grid--2"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:group {"className":"grid grid--4"} -->
<div class="wp-block-group grid grid--4">
<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
<h4 class="h4">1. Anfrage</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Kontakt aufnehmen, kurz klaeren.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
<h4 class="h4">2. Erstgespraech</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Ziele, Rahmen, Erwartungen.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
<h4 class="h4">3. Start</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Plan + regelmaessige Termine.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
<h4 class="h4">4. Review</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Fortschritt messen, nachsteuern.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
</div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"img img--rounded"} -->
<figure class="wp-block-image size-large img img--rounded"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='500'%3E%3Crect width='100%25' height='100%25' fill='%23eef1f3'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23607384' font-family='Arial' font-size='28'%3EGrafik ersetzen%3C/text%3E%3C/svg%3E" alt=""/></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Rechts: Grafik oder Bild.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
  ]);

  register_block_pattern('juconnect/steps-4-with-graphic-left', [
    'title'      => __('Ablauf (4 Steps) + Grafik links', 'juconnect'),
    'categories' => ['juconnect'],
    'content'    => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">So laeuft's ab</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Transparent und nachvollziehbar.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"grid grid--2"} -->
<div class="wp-block-group grid grid--2"><!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"img img--rounded"} -->
<figure class="wp-block-image size-large img img--rounded"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='500'%3E%3Crect width='100%25' height='100%25' fill='%23eef1f3'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23607384' font-family='Arial' font-size='28'%3EGrafik ersetzen%3C/text%3E%3C/svg%3E" alt=""/></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Links: Grafik oder Bild.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:group {"className":"grid grid--4"} -->
<div class="wp-block-group grid grid--4">
<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
<h4 class="h4">1. Anfrage</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Kontakt aufnehmen, kurz klaeren.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
<h4 class="h4">2. Erstgespraech</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Ziele, Rahmen, Erwartungen.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
<h4 class="h4">3. Start</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Plan + regelmaessige Termine.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
<h4 class="h4">4. Review</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Fortschritt messen, nachsteuern.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
</div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
  ]);

  register_block_pattern('juconnect/single-card-with-graphic-right', [
    'title'       => __('Info Card + Grafik rechts', 'juconnect'),
    'categories'  => ['juconnect'],
    'description' => __('Zweispaltig: links eine einzelne Inhaltskarte, rechts Bild/Grafik.', 'juconnect'),
    'content'     => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">Leistung im Ueberblick</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Kerninformationen klar und ruhig dargestellt.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"grid grid--2"} -->
<div class="wp-block-group grid grid--2"><!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":3,"className":"h3"} -->
<h3 class="h3">Wann ist dieses Angebot passend?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Fuer Traeger mit klaren Zielen, transparenten Ablaeufen und verbindlicher Kommunikation.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"className":"list"} -->
<ul class="list"><li>klare Zustaendigkeiten</li><li>regelmaessige Rueckmeldungen</li><li>dokumentierte Entwicklung</li></ul>
<!-- /wp:list -->

<!-- wp:buttons {"className":"row wrap"} -->
<div class="wp-block-buttons row wrap"><!-- wp:button {"className":"btn--primary"} -->
<div class="wp-block-button btn--primary"><a class="wp-block-button__link wp-element-button" href="#kontakt">Kontakt aufnehmen</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"btn--secondary"} -->
<div class="wp-block-button btn--secondary"><a class="wp-block-button__link wp-element-button" href="#details">Mehr Details</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"img img--rounded"} -->
<figure class="wp-block-image size-large img img--rounded"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='560'%3E%3Crect width='100%25' height='100%25' fill='%23eef1f3'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23607384' font-family='Arial' font-size='28'%3EGrafik ersetzen%3C/text%3E%3C/svg%3E" alt=""/></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Rechts: Illustration oder Projektfoto.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
  ]);

  register_block_pattern('juconnect/single-card-with-graphic-left', [
    'title'       => __('Grafik links + Info Card', 'juconnect'),
    'categories'  => ['juconnect'],
    'description' => __('Zweispaltig: links Bild/Grafik, rechts eine einzelne Inhaltskarte.', 'juconnect'),
    'content'     => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">Leistung im Ueberblick</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Kerninformationen klar und ruhig dargestellt.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"grid grid--2"} -->
<div class="wp-block-group grid grid--2"><!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"img img--rounded"} -->
<figure class="wp-block-image size-large img img--rounded"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='560'%3E%3Crect width='100%25' height='100%25' fill='%23eef1f3'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23607384' font-family='Arial' font-size='28'%3EGrafik ersetzen%3C/text%3E%3C/svg%3E" alt=""/></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Links: Illustration oder Projektfoto.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":3,"className":"h3"} -->
<h3 class="h3">Wann ist dieses Angebot passend?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Fuer Traeger mit klaren Zielen, transparenten Ablaeufen und verbindlicher Kommunikation.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"className":"list"} -->
<ul class="list"><li>klare Zustaendigkeiten</li><li>regelmaessige Rueckmeldungen</li><li>dokumentierte Entwicklung</li></ul>
<!-- /wp:list -->

<!-- wp:buttons {"className":"row wrap"} -->
<div class="wp-block-buttons row wrap"><!-- wp:button {"className":"btn--primary"} -->
<div class="wp-block-button btn--primary"><a class="wp-block-button__link wp-element-button" href="#kontakt">Kontakt aufnehmen</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"btn--secondary"} -->
<div class="wp-block-button btn--secondary"><a class="wp-block-button__link wp-element-button" href="#details">Mehr Details</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
  ]);

  register_block_pattern('juconnect/section-grid-2', [
    'title'       => __('Section + 2 Cards', 'juconnect'),
    'categories'  => ['juconnect'],
    'description' => __('Standard-Zweispalter fuer Inhalte oder Angebotskarten.', 'juconnect'),
    'content'     => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">Schwerpunkte</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Zwei zentrale Themen kompakt nebeneinander.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"grid grid--2"} -->
<div class="wp-block-group grid grid--2"><!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":3,"className":"h3"} -->
<h3 class="h3">Begleitung</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Verlaessliche Begleitung mit klarer Struktur fuer alle Beteiligten.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a class="link" href="#!">Mehr erfahren</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":3,"className":"h3"} -->
<h3 class="h3">Koordination</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Abgestimmte Kommunikation zwischen Traegern, Familien und Fachkraeften.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a class="link" href="#!">Mehr erfahren</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
  ]);

  register_block_pattern('juconnect/kpi-overview-3', [
    'title'       => __('KPI Ueberblick (3 Karten)', 'juconnect'),
    'categories'  => ['juconnect'],
    'description' => __('Drei Kennzahlenkarten fuer Verlaesslichkeit, Bearbeitungszeit und Reichweite.', 'juconnect'),
    'content'     => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">Fakten im Ueberblick</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Beispielwerte fuer eine transparente Darstellung.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"grid grid--3"} -->
<div class="wp-block-group grid grid--3"><!-- wp:group {"className":"card card--tight"} -->
<div class="wp-block-group card card--tight"><!-- wp:group {"className":"kpi"} -->
<div class="wp-block-group kpi"><!-- wp:paragraph {"className":"kpi__label"} -->
<p class="kpi__label">Antwortzeit</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"kpi__value"} -->
<p class="kpi__value">&lt; 48h</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--tight"} -->
<div class="wp-block-group card card--tight"><!-- wp:group {"className":"kpi"} -->
<div class="wp-block-group kpi"><!-- wp:paragraph {"className":"kpi__label"} -->
<p class="kpi__label">Abgestimmte Plaene</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"kpi__value"} -->
<p class="kpi__value">95%</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--tight"} -->
<div class="wp-block-group card card--tight"><!-- wp:group {"className":"kpi"} -->
<div class="wp-block-group kpi"><!-- wp:paragraph {"className":"kpi__label"} -->
<p class="kpi__label">Kooperationspartner</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"kpi__value"} -->
<p class="kpi__value">24</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
  ]);

  register_block_pattern('juconnect/contact-cta-split', [
    'title'       => __('Kontakt CTA (Split)', 'juconnect'),
    'categories'  => ['juconnect'],
    'description' => __('Linke Infokarte mit Aktionen, rechte Karte mit Kontaktfakten.', 'juconnect'),
    'content'     => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"grid grid--2"} -->
<div class="wp-block-group grid grid--2"><!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:paragraph {"className":"badge badge--info"} -->
<p class="badge badge--info">Naechster Schritt</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">Unverbindlich Kontakt aufnehmen</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Wir melden uns zeitnah und klaeren den passenden Rahmen fuer Ihr Anliegen.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"row wrap"} -->
<div class="wp-block-buttons row wrap"><!-- wp:button {"className":"btn--primary"} -->
<div class="wp-block-button btn--primary"><a class="wp-block-button__link wp-element-button" href="#kontakt">Anfrage senden</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"btn--ghost"} -->
<div class="wp-block-button btn--ghost"><a class="wp-block-button__link wp-element-button" href="#telefon">Telefonisch sprechen</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":3,"className":"h3"} -->
<h3 class="h3">Kontaktzeiten</h3>
<!-- /wp:heading -->

<!-- wp:group {"className":"kpi"} -->
<div class="wp-block-group kpi"><!-- wp:paragraph {"className":"kpi__label"} -->
<p class="kpi__label">Mo - Fr</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"kpi__value"} -->
<p class="kpi__value">08:00 - 17:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"kpi"} -->
<div class="wp-block-group kpi"><!-- wp:paragraph {"className":"kpi__label"} -->
<p class="kpi__label">E-Mail</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"kpi__value"} -->
<p class="kpi__value">kontakt@juconnect.de</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"callout callout--info"} -->
<div class="wp-block-group callout callout--info"><!-- wp:paragraph {"className":"callout__title"} -->
<p class="callout__title">Hinweis</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"callout__text"} -->
<p class="callout__text">Bitte Anlass und Rueckrufzeit kurz angeben.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
  ]);

  register_block_pattern('juconnect/downloads-table', [
    'title'       => __('Downloads (Tabelle)', 'juconnect'),
    'categories'  => ['juconnect'],
    'description' => __('Downloadbereich mit Tabelle im Styleguide-Look.', 'juconnect'),
    'content'     => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">Downloads</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Dokumente, Vorlagen und Nachweise auf einen Blick.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card card--pad layout__table"} -->
<div class="wp-block-group card card--pad layout__table"><!-- wp:html -->
<div class="tablewrap">
  <table class="table">
    <thead>
      <tr><th>Dokument</th><th>Status</th><th>Aktion</th></tr>
    </thead>
    <tbody>
      <tr><td>Leistungsbeschreibung</td><td><span class="badge badge--info">Entwurf</span></td><td><a class="link" href="#!">Oeffnen</a></td></tr>
      <tr><td>Datenschutz</td><td><span class="badge badge--success">Final</span></td><td><a class="link" href="#!">Oeffnen</a></td></tr>
      <tr><td>Ansprechpartner</td><td><span class="badge badge--warn">Update</span></td><td><a class="link" href="#!">Oeffnen</a></td></tr>
    </tbody>
  </table>
</div>
<!-- /wp:html --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
  ]);

  register_block_pattern('juconnect/process-flow-flex', [
    'title'       => __('Prozessablauf (flexibel, horizontal)', 'juconnect'),
    'categories'  => ['juconnect'],
    'description' => __('Flexibler Ablauf mit einzeln bearbeitbaren Schritten. Schritte einfach duplizieren, verschieben oder entfernen.', 'juconnect'),
    'content'     => <<<HTML
<!-- wp:group {"className":"section ju-process-flow"} -->
<div class="wp-block-group section ju-process-flow"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">So laeuft die Zusammenarbeit ab</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Jeder Schritt ist ein einzelner Block und kann beliebig angepasst, dupliziert oder entfernt werden.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"ju-process-flow__steps"} -->
<div class="wp-block-group ju-process-flow__steps"><!-- wp:group {"className":"ju-process-step"} -->
<div class="wp-block-group ju-process-step"><!-- wp:group {"className":"ju-process-step__head"} -->
<div class="wp-block-group ju-process-step__head"><!-- wp:paragraph {"className":"ju-process-step__label"} -->
<p class="ju-process-step__label">Anfrage</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"ju-process-step__body card"} -->
<div class="wp-block-group ju-process-step__body card"><!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Kontakt aufnehmen, Anlass schildern und den Rahmen fuer die Begleitung klaeren.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"ju-process-step"} -->
<div class="wp-block-group ju-process-step"><!-- wp:group {"className":"ju-process-step__head"} -->
<div class="wp-block-group ju-process-step__head"><!-- wp:paragraph {"className":"ju-process-step__label"} -->
<p class="ju-process-step__label">Abstimmung</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"ju-process-step__body card"} -->
<div class="wp-block-group ju-process-step__body card"><!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Ziele, Rollen und Kommunikationswege gemeinsam festlegen.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"ju-process-step"} -->
<div class="wp-block-group ju-process-step"><!-- wp:group {"className":"ju-process-step__head"} -->
<div class="wp-block-group ju-process-step__head"><!-- wp:paragraph {"className":"ju-process-step__label"} -->
<p class="ju-process-step__label">Umsetzung</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"ju-process-step__body card"} -->
<div class="wp-block-group ju-process-step__body card"><!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Begleitung starten, Fortschritt transparent dokumentieren und regelmaessig nachsteuern.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
  ]);
});

