// App root
const DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "lila",
  "density": "cozy",
  "animations": true,
  "heroStyle": "image"
} /*EDITMODE-END*/;

const App = () => {
  const [settings, setSettings] = React.useState(DEFAULTS);
  const [showTweaks, setShowTweaks] = React.useState(false);
  const [editMode, setEditMode] = React.useState(false);

  useReveal();

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', settings.theme);
    document.documentElement.setAttribute('data-density', settings.density);
    document.documentElement.setAttribute('data-animations', settings.animations ? 'on' : 'off');
  }, [settings]);

  // Edit mode wiring (register BEFORE announcing availability)
  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') {setEditMode(true);setShowTweaks(true);}
      if (e.data.type === '__deactivate_edit_mode') {setEditMode(false);setShowTweaks(false);}
    };
    window.addEventListener('message', onMsg);
    window.parent?.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  return (
    <I18nProvider>
      <Header />
      <main>
        <Hero style={settings.heroStyle} />
        <UrgencyStrip />
        <Stats />
        <Audience />
        <Modules />
        <Tools />
        <Showreel />
        <Included />
        <Testimonials />
        <CTABanner variant="spotlight" />
        <Calendar />
        <Instructors />
        <FAQ />
        <ContactForm />
        <Pricing />
      </main>
      <Footer />

      {editMode && !showTweaks &&
      <button className="tweaks-fab" onClick={() => setShowTweaks(true)} aria-label="Open tweaks">
          <Icon name="sparkles" size={20} />
        </button>
      }
      {editMode && showTweaks &&
      <TweaksPanel settings={settings} setSettings={setSettings} onClose={() => setShowTweaks(false)} />
      }
    </I18nProvider>);

};

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