// logo.jsx — The Future Forward eyecon mark + lockups
const FF_EYECON_PATH = "M26,13A13,13,0,1,0,2,20a13,13,0,1,0,24,7,12.93,12.93,0,0,0-2-7A12.93,12.93,0,0,0,26,13ZM1.17,13a11.84,11.84,0,1,1,22.07,6A13,13,0,0,0,2.78,19,11.77,11.77,0,0,1,1.17,13Zm21.4,7A11.83,11.83,0,0,1,3.46,20a11.83,11.83,0,0,1,19.11,0Zm2.29,7A11.84,11.84,0,1,1,2.78,21a13,13,0,0,0,20.46,0A11.77,11.77,0,0,1,24.85,27Zm-8.74-7A3.11,3.11,0,1,1,13,16.89,3.11,3.11,0,0,1,16.12,20Z";

function Eyecon({ height = 28, color = 'currentColor', style }) {
  const w = (26.02 / 40) * height;
  return (
    <svg width={w} height={height} viewBox="0 0 26.02 40" style={style} aria-hidden="true">
      <path d={FF_EYECON_PATH} fill={color} />
    </svg>
  );
}

// Horizontal lockup: mark + "The Future Forward"
function Lockup({ height = 26, color = 'currentColor', gap = 14, weight = 500, style }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap, color, ...style }}>
      <Eyecon height={height} color={color} />
      <span style={{
        fontFamily: 'var(--tff-sans)', fontWeight: weight,
        fontSize: height * 0.62, letterSpacing: '0.005em', lineHeight: 1, whiteSpace: 'nowrap',
      }}>The Future Forward</span>
    </span>
  );
}

// Stacked lockup: mark + "The Future / Forward"
function LockupStacked({ height = 30, color = 'currentColor', style }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 16, color, ...style }}>
      <Eyecon height={height * 1.5} color={color} />
      <span style={{
        fontFamily: 'var(--tff-serif)', fontWeight: 400,
        fontSize: height * 0.7, lineHeight: 1.05,
      }}>The Future<br />Forward</span>
    </span>
  );
}

Object.assign(window, { Eyecon, Lockup, LockupStacked, FF_EYECON_PATH });