cms.c2sgmbh/src/blocks/ProcessStepsBlock.ts

import type { Block } from 'payload'

/**
 * Process Steps Block
 * Zeigt Prozess-Schritte / "So funktioniert es"
 */
export const ProcessStepsBlock: Block = {
  slug: 'process-steps-block',
  labels: {
    singular: 'Prozess/Schritte',
    plural: 'Prozess/Schritte',
  },
  fields: [
    {
      name: 'title',
      type: 'text',
      defaultValue: 'So funktioniert es',
      label: 'Überschrift',
      localized: true,
    },
    {
      name: 'subtitle',
      type: 'text',
      label: 'Untertitel',
      localized: true,
    },
    {
      name: 'layout',
      type: 'select',
      defaultValue: 'horizontal',
      label: 'Layout',
      options: [
        { label: 'Horizontal (nebeneinander)', value: 'horizontal' },
        { label: 'Vertikal (untereinander)', value: 'vertical' },
        { label: 'Alternierend (Zickzack)', value: 'alternating' },
        { label: 'Mit Verbindungslinien', value: 'connected' },
        { label: 'Timeline-Stil', value: 'timeline' },
      ],
    },
    {
      name: 'showNumbers',
      type: 'checkbox',
      defaultValue: true,
      label: 'Schritt-Nummern anzeigen',
    },
    {
      name: 'showIcons',
      type: 'checkbox',
      defaultValue: true,
      label: 'Icons anzeigen',
    },
    {
      name: 'steps',
      type: 'array',
      label: 'Schritte',
      minRows: 2,
      maxRows: 10,
      fields: [
        {
          name: 'title',
          type: 'text',
          required: true,
          label: 'Schritt-Titel',
          localized: true,
        },
        {
          name: 'description',
          type: 'textarea',
          label: 'Beschreibung',
          localized: true,
        },
        {
          name: 'icon',
          type: 'text',
          label: 'Icon',
          admin: {
            description: 'Emoji oder Icon-Name (z.B. "📞", "✓", "1")',
          },
        },
        {
          name: 'image',
          type: 'upload',
          relationTo: 'media',
          label: 'Bild (optional)',
        },
      ],
    },
    {
      name: 'cta',
      type: 'group',
      label: 'Call-to-Action',
      fields: [
        {
          name: 'show',
          type: 'checkbox',
          defaultValue: false,
          label: 'CTA anzeigen',
        },
        {
          name: 'label',
          type: 'text',
          defaultValue: 'Jetzt starten',
          label: 'Button-Text',
          localized: true,
          admin: {
            condition: (data, siblingData) => siblingData?.show,
          },
        },
        {
          name: 'href',
          type: 'text',
          label: 'Link',
          admin: {
            condition: (data, siblingData) => siblingData?.show,
          },
        },
        {
          name: 'variant',
          type: 'select',
          defaultValue: 'default',
          label: 'Button-Stil',
          options: [
            { label: 'Standard', value: 'default' },
            { label: 'Ghost', value: 'ghost' },
            { label: 'Light', value: 'light' },
          ],
          admin: {
            condition: (data, siblingData) => siblingData?.show,
          },
        },
      ],
    },
    {
      name: 'backgroundColor',
      type: 'select',
      defaultValue: 'white',
      label: 'Hintergrund',
      options: [
        { label: 'Weiß', value: 'white' },
        { label: 'Hell (Grau)', value: 'light' },
        { label: 'Dunkel', value: 'dark' },
      ],
    },
  ],
}