/* App root: routing, language, tweaks, scroll handling */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "terracotta",
  "displayFont": "Cormorant Garamond",
  "useGradientHeadlines": false,
  "denseGrid": false
}/*EDITMODE-END*/;

const PALETTES = {
  terracotta: { terracotta:"#B5654A", terracotta_deep:"#974F37", gold:"#B08D57", ink:"#1A1614", noir:"#0E0C0B", cream:"#F6F1EA" },
  noir: { terracotta:"#C9A063", terracotta_deep:"#A87E45", gold:"#C9A063", ink:"#0E0C0B", noir:"#000000", cream:"#F2EFE9" },
  rose: { terracotta:"#A24F66", terracotta_deep:"#7F3A4F", gold:"#B08D57", ink:"#1E1418", noir:"#120B0F", cream:"#F8EFEB" },
  sage: { terracotta:"#7B8C6A", terracotta_deep:"#5A6B4D", gold:"#B08D57", ink:"#1A1F18", noir:"#0E1310", cream:"#F1EFE6" }
};

const DISPLAY_FONTS = {
  "Cormorant Garamond": "'Cormorant Garamond', Georgia, serif",
  "Playfair Display": "'Playfair Display', Georgia, serif",
  "Libre Bodoni": "'Libre Bodoni', 'Bodoni 72', Georgia, serif",
  "DM Serif Display": "'DM Serif Display', Georgia, serif"
};

function App() {
  const [route, setRoute] = React.useState("home");
  const [caseId, setCaseId] = React.useState("white-garden");
  const [lang, setLang] = React.useState("en");
  const [scrolled, setScrolled] = React.useState(false);
  const tweaks = useTweaks(TWEAK_DEFAULTS);
  const t = tweaks.values;

  // Allow other components to navigate via window.__nav
  React.useEffect(() => {
    window.__nav = (r) => { setRoute(r); window.scrollTo({top:0, behavior:"smooth"}); };
  }, []);

  // Scroll watcher for nav background
  React.useEffect(() => {
    const handler = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", handler, { passive:true });
    handler();
    return () => window.removeEventListener("scroll", handler);
  }, []);

  // Scroll to top when route changes
  React.useEffect(() => {
    window.scrollTo({top:0, behavior:"instant"});
  }, [route]);

  // Apply RTL + language
  React.useEffect(() => {
    document.body.dir = COPY[lang].dir;
    document.documentElement.lang = lang;
  }, [lang]);

  // Apply tweaks → CSS vars
  React.useEffect(() => {
    const p = PALETTES[t.palette] || PALETTES.terracotta;
    const r = document.documentElement.style;
    r.setProperty('--terracotta', p.terracotta);
    r.setProperty('--terracotta-deep', p.terracotta_deep);
    r.setProperty('--gold', p.gold);
    r.setProperty('--ink', p.ink);
    r.setProperty('--noir', p.noir);
    r.setProperty('--cream', p.cream);
    r.setProperty('--display', DISPLAY_FONTS[t.displayFont] || DISPLAY_FONTS["Cormorant Garamond"]);

    // Load Playfair / DM Serif / Bodoni from Google Fonts if needed
    const needsFont = t.displayFont;
    if (needsFont && needsFont !== "Cormorant Garamond") {
      const id = `gf-${needsFont.replace(/\s+/g,'')}`;
      if (!document.getElementById(id)) {
        const l = document.createElement('link');
        l.id = id;
        l.rel = "stylesheet";
        const family = needsFont.replace(/\s+/g,'+');
        l.href = `https://fonts.googleapis.com/css2?family=${family}:wght@300;400;500;600&display=swap`;
        document.head.appendChild(l);
      }
    }
  }, [t.palette, t.displayFont]);

  // Determine nav tone — hero/dark on home top, case study, cta-band edges
  const navTone = (route === "home" && !scrolled) || (route === "case" && !scrolled) ? "dark" : "light";

  let page;
  switch(route){
    case "portfolio": page = <Portfolio lang={lang} setRoute={setRoute} setCaseId={setCaseId}/>; break;
    case "case": page = <CaseStudy caseId={caseId} lang={lang} setRoute={setRoute} setCaseId={setCaseId}/>; break;
    case "services": page = <Services lang={lang} setRoute={setRoute}/>; break;
    case "about": page = <About lang={lang} setRoute={setRoute}/>; break;
    case "contact": page = <Contact lang={lang} setRoute={setRoute}/>; break;
    default: page = <Home lang={lang} setRoute={setRoute} setCaseId={setCaseId}/>;
  }

  return (
    <>
      <Nav route={route} setRoute={setRoute} lang={lang} setLang={setLang} scrolled={scrolled} tone={navTone}/>
      {page}
      <Footer lang={lang} setRoute={setRoute}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakSelect
            label="Accent system"
            value={t.palette}
            options={["terracotta","noir","rose","sage"]}
            onChange={(v)=>tweaks.setTweak('palette', v)}
          />
        </TweakSection>

        <TweakSection label="Typography">
          <TweakSelect
            label="Display font"
            value={t.displayFont}
            options={["Cormorant Garamond", "Playfair Display", "Libre Bodoni", "DM Serif Display"]}
            onChange={(v)=>tweaks.setTweak('displayFont', v)}
          />
        </TweakSection>

        <TweakSection label="Quick nav">
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:8}}>
            <TweakButton label="Home" onClick={()=>{setRoute("home"); window.scrollTo({top:0});}} secondary={route!=="home"}/>
            <TweakButton label="Portfolio" onClick={()=>{setRoute("portfolio"); window.scrollTo({top:0});}} secondary={route!=="portfolio"}/>
            <TweakButton label="Case study" onClick={()=>{setRoute("case"); window.scrollTo({top:0});}} secondary={route!=="case"}/>
            <TweakButton label="Services" onClick={()=>{setRoute("services"); window.scrollTo({top:0});}} secondary={route!=="services"}/>
            <TweakButton label="About" onClick={()=>{setRoute("about"); window.scrollTo({top:0});}} secondary={route!=="about"}/>
            <TweakButton label="Contact" onClick={()=>{setRoute("contact"); window.scrollTo({top:0});}} secondary={route!=="contact"}/>
          </div>
        </TweakSection>

        <TweakSection label="Language">
          <TweakRadio
            label="Locale"
            value={lang}
            options={["en","ar"]}
            onChange={(v)=>setLang(v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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