import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";

export type EditorPropertiesSidebarHelpProperty = {
  label: string;
  description: string;
};

export type EditorPropertiesSidebarHelpContent = {
  title: string;
  description: string;
  properties?: EditorPropertiesSidebarHelpProperty[];
};

export type EditorPropertiesSidebarMessages = {
  panelTitle: string;

  actionDeleteBlock: string;
  actionDuplicateBlock: string;
  actionHelp: string;

  modalCloseLabel: string;
  modalPropertiesSectionTitle: string;

  text: EditorPropertiesSidebarHelpContent;
  button: EditorPropertiesSidebarHelpContent;
  image: EditorPropertiesSidebarHelpContent;
  list: EditorPropertiesSidebarHelpContent;
  divider: EditorPropertiesSidebarHelpContent;
  section: EditorPropertiesSidebarHelpContent;
  video: EditorPropertiesSidebarHelpContent;
  form: EditorPropertiesSidebarHelpContent;
  formInput: EditorPropertiesSidebarHelpContent;
  formSelect: EditorPropertiesSidebarHelpContent;
  formCheckbox: EditorPropertiesSidebarHelpContent;
  formRadio: EditorPropertiesSidebarHelpContent;
  fallback: EditorPropertiesSidebarHelpContent;
};

const EDITOR_PROPERTIES_SIDEBAR_MESSAGES: Record<AppLocale, EditorPropertiesSidebarMessages> = {
  en: {
    panelTitle: "Properties",

    actionDeleteBlock: "Delete block",
    actionDuplicateBlock: "Duplicate block",
    actionHelp: "HELP",

    modalCloseLabel: "Close",
    modalPropertiesSectionTitle: "Property details",

    text: {
      title: "Text block tutorial",
      description:
        "This is the basic block for headings and body text.\n\nAdd a text block from the left sidebar, then double-click the text on the canvas or edit it in the properties panel. You can adjust alignment, size, color and more to create various text styles.",
      properties: [
        {
          label: "Selected text block content",
          description:
            "The actual sentence that will be rendered for this block. It is the same content as double-clicking the text on the canvas, and line breaks will be preserved as you type.",
        },
        {
          label: "Alignment",
          description:
            "Controls whether the text is aligned to the left, center, or right. Normal body text usually uses left alignment, while hero titles or short punchy phrases often look better centered.",
        },
        {
          label: "Text style (underline/strikethrough/italic)",
          description:
            "Use underline to make text look like a link or to highlight a word, strikethrough for things like original prices, and italic when you want a slightly different tone for quotes or product names.",
        },
        {
          label: "Font size",
          description:
            "Controls the font size in px. You can start from the XS~3XL presets and then fine-tune the value with the slider or number input.",
        },
        {
          label: "Letter spacing",
          description:
            "Adjusts the spacing between characters. Body text works well with normal or slightly wide spacing, while all-caps short titles often look better with a bit more letter spacing.",
        },
        {
          label: "Line height",
          description:
            "Controls the space between lines. For body text, a range around 1.5–1.7 is easy to read, while very short titles can be tightened to around 1.25 so they feel more compact.",
        },
        {
          label: "Weight",
          description:
            "Controls font weight from 100 to 900. For example: 400 for normal body, 600 for section headings, and around 700 for strong CTA phrases.",
        },
        {
          label: "Text color",
          description:
            "Sets the text color from a palette or HEX code. Use a dark, high-contrast color for body text and your brand color for highlighted phrases.",
        },
        {
          label: "Block background color",
          description:
            "Sets the background color for the card/box that contains the text. It is useful for notices, highlight boxes, and warning messages when combined with a soft background color.",
        },
        {
          label: "Max width",
          description:
            "Prevents a single line from becoming too long by limiting the maximum line length. For example, \"Body width (60ch)\" works well for paragraphs, and \"Narrow (40ch)\" is good for card or banner copy.",
        },
      ],
    },

    button: {
      title: "Button block tutorial",
      description:
        "Use this block to create CTA buttons for form submission or link navigation. Configure the label, link (URL), alignment, and color/size to build the action you need.",
      properties: [
        {
          label: "Button text",
          description:
            "The label that appears on the button. For example: 'Get started now', 'Contact us'. Short, action-oriented phrases usually work best.",
        },
        {
          label: "Horizontal padding",
          description:
            "Controls the left and right inner spacing of the button. Larger values create a wider button that stands out more.",
        },
        {
          label: "Vertical padding",
          description:
            "Controls the top and bottom inner spacing. Increasing this value makes the button taller and more prominent.",
        },
        {
          label: "Button link",
          description:
            "The URL or anchor (#section) that the button navigates to when clicked. It can point to an external page, an in-page section, or a form submission endpoint.",
        },
        {
          label: "Alignment",
          description:
            "Decides whether the button is placed on the left, center, or right within its container. Primary CTAs are often centered.",
        },
        {
          label: "Text color",
          description:
            "The color of the button label. Make sure it has enough contrast against the fill color for good readability.",
        },
        {
          label: "Style",
          description:
            "The overall visual style of the button. \"Solid\" is a filled button, \"Outline\" has only a border, and \"Ghost\" has no fill, only text/border.",
        },
        {
          label: "Fill color",
          description:
            "The fill color used in solid-style buttons. Using your primary brand color or accent color works well.",
        },
        {
          label: "Border color",
          description:
            "The border color used in outline/ghost styles. Pick a color that has enough contrast against the background.",
        },
        {
          label: "Border radius",
          description:
            "Controls how rounded the button corners are. \"None\" is a sharp rectangle, while \"Fully rounded\" creates a pill-shaped button.",
        },
        {
          label: "Button width mode / fixed width",
          description:
            "Controls whether the button grows to full container width, fits its content automatically, or uses a fixed px width.",
        },
        {
          label: "Button font size",
          description:
            "The font size of the button label. Important CTAs usually look better when the label is slightly larger than nearby text.",
        },
        {
          label: "Line height / letter spacing",
          description:
            "Controls the line height and letter spacing for the button label. If the text looks cramped, increase letter spacing and slightly widen line height for multi-line labels.",
        },
      ],
    },

    image: {
      title: "Image block tutorial",
      description:
        "Use this block to place banners, thumbnails, and descriptive images. Enter an external image URL or choose an uploaded asset, then adjust width/alignment/border radius to fit the layout.",
      properties: [
        {
          label: "Image source",
          description:
            "Choose whether the image comes from an external URL or an uploaded asset.",
        },
        {
          label: "Image URL / file upload",
          description:
            "In URL mode, paste an external image address. In upload mode, select a local image, which will be served as `/api/image/:id`.",
        },
        {
          label: "Alt text",
          description:
            "A short text description for when the image cannot be loaded or for screen readers. Describe what the image conveys in one or two sentences.",
        },
        {
          label: "Card background color",
          description:
            "The background color of the card that wraps the image. This is useful for transparent PNG icons or logos to make them stand out.",
        },
        {
          label: "Alignment",
          description:
            "Controls whether the image is aligned to the left, center, or right inside the container.",
        },
        {
          label: "Width mode / fixed width",
          description:
            "Choose between auto width (fit content) and a fixed width in px. For thumbnail grids, fixed widths often create a more stable layout.",
        },
        {
          label: "Border radius",
          description:
            "Controls how rounded the image card corners are. Avatars/icons often use fully rounded corners, while normal photos look natural with slightly rounded corners.",
        },
      ],
    },

    list: {
      title: "List block tutorial",
      description:
        "Use this block to create bullet or numbered lists. Edit item text, tweak alignment and bullet style to build checklists, step-by-step guides, and more.",
      properties: [
        {
          label: "List items (one per line)",
          description:
            "Each line becomes one list item. Indentation is converted into a tree structure according to the list-parsing rules used in tests.",
        },
        {
          label: "Alignment",
          description:
            "Align the whole list to the left, center, or right. Checklists are typically left-aligned, while short feature summaries often use center alignment.",
        },
        {
          label: "Font size",
          description:
            "Controls the font size of list text. Slightly smaller than the main body copy can make it feel like supporting information.",
        },
        {
          label: "Line height",
          description:
            "Controls the line height within each list item. For longer text, a generous value around 1.5–1.8 improves readability.",
        },
        {
          label: "Text color",
          description:
            "The color of the list text. You can match the body color or use a slightly softer tone while keeping enough contrast.",
        },
        {
          label: "Block background color",
          description:
            "The background color of the entire list card. Helpful for step-by-step guides or checklist panels you want to highlight.",
        },
        {
          label: "Bullet style",
          description:
            "Choose bullet shapes (●/○/■) or numbered styles (1., a., i.). Number/letter/Roman styles automatically become ordered lists.",
        },
        {
          label: "Item gap",
          description:
            "Controls the vertical space between list items. For longer descriptions, use a larger gap for better readability.",
        },
      ],
    },

    divider: {
      title: "Divider block tutorial",
      description:
        "Use this block to visually separate sections or content. Adjust alignment, thickness, length, color, and spacing to clarify page structure.",
      properties: [
        {
          label: "Alignment",
          description:
            "Controls whether the divider is placed on the left, center, or right within its container.",
        },
        {
          label: "Thickness",
          description:
            "Controls line thickness. A thin line is good for subtle separators, while a normal thickness clearly divides sections.",
        },
        {
          label: "Length mode / fixed length",
          description:
            "Choose whether the divider spans the full width, auto width, or a fixed length in px.",
        },
        {
          label: "Line color",
          description:
            "The color of the divider line. Slightly darker than the section background often looks natural.",
        },
        {
          label: "Vertical spacing",
          description:
            "Controls how much space is placed above and below the divider. Larger values make the boundary between sections more explicit.",
        },
      ],
    },

    section: {
      title: "Section block tutorial",
      description:
        "A container block that defines large layout chunks. Configure background color/image/video, vertical padding, and width to build hero, features, footer, and similar sections.",
      properties: [
        {
          label: "Background color",
          description:
            "The base background color for the entire section. It strongly affects the page mood, so using contrast between adjacent sections is recommended.",
        },
        {
          label: "Background image source / URL / upload",
          description:
            "Configure a background image via external URL or uploaded file. Useful for hero backgrounds, patterns, and texture images.",
        },
        {
          label: "Background image size / position / repeat",
          description:
            "Use cover/contain/auto for size, presets or X/Y percentages for position, and repeat options to build tiled patterns.",
        },
        {
          label: "Background video source / URL / upload",
          description:
            "Set a video as the section background. This works well for eye-catching hero areas, but always check text contrast for readability.",
        },
        {
          label: "Vertical padding",
          description:
            "Controls the top and bottom padding of the section. Larger padding makes the section feel more spacious and prominent.",
        },
      ],
    },

    video: {
      title: "Video block tutorial",
      description:
        "Use this block to embed YouTube or self-hosted video. Enter the video URL, then adjust ratio/alignment/playback options to fit your page.",
      properties: [
        {
          label: "Video source / URL / file upload",
          description:
            "Enter an external video URL (YouTube, Vimeo, etc.) or upload a video file served as `/api/video/:id`.",
        },
        {
          label: "Poster image URL",
          description:
            "The thumbnail image shown before or while the video is loading. Choose a key frame or a representative image to increase click-through.",
        },
        {
          label: "Card background color",
          description:
            "Background color of the card containing the video. You can use a slightly darker or lighter tone than surrounding sections for contrast.",
        },
        {
          label: "Video alignment",
          description:
            "Controls whether the video is left, center, or right aligned inside its container.",
        },
        {
          label: "Width mode / fixed width",
          description:
            "Choose auto width, full width, or a fixed width in px for the video.",
        },
        {
          label: "Card padding / border radius",
          description:
            "Controls inner padding and corner roundness for the video card. In card layouts, moderate padding and rounded corners often look clean.",
        },
        {
          label: "Start / end time (seconds)",
          description:
            "Optional start/end positions if you want to play only part of the video, for example from 10s to 30s.",
        },
        {
          label: "Aspect ratio",
          description:
            "The frame ratio of the video. Most web videos use 16:9, while square/vertical content might use 1:1 or 4:3.",
        },
        {
          label: "Autoplay / loop / mute / show controls",
          description:
            "Playback options for autoplay, looping, muted audio, and player controls. Autoplay is usually combined with muted audio.",
        },
      ],
    },

    form: {
      title: "Form controller block tutorial",
      description:
        "This controller groups input fields (formInput/select/checkbox/radio) into a single form. Configure submit target, payload format, width, spacing, and field mapping to build a native form.",
      properties: [
        {
          label: "Submit target / webhook settings",
          description:
            "Choose whether the form data is handled internally or sent to an external webhook/Google Sheets. Configure destination URL, payload format, HTTP method, and more.",
        },
        {
          label: "Extra params",
          description:
            "Add extra key/value pairs that are always included in the submission. Use one `key=value` per line. Example: `source=landing`.",
        },
        {
          label: "Form width mode / fixed width",
          description:
            "Choose automatic width, full width, or a fixed px width. Contact forms often work well around 480–640px.",
        },
        {
          label: "Form vertical margin",
          description:
            "Controls the vertical space above and below the form block.",
        },
        {
          label: "Success / error messages",
          description:
            "Texts shown to the user when submission succeeds or fails. Clear and friendly copy improves the experience.",
        },
        {
          label: "Form field mapping",
          description:
            "Select which input fields (formInput/select/checkbox/radio) are connected to this controller. Only checked fields are included in the submit payload.",
        },
        {
          label: "Submit button",
          description:
            "Choose which button block will submit the form. When connected, clicking that button triggers form submission.",
        },
      ],
    },

    formInput: {
      title: "Form input block tutorial",
      description:
        "Single-line or multiline text input fields such as name and email. Configure label, placeholder, required state, and width, then connect it to a form controller.",
      properties: [
        {
          label: "Label type / field label",
          description:
            "The text or image label shown above or beside the field. It explains what the user should enter.",
        },
        {
          label: "Label image URL / alt text",
          description:
            "When using an image label, configure the image URL and alt text. This is useful for logo-style or icon-based labels.",
        },
        {
          label: "Submit key",
          description:
            "The field name used in the server/webhook payload. Matching your backend or spreadsheet column name makes processing easier.",
        },
        {
          label: "Field type",
          description:
            "Choose between text, email, and multiline text. Email fields can use the browser's built-in email validation.",
        },
        {
          label: "Placeholder",
          description:
            "The hint text shown inside the field before the user types. Example: 'Enter your email'.",
        },
        {
          label: "Required field",
          description:
            "When enabled, the user must fill in this field. Use this for important values like name or email.",
        },
        {
          label: "Text size / line height / letter spacing",
          description:
            "Fine-tune the field typography in px to control readability and overall tone.",
        },
        {
          label: "Text alignment",
          description:
            "Align input text left, center, or right. For normal inputs, left alignment is recommended.",
        },
        {
          label: "Layout / label-field gap",
          description:
            "Choose stacked or inline layout for label and field, and adjust the gap between them in inline mode.",
        },
        {
          label: "Width / fixed width",
          description:
            "Choose auto, full width, or a fixed px width. Short fields can use fixed width, and longer fields can use full width.",
        },
        {
          label: "Horizontal / vertical padding",
          description:
            "Controls the inner padding of the input box. More padding makes the field larger and more comfortable to click or type in.",
        },
        {
          label: "Field text / fill / border color",
          description:
            "Individually control text, background, and border colors. Use this to express error/active states.",
        },
        {
          label: "Field border radius",
          description:
            "Controls how rounded the field corners are. Match this with the overall page design.",
        },
      ],
    },

    formSelect: {
      title: "Form select block tutorial",
      description:
        "Dropdown select fields. Configure option list, default value, and width, then connect to a form controller.",
      properties: [
        {
          label: "Label type / field label",
          description:
            "The label for the select field. It can be text or an image and explains what is being selected.",
        },
        {
          label: "Submit key",
          description:
            "The field name used in the server/webhook payload when an option is selected.",
        },
        {
          label: "Options",
          description:
            "The list of choices the user can select from. Configure both label and value, and use the 'Add option' button to create new ones.",
        },
        {
          label: "Required field",
          description:
            "When enabled, at least one option must be selected. Use this for important selection fields.",
        },
        {
          label: "Select text size / line height / letter spacing",
          description:
            "Controls typography for the select field in px.",
        },
        {
          label: "Field width / fixed width",
          description:
            "Choose auto, full width, or a fixed px width for the select field.",
        },
        {
          label: "Horizontal / vertical padding",
          description:
            "Controls the inner padding for the select input.",
        },
        {
          label: "Field text / fill / border color",
          description:
            "Controls the text, background, and border colors for the select field.",
        },
        {
          label: "Field border radius",
          description:
            "Controls how rounded the select box corners are.",
        },
      ],
    },

    formCheckbox: {
      title: "Form checkbox block tutorial",
      description:
        "Checkbox groups for multi-select scenarios. Configure group title and option labels/images for consent fields or interest checklists.",
      properties: [
        {
          label: "Group title type / group title",
          description:
            "The title of the checkbox group. It can be text or an image and explains what category is being selected.",
        },
        {
          label: "Group title image source / URL / upload",
          description:
            "When using an image for the group label, choose the URL or uploaded asset.",
        },
        {
          label: "Submit key",
          description:
            "The field name used when the set of checked values is sent to the server/webhook.",
        },
        {
          label: "Options / option image source",
          description:
            "Configure label/value/image for each checkbox option. You can attach icons per option via URL or uploaded images.",
        },
        {
          label: "Required field",
          description:
            "When enabled, the user must select at least one option. Commonly used for terms/conditions agreements.",
        },
        {
          label: "Checkbox text size / line height / letter spacing",
          description:
            "Controls checkbox label typography. Longer labels benefit from larger line height.",
        },
      ],
    },

    formRadio: {
      title: "Form radio block tutorial",
      description:
        "Radio button groups for single-choice scenarios such as pricing plans. Configure option labels/images and default selection, then connect to a form controller.",
      properties: [
        {
          label: "Group title type / group title",
          description:
            "The title of the radio group, such as plan names or question prompts.",
        },
        {
          label: "Group title image source / URL / upload",
          description:
            "When using an image label, choose the URL or uploaded asset.",
        },
        {
          label: "Submit key",
          description:
            "The field name used when the selected option value is sent to the server/webhook.",
        },
        {
          label: "Options / option image source",
          description:
            "Configure label/value/image for each radio option. You can attach icons or thumbnails per option.",
        },
        {
          label: "Required field",
          description:
            "When enabled, the user must select one option. Typical for pricing/type selection.",
        },
        {
          label: "Radio text size / line height / letter spacing",
          description:
            "Controls radio label typography. For long descriptions, use a generous line height.",
        },
      ],
    },

    fallback: {
      title: "Block tutorial",
      description: "Detailed help for this block will be added later.",
    },
  },

  ko: {
    panelTitle: "속성 패널",

    actionDeleteBlock: "블록 삭제",
    actionDuplicateBlock: "블록 복제",
    actionHelp: "HELP",

    modalCloseLabel: "닫기",
    modalPropertiesSectionTitle: "속성별 설명",

    text: {
      title: "텍스트 블록 튜토리얼",
      description:
        "제목과 본문 텍스트를 입력할 때 사용하는 기본 블록입니다.\n\n좌측 패널에서 텍스트를 추가한 뒤, 캔버스에서 텍스트를 더블클릭하거나 속성 패널에서 내용을 수정해 보세요. 정렬, 크기, 색상 등을 조절해 다양한 스타일의 텍스트를 만들 수 있습니다.",
      properties: [
        {
          label: "선택한 텍스트 블록 내용",
          description:
            "이 블록에 실제로 표시될 문장을 입력하는 영역입니다. 캔버스에서 텍스트를 더블클릭했을 때와 동일한 내용이며, 여러 줄을 입력하면 줄바꿈이 그대로 반영됩니다.",
        },
        {
          label: "정렬",
          description:
            "텍스트를 왼쪽/가운데/오른쪽 중 어디에 맞출지 결정합니다. 일반 본문은 왼쪽, Hero 제목이나 짧은 강조 문구는 가운데 정렬을 추천합니다.",
        },
        {
          label: "텍스트 스타일 (밑줄/가운데줄/이탤릭)",
          description:
            "밑줄은 링크처럼 보이게 하거나 특정 단어를 강조할 때, 가운데줄은 할인 전 가격처럼 취소선을 표현할 때, 이탤릭은 인용구나 제품명 등 살짝 톤을 바꾸고 싶을 때 사용합니다.",
        },
        {
          label: "글자 크기",
          description:
            "텍스트의 폰트 크기를 px 단위로 조절합니다. 프리셋(XS~3XL)으로 대략적인 크기를 고른 뒤, 슬라이더/숫자 입력으로 세밀하게 조정할 수 있습니다.",
        },
        {
          label: "글자 간격",
          description:
            "문자 사이의 간격(자간)을 조절합니다. 본문은 보통 또는 약간 넓게, 대문자 위주의 짧은 타이틀은 살짝 넓게 설정하면 가독성과 디자인이 좋아집니다.",
        },
        {
          label: "줄 간격",
          description:
            "행과 행 사이의 간격(행간)을 정합니다. 본문은 1.5~1.7 정도가 읽기 좋고, 아주 짧은 제목은 1.25 정도로 줄이면 한 덩어리로 단단해 보입니다.",
        },
        {
          label: "굵기",
          description:
            "폰트 두께를 100~900 범위에서 조절합니다. 본문은 보통(400), 섹션 제목은 세미볼드(600), 강한 CTA 문구는 볼드(700) 정도를 추천합니다.",
        },
        {
          label: "텍스트 색상",
          description:
            "글자 색을 팔레트 또는 HEX 코드로 지정합니다. 본문은 대비가 높은 짙은 색을, 강조 문구는 브랜드 메인 색을 사용하는 것이 좋습니다.",
        },
        {
          label: "블록 배경색",
          description:
            "텍스트가 들어 있는 카드/박스 전체 배경색을 지정합니다. 공지사항, 강조 박스, 경고 문구 등을 만들 때 연한 배경색과 함께 사용하면 좋습니다.",
        },
        {
          label: "최대 너비",
          description:
            "한 줄 텍스트가 지나치게 길어지지 않도록 최대 줄 길이를 제한합니다. `본문 폭(60ch)`는 일반 문단에, `좁게(40ch)`는 카드/배너 같은 짧은 문구에 적합합니다.",
        },
      ],
    },

    button: {
      title: "버튼 블록 튜토리얼",
      description:
        "폼 제출이나 링크 이동을 위한 CTA 버튼을 만들 때 사용하는 블록입니다. 라벨, 링크(URL), 정렬, 색상/크기를 조절해 원하는 액션 버튼을 구성해 보세요.",
      properties: [
        {
          label: "버튼 텍스트",
          description:
            "버튼 위에 표시될 문구입니다. 예: '지금 시작하기', '문의 남기기'. 짧고 행동을 유도하는 문장을 사용하는 것이 좋습니다.",
        },
        {
          label: "가로 패딩",
          description:
            "버튼 양 옆의 여백을 조절합니다. 값이 클수록 버튼이 가로로 넓어져 더 강조됩니다.",
        },
        {
          label: "세로 패딩",
          description:
            "버튼 위·아래 여백을 조절합니다. 값이 클수록 버튼 높이가 높아져 더 눈에 띕니다.",
        },
        {
          label: "버튼 링크",
          description:
            "버튼 클릭 시 이동할 URL 또는 앵커(#section)입니다. 외부 페이지, 페이지 내 섹션, 폼 제출 엔드포인트 등으로 연결할 수 있습니다.",
        },
        {
          label: "정렬",
          description:
            "해당 버튼이 포함된 영역 안에서 왼쪽/가운데/오른쪽 중 어디에 위치할지 결정합니다. 주요 CTA 버튼은 가운데 정렬이 많이 쓰입니다.",
        },
        {
          label: "텍스트 색상",
          description:
            "버튼 라벨 글자 색입니다. 채움 색상과 충분한 대비가 나도록 설정해야 가독성이 좋습니다.",
        },
        {
          label: "스타일",
          description:
            "버튼 외형 스타일입니다. '채움'은 꽉 찬 스타일, '외곽선'은 테두리만 있는 스타일, '고스트'는 배경 없이 텍스트/테두리만 있는 스타일입니다.",
        },
        {
          label: "채움 색상",
          description:
            "채움 스타일에서 버튼 내부를 채우는 색입니다. 브랜드 메인 색이나 강조 색을 사용하면 좋습니다.",
        },
        {
          label: "외곽선 색상",
          description:
            "외곽선/고스트 스타일에서 버튼 테두리 색입니다. 배경색과의 대비를 고려해 설정합니다.",
        },
        {
          label: "모서리 둥글기",
          description:
            "버튼 모서리를 얼마나 둥글게 처리할지 결정합니다. '없음'은 각진 버튼, '완전 둥글게'는 알약 모양 버튼입니다.",
        },
        {
          label: "버튼 너비 모드 / 버튼 고정 너비",
          description:
            "버튼이 컨테이너 너비에 맞춰 늘어날지(전체 폭), 내용 길이에 맞출지(자동), 고정 px 너비를 가질지 결정합니다.",
        },
        {
          label: "버튼 크기",
          description:
            "버튼 라벨 텍스트의 폰트 크기입니다. 중요한 CTA 버튼은 주변 텍스트보다 조금 더 크게 설정하면 좋습니다.",
        },
        {
          label: "줄 간격 / 글자 간격",
          description:
            "버튼 라벨의 행간과 자간을 조절합니다. 글자가 너무 답답해 보이면 자간을 약간 넓히고, 여러 줄 버튼 문구는 줄 간격을 조금 넓혀 주세요.",
        },
      ],
    },

    image: {
      title: "이미지 블록 튜토리얼",
      description:
        "배너, 썸네일, 설명 이미지를 배치할 때 사용하는 블록입니다. 외부 이미지 URL을 입력하거나 업로드 이미지를 선택하고, 너비/정렬/모서리 둥글기를 조절해 레이아웃에 맞게 배치해 보세요.",
      properties: [
        {
          label: "이미지 소스",
          description:
            "이미지를 외부 URL에서 가져올지(URL), 빌더에 업로드한 에셋을 사용할지(파일 업로드) 선택합니다.",
        },
        {
          label: "이미지 URL / 이미지 파일 업로드",
          description:
            "URL 모드에서는 외부 이미지 주소를 입력하고, 업로드 모드에서는 로컬 이미지를 업로드해 `/api/image/:id` 형식으로 관리합니다.",
        },
        {
          label: "대체 텍스트",
          description:
            "이미지가 로드되지 않거나 스크린리더를 사용하는 사용자에게 보여질 설명 텍스트입니다. 이미지가 전달하는 의미를 한두 문장으로 작성해 주세요.",
        },
        {
          label: "카드 배경색",
          description:
            "이미지를 감싸는 카드 영역의 배경색입니다. 투명한 PNG 아이콘이나 로고를 올릴 때 배경을 살짝 깔아주면 더 잘 보입니다.",
        },
        {
          label: "정렬",
          description:
            "이미지가 포함된 영역 안에서 왼쪽/가운데/오른쪽 중 어디에 위치할지 결정합니다.",
        },
        {
          label: "너비 모드 / 고정 너비",
          description:
            "이미지를 내용 크기에 맞출지(auto) 또는 px 단위로 고정된 너비를 사용할지 선택합니다. 썸네일 그리드에서는 고정 너비를 사용하는 편이 레이아웃이 안정적입니다.",
        },
        {
          label: "모서리 둥글기",
          description:
            "이미지 카드 모서리 둥글기를 px 단위로 조절합니다. 아바타/아이콘은 완전 둥글게, 일반 사진은 살짝 둥글게 설정하면 자연스럽습니다.",
        },
      ],
    },

    list: {
      title: "리스트 블록 튜토리얼",
      description:
        "불릿/번호 리스트를 만들 때 사용하는 블록입니다. 아이템 텍스트를 수정하고, 정렬/불릿 스타일을 바꿔 체크리스트나 단계별 안내 등을 표현할 수 있습니다.",
      properties: [
        {
          label: "리스트 아이템 (줄바꿈으로 구분)",
          description:
            "각 줄이 하나의 리스트 항목이 됩니다. 들여쓰기를 이용한 중첩 리스트는 변환 로직에 따라 자동으로 트리 구조로 변환됩니다.",
        },
        {
          label: "정렬",
          description:
            "리스트 전체를 왼쪽/가운데/오른쪽 중 어디에 정렬할지 결정합니다. 체크리스트는 왼쪽 정렬, 특징 요약은 가운데 정렬이 자주 사용됩니다.",
        },
        {
          label: "글자 크기",
          description:
            "리스트 텍스트의 폰트 크기를 조절합니다. 본문보다 약간 작게 설정하면 보조 정보 느낌을 줄 수 있습니다.",
        },
        {
          label: "줄 간격",
          description:
            "리스트 항목 내부의 행간을 조절합니다. 항목 내용이 길어질수록 1.5~1.8 정도의 넉넉한 값을 추천합니다.",
        },
        {
          label: "텍스트 색상",
          description:
            "리스트 텍스트의 색상입니다. 배경색과의 대비를 고려해 본문과 동일하거나 약간 연한 색상을 사용할 수 있습니다.",
        },
        {
          label: "블록 배경색",
          description:
            "리스트 전체 카드의 배경색입니다. 단계별 안내나 체크리스트 박스를 강조하는 용도로 사용할 수 있습니다.",
        },
        {
          label: "불릿 스타일",
          description:
            "불릿(●/○/■) 또는 번호(1., a., i.) 형식을 선택합니다. 숫자/알파벳/로마 숫자 스타일을 선택하면 자동으로 순서형 리스트(ordered)가 됩니다.",
        },
        {
          label: "아이템 간 여백",
          description:
            "각 리스트 항목 사이의 세로 간격입니다. 설명이 긴 항목이 많다면 여백을 넉넉히 두어 가독성을 확보하세요.",
        },
      ],
    },

    divider: {
      title: "구분선 블록 튜토리얼",
      description:
        "섹션과 섹션 사이를 나누거나 콘텐츠를 시각적으로 구분할 때 사용하는 블록입니다. 정렬, 두께, 길이, 색상, 여백을 조절해 페이지 흐름을 정리해 보세요.",
      properties: [
        {
          label: "정렬",
          description:
            "구분선을 컨테이너 안에서 왼쪽/가운데/오른쪽 중 어디에 위치시킬지 결정합니다.",
        },
        {
          label: "두께",
          description:
            "선의 두께입니다. '얇게'는 가벼운 보조 구분선, '보통'은 섹션 경계를 확실히 나눌 때 사용합니다.",
        },
        {
          label: "길이 모드 / 고정 길이",
          description:
            "구분선을 전체 폭으로 쓸지, 내용에 맞출지, 또는 px 단위의 고정 길이를 사용할지 선택합니다.",
        },
        {
          label: "선 색상",
          description:
            "구분선 컬러입니다. 너무 진한 색보다는 섹션 배경보다 살짝 진한 정도의 중간 톤을 추천합니다.",
        },
        {
          label: "위/아래 여백",
          description:
            "구분선 위·아래에 들어가는 공백입니다. 값이 클수록 섹션이 더 명확하게 나뉘어 보입니다.",
        },
      ],
    },

    section: {
      title: "섹션 블록 튜토리얼",
      description:
        "레이아웃의 큰 덩어리를 나누는 컨테이너 블록입니다. 배경색/배경 이미지/비디오, 위아래 패딩, 너비를 설정해 Hero, Features, Footer 같은 영역을 구성할 수 있습니다.",
      properties: [
        {
          label: "배경 색상",
          description:
            "섹션 전체의 기본 배경색입니다. 페이지의 큰 분위기를 결정하는 요소이므로, 섹션 간 배경 대비를 적절히 주는 것이 좋습니다.",
        },
        {
          label: "배경 이미지 소스 / URL / 파일 업로드",
          description:
            "섹션 배경으로 사용할 이미지를 외부 URL 또는 업로드 파일로 지정합니다. Hero 배경, 패턴, 질감 이미지를 설정할 때 사용합니다.",
        },
        {
          label: "배경 이미지 크기 / 위치 / 반복",
          description:
            "cover/contain/auto로 크기를 조절하고, 프리셋 또는 X/Y 퍼센트로 위치를 조절하며, 반복 여부를 설정해 패턴 형태로 사용할 수 있습니다.",
        },
        {
          label: "배경 비디오 소스 / URL / 파일 업로드",
          description:
            "섹션 배경에 비디오를 설정합니다. 시선을 끌어야 하는 Hero 영역 등에 사용하되, 가독성 저하를 막기 위해 텍스트 대비를 꼭 확인하세요.",
        },
        {
          label: "세로 패딩",
          description:
            "섹션 위·아래 여백입니다. 값이 클수록 섹션이 여유 있고 강조되어 보입니다. Hero 섹션은 넉넉한 패딩을, 보조 섹션은 중간 정도를 추천합니다.",
        },
      ],
    },

    video: {
      title: "비디오 블록 튜토리얼",
      description:
        "YouTube/영상 URL 또는 직접 호스팅한 비디오를 삽입할 때 사용하는 블록입니다. 동영상 주소를 입력하고, 비율/정렬/재생 옵션을 조정해 페이지에 맞게 배치해 보세요.",
      properties: [
        {
          label: "비디오 소스 / 비디오 URL / 비디오 파일 업로드",
          description:
            "외부 동영상 URL(YouTube, Vimeo 등)을 직접 입력하거나, 비디오 파일을 업로드해 `/api/video/:id` 형태로 사용할 수 있습니다.",
        },
        {
          label: "포스터 이미지 URL",
          description:
            "동영상 재생 전/로딩 중에 보여줄 썸네일 이미지입니다. 영상의 핵심 장면이나 대표 이미지를 사용하면 클릭률을 높일 수 있습니다.",
        },
        {
          label: "카드 배경색",
          description:
            "비디오가 들어가는 카드 영역의 배경색입니다. 주변 섹션과의 대비를 위해 살짝 어둡거나 밝은 색을 설정할 수 있습니다.",
        },
        {
          label: "비디오 정렬",
          description:
            "비디오를 컨테이너 안에서 왼쪽/가운데/오른쪽 중 어디에 위치시킬지 결정합니다.",
        },
        {
          label: "비디오 너비 모드 / 고정 너비",
          description:
            "비디오를 내용 너비에 맞출지, 가로 전체를 채울지, 특정 px 너비로 고정할지 선택합니다.",
        },
        {
          label: "카드 패딩 / 카드 모서리 둥글기",
          description:
            "비디오 주변 카드의 안쪽 여백과 모서리 둥글기입니다. 카드형 레이아웃에서는 적당한 패딩과 둥근 모서리를 주면 디자인이 정돈됩니다.",
        },
        {
          label: "시작 시점 (초) / 종료 시점 (초)",
          description:
            "영상의 특정 구간만 재생하고 싶을 때 사용하는 옵션입니다. 예를 들어 10초~30초만 재생하도록 설정할 수 있습니다.",
        },
        {
          label: "화면 비율",
          description:
            "동영상 프레임 비율입니다. 대부분의 웹 영상은 16:9를 사용하며, 정사각형/세로형 콘텐츠는 1:1, 4:3 등을 사용할 수 있습니다.",
        },
        {
          label: "자동 재생 / 반복 재생 / 음소거 / 재생 컨트롤 표시",
          description:
            "자동 재생/반복 재생/음소거/컨트롤 표시 여부를 설정합니다. 자동 재생 영상은 보통 음소거를 함께 켜 두는 것이 좋습니다.",
        },
      ],
    },

    form: {
      title: "폼 컨트롤러 블록 튜토리얼",
      description:
        "입력 필드(formInput/select/checkbox/radio)를 하나의 폼으로 묶는 컨트롤러입니다. 전송 대상, 전송 포맷, 너비, 여백 등을 설정해 네이티브 폼 제출을 구성하고, 필드 ID를 연결해 폼 구조를 완성할 수 있습니다.",
      properties: [
        {
          label: "전송 대상 / Webhook 설정",
          description:
            "폼 데이터를 내부 처리로만 사용할지, 외부 Webhook/Google Sheets 등으로 전송할지 결정하고, 목적지 URL/전송 포맷/HTTP 메서드 등을 설정합니다.",
        },
        {
          label: "추가 파라미터",
          description:
            "`key=value` 형식으로 줄바꿈해 작성하면, 모든 폼 제출에 공통으로 포함될 추가 파라미터를 지정할 수 있습니다. 예: `source=landing`.",
        },
        {
          label: "폼 너비 모드 / 폼 고정 너비",
          description:
            "폼 전체의 가로 폭을 자동/전체 폭/고정 px 값 중에서 선택합니다. 문의 폼은 보통 480~640px 정도의 고정 폭이 읽기 좋습니다.",
        },
        {
          label: "폼 위/아래 여백",
          description:
            "폼 블록 위·아래에 들어가는 공백입니다. 페이지 내 다른 섹션과의 간격을 조절할 때 사용합니다.",
        },
        {
          label: "성공 메시지 / 에러 메시지",
          description:
            "폼 전송 성공 또는 실패 시 사용자에게 보여줄 텍스트입니다. 명확하고 친절한 문구로 작성하는 것이 좋습니다.",
        },
        {
          label: "폼 필드 매핑",
          description:
            "폼 컨트롤러와 연결할 입력 필드(formInput/select/checkbox/radio)를 체크박스로 선택합니다. 체크된 필드만 실제 폼 제출 payload에 포함됩니다.",
        },
        {
          label: "Submit 버튼",
          description:
            "폼 제출을 담당할 버튼 블록을 지정합니다. 별도 버튼 블록을 만들어 이 컨트롤러와 연결하면, 해당 버튼 클릭 시 폼이 제출됩니다.",
        },
      ],
    },

    formInput: {
      title: "폼 입력 블록 튜토리얼",
      description:
        "이름, 이메일 등 한 줄 텍스트 또는 긴 텍스트 입력 필드를 만들 때 사용하는 블록입니다. 레이블, 플레이스홀더, 필수 여부, 너비 등을 설정해 폼 컨트롤러와 함께 사용합니다.",
      properties: [
        {
          label: "라벨 타입 / 필드 라벨",
          description:
            "입력 필드 위나 옆에 표시될 설명입니다. 텍스트 또는 이미지로 라벨을 구성할 수 있으며, 사용자가 어떤 값을 입력해야 하는지 명확하게 알려줍니다.",
        },
        {
          label: "라벨 이미지 URL / 대체 텍스트",
          description:
            "라벨을 이미지로 사용할 때 경로와 alt 텍스트를 지정합니다. 로고형 라벨이나 아이콘 기반 UI를 만들 때 활용할 수 있습니다.",
        },
        {
          label: "전송 키",
          description:
            "이 입력값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다. 백엔드나 스프레드시트 컬럼명과 일치시키면 이후 처리가 편해집니다.",
        },
        {
          label: "필드 타입",
          description:
            "텍스트/이메일/긴 텍스트 중 어떤 형태의 입력을 받을지 결정합니다. 이메일 타입은 브라우저 기본 이메일 검증을 활용할 수 있습니다.",
        },
        {
          label: "Placeholder",
          description:
            "입력 전 필드 안에 흐릿하게 보여줄 안내 문구입니다. 예: '이메일을 입력해 주세요'.",
        },
        {
          label: "필수 필드",
          description:
            "체크 시 이 필드는 반드시 채워야 합니다. 이름/이메일 같은 필수 값에는 활성화하고, 선택 항목에는 비활성화하는 것을 추천합니다.",
        },
        {
          label: "텍스트 크기 / 줄간격 / 자간",
          description:
            "입력 값의 폰트 크기(px), 줄간격(px), 자간(px)을 조절해 폼 필드의 가독성과 분위기를 세밀하게 튜닝합니다.",
        },
        {
          label: "텍스트 정렬",
          description:
            "필드 안 텍스트를 왼쪽/가운데/오른쪽 중 어디에 정렬할지 결정합니다. 일반 입력은 왼쪽 정렬을 권장합니다.",
        },
        {
          label: "레이아웃 / 라벨/필드 간격",
          description:
            "라벨과 필드를 세로(stack) 또는 가로(inline)로 배치하고, inline 모드에서 라벨과 입력 사이 간격(px)을 조절합니다.",
        },
        {
          label: "너비 / 필드 고정 너비",
          description:
            "필드를 자동/전체 폭/고정 px 중 어떤 너비로 렌더링할지 결정합니다. 짧은 필드는 고정 값, 긴 입력은 전체 폭을 사용할 수 있습니다.",
        },
        {
          label: "필드 가로/세로 패딩",
          description:
            "입력 상자 안쪽 여백을 조절합니다. 값이 클수록 필드가 커지고 누르기/입력하기 편해집니다.",
        },
        {
          label: "필드 텍스트/채움/테두리 색상",
          description:
            "입력 텍스트, 배경, 테두리 색상을 각각 조절합니다. 에러 상태/강조 상태 등을 표현할 때 조합해서 사용할 수 있습니다.",
        },
        {
          label: "필드 모서리 둥글기",
          description:
            "입력 상자의 모서리를 얼마나 둥글게 할지 결정합니다. 페이지의 전체 디자인 톤과 맞춰 사용하세요.",
        },
      ],
    },

    formSelect: {
      title: "폼 셀렉트 블록 튜토리얼",
      description:
        "드롭다운 선택 필드를 만들 때 사용하는 블록입니다. 옵션 목록과 기본 선택값, 너비를 설정해 폼 컨트롤러와 함께 사용합니다.",
      properties: [
        {
          label: "라벨 타입 / 필드 라벨",
          description:
            "셀렉트 필드의 제목 역할을 하는 라벨입니다. 텍스트 또는 이미지로 구성할 수 있으며, 선택해야 할 값의 의미를 설명합니다.",
        },
        {
          label: "전송 키",
          description:
            "선택된 옵션 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다. 백엔드나 스프레드시트 컬럼명과 일치시키면 이후 처리가 편해집니다.",
        },
        {
          label: "옵션",
          description:
            "사용자가 선택할 수 있는 옵션 목록입니다. 라벨과 value를 함께 설정하며, '옵션 추가' 버튼으로 새 옵션을 만들 수 있습니다.",
        },
        {
          label: "필수 필드",
          description:
            "체크 시 반드시 하나의 옵션을 선택해야 합니다. 중요 선택 항목에는 필수로 설정하는 것을 권장합니다.",
        },
        {
          label: "셀렉트 텍스트 크기 / 줄간격 / 자간",
          description:
            "드롭다운 필드의 텍스트 타이포그래피를 px 단위로 조절해 가독성과 분위기를 맞춥니다.",
        },
        {
          label: "필드 너비 / 필드 고정 너비",
          description:
            "셀렉트 필드를 자동/전체 폭/고정 px 중 어떤 너비로 렌더링할지 결정합니다.",
        },
        {
          label: "셀렉트 가로/세로 패딩",
          description:
            "드롭다운 안쪽 여백을 조절해 클릭 영역과 시각적 무게감을 조정합니다.",
        },
        {
          label: "필드 텍스트/채움/테두리 색상",
          description:
            "선택 영역의 텍스트, 배경, 테두리 색상을 설정합니다. 폼 전체 톤과 잘 어울리는 색상을 사용하는 것이 좋습니다.",
        },
        {
          label: "필드 모서리 둥글기",
          description:
            "셀렉트 박스의 모서리를 얼마나 둥글게 표시할지 결정합니다.",
        },
      ],
    },

    formCheckbox: {
      title: "폼 체크박스 블록 튜토리얼",
      description:
        "여러 항목 중 복수 선택이 필요한 경우 사용하는 체크박스 그룹 블록입니다. 그룹 타이틀과 옵션 라벨/이미지를 설정해 동의 항목이나 관심사 선택 등을 구성할 수 있습니다.",
      properties: [
        {
          label: "그룹 타이틀 타입 / 그룹 타이틀",
          description:
            "체크박스 그룹 전체의 제목입니다. 텍스트 또는 이미지로 표현할 수 있으며, 사용자가 어떤 범주를 선택하는지 알려줍니다.",
        },
        {
          label: "그룹 타이틀 이미지 소스 / URL / 파일 업로드",
          description:
            "그룹 라벨을 이미지로 사용할 때, URL 또는 업로드된 이미지를 선택합니다.",
        },
        {
          label: "전송 키",
          description:
            "체크된 옵션들의 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다.",
        },
        {
          label: "옵션 / 옵션 이미지 소스",
          description:
            "각 체크박스 옵션의 라벨/값/이미지를 설정합니다. URL 또는 업로드 이미지로 옵션별 아이콘을 붙일 수 있습니다.",
        },
        {
          label: "필수 필드",
          description:
            "체크 시 하나 이상 옵션을 선택해야 합니다. 약관 동의 등 필수 동의 항목에 사용합니다.",
        },
        {
          label: "체크박스 텍스트 크기 / 줄간격 / 자간",
          description:
            "체크박스 라벨의 폰트 크기, 줄간격, 자간을 조절합니다. 항목이 길어질수록 줄간격을 넉넉히 두는 것이 좋습니다.",
        },
      ],
    },

    formRadio: {
      title: "폼 라디오 블록 튜토리얼",
      description:
        "여러 옵션 중 하나만 선택해야 할 때 사용하는 라디오 버튼 그룹 블록입니다. 옵션 라벨/이미지와 기본 선택값을 설정해 요금제 선택 등 단일 선택 시나리오를 구성할 수 있습니다.",
      properties: [
        {
          label: "그룹 타이틀 타입 / 그룹 타이틀",
          description:
            "라디오 그룹의 제목입니다. 요금제 이름, 질문 문구 등 단일 선택의 맥락을 설명합니다.",
        },
        {
          label: "그룹 타이틀 이미지 소스 / URL / 파일 업로드",
          description:
            "그룹 라벨을 이미지로 사용할 때, URL 또는 업로드 이미지를 선택합니다.",
        },
        {
          label: "전송 키",
          description:
            "선택된 하나의 옵션 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다.",
        },
        {
          label: "옵션 / 옵션 이미지 소스",
          description:
            "각 라디오 옵션의 라벨/값/이미지를 설정합니다. 옵션별 아이콘이나 썸네일을 붙여 더 풍부한 선택 UI를 만들 수 있습니다.",
        },
        {
          label: "필수 필드",
          description:
            "체크 시 반드시 하나의 옵션을 선택해야 합니다. 요금제/유형 선택처럼 반드시 선택이 필요한 경우에 사용합니다.",
        },
        {
          label: "라디오 텍스트 크기 / 줄간격 / 자간",
          description:
            "라디오 라벨의 폰트 크기, 줄간격, 자간을 조절합니다. 옵션 설명이 긴 경우 줄간격을 넉넉히 두세요.",
        },
      ],
    },

    fallback: {
      title: "블록 튜토리얼",
      description: "이 블록에 대한 자세한 도움말은 추후 추가될 예정입니다.",
    },
  },
};

export function getEditorPropertiesSidebarMessages(
  locale: AppLocale | null | undefined,
): EditorPropertiesSidebarMessages {
  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
  return EDITOR_PROPERTIES_SIDEBAR_MESSAGES[key] ?? EDITOR_PROPERTIES_SIDEBAR_MESSAGES[DEFAULT_LOCALE];
}
