/* --- Panos Melekkis · App root --- */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroScene": "empire",
  "accent": "#B8954E",
  "density": "regular",
  "signature": false,
  "currency": "AED"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // body density class
  React.useEffect(() => {
    document.body.classList.toggle("compact", t.density === "compact");
  }, [t.density]);

  // accent override
  React.useEffect(() => {
    document.documentElement.style.setProperty("--gold", t.accent);
  }, [t.accent]);

  // Hero scene state — initialised from tweak, but user can override via rail
  const initialScene = Math.max(0, window.PM_DATA.scenes.findIndex((s) => s.id === t.heroScene));
  const [sceneIx, setSceneIx] = React.useState(initialScene === -1 ? 0 : initialScene);

  React.useEffect(() => {
    const ix = window.PM_DATA.scenes.findIndex((s) => s.id === t.heroScene);
    if (ix >= 0) setSceneIx(ix);
  }, [t.heroScene]);

  // Currency
  const [currency, setCurrency] = React.useState(t.currency || "AED");
  React.useEffect(() => { setCurrency(t.currency || "AED"); }, [t.currency]);
  const handleCurrency = (c) => {
    setCurrency(c);
    setTweak("currency", c);
  };

  // Drawer
  const [openCollection, setOpenCollection] = React.useState(null);
  const [bookingOpen, setBookingOpen] = React.useState(false);

  // Nav mode based on scroll
  const [navMode, setNavMode] = React.useState("over");
  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      if (y < 100) setNavMode("over");
      else if (y < window.innerHeight - 80) setNavMode("solid");
      else setNavMode("light");
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Reveal-on-scroll
  useReveal();

  const openBook = () => setBookingOpen(true);
  const openColl = (id) => setOpenCollection(id);
  const closeColl = () => setOpenCollection(null);

  return (
    <React.Fragment>
      <Nav
        navMode={navMode}
        onBook={openBook}
        currency={currency}
        setCurrency={handleCurrency}
      />

      <Hero
        sceneIx={sceneIx}
        setSceneIx={setSceneIx}
        onBook={openBook}
        onExplore={() => document.getElementById("collections").scrollIntoView({ behavior: "smooth", block: "start" })}
        signature={t.signature}
      />

      <CredibilityStrip />
      <CollectionsSection onOpen={openColl} density={t.density} />
      <DesignerSection />
      <BespokeSection onBook={openBook} />
      <BridalSection onBook={openBook} currency={currency} />
      <PressStrip />
      <AtelierSection />
      <Footer onBook={openBook} />

      <WaFab />
      <MobileBar onBook={openBook} />

      <CollectionDrawer
        collectionId={openCollection}
        onClose={closeColl}
        onBook={() => { closeColl(); setTimeout(openBook, 380); }}
        currency={currency}
      />

      <BookingModal open={bookingOpen} onClose={() => setBookingOpen(false)} />

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero scene" />
        <TweakRadio
          label="Active scene"
          value={t.heroScene}
          options={["empire", "d3", "quantum"]}
          onChange={(v) => setTweak("heroScene", v)}
        />

        <TweakSection label="Accent · gold" />
        <TweakColor
          label="Hairline accent"
          value={t.accent}
          options={["#B8954E", "#C7A86A", "#7C8C82", "#E6DCCC"]}
          onChange={(v) => setTweak("accent", v)}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={["compact", "regular"]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakToggle
          label="Signature mark in hero"
          value={t.signature}
          onChange={(v) => setTweak("signature", v)}
        />

        <TweakSection label="Currency" />
        <TweakSelect
          label="Display in"
          value={t.currency}
          options={["AED", "USD", "EUR", "GBP", "ZAR"]}
          onChange={(v) => { setTweak("currency", v); setCurrency(v); }}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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