// logos/FaviconMark.jsx
// CollabIQ favicon mark — 3-lobe Venn diagram (two upper teal lobes + one
// lower blue lobe, white nucleus ring around teal core dot). Reference:
// /workspace/CollabIQ-Production-Assets.html + /workspace/image-2.jpg.
//
// Pure-React component, no dependencies. Use anywhere a brand glyph is
// needed (header orb, sidebar logo, footer mark, login screen, etc.).
//
// Three exports off `window` (Babel-in-browser pattern, no module bundler):
//   - window.FaviconMark            → the bare SVG glyph
//   - window.FaviconMarkGlassOrb    → the SVG wrapped in a glass capsule
//                                      button (used as the floating home orb
//                                      in chrome.jsx)
//   - window.FaviconMarkSVG         → raw SVG markup string (for HTML
//                                      injection / favicon endpoints / etc.)
//
// Props:
//   size:      number — px width/height of the SVG. Default 18.
//   className: string — extra class on the root <svg>.
//   ...rest:   forwarded to the root <svg>.
//
// GlassOrb extra props:
//   size:      number — total orb diameter (the inner glyph is sized
//              automatically at ~50% of the orb). Default 40.
//   href:      string — link target. Default 'https://www.collabiqcore.com'.
//   ariaLabel: string — accessible label. Default 'Home — collabiqcore.com'.

(function (global) {
  // ── Bare SVG glyph ──
  function FaviconMark(props) {
    var size = (props && props.size) || 18;
    var className = (props && props.className) || '';
    var rest = Object.assign({}, props || {});
    delete rest.size;
    delete rest.className;
    return (
      React.createElement('svg', Object.assign({
        width: size,
        height: size,
        viewBox: '0 0 16 16',
        'aria-hidden': true,
        className: className,
        style: Object.assign({ display: 'block', flexShrink: 0 }, (rest.style || {})),
      }, (function () { var r = Object.assign({}, rest); delete r.style; return r; })()),
        // Two upper teal lobes
        React.createElement('circle', { cx: 5.5,  cy: 6,    r: 4.2, fill: 'rgba(45,212,191,0.55)' }),
        React.createElement('circle', { cx: 10.5, cy: 6,    r: 4.2, fill: 'rgba(45,212,191,0.55)' }),
        // Lower blue lobe
        React.createElement('circle', { cx: 8,    cy: 10,   r: 4.2, fill: 'rgba(56,189,248,0.45)' }),
        // White nucleus ring
        React.createElement('circle', { cx: 8,    cy: 7.6,  r: 2.8, fill: 'none', stroke: '#FFFFFF', strokeWidth: 0.6 }),
        // Teal core dot
        React.createElement('circle', { cx: 8,    cy: 7.6,  r: 1.7, fill: '#2DD4BF' })
      )
    );
  }

  // ── Glass-capsule orb wrapper (drop-in home button) ──
  function FaviconMarkGlassOrb(props) {
    var p = props || {};
    var size = p.size || 40;
    var href = p.href || 'https://www.collabiqcore.com';
    var ariaLabel = p.ariaLabel || 'Home — collabiqcore.com';
    var className = p.className || '';
    var glyphSize = Math.round(size * 0.5);

    var baseStyle = Object.assign({
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: size + 'px',
      height: size + 'px',
      borderRadius: '50%',
      background: 'var(--g-frosted)',
      border: '1px solid var(--g-border)',
      backdropFilter: 'blur(20px) saturate(160%)',
      WebkitBackdropFilter: 'blur(20px) saturate(160%)',
      boxShadow: 'var(--sh-1)',
      color: 'var(--text)',
      textDecoration: 'none',
      transition: 'border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out)',
    }, (p.style || {}));

    return React.createElement('a', {
      href: href,
      className: ('favicon-glass-orb ' + className).trim(),
      'aria-label': ariaLabel,
      title: p.title || 'Home',
      style: baseStyle,
      onMouseEnter: function (e) {
        e.currentTarget.style.borderColor = 'var(--teal)';
        e.currentTarget.style.transform = 'scale(1.05)';
        e.currentTarget.style.boxShadow = '0 0 0 3px rgba(45,212,191,0.18), var(--sh-1)';
      },
      onMouseLeave: function (e) {
        e.currentTarget.style.borderColor = 'var(--g-border)';
        e.currentTarget.style.transform = 'scale(1)';
        e.currentTarget.style.boxShadow = 'var(--sh-1)';
      },
    }, React.createElement(FaviconMark, { size: glyphSize }));
  }

  // ── Raw SVG string (for HTML injection / static favicon endpoints) ──
  var FaviconMarkSVG = ''
    + '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">'
    +   '<circle cx="5.5" cy="6"   r="4.2" fill="rgba(45,212,191,0.55)"/>'
    +   '<circle cx="10.5" cy="6"  r="4.2" fill="rgba(45,212,191,0.55)"/>'
    +   '<circle cx="8"   cy="10"  r="4.2" fill="rgba(56,189,248,0.45)"/>'
    +   '<circle cx="8"   cy="7.6" r="2.8" fill="none" stroke="#FFFFFF" stroke-width="0.6"/>'
    +   '<circle cx="8"   cy="7.6" r="1.7" fill="#2DD4BF"/>'
    + '</svg>';

  global.FaviconMark = FaviconMark;
  global.FaviconMarkGlassOrb = FaviconMarkGlassOrb;
  global.FaviconMarkSVG = FaviconMarkSVG;
})(typeof window !== 'undefined' ? window : this);