/* global React */
// Brand logo lockup: growth mark + Hebrew wordmark. `dark` reverses for burgundy grounds.
const Mark = ({ size = 40 }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" aria-hidden="true">
    {/* a richer crack network spreading below the stem */}
    <g stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" opacity="0.8" fill="none">
      <path d="M32 52 L24 55 L16 53.5 L9 57"/>
      <path d="M16 53.5 L14 60"/>
      <path d="M32 52 L40 54.5 L48 53 L56 57"/>
      <path d="M48 53 L51 60"/>
      <path d="M31 52 L29 58 L31.5 63"/>
      <path d="M34 55 L37 61"/>
    </g>
    <path d="M32 52 V24" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round"/>
    <path d="M32 32 C32 22 24 17 16 17 C16 26 23 32 32 32 Z" fill="currentColor"/>
    <path d="M32 26 C32 17 39 11 47 11 C47 20 40 26 32 26 Z" fill="currentColor" opacity="0.72"/>
    <circle cx="32" cy="12" r="3.6" fill="currentColor" opacity="0.55"/>
  </svg>
);

const Logo = ({ dark = false, size = 40, onClick }) => (
  <div onClick={onClick} style={{
    display: 'flex', alignItems: 'center', gap: 11, cursor: onClick ? 'pointer' : 'default',
    color: dark ? '#FFF6F2' : 'var(--brand)'
  }}>
    <Mark size={size} />
    <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
      <span style={{
        fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: size * 0.62,
        color: dark ? '#FFF6F2' : 'var(--ink-900)'
      }}>מילים לנצח</span>
      <span style={{
        fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: size * 0.27,
        letterSpacing: '0.3em', marginTop: 4,
        color: dark ? 'var(--red-300)' : 'var(--brand)'
      }}>אודליה מאיר</span>
    </div>
  </div>
);
window.Logo = Logo;
window.Mark = Mark;