import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css';

if (import.meta.env.DEV) {
  function createErrorOverlay() {
    const id = 'dev-error-overlay';
    if (document.getElementById(id)) return;
    const el = document.createElement('div');
    el.id = id;
    el.style.cssText = 'position:fixed;left:0;top:0;width:100%;max-height:50vh;overflow:auto;background:rgba(20,20,20,0.95);color:#fff;padding:12px;z-index:99999;font-family:monospace;font-size:12px;white-space:pre-wrap;box-sizing:border-box';
    document.body.appendChild(el);
  }
  function showErrorOverlay(message: string) {
    createErrorOverlay();
    document.getElementById('dev-error-overlay')!.textContent = message;
  }
  window.addEventListener('error', (ev) => {
    try {
      showErrorOverlay(`Error: ${ev.error?.message || ev.message}\n\n${ev.error?.stack || ev.filename + ':' + ev.lineno}`);
    } catch { /* ignore */ }
  });
  window.addEventListener('unhandledrejection', (ev) => {
    try {
      const reason = (ev.reason && (ev.reason.stack || ev.reason.message || String(ev.reason))) || String(ev.reason);
      showErrorOverlay(`Unhandled Rejection:\n${reason}`);
    } catch { /* ignore */ }
  });
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

const rootEl = document.getElementById('root');
if (rootEl) {
  const removeStaticHero = () => {
    document.getElementById('static-hero')?.remove();
  };
  const observer = new MutationObserver(() => {
    if (rootEl.querySelector('section')) {
      requestAnimationFrame(() => {
        requestAnimationFrame(removeStaticHero);
      });
      observer.disconnect();
    }
  });
  observer.observe(rootEl, { childList: true, subtree: true });
}