// Main app — wires all sections together.
const TWEAK_DEFAULTS = {
	"palette": "sunset",
	"type": "editorial",
	"copy": "act",
	"pricing": "lead",
	"flow": "inline"
};

function App() {
	const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
	const [open, setOpen] = React.useState(false);

	React.useEffect(() => {
		applyPalette(tweaks.palette);
	}, [tweaks.palette]);

	React.useEffect(() => {
		applyTypeSystem(tweaks.type);
	}, [tweaks.type]);

	const openCheckout = React.useCallback(() => setOpen(true), []);
	const closeCheckout = React.useCallback(() => setOpen(false), []);

	React.useEffect(() => {
		const fn = () => openCheckout();
		window.addEventListener('open-checkout', fn);
		return () => window.removeEventListener('open-checkout', fn);
	}, [openCheckout]);

	React.useEffect(() => {
		const fn = (e) => { if (e.key === 'Escape') setOpen(false); };
		window.addEventListener('keydown', fn);
		return () => window.removeEventListener('keydown', fn);
	}, []);

	const tickerWords = ['Act.', 'Pose.', 'Express.', 'Believe.', 'Show up.', 'Expression Lab'];

	return (
		<>
			<Nav onRegister={openCheckout} palette={tweaks.palette} onPalette={v => setTweak('palette', v)} />
			<Hero onRegister={openCheckout} copyVariant={tweaks.copy} fontVariant="serif" />
			<Marquee items={tickerWords} bg="var(--ink)" color="var(--paper)" size={72} tilt={-2} />
			<Experience />
			<Schedule />
			<Marquee items={['Confidence.', 'Connection.', 'Camera-ready.', 'Creativity.']} bg="var(--pink)" color="#fff" size={64} italic={false} reverse tilt={1.6} />
			<Instructors />
			<WalkAway />
			<Details pricingMode={tweaks.pricing} />
			<Pricing onRegister={openCheckout} pricingMode={tweaks.pricing} />
			<Testimonial />
			<FAQ />
			<Footer onRegister={openCheckout} />

			<Checkout open={open} onClose={closeCheckout} mode={tweaks.flow} />

			<ExpressionLabTweaks tweaks={tweaks} setTweak={setTweak} />
		</>
	);
}

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