/* ============================================================
   Wayfare — main entry & Tweaks panel
   ============================================================ */

const { useState: _u, useEffect: _e } = React;

function App() {
  const [t, setTweak] = useTweaks(window.WAYFARE_DEFAULTS);
  const [emergencyOpen, setEmergencyOpen] = useState(false);
  const [fontScale, setFontScale] = useState(t.fontScale || 1);
  const [reduceMotion, setReduceMotion] = useState(!!t.reduceMotion);

  // Sync tweak state to DOM
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme || 'soft');
  }, [t.theme]);

  useEffect(() => {
    document.documentElement.style.setProperty('--font-scale', String(fontScale));
    setTweak('fontScale', fontScale);
  }, [fontScale]);

  useEffect(() => {
    document.documentElement.setAttribute('data-reduce-motion', reduceMotion ? 'true' : 'false');
    setTweak('reduceMotion', reduceMotion);
  }, [reduceMotion]);

  const a11yProps = {
    fontScale, setFontScale,
    reduceMotion, setReduceMotion,
    theme: t.theme, setTheme: (v) => setTweak('theme', v),
  };

  const scrollToHero = () => {
    document.getElementById('hero')?.scrollIntoView({ block: 'start' });
  };

  return (
    <>
      <div id="top" />
      <Nav a11yProps={a11yProps} onEmergency={() => setEmergencyOpen(true)} />
      <main id="main">
        <Hero onOpenApp={scrollToHero} />
        <Marquee />
        <Problem />
        <HowItWorks />
        <LighthouseExplainer />
        <Scouts />
        <AppShowcase />
        <CameraVoice />
        <EmergencySection onTrigger={() => setEmergencyOpen(true)} />
        <Market />
        <Team />
        <FAQ />
      </main>
      <Footer onOpenApp={scrollToHero} />

      <EmergencyFAB onClick={() => setEmergencyOpen(true)} />
      <EmergencyModal open={emergencyOpen} onClose={() => setEmergencyOpen(false)} />

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakRadio
          label="Palette"
          value={t.theme}
          options={['soft', 'sage', 'night']}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakToggle
          label="High contrast"
          value={t.theme === 'contrast'}
          onChange={(v) => setTweak('theme', v ? 'contrast' : 'soft')}
        />
        <TweakSection label="Accessibility" />
        <TweakSlider
          label="Text size"
          value={fontScale}
          min={0.85}
          max={1.4}
          step={0.05}
          unit="×"
          onChange={setFontScale}
        />
        <TweakToggle
          label="Reduce motion"
          value={reduceMotion}
          onChange={setReduceMotion}
        />
      </TweaksPanel>
    </>
  );
}

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