function App() {
	React.useEffect(() => {
		document.documentElement.setAttribute('data-theme', 'dark');
	}, []);

	React.useEffect(() => {
		const onClick = (e) => {
			const a = e.target.closest('a[href^="#"]');
			if (!a) return;
			const id = a.getAttribute('href').slice(1);
			const el = document.getElementById(id);
			if (!el) return;
			e.preventDefault();
			const y = el.getBoundingClientRect().top + window.scrollY - 56;
			window.scrollTo({ top: y, behavior: 'smooth' });
		};
		document.addEventListener('click', onClick);
		return () => document.removeEventListener('click', onClick);
	}, []);

	return (
		<>
			<window.Nav theme="dark"/>
			<main>
				<window.Hero/>
				<window.Gallery/>
				<window.About/>
				<window.Patreon/>
			</main>
			<window.Footer/>
		</>
	);
}

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