// Main app — hash-router + composes all sections + tweaks panel
// Rotalar: #/ (ana sayfa) · #/hikayemiz · #/serve-campus · #/blog · #/global ·
// #/bize-ulasin · #/urunler · #/urunler/<kategori>
// Ana sayfa UNMOUNT EDİLMEZ (display:none) — scroll-fx observer'ları, globe mount'u
// ve sekme state'i yaşamaya devam eder; sayfadan dönüşte her şey yerinde.

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "tr",
  "theme": "cream",
  "showFamilyMarket": true,
  "showSpeakerLabels": true
}/*EDITMODE-END*/;

function parseRoute() {
  const h = window.location.hash || "";
  if (!h.startsWith("#/")) return { name: "home" };
  const parts = h.slice(2).split("/").filter(Boolean);
  if (!parts.length) return { name: "home" };
  if (parts[0] === "urunler") return { name: "products", cat: parts[1] || null };
  return { name: parts[0] };
}

// ─────────── Route placeholder sayfası (marka iskeleti) ───────────
function RoutePage({ route, t, lang }) {
  const menu = window.SERVE_MENU;
  const P = t.pages;
  let eyebrow, title, sub, body = null;

  if (route.name === "products") {
    const cat = route.cat ? menu.cats.find((c) => c.key === route.cat) : null;
    eyebrow = P.productsEyebrow;
    if (cat) {
      title = cat.label[lang];
      sub = cat.tagline[lang];
      body = (
        <div className="rp-body rp-groups">
          {cat.groups.map((g, gi) => (
            <div key={gi}>
              <span className="rp-group-name">{g.name}</span>
              {g.items.length > 0 && (
                <ul className="rp-items">
                  {g.items.map((it, ii) => <li key={ii}>{it}</li>)}
                </ul>
              )}
            </div>
          ))}
        </div>
      );
    } else {
      title = P.products.title;
      sub = P.products.sub;
      body = (
        <div className="rp-body rp-cats">
          {menu.cats.map((c) => (
            <a href={`#/urunler/${c.key}`} className="rp-cat-card" key={c.key}>
              <span className="rp-cat-label">{c.label[lang]}</span>
              <span className="rp-cat-tag">{c.tagline[lang]}</span>
            </a>
          ))}
        </div>
      );
    }
  } else {
    const pg = P[route.name] || P.fallback;
    eyebrow = pg.eyebrow; title = pg.title; sub = pg.sub;
  }

  return (
    <main className="route-page" data-screen-label="20 Sayfa">
      <div className="shell">
        <span className="eyebrow">{eyebrow}</span>
        <h1 className="display h-xl" style={{ marginTop: 12 }}>{title}</h1>
        <p className="rp-sub">{sub}</p>
        {body}
        <div><span className="rp-note">{P.note}</span></div>
        <div className="rp-actions">
          <a href="#/" className="cta-ghost">{P.back}</a>
        </div>
      </div>
    </main>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useStateApp(parseRoute());
  const lang = tweaks.lang || "tr";
  const theme = tweaks.theme || "cream";
  const t = window.COPY[lang];

  useEffectApp(() => {
    document.body.dataset.theme = theme;
    document.documentElement.lang = lang;
  }, [theme, lang]);

  // scroll-fx el sıkışması: 'load' Babel derlemesinden ÖNCE ateşlenebiliyor (yarış) —
  // reveal/sahne sistemi boş DOM'a bağlanıp sessizce ölüyordu. Render bitti sinyali:
  useEffectApp(() => {
    window.__serveAppReady = true;
    window.dispatchEvent(new Event("serve-app-ready"));
  }, []);

  // hash-router: View Transitions ile "kâğıt çevirir gibi" geçiş (desteksizde anında)
  useEffectApp(() => {
    const apply = () => {
      const r = parseRoute();
      const commit = () => setRoute(r);
      if (document.startViewTransition && ReactDOM.flushSync) {
        document.startViewTransition(() => { ReactDOM.flushSync(commit); window.scrollTo(0, 0); });
      } else {
        commit();
        window.scrollTo(0, 0);
      }
    };
    window.addEventListener("hashchange", apply);
    return () => window.removeEventListener("hashchange", apply);
  }, []);

  // sahne-renk sistemi ana sayfaya ait: sayfa rotalarında gövde kendi zeminine döner
  useEffectApp(() => {
    if (route.name !== "home") {
      document.body.style.backgroundColor = "";
      document.documentElement.style.setProperty("--scene", "#FAF7F2");
      const meta = document.querySelector('meta[name="theme-color"]');
      if (meta) meta.setAttribute("content", "#FAF7F2");
      const header = document.querySelector(".site-header");
      if (header) header.classList.remove("header-dark");
    }
  }, [route]);

  const isHome = route.name === "home";

  return (
    <>
      <SiteHeader lang={lang} setLang={(l) => setTweak("lang", l)}/>

      <div style={{ display: isHome ? "" : "none" }}>
        <Hero t={t} marqueeItems={t.marquee}/>
        {/* VintageBanner kaldırıldı — brief §6.4: 'vazgeçildi' (başka markaların standlarını gösteriyordu) */}
        <ProductFamily t={t}/>
        <Archive t={t}/>
        <DeepNews t={t}/>
        <Discover t={t}/>
        <BlogWide t={t}/>
        <Smarter t={t}/>
        <Storefront t={t}/>
        <OurStory t={t}/>
        <World t={t}/>
        <Top10Blog t={t}/>
      </div>

      {!isHome && <RoutePage route={route} t={t} lang={lang}/>}

      <SiteFooter t={t}/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Dil / Language">
          <TweakRadio
            value={lang}
            onChange={(v) => setTweak("lang", v)}
            options={[
              { value: "tr", label: "Türkçe" },
              { value: "en", label: "English" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Tema">
          <TweakRadio
            value={theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "cream", label: "Krem" },
              { value: "paper", label: "Kağıt" },
              { value: "ink", label: "Mürekkep" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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