/* Imlil Trips Morocco — app composition + tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "duo",
  "serifFont": "garamond",
  "heroMotion": "pan"
}/*EDITMODE-END*/;

/* ---------- language state (English default, choice persisted) ---------- */
function readInitialLang() {
  try {
    const saved = localStorage.getItem(window.IMLIL_LANG_KEY);
    if (saved && window.IMLIL_LANGS.indexOf(saved) >= 0) return saved;
  } catch (e) {}
  return window.IMLIL_DEFAULT_LANG;
}

function LangProvider({ children }) {
  const [lang, setLangState] = React.useState(readInitialLang);
  const dir = lang === "ar" ? "rtl" : "ltr";

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("lang", lang);
    root.setAttribute("dir", dir);
    try { localStorage.setItem(window.IMLIL_LANG_KEY, lang); } catch (e) {}
  }, [lang, dir]);

  const value = React.useMemo(() => ({
    lang,
    setLang: setLangState,
    dir,
    t: window.makeT(lang),
    p: (v) => window.pick(v, lang)
  }), [lang, dir]);

  return <window.LangContext.Provider value={value}>{children}</window.LangContext.Provider>;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [openTour, setOpenTour] = React.useState(null);
  const [preselect, setPreselect] = React.useState("");
  const [lightboxIndex, setLightboxIndex] = React.useState(null);

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-accent", t.accent);
    root.setAttribute("data-serif", t.serifFont === "caslon" ? "caslon" : "garamond");
    root.setAttribute("data-motion", t.heroMotion === "pan" ? "pan" : "fade");
  }, [t.accent, t.serifFont, t.heroMotion]);

  const scrollToReserve = () => {
    const el = document.getElementById("reserve");
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 64;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };

  const handleReserve = (tourId) => {
    setOpenTour(null);
    setPreselect(tourId);
    setTimeout(scrollToReserve, 60);
  };

  const openPhotoBySrc = (src) => {
    const idx = window.IMLIL_DATA.photos.findIndex((p) => p.src === src);
    if (idx >= 0) setLightboxIndex(idx);
  };

  return (
    <React.Fragment>
      <SiteHeader onBook={scrollToReserve} />
      <main>
        <Hero onBook={scrollToReserve} />
        <ToursSection onOpen={setOpenTour} />
        <GallerySection lightboxIndex={lightboxIndex} setLightboxIndex={setLightboxIndex} />
        <ReviewsSection />
        <AboutSection />
        <ReserveSection preselect={preselect} />
      </main>
      <SiteFooter />
      <FixedContact />

      {openTour ? (
        <TourDetail
          tourId={openTour}
          onClose={() => setOpenTour(null)}
          onReserve={handleReserve}
          onPhoto={openPhotoBySrc}
        />
      ) : null}
      {lightboxIndex != null ? <Lightbox index={lightboxIndex} setIndex={setLightboxIndex} /> : null}

      <TweaksPanel>
        <TweakSection label="Color" />
        <TweakRadio
          label="Accent"
          value={t.accent}
          options={[
            { value: "duo", label: "Green + terra" },
            { value: "green", label: "All green" },
            { value: "terra", label: "Terracotta" }
          ]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Type" />
        <TweakRadio
          label="Serif"
          value={t.serifFont}
          options={[
            { value: "garamond", label: "Garamond" },
            { value: "caslon", label: "Caslon" }
          ]}
          onChange={(v) => setTweak("serifFont", v)}
        />
        <TweakSection label="Motion" />
        <TweakRadio
          label="Hero slider"
          value={t.heroMotion}
          options={[
            { value: "pan", label: "Pan + fade" },
            { value: "fade", label: "Crossfade" }
          ]}
          onChange={(v) => setTweak("heroMotion", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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