// Top-level App. Wires Tweaks panel to a few visual options.

const PALETTES = {
  blue:   { brand: "#0A5BFF", red: "#b23a2f", warm: "#f6f1ea", cream: "#f3ede2", promo: "#ffd84d" },
  sunset: { brand: "#E55934", red: "#22456b", warm: "#fbeee0", cream: "#f5e4cd", promo: "#ffcc4d" },
  sage:   { brand: "#3F7D5A", red: "#a8462e", warm: "#f1ede2", cream: "#e8e2cf", promo: "#ffd84d" },
  berry:  { brand: "#A53860", red: "#2b6b6f", warm: "#f6ecef", cream: "#f1dde4", promo: "#fbe25c" },
};

const FONTS = {
  bricolage: '"Bricolage Grotesque", system-ui, sans-serif',
  fraunces:  '"Fraunces", Georgia, serif',
  dmserif:   '"DM Serif Display", Georgia, serif',
};

function applyTweaks(t) {
  const p = PALETTES[t.palette] || PALETTES.blue;
  const root = document.documentElement;
  root.style.setProperty("--brand", p.brand);
  root.style.setProperty("--accent-red", p.red);
  root.style.setProperty("--bg-warm", p.warm);
  root.style.setProperty("--bg-cream", p.cream);
  root.style.setProperty("--promo", p.promo);
  root.style.setProperty("--display", FONTS[t.displayFont] || FONTS.bricolage);
}

function App() {
  const defaults = JSON.parse(document.getElementById("tweak-defaults").textContent);
  const [t, setTweak] = useTweaks(defaults);
  const [promoOpen, setPromoOpen] = React.useState(true);

  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <>
      {t.showPromoBar && promoOpen && <PromoBar onClose={() => setPromoOpen(false)} />}
      <Nav />
      <Hero heroCopy={t.heroCopy} />
      <HowItWorks />
      <Categories />
      <Gift />
      <Plans />
      <Partners />
      <Testimonials />
      <FAQ />
      <Footer />
    </>
  );
}

// Wait for TweaksPanel etc to be available
function mount() {
  if (!window.TweaksPanel || !window.Hero) {
    return setTimeout(mount, 50);
  }
  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
}
mount();