/* Lucide icon wrapper — uses the runtime library after mount */
const Icon = ({ name, size = 20, stroke = 1.75, className = '', style = {} }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const i = document.createElement('i');
      i.setAttribute('data-lucide', name);
      i.style.width = size + 'px';
      i.style.height = size + 'px';
      ref.current.appendChild(i);
      window.lucide.createIcons({
        icons: window.lucide.icons,
        attrs: { 'stroke-width': stroke, width: size, height: size }
      });
    }
  }, [name, size, stroke]);
  return <span ref={ref} className={`ic ${className}`} style={{ display: 'inline-flex', alignItems: 'center', ...style }} />;
};

/* Novale logo — wordmark/leaves brand mark.
   `color` recolors the leaf strokes/fills; `accent` recolors the underline. */
const BlossomMark = ({ size = 24, color = '#B0BB7E', accent = '#D97757' }) => (
  <svg width={size} height={size} viewBox="0 0 36 35" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="25" cy="1.5" r="1.5" fill={color} />
    <path d="M15.5 28C10.2888 24.7417 0.46759 15.58 2.87278 5C11.5315 10.52 14.8987 22.6333 15.5 28Z" fill={color} stroke={color} />
    <path d="M16.8807 20.3644C18.8398 14.9143 25.0035 4.29885 33.9864 5.43815C30.6445 14.5059 21.1902 19.1672 16.8807 20.3644Z" fill={color} stroke={color} />
    <path d="M16.8101 33.5C15.6434 26.1667 15.5101 9.6 24.3101 2" stroke={color} />
    <path d="M0 34H33" stroke={accent} />
  </svg>
);

Object.assign(window, { Icon, BlossomMark });