/* Digidelta brand lockup — uses official wordmark PNG.
   Light/dark versions swap automatically based on [data-theme].
   A subtle "AI · 2630" sub-label positions this as the internal AI portal. */
const DigiMark = ({ size = 32, showLabel = true, aiDot = true }) => {
  const [isDark, setIsDark] = React.useState(() =>
    typeof document !== 'undefined' && document.documentElement.dataset.theme === 'dark'
  );

  React.useEffect(() => {
    const obs = new MutationObserver(() => {
      setIsDark(document.documentElement.dataset.theme === 'dark');
    });
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
    return () => obs.disconnect();
  }, []);

  const logoSrc = isDark
    ? 'assets/digidelta-wordmark-light.png'
    : 'assets/digidelta-wordmark-dark.png';

  // Natural logo ratio ≈ 1844/387 ≈ 4.76 — auto-fit the sidebar width.
  const logoH = Math.round(size * 0.75);

  if (!showLabel) {
    // Collapsed sidebar: real Digidelta "D" monogram extracted from the wordmark
    const dSrc = isDark
      ? 'assets/digidelta-d-light.png'
      : 'assets/digidelta-d-dark.png';
    return (
      <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
        <img
          src={dSrc}
          alt="Digidelta"
          style={{ width: size, height: size, objectFit: 'contain', display: 'block' }}
        />
        {aiDot && (
          <span style={{
            position: 'absolute', top: -1, right: -1,
            width: 8, height: 8, borderRadius: '50%',
            background: 'var(--ai-500)',
            boxShadow: '0 0 0 2px var(--bg-elev), 0 0 6px var(--ai-500)',
          }} />
        )}
      </div>
    );
  }

  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, position: 'relative', width: '100%', minWidth: 0 }}>
      <img
        src={logoSrc}
        alt="Digidelta"
        style={{
          height: logoH,
          width: '100%',
          maxWidth: '100%',
          objectFit: 'contain',
          objectPosition: 'left center',
          display: 'block',
        }}
      />
      {aiDot && (
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 4,
          paddingLeft: 8, marginLeft: 2,
          borderLeft: '1px solid var(--border)',
          height: logoH + 4,
        }}>
          <span style={{
            width: 5, height: 5, borderRadius: '50%',
            background: 'var(--ai-500)',
            boxShadow: '0 0 6px var(--ai-500)',
          }} />
          <span className="font-display" style={{ fontWeight: 600, fontSize: 10, letterSpacing: '0.1em', color: 'var(--text-muted)' }}>
            AI 2630
          </span>
        </div>
      )}
    </div>
  );
};

window.DigiMark = DigiMark;