// App for Salon de Goyo

const PALETTES = {
  warm:  { bg: "#f6f3ee", bgSoft: "#efeae2", ink: "#1c1c1c", inkSoft: "#4a4641", muted: "#948c80", line: "#d8d1c5", gold: "#b49a6e", char: "#2b2b2b" },
  mono:  { bg: "#f4f4f2", bgSoft: "#eaeae6", ink: "#0e0e0e", inkSoft: "#2c2c2c", muted: "#8c8c8c", line: "#d6d6d2", gold: "#7a7a72", char: "#181818" },
  beige: { bg: "#ebe2d3", bgSoft: "#dfd4c1", ink: "#221d16", inkSoft: "#4d4538", muted: "#8d8273", line: "#cdc0a8", gold: "#a07a3a", char: "#2a2118" },
};

const HEADING_FONTS = {
  cormorant: "'Cormorant Garamond', 'Noto Serif KR', serif",
  playfair:  "'Playfair Display', 'Noto Serif KR', serif",
  ibm:       "'IBM Plex Serif', 'Noto Serif KR', serif",
};

function applyPalette(p) {
  const v = PALETTES[p] || PALETTES.warm;
  const r = document.documentElement.style;
  r.setProperty("--bg", v.bg);
  r.setProperty("--bg-soft", v.bgSoft);
  r.setProperty("--ink", v.ink);
  r.setProperty("--ink-soft", v.inkSoft);
  r.setProperty("--muted", v.muted);
  r.setProperty("--line", v.line);
  r.setProperty("--gold", v.gold);
  r.setProperty("--char", v.char);
}

function applyHeadingFont(f) {
  document.documentElement.style.setProperty("--serif", HEADING_FONTS[f] || HEADING_FONTS.cormorant);
}

const TWEAK_DEFAULTS = JSON.parse(
  document.getElementById("tweak-defaults").textContent.replace(/\/\*EDITMODE-(BEGIN|END)\*\//g, "")
);

// Admin overrides (set from /admin.html dashboard) take precedence
try {
  const adminCfg = JSON.parse(localStorage.getItem("sdg_site_settings") || "null");
  if (adminCfg) Object.assign(TWEAK_DEFAULTS, adminCfg);
} catch (e) {}

// Track visit (very lightweight — for admin dashboard demo stats)
try {
  const today = new Date().toISOString().slice(0,10);
  const hits = JSON.parse(localStorage.getItem("sdg_visits") || "{}");
  hits[today] = (hits[today] || 0) + 1;
  localStorage.setItem("sdg_visits", JSON.stringify(hits));
  localStorage.setItem("sdg_last_visit", new Date().toISOString());
} catch (e) {}

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyPalette(tweaks.palette); }, [tweaks.palette]);
  React.useEffect(() => { applyHeadingFont(tweaks.headingFont); }, [tweaks.headingFont]);

  // Inject Playfair / IBM fonts on demand
  React.useEffect(() => {
    if (tweaks.headingFont === "playfair" && !document.getElementById("font-playfair")) {
      const l = document.createElement("link");
      l.id = "font-playfair"; l.rel = "stylesheet";
      l.href = "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap";
      document.head.appendChild(l);
    }
    if (tweaks.headingFont === "ibm" && !document.getElementById("font-ibm")) {
      const l = document.createElement("link");
      l.id = "font-ibm"; l.rel = "stylesheet";
      l.href = "https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;1,400&display=swap";
      document.head.appendChild(l);
    }
  }, [tweaks.headingFont]);

  const T = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakColor = window.TweakColor;
  const TweakRadio = window.TweakRadio;
  const TweakSelect = window.TweakSelect;
  const TweakToggle = window.TweakToggle;

  return (
    <>
      <Header />
      <main>
        <Hero />
        <BrandBar />
        <About />
        <Services />
        <WhyOwner />
        <Menu />
        <Portfolio />
        <Reviews />
        <BookingCTA />
        <Location />
      </main>
      <Footer />
      <MobileFloat visible={tweaks.showBookingFloat} />

      {T && (
        <T title="Tweaks">
          <TweakSection label="Palette">
            <TweakRadio
              label="Color mood"
              value={tweaks.palette}
              options={[
                { value: "warm", label: "Warm" },
                { value: "mono", label: "Mono" },
                { value: "beige", label: "Beige" },
              ]}
              onChange={(v) => setTweak("palette", v)}
            />
          </TweakSection>
          <TweakSection label="Typography">
            <TweakSelect
              label="Display font"
              value={tweaks.headingFont}
              options={[
                { value: "cormorant", label: "Cormorant Garamond" },
                { value: "playfair",  label: "Playfair Display" },
                { value: "ibm",       label: "IBM Plex Serif" },
              ]}
              onChange={(v) => setTweak("headingFont", v)}
            />
          </TweakSection>
          <TweakSection label="Mobile">
            <TweakToggle
              label="모바일 하단 예약 바"
              value={tweaks.showBookingFloat}
              onChange={(v) => setTweak("showBookingFloat", v)}
            />
          </TweakSection>
        </T>
      )}
    </>
  );
}

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