/* Persisted dark / light switch. Honours the OS preference on first visit. */
function ThemeToggle() {
  const [dark, setDark] = React.useState(() => {
    try {
      const saved = localStorage.getItem('zavifx-theme');
      if (saved) return saved === 'dark';
    } catch (e) { /* storage blocked */ }
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
  });
  React.useEffect(() => {
    const root = document.documentElement;
    if (dark) root.setAttribute('data-theme', 'dark'); else root.removeAttribute('data-theme');
    try { localStorage.setItem('zavifx-theme', dark ? 'dark' : 'light'); } catch (e) { /* ignore */ }
  }, [dark]);
  return (
    <button type="button" className="zx-themebtn" onClick={() => setDark((d) => !d)}
      aria-pressed={dark} aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'} data-magnetic>
      <svg className="zx-sun" width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
        <circle cx="10" cy="10" r="3.6" stroke="currentColor" strokeWidth="1.5"/>
        <path d="M10 2v2M10 16v2M2 10h2M16 10h2M4.5 4.5 6 6M14 14l1.5 1.5M15.5 4.5 14 6M6 14l-1.5 1.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
      </svg>
      <svg className="zx-moon" width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
        <path d="M16.5 12.4A7 7 0 0 1 7.6 3.5a7 7 0 1 0 8.9 8.9Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
      </svg>
      <span className="zx-sr-only">{dark ? 'Dark mode on' : 'Light mode on'}</span>
    </button>
  );
}
Object.assign(window, { ThemeToggle });