/* global React, ReactDOM, I18N, Nav, Hero, Marquee, About, Process, Regions, FAQs, Contact, Footer, useReveal, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor */
const { useEffect, useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "earth",
  "font": "marcellus"
}/*EDITMODE-END*/;

function App() {
  // Initial lang from ?lang= query param (so hreflang works for crawlers)
  const urlLang = (() => {
    try {
      const q = new URLSearchParams(window.location.search).get("lang");
      return ["es","en","ar"].includes(q) ? q : "en";
    } catch (e) { return "en"; }
  })();
  const [lang, setLang] = useState(urlLang);
  const t = window.I18N[lang];
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply lang + palette + font globally
  useEffect(() => {
    const html = document.documentElement;
    html.setAttribute("lang", lang);
    html.setAttribute("dir", t.dir);
    // Update title for SEO when language changes
    const titles = {
      en: "Spanish Heritage — Spanish artisan PDO cheeses for the UAE",
      es: "Spanish Heritage — Quesos artesanos españoles para los EAU",
      ar: "Spanish Heritage — أجبان إسبانية حرفية للإمارات"
    };
    document.title = titles[lang] || titles.en;
    // Sync URL ?lang= without reload (helps SEO + share links)
    try {
      const u = new URL(window.location.href);
      if (lang === "en") u.searchParams.delete("lang");
      else u.searchParams.set("lang", lang);
      window.history.replaceState({}, "", u.toString());
    } catch (e) {}
  }, [lang, t.dir]);

  useEffect(() => {
    document.documentElement.setAttribute("data-palette", tweaks.palette);
  }, [tweaks.palette]);

  useEffect(() => {
    document.documentElement.setAttribute("data-font", tweaks.font);
  }, [tweaks.font]);

  useReveal();

  return (
    <React.Fragment>
      <Nav t={t} lang={lang} setLang={setLang} paletteName={tweaks.palette} />
      <Hero t={t} />
      <About t={t} />
      <Process t={t} />
      <Regions t={t} />
      <Contact t={t} lang={lang} />
      <FAQs t={t} />
      <Footer t={t} />

      <TweaksPanel>
        <TweakSection label="Paleta">
          <TweakRadio
            label="Tono"
            value={tweaks.palette}
            options={[
              { value: "cream", label: "Crema" },
              { value: "earth", label: "Tierra" },
              { value: "dark", label: "Oscuro" }
            ]}
            onChange={(v) => setTweak("palette", v)}
          />
        </TweakSection>
        <TweakSection label="Tipografía">
          <TweakRadio
            label="Pareja"
            value={tweaks.font}
            options={[
              { value: "marcellus", label: "Marcellus" },
              { value: "italiana", label: "Italiana" },
              { value: "sans", label: "Sans" }
            ]}
            onChange={(v) => setTweak("font", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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