// App root — language toggle + tweak palette + assembling sections

const { useState: useS, useEffect: useE, useMemo } = React;

const PALETTES = {
  warm: {
    "--bg": "#F5EFE2",
    "--bg-2": "#EDE5D2",
    "--ink": "#1B2419",
    "--ink-soft": "#3F4A39",
    "--mute": "#7C806E",
    "--green-deep": "#1F4F2A",
    "--green-mid": "#5C7A3E",
    "--green-soft": "#8FA968",
    "--accent": "#B8742E",
    "--berry": "#C9384E",
    "--berry-dark": "#7A1A2A",
    "--card": "#FAF6EC",
    "--line": "rgba(31,79,42,0.18)",
    "--shadow": "0 30px 60px -30px rgba(31,79,42,0.30)",
    "--invert-bg": "#1F4F2A",
    "--invert-ink": "#F5EFE2",
  },
  cool: {
    "--bg": "#EEF1EB",
    "--bg-2": "#E1E7DD",
    "--ink": "#0F1A14",
    "--ink-soft": "#324234",
    "--mute": "#6E7B70",
    "--green-deep": "#1B4435",
    "--green-mid": "#3F6F58",
    "--green-soft": "#7FA08C",
    "--accent": "#3A6B7A",
    "--berry": "#B8344B",
    "--berry-dark": "#6A1426",
    "--card": "#F5F7F2",
    "--line": "rgba(15,26,20,0.16)",
    "--shadow": "0 30px 60px -30px rgba(15,26,20,0.32)",
    "--invert-bg": "#0F1A14",
    "--invert-ink": "#EEF1EB",
  },
  dark: {
    "--bg": "#0F1812",
    "--bg-2": "#16241B",
    "--ink": "#F2EBD8",
    "--ink-soft": "#CFC8B6",
    "--mute": "#8A9484",
    "--green-deep": "#3D7A4E",
    "--green-mid": "#6FA86B",
    "--green-soft": "#A8C795",
    "--accent": "#E0913F",
    "--berry": "#E84A66",
    "--berry-dark": "#FF8FA5",
    "--card": "#1A2A1F",
    "--line": "rgba(242,235,216,0.14)",
    "--shadow": "0 30px 60px -30px rgba(0,0,0,0.6)",
    "--invert-bg": "#F2EBD8",
    "--invert-ink": "#0F1812",
  },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "warm",
  "showLangToggle": true
}/*EDITMODE-END*/;

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES.warm;
  const root = document.documentElement;
  for (const [k, v] of Object.entries(p)) root.style.setProperty(k, v);
  root.dataset.palette = name;
}

function Nav({ lang, setLang, t }) {
  const [scrolled, setScrolled] = useS(false);
  const [open, setOpen] = useS(false);
  useE(() => {
    const h = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", h, { passive: true });
    h();
    return () => window.removeEventListener("scroll", h);
  }, []);
  const items = [
    ["#about", t.nav.about],
    ["#production", t.nav.production],
    ["#products", t.nav.products],
    ["#wholesale", t.nav.wholesale],
    ["#gallery", t.nav.gallery],
    ["#contact", t.nav.contact],
  ];
  return (
    <nav className={"nav " + (scrolled ? "scrolled" : "")}>
      <a className="nav-brand" href="#top">
        <img src="assets/logo.jpeg" alt="Yula" />
        <div>
          <strong>YULA</strong>
          <span>Tarım Ürünleri</span>
        </div>
      </a>
      <ul className={"nav-items " + (open ? "open" : "")}>
        {items.map(([href, label]) => (
          <li key={href}><a href={href} onClick={() => setOpen(false)}>{label}</a></li>
        ))}
      </ul>
      <div className="nav-right">
        <div className="lang-toggle" role="group" aria-label="Language">
          <button className={lang === "tr" ? "on" : ""} onClick={() => setLang("tr")}>TR</button>
          <span className="lang-sep" />
          <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
        </div>
        <a href="#contact" className="nav-cta">İletişim <span>→</span></a>
        <button className="nav-burger" onClick={() => setOpen(!open)} aria-label="Menü">
          <span /><span /><span />
        </button>
      </div>
    </nav>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useS("tr");
  const t = window.YULA_I18N[lang];

  useE(() => { applyPalette(tweaks.palette); }, [tweaks.palette]);

  // smooth-scroll for anchor links
  useE(() => {
    const onClick = (e) => {
      const a = e.target.closest("a[href^='#']");
      if (!a) return;
      const id = a.getAttribute("href");
      if (id.length < 2) return;
      const el = document.querySelector(id);
      if (!el) return;
      e.preventDefault();
      el.scrollIntoView({ behavior: "smooth", block: "start" });
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  return (
    <React.Fragment>
      <Nav lang={lang} setLang={setLang} t={t} />
      <Hero t={t} />
      <About t={t} />
      <ParallaxBand
        src={window.RES.yulaImg5}
        sub={lang === "tr" ? "Sera · Bahçe · Hasat" : "Greenhouse · Field · Harvest"}
        label={lang === "tr" ? "5 dönüm üzerinde 60.000 fide." : "60,000 seedlings on 5 decares."}
      />
      <Stats t={t} />
      <Production t={t} />
      <PhotoMarquee />
      <Products t={t} />
      <Wholesale t={t} />
      <Gallery t={t} />
      <Contact t={t} />
      <Footer t={t} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Renk Paleti">
          <TweakRadio
            label="Mod"
            value={tweaks.palette}
            options={["warm", "cool", "dark"]}
            onChange={(v) => setTweak("palette", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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