// mountains-lockups.jsx — wordmark lockups for the two-mountain mark.
const MC = {
  forest:'#143D2E', brass:'#B0894C', brassLt:'#C9A86A', cream:'#F5F2EA',
  serif:'"EB Garamond", Georgia, serif', sans:'"Archivo", system-ui, sans-serif',
};

// Horizontal: mark left, Evercap / Advisors right.
function LockupH({ markSize = 70, dark = false, uid = 'lh' }) {
  const fg = dark ? MC.cream : MC.forest;
  const sub = dark ? MC.brassLt : MC.brass;
  const land = dark ? LAND_REV : LAND;
  const water = dark ? WATER_REV : WATER_BRASS;
  return (
    <div style={{ display:'flex', alignItems:'center', gap: markSize*0.22 }}>
      <MountainMark size={markSize} land={land} water={water} horizon={dark ? MC.cream : MC.forest} uid={uid} />
      <div style={{ display:'flex', flexDirection:'column', lineHeight:1 }}>
        <span style={{ fontFamily:MC.serif, fontSize:markSize*0.52, fontWeight:600, color:fg, letterSpacing:'-0.01em' }}>Evercap</span>
        <span style={{ fontFamily:MC.sans, fontSize:markSize*0.145, fontWeight:600, color:sub,
          letterSpacing:'0.4em', textTransform:'uppercase', marginTop:markSize*0.08, marginLeft:2 }}>Advisors</span>
      </div>
    </div>
  );
}

// Stacked: mark on top, EVERCAP under, ADVISORS beneath.
function LockupV({ markSize = 96, dark = false, uid = 'lv' }) {
  const fg = dark ? MC.cream : MC.forest;
  const sub = dark ? MC.brassLt : MC.brass;
  const land = dark ? LAND_REV : LAND;
  const water = dark ? WATER_REV : WATER_BRASS;
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap: markSize*0.12 }}>
      <MountainMark size={markSize} land={land} water={water} horizon={dark ? MC.cream : MC.forest} uid={uid} />
      <div style={{ display:'flex', flexDirection:'column', alignItems:'center', lineHeight:1 }}>
        <span style={{ fontFamily:MC.serif, fontSize:markSize*0.34, fontWeight:600, color:fg,
          letterSpacing:'0.16em', textIndent:'0.16em', textTransform:'uppercase' }}>Evercap</span>
        <span style={{ fontFamily:MC.sans, fontSize:markSize*0.1, fontWeight:600, color:sub,
          letterSpacing:'0.46em', textIndent:'0.46em', textTransform:'uppercase', marginTop:markSize*0.085 }}>Advisors</span>
      </div>
    </div>
  );
}

Object.assign(window, { LockupH, LockupV, MC });