// Shared ASCII logo component + site-wide VOLT strobe toggle
// Used across all Cathedral Blueprint artboards.

const ASCII_LOGO_URL = '/assets/myravyra-ascii.txt';

// Cache the fetch so every instance shares one request
let _logoCache = null;
const getLogo = () => {
  if (!_logoCache) _logoCache = fetch(ASCII_LOGO_URL).then(r => r.text()).catch(() => '');
  return _logoCache;
};

const useAsciiLogo = () => {
  const [text, setText] = React.useState('');
  React.useEffect(() => {
    let alive = true;
    getLogo().then(t => { if (alive) setText(t); });
    return () => { alive = false; };
  }, []);
  return text;
};

// HERO variant — big, centered, VOLT-cycling (or locked green when site strobe is on)
const AsciiLogoHero = ({ fontSize = 7, style = {} }) => {
  const text = useAsciiLogo();
  return (
    <pre className="ma-ascii-logo ma-ascii-hero" style={{
      fontFamily: 'JetBrains Mono, monospace',
      fontSize,
      lineHeight: 1.0,
      whiteSpace: 'pre',
      color: '#fff',
      margin: 0,
      pointerEvents: 'none',
      ...style,
    }}>{text}</pre>
  );
};

// SUBTLE variant — very faint watermark for non-Gate pages
const AsciiLogoWatermark = ({ fontSize = 5, opacity = 0.08, style = {} }) => {
  const text = useAsciiLogo();
  return (
    <pre className="ma-ascii-logo ma-ascii-watermark" style={{
      fontFamily: 'JetBrains Mono, monospace',
      fontSize,
      lineHeight: 1.0,
      whiteSpace: 'pre',
      color: '#94F508',
      opacity,
      margin: 0,
      pointerEvents: 'none',
      textShadow: '0 0 3px rgba(148,245,8,0.32)',
      mixBlendMode: 'screen',
      ...style,
    }}>{text}</pre>
  );
};

// Site-wide VOLT strobe toggle — a global class on the design canvas root.
// Clicking anywhere on the button flips a class on document.documentElement
// so ALL artboards respond simultaneously.
const SiteStrobeToggle = () => {
  const [on, setOn] = React.useState(false);
  const toggle = () => {
    setOn(o => {
      const next = !o;
      document.documentElement.classList.toggle('ma-volt-strobe', next);
      return next;
    });
  };
  return (
    <div style={{
      position: 'fixed',
      left: 0, top: '50%',
      transform: 'translateY(-50%)',
      zIndex: 9999,
      fontFamily: 'Terminal Grotesque, IBM Plex Mono, JetBrains Mono, monospace',
    }}>
      <button onClick={toggle} style={{
        appearance: 'none',
        background: on ? '#000' : '#000',
        border: '1.5px solid #94F508',
        borderLeft: 'none',
        color: '#94F508',
        padding: '18px 14px',
        cursor: 'pointer',
        fontFamily: 'Terminal Grotesque, IBM Plex Mono, JetBrains Mono, monospace',
        fontSize: 10,
        letterSpacing: '0.38em',
        fontWeight: 800,
        writingMode: 'vertical-rl',
        transform: 'rotate(180deg)',
        textShadow: '0 0 6px #94F508',
        boxShadow: on
          ? '4px 0 24px rgba(255,255,255,0.6), inset 0 0 12px rgba(148,245,8,0.2)'
          : '4px 0 16px rgba(148,245,8,0.35), inset 0 0 10px rgba(148,245,8,0.1)',
        clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%)',
        animation: 'maPulse 2.5s ease-in-out infinite',
      }}>
        {on ? '◆ VOLT · STROBING ·' : '◆ VOLT · ACTIVATE ·'}
      </button>
    </div>
  );
};

Object.assign(window, { AsciiLogoHero, AsciiLogoWatermark, SiteStrobeToggle, useAsciiLogo });