/* ============================================================
   APP — state, routing, language
   ============================================================ */
const { useState: aS, useEffect: aE } = React;
const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle } = window;

const TWEAK_DEFAULTS = {
  accent: "#b04030",
  gold: "#c9a24b",
  display: "cormorant",
  ticker: true,
  heroCopy: "clasica",
};
const DISPLAY_FONTS = {
  cormorant: "'Cormorant Garamond', Georgia, serif",
  marcellus: "'Marcellus', Georgia, serif",
  bodoni: "'Bodoni Moda', Georgia, serif",
};

function buildContent(lang) {
  const C = {};
  for (const k in window.GC) C[k] = window.GC[k][lang];
  return C;
}

const VIEWS = ["home","collection","experiences","story","press","blog","contact","events","visit","kiosk"];

function viewFromHash() {
  const h = (location.hash || "").replace("#/", "").replace("#", "");
  return VIEWS.includes(h) ? h : null;
}

function App() {
  const [lang, setLangRaw] = aS(() => {
    const s = localStorage.getItem("gc_lang");
    if (s) return s;
    return (navigator.language || "en").toLowerCase().startsWith("es") ? "es" : "en";
  });
  const [view, setViewRaw] = aS(() => viewFromHash() || localStorage.getItem("gc_view") || "home");
  const [booking, setBooking] = aS(null);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply design tweaks to CSS variables
  aE(() => {
    const r = document.documentElement.style;
    r.setProperty("--oxblood-2", t.accent);
    r.setProperty("--gold", t.gold);
    r.setProperty("--ff-display", DISPLAY_FONTS[t.display] || DISPLAY_FONTS.cormorant);
    document.body.classList.toggle("no-ticker", !t.ticker);
  }, [t.accent, t.gold, t.display, t.ticker]);

  // global entry point for every "Reservá" CTA
  window.__gcBook = (tier) => setBooking({ tier: typeof tier === "number" ? tier : null });

  const setLang = (l) => { setLangRaw(l); localStorage.setItem("gc_lang", l); document.documentElement.lang = l; };
  const go = (v) => {
    setViewRaw(v);
    localStorage.setItem("gc_view", v);
    if (viewFromHash() !== v) { try { history.pushState(null, "", "#/" + v); } catch (e) {} }
    window.scrollTo({ top: 0, behavior: "auto" });
  };

  // browser back/forward support
  aE(() => {
    const onPop = () => {
      const v = viewFromHash() || "home";
      setViewRaw(v);
      localStorage.setItem("gc_view", v);
      window.scrollTo({ top: 0, behavior: "auto" });
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  aE(() => { document.documentElement.lang = lang; }, []);

  const C = buildContent(lang);
  if (t.heroCopy === "directa" && C.hero.titleAlt) C.hero = { ...C.hero, title: C.hero.titleAlt };
  const nav = window.GC.nav[lang];

  if (view === "kiosk") {
    return <KioskMode C={C} lang={lang} onExit={() => go("home")} />;
  }

  let Page;
  if (view === "collection") Page = <CollectionPage C={C} go={go} lang={lang} />;
  else if (view === "experiences") Page = <ExperiencesPage C={C} go={go} lang={lang} />;
  else if (view === "story") Page = <StoryPage C={C} go={go} lang={lang} />;
  else if (view === "press") Page = <PressPage C={C} go={go} lang={lang} />;
  else if (view === "blog") Page = <BlogPage C={C} go={go} lang={lang} />;
  else if (view === "contact") Page = <ContactPage C={C} go={go} lang={lang} />;
  else if (view === "events") Page = <EventsPage C={C} go={go} lang={lang} />;
  else if (view === "visit") Page = <VisitPage C={C} go={go} lang={lang} />;
  else Page = <HomePage C={C} go={go} lang={lang} />;

  return (
    <React.Fragment>
      <Nav view={view} go={go} lang={lang} setLang={setLang} t={nav} />
      <div className="page-anim" key={view + lang}>{Page}</div>
      <Footer go={go} f={C.footer} n={C.news} />
      <WaFloat w={window.GC.wa[lang]} />
      {booking && <Booking lang={lang} initialTier={booking.tier} onClose={() => setBooking(null)} />}
      <TweaksPanel title="Tweaks">
        <TweakSection label={lang === "es" ? "Color" : "Color"} />
        <TweakColor label={lang === "es" ? "Acento" : "Accent"} value={t.accent}
          options={["#b04030", "#7fb0c9", "#c9a24b", "#9a3b2e"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakColor label={lang === "es" ? "Dorado" : "Gold"} value={t.gold}
          options={["#c9a24b", "#d8b24f", "#b8923f", "#caa766"]}
          onChange={(v) => setTweak("gold", v)} />
        <TweakSection label={lang === "es" ? "Tipografía y movimiento" : "Type & motion"} />
        <TweakRadio label={lang === "es" ? "Display" : "Display"} value={t.display}
          options={["cormorant", "marcellus", "bodoni"]}
          onChange={(v) => setTweak("display", v)} />
        <TweakRadio label={lang === "es" ? "Copy del hero" : "Hero copy"} value={t.heroCopy}
          options={["clasica", "directa"]}
          onChange={(v) => setTweak("heroCopy", v)} />
        <TweakToggle label={lang === "es" ? "Ticker de credenciales" : "Credentials ticker"} value={t.ticker}
          onChange={(v) => setTweak("ticker", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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