// House of Noey — App shell
const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const [lang, setLangRaw] = useStateA(() => {
    try { return localStorage.getItem("hon_lang") || "en"; } catch (e) { return "en"; }
  });
  const [currency, setCurrency] = useStateA(() => {
    try { return localStorage.getItem("hon_cur") || "THB"; } catch (e) { return "THB"; }
  });
  const [essayDone, setEssayDone] = useStateA(false);

  const setLang = (code) => {
    setLangRaw(code);
    try { localStorage.setItem("hon_lang", code); } catch (e) {}
  };
  useEffectA(() => {
    document.body.setAttribute("data-lang", lang);
  }, [lang]);
  useEffectA(() => {
    try { localStorage.setItem("hon_cur", currency); } catch (e) {}
  }, [currency]);
  useEffectA(() => {
    if (!window.location.hash) return;
    const id = window.location.hash.slice(1);
    if (id === "booking") setEssayDone(true);
    window.setTimeout(() => {
      document.getElementById(id)?.scrollIntoView({ behavior: "auto", block: "start" });
    }, 120);
  }, []);

  // Merge: TH/ZH/JA fall back to EN for items we don't translate (listings.items, data.cards, etc.)
  const base = window.I18N[lang] || window.I18N.en;
  const en = window.I18N.en;
  const t = {
    ...en, ...base,
    nav: { ...en.nav, ...base.nav },
    hero: { ...en.hero, ...base.hero, meta: base.hero?.meta || en.hero.meta, title: base.hero?.title || en.hero.title },
    essay: { ...en.essay, ...base.essay, sections: base.essay?.sections || en.essay.sections },
    cta: { ...en.cta, ...base.cta },
    listings: { ...en.listings, ...base.listings, items: en.listings.items },
    map: { ...en.map, ...base.map, districts: en.map.districts },
    data: { ...en.data, ...base.data, cards: en.data.cards },
    about: { ...en.about, ...base.about, body: base.about?.body || en.about.body, stats: en.about.stats },
    press: { ...en.press, ...base.press },
    booking: { ...en.booking, ...base.booking },
    footer: { ...en.footer, ...base.footer, col1: en.footer.col1, col2: en.footer.col2, col3: en.footer.col3, colTitles: en.footer.colTitles },
    ticker: base.ticker || en.ticker
  };

  return (
    <>
      <div className="grain" aria-hidden="true"></div>
      <ScrollProgress />
      <Header lang={lang} setLang={setLang} t={t} onBook={() => {
        setEssayDone(true);
        document.getElementById("booking")?.scrollIntoView({behavior:"smooth", block:"start"});
      }}/>
      <Hero t={t} />
      <FeaturedListingsCarousel currency={currency} />
      <Ticker items={t.ticker} />
      <NeighborhoodEssay t={t} onComplete={() => setEssayDone(true)} />

      {/* Neighborhood marquee strip — big serif on ink */}
      <NeighborhoodStrip />

      {/* District / map section */}
      <section className="section section--surface" id="districts">
        <div className="shell">
          <div className="section__head">
            <div>
              <div className="section__num">— / Districts</div>
              <div className="eyebrow eyebrow-gold" style={{marginTop:8}}>{t.map.eyebrow}</div>
              <Reveal as="h2" className="section__title" style={{marginTop:16}}>{t.map.title}</Reveal>
            </div>
            <Reveal as="p" className="section__intro" delay={120}>{t.map.intro}</Reveal>
          </div>
          <DistrictMap t={t} />
        </div>
      </section>

      <Listings t={t} currency={currency} setCurrency={setCurrency} />
      <Practice />
      <About t={t} />
      <BookingCard t={t} revealed={essayDone} />
      <Press t={t} />
      <Footer t={t} />
      <MobileNav t={t} onBook={() => {
        setEssayDone(true);
        document.getElementById("booking")?.scrollIntoView({behavior:"smooth", block:"start"});
      }}/>
    </>
  );
}

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