website/client/src/lib/heroLayout.js

// Shared hero-layout helpers used by the public portal and the admin editor.

// Runic Gateway default hero emblem; the instance hero image (BRAND_HERO)
// overrides it at runtime, threaded in as `defaultImage` by the portal.
export const DEFAULT_HERO_IMAGE = '/assets/img/runic-emblem.png'

// Default hero background: the emblem centered behind the text as a medallion,
// under a symmetric dark overlay tuned to keep centered hero copy legible.
// Two layers (overlay gradient + image) so the per-layer background-size in
// `heroBackground` can contain the square emblem while the overlay stays full-bleed.
export function heroBgStack(image) {
  return (
    'linear-gradient(180deg,rgba(11,15,20,0.62) 0%,rgba(11,15,20,0.48) 38%,rgba(11,15,20,0.52) 58%,rgba(11,15,20,0.86) 100%),' +
    "url('" +
    (image || DEFAULT_HERO_IMAGE) +
    "')"
  )
}

// Keep the emblem fully visible and centered, capped so it never overflows a
// narrow viewport; the overlay layer covers.
export const HERO_DEFAULT_SIZE = 'cover, min(74vh, 640px, 86vw)'
export const HERO_DEFAULT_POSITION = 'center, center'

export const HERO_BG = heroBgStack(DEFAULT_HERO_IMAGE)

// Single-stop dark overlay driven by the editor's opacity slider.
export function buildOverlay(opacity) {
  return `linear-gradient(180deg,rgba(11,15,20,${opacity * 0.15}) 0%,rgba(11,15,20,${opacity}) 100%)`
}

// Background style for a layout. When `isDefault` and no custom image is set, use
// the exact original gradient stack; otherwise compose the overlay over the image.
export function heroBackground(layout, { isDefault = false, defaultImage } = {}) {
  const bg = layout.background || {}
  const fallback = defaultImage || DEFAULT_HERO_IMAGE
  // Untouched default: emblem contained + centered behind the text (per-layer
  // size/position so the overlay stays full-bleed while the square emblem fits).
  if (isDefault && !bg.image_url) {
    return {
      backgroundColor: 'var(--bg-deep)',
      backgroundImage: heroBgStack(fallback),
      backgroundPosition: HERO_DEFAULT_POSITION,
      backgroundRepeat: 'no-repeat',
      backgroundSize: HERO_DEFAULT_SIZE,
    }
  }
  return {
    backgroundColor: 'var(--bg-deep)',
    backgroundImage: `${buildOverlay(layout.overlay?.opacity ?? 0.72)}, url('${bg.image_url || fallback}')`,
    backgroundPosition: `${bg.position_x || 'left'} ${bg.position_y || 'center'}`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: bg.size || 'cover',
  }
}

// Parse a stored layout string; return null if missing/malformed/wrong version.
export function parseLayout(str) {
  try {
    const l = str ? JSON.parse(str) : null
    return l && l.version === 1 && Array.isArray(l.elements) ? l : null
  } catch {
    return null
  }
}

// The current hardcoded hero as a HeroLayout, so the page is unchanged until
// staff publish their own. Font sizes use the existing clamp() strings so the
// default stays responsive (editor-created text uses px).
export function defaultLayout(teaser, name = 'Runic Gateway') {
  return {
    version: 1,
    background: { image_url: null, position_x: 'left', position_y: 'center', size: 'cover' },
    overlay: { opacity: 0.72 },
    elements: [
      {
        id: 'default-text',
        type: 'text_block',
        x: 50,
        y: 42,
        z: 1,
        anchor: 'center',
        props: {
          align: 'center',
          width: 760,
          lines: [
            { text: 'Private shard project', tag: 'span', fontSize: '0.74rem', color: '#c2d2e6', weight: 700, letterSpacing: '0.22em', transform: 'uppercase', font: 'sans' },
            { text: name, tag: 'h1', fontSize: 'clamp(3rem,8.5vw,5.75rem)', color: 'var(--head)', weight: 600, letterSpacing: '0.02em', lineHeight: 1, font: 'display', marginTop: 14 },
            { text: 'A private Ultima Online world in progress', tag: 'p', fontSize: '1.32rem', color: '#dbe2ea', italic: true, marginTop: 22 },
            { text: teaser, tag: 'div', html: true, fontSize: '1.06rem', color: '#c4cdd8', maxWidth: 600, marginTop: 22 },
          ],
        },
      },
      {
        id: 'default-buttons',
        type: 'buttons',
        x: 50,
        y: 72,
        z: 2,
        anchor: 'center',
        props: {
          align: 'center',
          gap: 12,
          items: [
            { label: 'Enter the Website', to: '/site', variant: 'primary' },
            { label: 'Open the Wiki', to: '/wiki', variant: 'ghost' },
          ],
        },
      },
      {
        id: 'default-quick-links',
        type: 'buttons',
        x: 50,
        y: 85,
        z: 3,
        anchor: 'center',
        props: {
          align: 'center',
          gap: 10,
          items: [
            { label: 'News', to: '/site/news', variant: 'ghost' },
            { label: 'Screenshots', to: '/site/screenshots', variant: 'ghost' },
            { label: 'Five on Friday', to: '/site/five-on-friday', variant: 'ghost' },
            { label: 'Monthly Newsletter', to: '/site/newsletter', variant: 'ghost' },
            { label: 'About', to: '/site/about', variant: 'ghost' },
          ],
        },
      },
    ],
  }
}