/* Shared Lucide icon helper + Logo lockup for the bunkerme site.
   Renders an <i data-lucide> placeholder and hydrates it to an SVG. */
function Icon({ name, size = 20, color = 'currentColor', strokeWidth = 2, style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({
        attrs: { width: size, height: size, stroke: color, 'stroke-width': strokeWidth },
        nameAttr: 'data-lucide',
      });
    }
  }, [name, size, color, strokeWidth]);
  return <span ref={ref} style={{ display: 'inline-flex', width: size, height: size, flexShrink: 0, ...style }} />;
}

/* bunkerme logo lockup — droplet mark + wordmark composed in live font */
function Logo({ size = 30, color = 'var(--text-primary)', onDark = false }) {
  return (
    <a href="index.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
      <img src={onDark ? '../assets/logo-mark-white.svg' : '../assets/logo-mark-black.svg'}
           width={Math.round(size * 0.66)} height={Math.round(size * 0.66)} alt="" />
      <span style={{ fontSize: size * 0.6, fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1 }}>
        <span style={{ color: onDark ? '#fff' : color }}>bunker</span><span style={{ color: 'var(--blue-500)' }}>me</span>
      </span>
    </a>
  );
}

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