// ═══════════════════════════════════════════════════════════════
// SectionLockup — núcleo tipográfico unificado (iter-05)
//
// Mismo marcado (kicker · name · tag) para los 4 universos, con
// variantes visuales por sección y 6 tamaños. Asegura que "Inmenso
// Bastardo", "Vamos Viendo", "EdiBarak" y "Detrás de escenas"
// tengan SIEMPRE el mismo ADN tipográfico en cualquier parte del
// sitio (landing, selector, end-of-note, referencias inline).
//
// Uso:
//   <SectionLockup variant="ib" size="xl" />
//   <SectionLockup variant="vv" size="m" kicker={false} tag={false} />
//   <SectionLockup variant="ed" size="l" className="ondark" />
//
// Props:
//   variant : 'ib' | 'vv' | 'ed' | 'de'   (default 'ib')
//   size    : 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs'  (default 'm')
//   kicker  : boolean o string — default: true (muestra el kicker
//             default de la variante). Si es string, usa ese.
//   tag     : boolean o string — default: true
//   name    : string (override opcional del nombre)
//   className : clases extra (ej. "ondark" para ED sobre fondo oscuro)
//   as      : tag del wrapper, default 'span'
// ═══════════════════════════════════════════════════════════════

const LOCKUP_PRESETS = {
  ib: {
    defaultKicker: 'Cuadernos · Vol II',
    defaultTag:    '— Lo inconmensurable —',
    // Render con name compuesto: "Inmenso\u00a0" + italic "Bastardo."
    renderName: () => (
      <>
        <span>Inmenso </span>
        <span style={{ fontStyle: 'italic' }}>Bastardo.</span>
      </>
    ),
  },
  vv: {
    defaultKicker: 'En cartel · crítica',
    defaultTag:    '— El feed —',
    renderName: () => (
      <>
        <span>Vamos </span>
        <span style={{ fontStyle: 'italic' }}>Viendo</span>
      </>
    ),
  },
  ed: {
    defaultKicker: 'Archivo · opinión',
    defaultTag:    'Notas sueltas sobre cine y lo demás',
    // "EDI" + slash dorado + "BARAK"
    renderName: () => (
      <>
        <span>EDI</span>
        <span className="sl">/</span>
        <span>BARAK</span>
      </>
    ),
  },
  de: {
    defaultKicker: 'Taller · backstage',
    defaultTag:    '— Secundario —',
    // iter-11: el usuario pidió "DETRÁS DE ESCENAS" literal, sin separador //.
    // El // se leía como glitch/typo en contextos pequeños (nav, referencias
    // inline). Mantenemos la misma tipografía monospace petrol del universo.
    renderName: () => (
      <>
        <span>DETRÁS DE ESCENAS</span>
      </>
    ),
  },
};

function SectionLockup({
  variant = 'ib',
  size = 'm',
  kicker = true,
  tag = true,
  name = null,
  className = '',
  as = 'span',
}) {
  const preset = LOCKUP_PRESETS[variant] || LOCKUP_PRESETS.ib;

  const showKicker = kicker !== false && kicker !== null && kicker !== '';
  const showTag    = tag    !== false && tag    !== null && tag    !== '';

  const kickerText = typeof kicker === 'string' ? kicker : preset.defaultKicker;
  const tagText    = typeof tag    === 'string' ? tag    : preset.defaultTag;

  const Tag = as;
  const cls = `lk lk--${variant} lk--${size}${className ? ' ' + className : ''}`;

  return (
    <Tag className={cls}>
      {showKicker && <span className="lk-kicker">{kickerText}</span>}
      <span className="lk-name">
        {name != null ? name : preset.renderName()}
      </span>
      {showTag && <span className="lk-tag">{tagText}</span>}
    </Tag>
  );
}

window.SectionLockup = SectionLockup;
window.LOCKUP_PRESETS = LOCKUP_PRESETS;