{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "http://schema.mydesignsystem.com/hero.schema.json",
  "title": "Hero",
  "description": "Hero component for displaying a prominent visual section with headline, subheadline, text, and call-to-action buttons.",
  "type": "object",
  "properties": {
    "headline": {
      "title": "Headline",
      "description": "Headline for the visual",
      "type": "string",
      "format": "markdown"
    },
    "sub": {
      "title": "Module Subheadline",
      "description": "Subheadline below the module headline",
      "type": "string",
      "format": "markdown"
    },
    "text": {
      "title": "Module Text",
      "description": "Info text for the module element",
      "type": "string",
      "format": "markdown"
    },
    "highlightText": {
      "type": "boolean",
      "title": "Highlight Text",
      "description": "Visually highlight the text",
      "default": false
    },
    "colorNeutral": {
      "title": "Color Neutral",
      "description": "Make the text and buttons color neutral",
      "default": false,
      "type": "boolean"
    },
    "height": {
      "title": "Height",
      "type": "string",
      "enum": [
        "small",
        "default",
        "fullImage",
        "fullScreen"
      ],
      "default": "default"
    },
    "textbox": {
      "type": "boolean",
      "title": "Textbox",
      "default": true,
      "description": "Toggle wether you want your text to be displayed within in box"
    },
    "mobileTextBelow": {
      "type": "boolean",
      "title": "Mobile Text Below",
      "description": "On mobile devices, display the text below the image",
      "default": true
    },
    "invertText": {
      "type": "boolean",
      "title": "Invert Text",
      "description": "Invert the text color for better contrast against the background",
      "default": false
    },
    "buttons": {
      "type": "array",
      "items": {
        "title": "Button",
        "type": "object",
        "properties": {
          "label": {
            "type": "string",
            "title": "Label",
            "description": "Text content to display inside the button",
            "examples": [
              "Book a meeting"
            ]
          },
          "icon": {
            "type": "string",
            "format": "icon",
            "title": "Icon",
            "description": "Choose an icon"
          },
          "url": {
            "type": "string",
            "title": "URL",
            "description": "The URL to link to when the button is clicked",
            "format": "uri"
          }
        },
        "additionalProperties": false
      }
    },
    "skipButton": {
      "type": "boolean",
      "title": "Skip Button",
      "description": "Add a skip button to the hero module",
      "default": false
    },
    "overlay": {
      "title": "Grid layer",
      "description": "Enable grid layer",
      "type": "boolean",
      "default": false
    },
    "image": {
      "title": "Background image",
      "description": "Sources of background images for different screen sizes",
      "type": "object",
      "required": [
        "srcMobile"
      ],
      "properties": {
        "srcMobile": {
          "title": "Mobile image source",
          "description": "Background image source for small screens",
          "type": "string",
          "format": "image",
          "examples": [
            "https://picsum.photos/seed/kdsvisual/640/270"
          ]
        },
        "srcTablet": {
          "title": "Tablet image source",
          "description": "Background image source for medium screens",
          "type": "string",
          "format": "image",
          "examples": [
            "https://picsum.photos/seed/kdsvisual/1280/540"
          ]
        },
        "srcDesktop": {
          "title": "Desktop image source",
          "description": "Background image source for large screens",
          "type": "string",
          "format": "image",
          "examples": [
            "https://picsum.photos/seed/kdsvisual/1920/810"
          ]
        },
        "src": {
          "title": "Optional source",
          "description": "Override for img tag of picture element, if needed",
          "type": "string",
          "format": "image",
          "examples": [
            "https://picsum.photos/seed/kdsvisual/640/270"
          ]
        },
        "indent": {
          "title": "Image indent",
          "description": "Choose to indent the image horizontally on small screens",
          "type": "string",
          "enum": [
            "none",
            "left",
            "right"
          ],
          "default": "none"
        },
        "alt": {
          "title": "Alt text",
          "description": "Alt text to display for picture",
          "type": "string"
        }
      },
      "additionalProperties": false
    },
    "textPosition": {
      "title": "Module aligment",
      "description": "Choose the alginment of the module content",
      "enum": [
        "center",
        "below",
        "offset",
        "left",
        "right",
        "corner",
        "bottom"
      ],
      "type": "string",
      "default": "left"
    }
  },
  "additionalProperties": false
}