// Main App for Zubeltzu Torre — multi-page (tabs)
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA, useCallback: useCallbackA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "musgo",
  "typeface": "editorial",
  "parallax": 1,
  "cursor": false,
  "mist": true,
  "hero": "classic",
  "lang": "es"
}/*EDITMODE-END*/;

function applyPalette(key) {
  const p = window.SITE.palettes[key];
  if (!p) return;
  const root = document.documentElement;
  Object.entries(p).forEach(([k,v]) => { if (k.startsWith("--c-")) root.style.setProperty(k, v); });
}
function applyTypeface(key) {
  const f = window.SITE.typefaces[key];
  if (!f) return;
  const root = document.documentElement;
  Object.entries(f).forEach(([k,v]) => { if (k.startsWith("--f-")) root.style.setProperty(k, v); });
}

const PAGES = ["home","entorno","galeria","contacto"];

function App() {
  const [tw, setTw] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useStateA(tw.lang || "es");
  const [page, setPage] = useStateA("home");
  const [transitioning, setTransitioning] = useStateA(false);
  const [displayPage, setDisplayPage] = useStateA("home");
  const [bookingOpen, setBookingOpen] = useStateA(false);
  const [legalModal, setLegalModal] = useStateA(null);
  // Filtro con el que abrir la galería (p. ej. al pulsar una tarjeta de alojamiento)
  const [galFilter, setGalFilter] = useStateA("all");

  useEffectA(() => { applyPalette(tw.palette); }, [tw.palette]);
  useEffectA(() => { applyTypeface(tw.typeface); }, [tw.typeface]);
  useEffectA(() => {
    document.documentElement.style.setProperty("--parallax", String(tw.parallax));
  }, [tw.parallax]);

  const tx = window.I18N[lang];

  // `filter` opcional: abre la galería directamente en esa categoría.
  const goTo = useCallbackA((next, filter) => {
    setGalFilter(filter || "all");
    if (next === page) {
      window.scrollTo({ top: 0, behavior: "smooth" });
      return;
    }
    setTransitioning(true);
    setPage(next);
    setTimeout(() => {
      setDisplayPage(next);
      window.scrollTo({ top: 0, behavior: "instant" });
      requestAnimationFrame(() => setTransitioning(false));
    }, 380);
  }, [page]);

  const openBooking = useCallbackA(() => setBookingOpen(true), []);
  const closeBooking = useCallbackA(() => setBookingOpen(false), []);

  // ESC closes booking modal
  useEffectA(() => {
    const onKey = (e) => { if (e.key === "Escape") setBookingOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  return (
    <>
      <Cursor enabled={tw.cursor}/>
      <Nav t={tx} lang={lang} setLang={setLang} activePage={displayPage} goTo={goTo} onBook={openBooking}/>
      <ChatBot t={tx} lang={lang} onBook={openBooking}/>

      <main className={"page-stage" + (transitioning ? " is-transitioning" : "")}>
        {displayPage === "home" && <HomePage t={tx} tw={tw} goTo={goTo} onBook={openBooking}/>}
        {displayPage === "entorno" && <PageWrap><Environment t={tx} goTo={goTo} onBook={openBooking}/></PageWrap>}
        {displayPage === "galeria" && <PageWrap><Gallery t={tx} goTo={goTo} onBook={openBooking} initialFilter={galFilter}/></PageWrap>}
        {displayPage === "contacto" && <PageWrap><Contact t={tx} onBook={openBooking}/></PageWrap>}
      </main>

      {displayPage === "entorno" && <EnvCTA t={tx} onBook={openBooking}/>}
      <PageFooter t={tx} page={displayPage} goTo={goTo}/>
      <Footer t={tx} goTo={goTo} page={displayPage} onLegal={setLegalModal}/>

      {bookingOpen && <BookingModal t={tx} lang={lang} onClose={closeBooking}/>}
      <CookieConsent t={tx} onOpenCookies={() => setLegalModal("cookies")}/>
      {legalModal && <LegalModal which={legalModal} onClose={() => setLegalModal(null)}/>}

      <Tweaks tw={tw} setTw={setTw}/>
    </>
  );
}

/* ============================================================
   PAGE WRAP — adds top padding under nav
   ============================================================ */
function PageWrap({ children }) {
  return <div className="page-wrap">{children}</div>;
}

/* ============================================================
   HOME PAGE — hero + ticker + intro + lodging teaser
   ============================================================ */
function HomePage({ t, tw, goTo, onBook }) {
  return (
    <>
      <Hero t={t} variant={tw.hero} mist={tw.mist} goTo={goTo} onBook={onBook}/>
      <Ticker t={t}/>
      <Intro t={t} goTo={goTo}/>
      <HostSection t={t}/>
      <Lodging t={t} goTo={goTo} onBook={onBook}/>
      <Reviews t={t} onBook={onBook}/>
    </>
  );
}

/* ============================================================
   PAGE FOOTER — prev/next nav between pages
   ============================================================ */
function PageFooter({ t, page, goTo }) {
  if (page === "home") return null;
  const labels = {
    home: "Home",
    entorno: t.nav.env + " & " + t.nav.activities,
    galeria: t.nav.gallery,
    contacto: t.nav.contact
  };
  const idx = PAGES.indexOf(page);
  const prev = idx > 0 ? PAGES[idx - 1] : null;
  const next = idx < PAGES.length - 1 ? PAGES[idx + 1] : null;

  return (
    <section className={"page-footer page-footer--" + page}>
      <div className="shell page-footer-grid">
        {prev ? (
          <button className="page-foot-link prev" data-cursor="hover" onClick={() => goTo(prev)}>
            <span className="lab eyebrow" style={{color:"inherit"}}>← {labels[prev]}</span>
          </button>
        ) : <span/>}
        <div className="page-foot-mark">
          <span className="mark-circle"></span>
          <span>{labels[page]} · {String(idx + 1).padStart(2,"0")}</span>
        </div>
        {next ? (
          <button className="page-foot-link next" data-cursor="hover" onClick={() => goTo(next)}>
            <span className="lab eyebrow" style={{color:"inherit"}}>{labels[next]} →</span>
          </button>
        ) : <span/>}
      </div>
    </section>
  );
}

/* ============================================================
   BOOKING MODAL — defined in booking.jsx (calendar + Nekatur engine)
   ============================================================ */

/* ============================================================
   TWEAKS
   ============================================================ */
function Tweaks({ tw, setTw }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette">
        <TweakColor
          options={[
            ["#f4efe6","#4e7a28","#1a1a17"],
            ["#eef0ee","#3a4a55","#1c2024"],
            ["#efe7da","#7a3a22","#241813"],
            ["#171a16","#c8b06a","#8a7a56"]
          ]}
          value={
            tw.palette === "musgo" ? ["#f4efe6","#4e7a28","#1a1a17"]
            : tw.palette === "bruma" ? ["#eef0ee","#3a4a55","#1c2024"]
            : tw.palette === "tierra" ? ["#efe7da","#7a3a22","#241813"]
            : ["#171a16","#c8b06a","#8a7a56"]
          }
          onChange={(v) => {
            const map = { "#f4efe6":"musgo","#eef0ee":"bruma","#efe7da":"tierra","#171a16":"noche" };
            setTw("palette", map[v[0]] || "musgo");
          }}
          label="Color tone"
        />
      </TweakSection>

      <TweakSection title="Typography">
        <TweakSelect
          label="Pairing"
          value={tw.typeface}
          options={[
            { label: "Cormorant + Inter", value: "editorial" },
            { label: "Instrument + Sora", value: "moderna" },
            { label: "Space Grotesk", value: "grotesca" },
            { label: "DM Serif + Manrope", value: "clasica" }
          ]}
          onChange={(v) => setTw("typeface", v)}
        />
      </TweakSection>

      <TweakSection title="Hero variant">
        <TweakRadio
          label="Hero"
          value={tw.hero}
          options={[
            { label: "Classic", value: "classic" },
            { label: "Split", value: "split" },
            { label: "Overlay", value: "overlay" }
          ]}
          onChange={(v) => setTw("hero", v)}
        />
      </TweakSection>

      <TweakSection title="Motion">
        <TweakSlider label="Parallax" min={0} max={2} step={0.1} value={tw.parallax} onChange={(v) => setTw("parallax", v)}/>
        <TweakToggle label="Custom cursor" value={tw.cursor} onChange={(v) => setTw("cursor", v)}/>
        <TweakToggle label="Mist particles" value={tw.mist} onChange={(v) => setTw("mist", v)}/>
      </TweakSection>
    </TweaksPanel>
  );
}

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

// dismiss boot screen once React has actually painted
requestAnimationFrame(() => requestAnimationFrame(() => {
  if (typeof window.__dismissBoot === "function") window.__dismissBoot();
}));