// App shell + Tweaks panel
const { useState: useS, useEffect: useE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "displayFont": "Fraunces",
  "bodyFont": "Plus Jakarta Sans",
  "density": "default",
  "cardStyle": "soft",
  "heroVariant": "editorial",
  "dark": false
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useS('home');

  // Apply font CSS vars
  useE(() => {
    document.documentElement.style.setProperty('--font-display', `"${tweaks.displayFont}", Georgia, serif`);
    document.documentElement.style.setProperty('--font-body', `"${tweaks.bodyFont}", system-ui, sans-serif`);
    // Load Google Fonts dynamically
    const id = 'tweak-fonts';
    let link = document.getElementById(id);
    const fonts = `family=${tweaks.bodyFont.replace(/ /g, '+')}:wght@300;400;500;600;700;800&family=${tweaks.displayFont.replace(/ /g, '+')}:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap`;
    if (!link) { link = document.createElement('link'); link.id = id; link.rel = 'stylesheet'; document.head.appendChild(link); }
    link.href = `https://fonts.googleapis.com/css2?${fonts}`;
  }, [tweaks.displayFont, tweaks.bodyFont]);

  useE(() => {
    if (window.lucide) window.lucide.createIcons();
  });
  useE(() => {
    const t = setTimeout(() => { if (window.lucide) window.lucide.createIcons(); }, 80);
    return () => clearTimeout(t);
  }, [page, tweaks]);

  // Scroll to top on page change
  useE(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }, [page]);

  const dark = tweaks.dark;
  const Page = { home: HomePage, about: AboutPage, programs: ProgramsPage, contact: ContactPage }[page];

  return (
    <div className={dark ? 'min-h-screen bg-ink text-white' : 'min-h-screen bg-paper text-ink'} data-screen-label={`${page}`}>
      <NavBar page={page} setPage={setPage} dark={dark} />
      <main key={page} className="animate-[fadeIn_0.4s_ease]">
        <Page setPage={setPage} dark={dark} density={tweaks.density} cardStyle={tweaks.cardStyle} heroVariant={tweaks.heroVariant} />
      </main>
      <Footer setPage={setPage} dark={dark} />
      <FloatingActions />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Tipografi">
          <TweakSelect label="Başlık fontu" value={tweaks.displayFont} onChange={v => setTweak('displayFont', v)}
            options={[{ value: 'Fraunces', label: 'Fraunces (varsayılan)' }, { value: 'Instrument Serif', label: 'Instrument Serif' }, { value: 'Playfair Display', label: 'Playfair Display' }, { value: 'DM Serif Display', label: 'DM Serif Display' }, { value: 'Plus Jakarta Sans', label: 'Plus Jakarta Sans (sans)' }, { value: 'Space Grotesk', label: 'Space Grotesk (sans)' }]} />
          <TweakSelect label="Gövde fontu" value={tweaks.bodyFont} onChange={v => setTweak('bodyFont', v)}
            options={[{ value: 'Plus Jakarta Sans', label: 'Plus Jakarta Sans' }, { value: 'Inter', label: 'Inter' }, { value: 'Space Grotesk', label: 'Space Grotesk' }, { value: 'IBM Plex Sans', label: 'IBM Plex Sans' }, { value: 'Manrope', label: 'Manrope' }]} />
        </TweakSection>
        <TweakSection title="Düzen yoğunluğu">
          <TweakRadio value={tweaks.density} onChange={v => setTweak('density', v)}
            options={[{ value: 'compact', label: 'Sıkı' }, { value: 'default', label: 'Normal' }, { value: 'spacious', label: 'Geniş' }]} />
        </TweakSection>
        <TweakSection title="Hero varyantı">
          <TweakRadio value={tweaks.heroVariant} onChange={v => setTweak('heroVariant', v)}
            options={[{ value: 'editorial', label: 'Editorial' }, { value: 'bold', label: 'Bold' }]} />
        </TweakSection>
        <TweakSection title="Kart stili">
          <TweakRadio value={tweaks.cardStyle} onChange={v => setTweak('cardStyle', v)}
            options={[{ value: 'soft', label: 'Yumuşak' }, { value: 'outlined', label: 'Çizgili' }, { value: 'elevated', label: 'Yükseltilmiş' }]} />
        </TweakSection>
        <TweakSection title="Tema">
          <TweakToggle label="Karanlık mod" value={tweaks.dark} onChange={v => setTweak('dark', v)} />
        </TweakSection>
        <TweakSection title="Sayfa">
          <TweakRadio value={page} onChange={setPage}
            options={[{ value: 'home', label: 'Anasayfa' }, { value: 'about', label: 'Hakkımızda' }, { value: 'programs', label: 'Programlar' }, { value: 'contact', label: 'İletişim' }]} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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