// logo.jsx — JYNX wordmark/mark (real geometry) + Lucide Icon wrapper
// Exports to window: JynxLogo, JynxMark, Icon

function JynxLogo({ height = 26, mark, text, style, className }) {
  const markC = mark || 'var(--accent)';
  const textC = text || 'currentColor';
  return (
    <svg className={className} style={style} height={height} viewBox="0 0 340.35 48.95"
         role="img" aria-label="JYNX" xmlns="http://www.w3.org/2000/svg">
      <g fill={textC}>
        <polygon points="84.75 42.66 84.75 27.97 91.04 27.97 91.04 43.36 113.42 43.36 113.42 5.59 86.15 5.59 86.15 0 119.72 0 119.72 42.66 113.42 48.95 91.04 48.95 84.75 42.66"></polygon>
        <polygon points="296.99 48.95 309.58 23.08 298.04 0 304.89 0 315.17 20.98 322.16 20.98 332.45 0 339.3 0 327.76 23.08 340.35 48.95 333.49 48.95 322.86 26.57 314.47 26.57 303.84 48.95 296.99 48.95"></polygon>
        <polygon points="225.54 48.95 225.54 0 234.5 0 258.41 41.61 258.41 0 264.71 0 264.71 48.95 255.76 48.95 231.84 7.34 231.84 48.95 225.54 48.95"></polygon>
        <polygon points="169.48 48.95 169.48 34.27 163.33 34.27 152 0 158.64 0 167.73 28.81 177.52 28.81 186.61 0 193.26 0 181.93 34.27 175.78 34.27 175.78 48.95 169.48 48.95"></polygon>
      </g>
      <g fill={markC}>
        <rect y="21.68" width="48.95" height="5.6"></rect>
        <rect x="21.68" width="5.6" height="48.95"></rect>
        <rect x="21.68" y="0" width="5.59" height="48.95" transform="translate(-10.14 24.47) rotate(-45)"></rect>
        <rect x="0" y="21.68" width="48.95" height="5.59" transform="translate(-10.14 24.48) rotate(-45)"></rect>
      </g>
    </svg>
  );
}

function JynxMark({ size = 32, color, style, className }) {
  const c = color || 'var(--accent)';
  return (
    <svg className={className} style={style} width={size} height={size} viewBox="0 0 48.95 48.95"
         role="img" aria-label="JYNX" xmlns="http://www.w3.org/2000/svg" fill={c}>
      <rect y="21.68" width="48.95" height="5.6"></rect>
      <rect x="21.68" width="5.6" height="48.95"></rect>
      <rect x="21.68" y="0" width="5.59" height="48.95" transform="translate(-10.14 24.47) rotate(-45)"></rect>
      <rect x="0" y="21.68" width="48.95" height="5.59" transform="translate(-10.14 24.48) rotate(-45)"></rect>
    </svg>
  );
}

function _toPascal(name) {
  return name.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('');
}

function Icon({ name, size = 20, stroke = 1.75, color, style, className }) {
  const lib = (typeof window !== 'undefined' && window.lucide && window.lucide.icons) ? window.lucide.icons : null;
  const node = lib ? lib[_toPascal(name)] : null;
  const common = {
    width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: color || 'currentColor', strokeWidth: stroke,
    strokeLinecap: 'round', strokeLinejoin: 'round',
    className: 'ic-svg ' + (className || ''), style,
  };
  const kids = (node && Array.isArray(node[2])) ? node[2] : [];
  if (!kids.length) return <svg {...common} aria-hidden="true"></svg>;
  return (
    <svg {...common} aria-hidden="true">
      {kids.map((child, i) => React.createElement(child[0], { key: i, ...child[1] }))}
    </svg>
  );
}

Object.assign(window, { JynxLogo, JynxMark, Icon });