// Main App — router + Tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C8861D",
  "primary": "#0B2A3B",
  "paper": "#F5F1EA",
  "density": "comfortable",
  "tickerOn": true
}/*EDITMODE-END*/;

function App() {
  const route = useRoute();
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply tweaks to CSS vars
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", tweaks.accent);
    r.style.setProperty("--primary", tweaks.primary);
    r.style.setProperty("--paper", tweaks.paper);
    if (tweaks.density === "compact") {
      r.style.setProperty("--gutter", "24px");
    } else if (tweaks.density === "spacious") {
      r.style.setProperty("--gutter", "40px");
    } else {
      r.style.setProperty("--gutter", "32px");
    }
  }, [tweaks]);

  let Page;
  if (route === "" || route === "home") Page = HomePage;
  else if (route === "araclar") Page = AraclarIndex;
  // Finansal
  else if (route === "araclar/karlilik") Page = KarlilikPage;
  else if (route === "araclar/kdv") Page = KdvIadesiPage;
  else if (route === "araclar/fiyatlama") Page = FiyatlamaPage;
  else if (route === "araclar/basabas") Page = BasabasPage;
  else if (route === "araclar/incoterm") Page = IncotermPage;
  else if (route === "araclar/navlun") Page = NavlunPage;
  else if (route === "araclar/nakitakisi") Page = NakitAkisiPage;
  else if (route === "araclar/ulkeriski") Page = UlkeRiskiPage;
  else if (route === "araclar/forward") Page = ForwardPage;
  // Finansman
  else if (route === "araclar/eximbank") Page = EximbankPage;
  else if (route === "araclar/faktoring") Page = FaktoringPage;
  else if (route === "araclar/forfaiting") Page = ForfaitingPage;
  else if (route === "araclar/finansman-karsi") Page = FinansmanKarsiPage;
  else if (route === "araclar/teminat") Page = TeminatPage;
  else if (route === "araclar/kredi-sigorta") Page = KrediSigortaPage;
  else if (route === "araclar/sevk-finansman") Page = SevkFinansmanPage;
  else if (route === "araclar/sermaye") Page = SermayePage;
  else if (route === "araclar/garanti") Page = GarantiPage;
  else if (route === "araclar/finansman-zaman") Page = FinansmanZamanPage;
  // Ödeme & Belgeler
  else if (route === "araclar/akreditif") Page = AkreditifPage;
  else if (route === "araclar/odeme-yontemi") Page = OdemeYontemiKarsi;
  else if (route === "araclar/vesaik") Page = VesaikKontrol;
  else if (route === "araclar/tahsilat-riski") Page = TahsilatRiski;
  else if (route === "araclar/vade-iskonto") Page = VadeIskonto;
  else if (route === "araclar/sevkiyat-sure") Page = SevkiyatSure;
  else if (route === "araclar/belge-uygunluk") Page = BelgeUygunluk;
  else if (route === "araclar/akreditif-maliyet") Page = AkreditifMaliyet;
  else if (route === "araclar/swift") Page = SwiftSecici;
  else if (route === "araclar/odeme-takvimi") Page = OdemeTagvimi;
  // E-İhracat
  else if (route === "araclar/pazaryeri") Page = PazaryeriAnalizoru;
  else if (route === "araclar/mikro") Page = MikroIhracat;
  else if (route === "araclar/kargo") Page = KargoKarsilastir;
  else if (route === "araclar/etgb") Page = ETGBMaliyet;
  else if (route === "araclar/platform-uygunluk") Page = PlatformUygunluk;
  else if (route === "araclar/dijital-vergi") Page = DijitalVergi;
  else if (route === "araclar/eihracat-kdv") Page = EIhracatKdv;
  else if (route === "araclar/iade") Page = IadeMaliyet;
  else if (route === "araclar/platform-fx") Page = PlatformFX;
  else if (route === "araclar/eihracat-karlilik") Page = EIhracatKarlilik;
  // Devlet Desteği
  else if (route === "araclar/destek") Page = DestekPage;
  else if (route === "araclar/kosgeb") Page = KosgepHesap;
  else if (route === "araclar/turquality") Page = TurqualitySimu;
  else if (route === "araclar/tubitak") Page = TubitakTesti;
  else if (route === "araclar/fuar") Page = FuarDestekHesap;
  else if (route === "araclar/serbest-bolge") Page = SerbestBölgeAnaliz;
  else if (route === "araclar/eticaret-destek") Page = ETicaretDestekFiltreleyici;
  else if (route === "araclar/arge") Page = ArgeVergiTeşvikiHesap;
  else if (route === "araclar/yatirim") Page = YatırımTeşvikUygunluğu;
  else if (route === "araclar/basvuru-takvim") Page = BasvuruTakvimi;
  // Kur
  else if (route === "araclar/kur") Page = KurPage;
  // Other
  else if (route === "rehber") Page = RehberPage;
  else if (route.startsWith("rehber/")) {
    const articleId = route.slice(7);
    Page = () => <RehberArticlePage id={articleId} />;
  }
  else Page = HomePage;

  return (
    <>
      <TopNav />
      <main>
        <Page />
      </main>
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection title="Marka rengi">
          <TweakColor label="Accent (vurgu)" value={tweaks.accent} onChange={(v) => setTweak("accent", v)} />
          <TweakColor label="Primary (lacivert)" value={tweaks.primary} onChange={(v) => setTweak("primary", v)} />
          <TweakColor label="Paper (kağıt)" value={tweaks.paper} onChange={(v) => setTweak("paper", v)} />
        </TweakSection>
        <TweakSection title="Yoğunluk">
          <TweakRadio
            value={tweaks.density}
            options={[
              { label: "Compact", value: "compact" },
              { label: "Comfortable", value: "comfortable" },
              { label: "Spacious", value: "spacious" },
            ]}
            onChange={(v) => setTweak("density", v)}
          />
        </TweakSection>
        <TweakSection title="Hızlı navigasyon">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
            {[
              { l: "Anasayfa", to: "" },
              { l: "Araçlar", to: "araclar" },
              { l: "Kârlılık", to: "araclar/karlilik" },
              { l: "Eximbank", to: "araclar/eximbank" },
              { l: "Akreditif", to: "araclar/akreditif" },
              { l: "Destek", to: "araclar/destek" },
              { l: "Kur Riski", to: "araclar/kur" },
              { l: "Rehber", to: "rehber" },
            ].map((p) => (
              <button key={p.to} onClick={() => navigate(p.to)} style={{ padding: 6, fontSize: 11, background: "transparent", border: "1px solid var(--rule)", cursor: "pointer", textAlign: "left" }}>
                {p.l}
              </button>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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