// wordmarks.jsx — Typographic treatments.
//
// Stack institucional (PRIMARY):
//     CASA LAR             ← top, lighter, letter-spaced
//     ─────                ← centered rule
//     LUZ DO CAMINHO       ← bottom, bold, larger
//
// Horizontal lockup variant: same structure, left-aligned.

function WMStackedInst({ align = 'center', dark = false, compact = false, scale = 1 }) {
  const color = dark ? 'var(--paper)' : 'var(--ink)';
  const ruleColor = dark
    ? 'color-mix(in oklab, var(--paper) 45%, transparent)'
    : 'color-mix(in oklab, var(--ink) 38%, transparent)';
  return (
    <div style={{
      textAlign: align,
      fontFamily: 'var(--sans)',
      color,
      lineHeight: 1,
      display: 'inline-block',
    }}>
      {/* CASA LAR — small subtitle */}
      <div style={{
        fontWeight: 500,
        fontSize: `${0.6 * scale}em`,
        letterSpacing: '0.42em',
        textTransform: 'uppercase',
        opacity: 0.78,
        // letter-spacing pushes glyphs right → pad-left to compensate visually
        paddingLeft: align === 'center' ? '0.42em' : 0,
      }}>
        CASA&nbsp;LAR
      </div>
      {/* rule */}
      <div style={{
        margin: compact ? '0.4em 0' : '0.55em 0',
        marginLeft: align === 'center' ? 'auto' : 0,
        marginRight: align === 'center' ? 'auto' : 'auto',
        width: align === 'center' ? '78%' : '92%',
        height: 1,
        background: ruleColor,
      }} />
      {/* LUZ DO CAMINHO — bold primary */}
      <div style={{
        fontWeight: 700,
        fontSize: `${1.05 * scale}em`,
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
        // letter-spacing visual centering
        paddingLeft: align === 'center' ? '0.14em' : 0,
      }}>
        LUZ&nbsp;DO&nbsp;CAMINHO
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Editorial · serif treatment for special moments
// ────────────────────────────────────────────────────────────────
function WMInlineSerif({ size = '2.4em', align = 'center' }) {
  return (
    <div style={{
      textAlign: align,
      fontFamily: 'var(--serif)',
      fontStyle: 'italic',
      fontWeight: 400,
      fontSize: size,
      letterSpacing: '-0.015em',
      color: 'var(--ink)',
      lineHeight: 1,
      whiteSpace: 'nowrap',
    }}>
      Luz do Caminho
    </div>
  );
}

function WMSerifStack({ align = 'center' }) {
  return (
    <div style={{
      textAlign: align,
      lineHeight: 1,
      color: 'var(--ink)',
    }}>
      <div style={{
        fontFamily: 'var(--sans)',
        fontSize: '0.78em',
        fontWeight: 500,
        letterSpacing: '0.4em',
        textTransform: 'uppercase',
        color: 'var(--ink-mute)',
        marginBottom: '0.55em',
        paddingLeft: align === 'center' ? '0.4em' : 0,
      }}>CASA&nbsp;LAR</div>
      <div style={{
        fontFamily: 'var(--serif)',
        fontStyle: 'italic',
        fontWeight: 400,
        fontSize: '3em',
        letterSpacing: '-0.018em',
        lineHeight: 0.95,
      }}>
        Luz do Caminho
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Monograma "LC"
// ────────────────────────────────────────────────────────────────
function WMMonogram({ size = 120, color }) {
  const c = color || 'var(--ink)';
  return (
    <svg viewBox="0 0 120 120" width={size} height={size} xmlns="http://www.w3.org/2000/svg">
      <text x="60" y="92"
        textAnchor="middle"
        fontFamily="Instrument Serif, serif"
        fontStyle="italic"
        fontSize="100"
        fontWeight="400"
        fill={c}
        letterSpacing="-6">L<tspan dx="-22" dy="0">C</tspan></text>
    </svg>
  );
}

Object.assign(window, {
  WMStackedInst,
  WMInlineSerif,
  WMSerifStack,
  WMMonogram,
});