// app.jsx — LingoHub landing page main app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#3EB489", "#FF8A3D", "#FFFAEC"],
  "fontScale": 1,
  "showMascot": true,
  "playfulness": "playful"
}/*EDITMODE-END*/;

function Site() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { locale } = useT();
  const [language, setLanguage] = useState('TR');
  useReveal();

  // Re-run reveal on locale change to catch any newly-rendered elements
  useEffect(() => {
    requestAnimationFrame(() => {
      document.querySelectorAll('.reveal:not(.in)').forEach(el => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight) el.classList.add('in');
      });
    });
  }, [locale]);

  // Apply tweaks live (CSS vars)
  useEffect(() => {
    const r = document.documentElement;
    const [mint, orange, cream] = t.palette;
    r.style.setProperty('--mint', mint);
    r.style.setProperty('--orange', orange);
    r.style.setProperty('--cream', cream);
    document.body.style.fontSize = `${t.fontScale * 16}px`;
  }, [t.palette, t.fontScale]);

  return (
    <div data-screen-label="LingoHub Landing">
      <Header />
      <main>
        <Hero language={language} setLanguage={setLanguage} />
        <Features />
        <HowItWorks />
        <Testimonials />
        <CtaBanner />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakColor
          label="Theme palette"
          value={t.palette}
          options={[
            ["#3EB489", "#FF8A3D", "#FFFAEC"],
            ["#4FBA8B", "#FF6B35", "#FFF7E6"],
            ["#5BA68A", "#E07B3F", "#F6F1E1"],
            ["#2F9C73", "#FF8A3D", "#FFFFFF"]
          ]}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakSection label="Display" />
        <TweakSlider label="Text scale" value={t.fontScale} min={0.9} max={1.15} step={0.05}
                     onChange={(v) => setTweak('fontScale', v)} />
        <TweakRadio label="Vibe" value={t.playfulness}
                    options={['serious', 'playful']}
                    onChange={(v) => setTweak('playfulness', v)} />
        <TweakToggle label="Show mascot" value={t.showMascot}
                     onChange={(v) => setTweak('showMascot', v)} />
      </TweaksPanel>
    </div>
  );
}

function App() {
  return (
    <I18nProvider defaultLocale="tr">
      <Site />
    </I18nProvider>
  );
}

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