// Eva Jewellers — main app

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "displayFont": "Cormorant Garamond",
  "density": "comfortable",
  "showTopBar": true
}/*EDITMODE-END*/;

const ACCENTS = {
  gold:    { gold: "#C9A24B", goldDeep: "#A8842F", goldSoft: "#E9D6A8" },
  rose:    { gold: "#C9968A", goldDeep: "#A87268", goldSoft: "#EBCCC4" },
  platinum:{ gold: "#9AA3AB", goldDeep: "#5F676E", goldSoft: "#D9D9DC" },
  emerald: { gold: "#5C8F76", goldDeep: "#3F6952", goldSoft: "#BFD6CB" },
};

function App() {
  const initialRoute = window.__BYTESGLUE_SHOWCASE_ROUTE || "home";
  const [route, setRoute] = useState(initialRoute);
  const [collSlug, setCollSlug] = useState(null);
  const [consultOpen, setConsultOpen] = useState(false);
  const [t, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  // Apply accent + font + density
  useEffect(() => {
    const accent = ACCENTS[t.accent] || ACCENTS.gold;
    document.documentElement.style.setProperty("--gold", accent.gold);
    document.documentElement.style.setProperty("--gold-deep", accent.goldDeep);
    document.documentElement.style.setProperty("--gold-soft", accent.goldSoft);
    document.documentElement.style.setProperty("--display-font", "'" + t.displayFont + "'");
    document.documentElement.dataset.density = t.density;
    document.documentElement.dataset.topbar = t.showTopBar ? "on" : "off";
  }, [t.accent, t.displayFont, t.density, t.showTopBar]);

  const go = (r, slug = null) => {
    setRoute(r);
    setCollSlug(slug);
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const openConsult = () => setConsultOpen(true);

  let Page = null;
  if (route === "home") Page = <PageHome go={go} openConsult={openConsult} />;
  else if (route === "collections") Page = <PageCollections initialCat={collSlug} go={go} openConsult={openConsult} />;
  else if (route === "bespoke") Page = <PageBespoke go={go} openConsult={openConsult} />;
  else if (route === "education") Page = <PageEducation go={go} openConsult={openConsult} />;
  else if (route === "about") Page = <PageAbout go={go} openConsult={openConsult} />;
  else if (route === "testimonials") Page = <PageTestimonials go={go} openConsult={openConsult} />;
  else if (route === "visit") Page = <PageVisit go={go} openConsult={openConsult} />;

  return (
    <div className="evaApp" data-screen-label={"Eva — " + route}>
      <Navbar route={route} go={go} openConsult={openConsult} />
      {Page}
      <Footer go={go} />
      <WhatsAppFab />
      <ConsultationModal open={consultOpen} onClose={() => setConsultOpen(false)} />
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks · Eva" defaultPosition={{ right: 24, bottom: 96 }}>
          <window.TweakSection label="Brand">
            <window.TweakRadio
              label="Accent metal"
              value={t.accent}
              options={[
                { value: "gold", label: "Gold" },
                { value: "rose", label: "Rose" },
                { value: "platinum", label: "Steel" },
                { value: "emerald", label: "Emerald" },
              ]}
              onChange={(v) => setTweak("accent", v)}
            />
            <window.TweakSelect
              label="Display serif"
              value={t.displayFont}
              options={[
                { value: "Cormorant Garamond", label: "Cormorant Garamond" },
                { value: "Playfair Display",   label: "Playfair Display" },
                { value: "DM Serif Display",    label: "DM Serif Display" },
                { value: "Italiana",            label: "Italiana" },
                { value: "EB Garamond",         label: "EB Garamond" },
              ]}
              onChange={(v) => setTweak("displayFont", v)}
            />
          </window.TweakSection>
          <window.TweakSection label="Layout">
            <window.TweakRadio
              label="Density"
              value={t.density}
              options={[
                { value: "comfortable", label: "Comfortable" },
                { value: "airy", label: "Airy" },
              ]}
              onChange={(v) => setTweak("density", v)}
            />
            <window.TweakToggle
              label="Top utility bar"
              value={t.showTopBar}
              onChange={(v) => setTweak("showTopBar", v)}
            />
          </window.TweakSection>
          <window.TweakSection label="Jump to">
            <window.TweakButton label="Home" onClick={() => go("home")} />
            <window.TweakButton label="Collections" onClick={() => go("collections")} secondary />
            <window.TweakButton label="Bespoke" onClick={() => go("bespoke")} secondary />
            <window.TweakButton label="Diamond Guide" onClick={() => go("education")} secondary />
            <window.TweakButton label="About" onClick={() => go("about")} secondary />
            <window.TweakButton label="Testimonials" onClick={() => go("testimonials")} secondary />
            <window.TweakButton label="Visit" onClick={() => go("visit")} secondary />
            <window.TweakButton label="Open consultation modal" onClick={openConsult} />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
}

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