// The Sentinel by Yuvoice logo lockup.
// Uses the light-purple variant PNG (for dark backgrounds) per brand guide.
// Clear space per brand: horizontal ≈ 12.8% of logo width, vertical ≈ 30.5% of logo height.

function Wordmark({ size = 'md', style = {} }) {
  // Heights chosen for each use: sm (header), md (modal), lg (splash)
  const heights = { sm: 32, md: 42, lg: 80 };
  const h = heights[size] || heights.md;
  // Native aspect ratio of the provided PNG: 918 × 296 ≈ 3.1:1
  const w = h * (918 / 296);
  // Clear space per brand guide (12.8% h / 30.5% v) — applied at reduced
  // multiplier in UI chrome where surrounding whitespace already separates
  // the lockup. Full spec values are respected for 'lg' splash usage.
  const clearH = size === 'lg' ? 0.128 : 0.06;
  const clearV = size === 'lg' ? 0.305 : 0.12;
  return (
    <img
      src="assets/sentinel-logo.png"
      alt="The Sentinel by Yuvoice"
      style={{
        height: h,
        width: w,
        display: 'block',
        margin: `${h * clearV}px ${w * clearH}px`,
        ...style,
      }}
    />
  );
}

Object.assign(window, { Wordmark });