// Main App composition + Tweaks panel
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "ink",
  "type": "serif",
  "heroVariant": "fullbleed",
  "leadStyle": "bar"
}/*EDITMODE-END*/;

function smoothScrollTo(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const top = el.getBoundingClientRect().top + window.pageYOffset - 24;
  window.scrollTo({ top, behavior: "smooth" });
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useStateA("en");
  const [scrolled, setScrolled] = useStateA(false);
  const [bookOpen, setBookOpen] = useStateA(false);
  const [leadVisible, setLeadVisible] = useStateA(false);

  useEffectA(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setScrolled(y > 40);
      setLeadVisible(y > 720);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffectA(() => {
    const html = document.documentElement;
    const dir = I18N[lang].dir;
    html.setAttribute("dir", dir);
    html.setAttribute("lang", lang);
  }, [lang]);

  useEffectA(() => {
    const html = document.documentElement;
    html.setAttribute("data-palette", t.palette || "ink");
    html.setAttribute("data-type", t.type || "serif");
    html.setAttribute("data-lead", t.leadStyle || "bar");
  }, [t.palette, t.type, t.leadStyle]);

  const onRegister = () => smoothScrollTo("register");
  const onBookViewing = () => setBookOpen(true);

  return (
    <React.Fragment>
      <Nav lang={lang} setLang={setLang} scrolled={scrolled} onRegister={onRegister} onBookViewing={onBookViewing} />
      <Hero lang={lang} variant={t.heroVariant} onRegister={onRegister} onBookViewing={onBookViewing} />
      <TaglineStrip lang={lang} />
      <Editorial lang={lang} />
      <Marquee />
      <Location lang={lang} />
      <Residences lang={lang} />
      <Amenities />
      <Gallery />
      <Trust lang={lang} />
      <RegisterInterestSection lang={lang} />
      <Footer lang={lang} />

      <LeadBar visible={leadVisible && t.leadStyle === "bar"} onBookViewing={onBookViewing} onRegister={onRegister} />
      <LeadRail visible={leadVisible && t.leadStyle === "rail"} onBookViewing={onBookViewing} onRegister={onRegister} />

      <BookViewingModal open={bookOpen} onClose={() => setBookOpen(false)} />

      <TweaksPanel title="Tweaks" defaultOpen={false}>
        <TweakSection title="Palette">
          <TweakRadio
            label="Tone"
            value={t.palette}
            onChange={(v) => setTweak("palette", v)}
            options={[
              { value: "ink",      label: "Ink + Bronze" },
              { value: "graphite", label: "Graphite" },
              { value: "midnight", label: "Midnight" },
            ]}
          />
        </TweakSection>

        <TweakSection title="Type pairing">
          <TweakRadio
            label="Display family"
            value={t.type}
            onChange={(v) => setTweak("type", v)}
            options={[
              { value: "serif",     label: "Cormorant" },
              { value: "condensed", label: "Playfair" },
              { value: "grotesque", label: "Manrope" },
            ]}
          />
        </TweakSection>

        <TweakSection title="Hero treatment">
          <TweakRadio
            label="Layout"
            value={t.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[
              { value: "fullbleed", label: "Full-bleed film" },
              { value: "split",     label: "Split" },
              { value: "typo",      label: "Typographic" },
            ]}
          />
        </TweakSection>

        <TweakSection title="Lead capture">
          <TweakRadio
            label="Floating dock"
            value={t.leadStyle}
            onChange={(v) => setTweak("leadStyle", v)}
            options={[
              { value: "bar",    label: "Bottom bar" },
              { value: "rail",   label: "Side rail" },
              { value: "inline", label: "Inline only" },
            ]}
          />
        </TweakSection>

        <TweakSection title="Language">
          <TweakRadio
            label="Locale"
            value={lang}
            onChange={(v) => setLang(v)}
            options={[
              { value: "en", label: "EN" },
              { value: "ar", label: "AR · RTL" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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