// Tweak defaults — exposed for host edit-mode persistence
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#996962",
  "bg": "rgb(234, 232, 226)",
  "heroVariant": "Revelar",
  "showMarquee": true,
  "serif": "Cormorant Garamond",
  "density": "Normal"
}/*EDITMODE-END*/;

// Lazy-load Google fonts when serif is changed via Tweaks
const loadedFonts = new Set(["Cormorant Garamond"]);
function ensureFont(name) {
  if (loadedFonts.has(name)) return;
  loadedFonts.add(name);
  const id = `gf-${name.replace(/\s+/g, '-')}`;
  if (document.getElementById(id)) return;
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.id = id;
  const fam = name.replace(/ /g, '+');
  link.href = `https://fonts.googleapis.com/css2?family=${fam}:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap`;
  document.head.appendChild(link);
}

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

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--rose', tweaks.accent);
    r.style.setProperty('--paper', tweaks.bg);
    ensureFont(tweaks.serif);
    r.style.setProperty('--serif', `"${tweaks.serif}", "Times New Roman", serif`);
  }, [tweaks.accent, tweaks.bg, tweaks.serif]);

  return (
    <>
      <Nav />
      <Hero variant={tweaks.heroVariant} showMarquee={tweaks.showMarquee} />
      <Manifesto />
      <Services />
      <Experience />
      <Gallery />
      <Footer />
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

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