/* ============================================================
   DIOTBRAND — App shell: routing, global state, tweaks
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#b8924a", "#1e2a20", "#f7f3ea"],
  "btnStyle": "solid",
  "headlineFont": "'Cormorant Garamond', Georgia, serif",
  "heroHeadline": "Bridal & eveningwear, made to measure.",
  "heroSub": "Gowns and corsetry cut, beaded and finished by hand in our Lagos studio — enquire to start a commission."
}/*EDITMODE-END*/;

const PALETTE_MAP = { "#b8924a": "goldforest" };
const PALETTE_OPTS = [["#b8924a", "#1e2a20", "#f7f3ea"]];
const FONT_OPTS = [
  { value: "'Cormorant Garamond', Georgia, serif", label: "Cormorant (elegant)" },
  { value: "'Playfair Display', Georgia, serif", label: "Playfair (editorial)" },
  { value: "'Marcellus', Georgia, serif", label: "Marcellus (roman)" },
  { value: "'Bodoni Moda', Georgia, serif", label: "Bodoni (high-fashion)" },
  { value: "'Jost', sans-serif", label: "Jost (modern sans)" },
];

const store = {
  get(k, d) { try { const v = localStorage.getItem("diot_" + k); return v ? JSON.parse(v) : d; } catch { return d; } },
  set(k, v) { try { localStorage.setItem("diot_" + k, JSON.stringify(v)); } catch {} },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState({ name: "home", params: {} });
  const [currency, setCurrencyState] = useState(() => (window.BRAND && window.BRAND.currency.base) || "USD");
  const [searchOpen, setSearchOpen] = useState(false);

  useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-theme", "light");
    const pal = PALETTE_MAP[(t.palette && t.palette[0]) || "#b8924a"] || "goldforest";
    r.setAttribute("data-palette", pal);
    r.setAttribute("data-btn", t.btnStyle || "solid");
    r.style.setProperty("--font-display", t.headlineFont || "'Cormorant Garamond', serif");
  }, [t.palette, t.btnStyle, t.headlineFont]);


  useEffect(() => { document.body.classList.toggle("no-scroll", searchOpen); }, [searchOpen]);

  const onNav = (name, params = {}) => {
    setRoute({ name, params });
    setSearchOpen(false);
    window.scrollTo({ top: 0, behavior: "auto" });
  };

  const setCurrency = (c) => setCurrencyState(c);

  const ctx = {
    currency, setCurrency,
    searchOpen, openSearch: () => setSearchOpen(true), closeSearch: () => setSearchOpen(false),
    onNav,
  };

  const PAGES = { home: HomePage, shop: ShopPage, product: ProductPage, about: AboutPage, contact: ContactPage, custom: CustomOrderPage };
  const Page = PAGES[route.name] || HomePage;

  return (
    <RBCtx.Provider value={ctx}>
      <Header route={route} onNav={onNav} />
      <main>
        <Page route={route} onNav={onNav} tweaks={t} />
      </main>
      <Footer onNav={onNav} />
      <SearchOverlay />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakColor label="Palette" value={t.palette} options={PALETTE_OPTS} onChange={(v) => setTweak("palette", v)} />
        <TweakSelect label="Button style" value={t.btnStyle}
          options={[{ value: "solid", label: "Solid" }, { value: "outline", label: "Outline" }, { value: "minimal", label: "Minimal (underline)" }, { value: "pill", label: "Pill" }]}
          onChange={(v) => setTweak("btnStyle", v)} />

        <TweakSection label="Typography" />
        <TweakSelect label="Headline font" value={t.headlineFont} options={FONT_OPTS} onChange={(v) => setTweak("headlineFont", v)} />

        <TweakSection label="Hero copy" />
        <TweakText label="Headline" value={t.heroHeadline} onChange={(v) => setTweak("heroHeadline", v)} />
        <TweakText label="Subtext" value={t.heroSub} onChange={(v) => setTweak("heroSub", v)} />
      </TweaksPanel>
    </RBCtx.Provider>
  );
}

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