/* global React */
// Bevri.ai logo — brain mark + wordmark. Exported to window for other scripts.

const BRAIN_PATHS = (
  <>
    <path d="M20 11 C24 7 31 7 34.5 11.5 C38.5 7.5 46 8.5 48 14.5 C55 14 59.5 20 56.5 26.5 C61.5 29.5 61.5 37.5 55.5 40 C58.5 46 53.5 53 46.5 51 C44.5 57 35.5 58.5 31.5 53.5 C26.5 57.5 17.5 54.5 17.5 47.5 C11.5 45.5 10.5 37 15.5 34 C11 29 13 20 20 20 C19.5 17 18.5 13 20 11 Z" fill="#244a35" />
    <path d="M34 9 C34 9 34 52 34 54.5 C35.5 58.5 44.5 57 46.5 51 C53.5 53 58.5 46 55.5 40 C61.5 37.5 61.5 29.5 56.5 26.5 C59.5 20 55 14 48 14.5 C46 8.5 38.5 7.5 34.5 11.5 C34.3 11.3 34 9 34 9 Z" fill="#3a6049" />
    <path d="M33.5 10 L33.5 54" stroke="#bbf7d0" strokeWidth="1.6" strokeLinecap="round" />
    <g stroke="#bbf7d0" strokeWidth="1.5" fill="none" strokeLinecap="round" opacity="0.9">
      <path d="M27 16 C22 18 22 23 26 24 C30 25 29 30 24 31" />
      <path d="M20 27 C24 28 24 33 19 34" />
      <path d="M28 35 C24 37 25 42 29 43" />
      <path d="M24 45 C28 46 28 50 25 51" />
    </g>
    <g stroke="#bbf7d0" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round">
      <path d="M40 18 H47 V23" />
      <path d="M40 27 H51" />
      <path d="M44 34 H49 V38" />
      <path d="M40 43 H46 V47" />
    </g>
    <g fill="#bbf7d0">
      <circle cx="47" cy="23.5" r="1.7" />
      <circle cx="51.5" cy="27" r="1.7" />
      <circle cx="49" cy="38.5" r="1.7" />
      <circle cx="46" cy="47.5" r="1.7" />
    </g>
  </>
);

function BrainMark({ size = 40, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none"
         xmlns="http://www.w3.org/2000/svg" style={style} aria-hidden="true">
      {BRAIN_PATHS}
    </svg>
  );
}

function Wordmark({ size = 26, mark = true, markSize }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: mark ? 5 : 0 }}>
      {mark && <BrainMark size={markSize || size * 1.55} />}
      <span style={{
        fontSize: size, fontWeight: 700, letterSpacing: '-0.035em',
        color: 'var(--forest)', lineHeight: 1,
      }}>
        bevri<span style={{ color: 'var(--sage)' }}>.ai</span>
      </span>
    </span>
  );
}

window.BrainMark = BrainMark;
window.Wordmark = Wordmark;