// Ophicina wordmark — recreated with Cormorant Garamond to match supplied logo.
// Two display sizes; "do cabelo" can be hidden via withSub={false}.
// Color inherits via fill="currentColor".

const Wordmark = ({ size = 'lg', withSub = true, mono = false, style = {} }) => {
  const scale = { sm: 0.55, md: 0.8, lg: 1, xl: 1.5, xxl: 2.2 }[size] || 1;
  return (
    <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', lineHeight: 0.92, color: 'currentColor', ...style }}>
      <div className="op-wordmark" style={{ fontSize: 64 * scale }}>
        Ophicina
      </div>
      {withSub && (
        <div className="op-wordmark-sub" style={{ fontSize: 11 * scale, marginTop: 8 * scale, opacity: mono ? 1 : 0.95 }}>
          do&nbsp;&nbsp;cabelo
        </div>
      )}
    </div>
  );
};

// Monogram — the "O" treated as a stand-alone mark, a discreet ring with serif accent.
const Monogram = ({ size = 64, ringed = true, color = 'currentColor', bg = 'transparent' }) => {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: bg, color,
      border: ringed ? `1px solid ${color}` : 'none',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'var(--serif)', fontWeight: 500,
      fontSize: size * 0.62, letterSpacing: 0,
      lineHeight: 1, paddingBottom: size * 0.04,
    }}>
      O
    </div>
  );
};

// Lockup for one of the 3 unidades — small label below wordmark.
const UnitLockup = ({ unit = 'Leblon', size = 'md', stack = 'horizontal' }) => {
  const scale = { sm: 0.55, md: 0.8, lg: 1 }[size] || 0.8;
  if (stack === 'vertical') {
    return (
      <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', color: 'currentColor' }}>
        <Wordmark size={size} withSub={true} />
        <div style={{
          marginTop: 14 * scale, paddingTop: 10 * scale,
          borderTop: '1px solid currentColor',
          width: 220 * scale,
          textAlign: 'center',
          fontFamily: 'var(--sans)', fontWeight: 500,
          fontSize: 10 * scale, letterSpacing: '0.32em',
          textTransform: 'uppercase', opacity: 0.95,
        }}>
          unidade {unit}
        </div>
      </div>
    );
  }
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 18 * scale, color: 'currentColor' }}>
      <Wordmark size={size} withSub={true} />
      <div style={{
        height: 56 * scale, width: 1, background: 'currentColor', opacity: 0.5,
      }} />
      <div style={{
        fontFamily: 'var(--sans)', fontWeight: 500,
        fontSize: 10 * scale, letterSpacing: '0.32em',
        textTransform: 'uppercase', lineHeight: 1.4,
      }}>
        unidade<br/>{unit}
      </div>
    </div>
  );
};

Object.assign(window, { Wordmark, Monogram, UnitLockup });