import type { ComponentMetadata } from '../interfaces/types';

export const metadata: ComponentMetadata = {
  component_name: 'Texto_2025_Kyoto',
  category: 'Contenido de Texto',
  name: 'Bloque de texto HTML libre con título de 7 variantes y estilos globales 2025',
  description: 'Bloque de texto con contenido HTML libre (admite <p>, <h1>-<h4>, <ul>, <strong>, etc.) renderizado vía set:html, precedido opcionalmente por un título con 7 variantes de etiqueta/tamaño (Sin título; H1 40/48; H2 32/40; H2 24/32; H3 24/32; H3 20/28; H4 20/28). Los <p> y <h2> internos del HTML reciben estilos globales Inter/Poppins automáticamente',
  framework: 'Astro',
  priority: 1,
  tags: ['texto', 'html', 'titulo', 'contenido'],
  fields: [
    {
      name: 'title',
      type: 'text',
      help: 'Título opcional del bloque. TERNARIO: solo se renderiza si "Etiqueta del título" es "h2" O "h3" Y este campo tiene valor. Admite HTML',
      label: 'Texto del título',
      mandatory: false,
      example_value: 'Casos de uso de la IA jurídica'
    },
    {
      name: 'tipo',
      type: 'select',
      help: 'Controla etiqueta HTML Y tamaño del título (van ligados). Todos los tipos usan Poppins semibold color #262626. "Sin título" NO muestra el título aunque "Texto del título" tenga valor. "H1" → <h1> a 40px / line-height 48px. "H2 32px" → <h2> a 32px / line-height 40px. "H2 32px Normal" → <h2> a 32px / line-height 40px con peso normal. "H2" → <h2> a 24px / line-height 32px. "H3 24px" → <h3> a 24px / line-height 32px (mismo tamaño visual que "H2" pero etiqueta HTML distinta). "H3" → <h3> a 20px / line-height 28px. "H4" → <h4> a 20px / line-height 28px (mismo tamaño visual que "H3" pero etiqueta HTML distinta)',
      label: 'Etiqueta del título',
      options: ['none', 'h1', 'h2-40', 'h2-32', 'h2-32-normal', 'h2', 'h3-24', 'h3', 'h4'],
      options_labels: ['Sin título', 'H1', 'H2 40px', 'H2 32px', 'H2 32px Normal', 'H2', 'H3 24px', 'H3', 'H4'],
      example_value: 'h2'
    },
    {
      name: 'contentHTML',
      type: 'textArea',
      help: 'Contenido HTML del bloque (admite <p>, <h2>, <ul>, <strong>, etc.). Se renderiza con set:html. Los <p> internos adoptan estilo Inter 1em, los <h2> internos Poppins 1.5em semibold',
      label: 'Contenido HTML',
      mandatory: false,
      example_value: '<p>La inteligencia artificial aplicada al Derecho permite automatizar tareas repetitivas, buscar jurisprudencia en segundos y redactar borradores de contratos con plantillas personalizables.</p>'
    },
    {
      name: 'align',
      type: 'select',
      help: 'Controla la alineación horizontal del contenido del bloque (título y contenido HTML) mediante flex items-*. "Inicio" → items-start (alineado a la izquierda). "Centro" → items-center (centrado horizontalmente)',
      label: 'Alineación del contenido',
      options: ['start', 'center'],
      options_labels: ['Inicio', 'Centro'],
      example_value: 'start'
    },
    {
      name: 'color',
      type: 'text',
      help: 'Color de texto aplicado al título. Acepta cualquier valor CSS válido: hex (#262626), rgb(), nombre de color, etc. Por defecto #262626',
      label: 'Color del texto',
      mandatory: false,
      example_value: '#262626'
    }
  ]
};