// app.jsx — root composition + Tweaks panel

const { useState, useEffect: useEffectApp } = React;

const KADIM_TWEAKS = /*EDITMODE-BEGIN*/{
  "accentPreset": "gold",
  "displayFont": "Instrument Serif",
  "showGrain": true
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  gold:    { color: "oklch(0.82 0.14 85)",  soft: "oklch(0.82 0.14 85 / 0.16)",  line: "oklch(0.82 0.14 85 / 0.35)",  fg: "oklch(0.2 0.02 85)"  },
  purple:  { color: "oklch(0.72 0.16 295)", soft: "oklch(0.72 0.16 295 / 0.18)", line: "oklch(0.72 0.16 295 / 0.4)",  fg: "oklch(0.98 0.005 80)"},
  copper:  { color: "oklch(0.74 0.13 50)",  soft: "oklch(0.74 0.13 50 / 0.16)",  line: "oklch(0.74 0.13 50 / 0.4)",   fg: "oklch(0.2 0.02 50)"  },
  emerald: { color: "oklch(0.72 0.12 165)", soft: "oklch(0.72 0.12 165 / 0.18)", line: "oklch(0.72 0.12 165 / 0.4)",  fg: "oklch(0.18 0.02 165)"},
};

const DISPLAY_FONTS = {
  "Instrument Serif": '"Instrument Serif", Georgia, serif',
  "Playfair Display": '"Playfair Display", Georgia, serif',
  "DM Serif Display": '"DM Serif Display", Georgia, serif',
};

function useSiteData() {
  const [data, setData] = React.useState({});
  React.useEffect(() => {
    const db = window.__firebaseDb;
    if (!db) return;
    Promise.all([
      db.doc("settings/contact").get(),
      db.doc("settings/about").get(),
      db.doc("settings/hero").get(),
      db.collection("services").orderBy("order").get(),
      db.collection("projects").orderBy("order").get(),
    ]).then(function([contact, about, hero, services, projects]) {
      setData({
        contact:  contact.exists  ? contact.data()  : {},
        about:    about.exists    ? about.data()    : {},
        hero:     hero.exists     ? hero.data()     : {},
        services: services.docs.length  ? services.docs.map(d => ({id:d.id,...d.data()}))  : null,
        projects: projects.docs.length  ? projects.docs.map(d => ({id:d.id,...d.data()}))  : null,
      });
    }).catch(() => {});
  }, []);
  return data;
}

function App() {
  const [t, setTweak] = useTweaks(KADIM_TWEAKS);
  const [menuOpen, setMenuOpen] = useState(false);
  const siteData = useSiteData();

  // Apply accent + font as CSS variables on :root
  useEffectApp(() => {
    const a = ACCENT_PRESETS[t.accentPreset] || ACCENT_PRESETS.gold;
    const root = document.documentElement;
    root.style.setProperty("--accent", a.color);
    root.style.setProperty("--accent-soft", a.soft);
    root.style.setProperty("--accent-line", a.line);
    root.style.setProperty("--accent-fg", a.fg);
    root.style.setProperty("--font-display", DISPLAY_FONTS[t.displayFont] || DISPLAY_FONTS["Instrument Serif"]);
  }, [t.accentPreset, t.displayFont]);

  useEffectApp(() => {
    document.body.style.setProperty("--grain-opacity", t.showGrain ? "0.5" : "0");
    // toggle ::after grain via class
    if (t.showGrain) document.body.classList.remove("no-grain");
    else document.body.classList.add("no-grain");
  }, [t.showGrain]);

  // Global reveal-on-scroll: observe every .reveal anywhere on the page.
  useEffectApp(() => {
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.08, rootMargin: "0px 0px -40px 0px" }
    );
    const scan = () => {
      document.querySelectorAll(".reveal:not(.in)").forEach((n) => io.observe(n));
    };
    scan();
    // Also pick up nodes mounted on font load or after small async work
    const mo = new MutationObserver(scan);
    mo.observe(document.body, { childList: true, subtree: true });
    // Safety net: if anything is still hidden after 1.5s, force-show it.
    const t1 = setTimeout(() => {
      document.querySelectorAll(".reveal:not(.in)").forEach((n) => n.classList.add("in"));
    }, 1500);
    return () => { io.disconnect(); mo.disconnect(); clearTimeout(t1); };
  }, []);

  const goContact = () => {
    setMenuOpen(false);
    setTimeout(() => { document.getElementById("iletisim")?.scrollIntoView({ behavior: "smooth", block: "start" }); }, 30);
  };

  return (
    <>
      <KadimNav onMenuOpen={() => setMenuOpen(true)} onContactClick={goContact} />
      <KadimMobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} />

      <main>
        <KadimHero onContactClick={goContact} data={siteData.hero} />
        <KadimServices data={siteData.services} />
        <KadimPhilo />
        <KadimAbout data={siteData.about} />
        <KadimApproach />
        <KadimPortfolio data={siteData.projects} />
        <KadimBlog />
        <KadimContact data={siteData.contact} />
      </main>

      <KadimFooter />

      <TweaksPanel>
        <TweakSection label="Vurgu rengi" />
        <TweakColor
          label="Aksan"
          value={ACCENT_PRESETS[t.accentPreset]?.color || ACCENT_PRESETS.gold.color}
          options={Object.values(ACCENT_PRESETS).map((p) => p.color)}
          onChange={(v) => {
            const key = Object.keys(ACCENT_PRESETS).find((k) => ACCENT_PRESETS[k].color === v) || "gold";
            setTweak("accentPreset", key);
          }}
        />
        <TweakRadio
          label="Palet adı"
          value={t.accentPreset}
          options={["gold", "purple", "copper", "emerald"]}
          onChange={(v) => setTweak("accentPreset", v)}
        />
        <TweakSection label="Tipografi" />
        <TweakSelect
          label="Display font"
          value={t.displayFont}
          options={Object.keys(DISPLAY_FONTS)}
          onChange={(v) => setTweak("displayFont", v)}
        />
        <TweakSection label="Stil" />
        <TweakToggle
          label="Grain dokusu"
          value={t.showGrain}
          onChange={(v) => setTweak("showGrain", v)}
        />
      </TweaksPanel>

      <style>{`
        body.no-grain::after { display: none !important; }
      `}</style>
    </>
  );
}

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