// App root + Tweaks panel (typography only, per user request)

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "italicFont": "Instrument Serif",
  "sansFont": "Geist",
  "headlineWeight": 600,
  "baseSize": 16
}/*EDITMODE-END*/;

const ITALIC_OPTS = ["Instrument Serif", "Cormorant Garamond", "DM Serif Display", "Italiana"];
const SANS_OPTS   = ["Geist", "Plus Jakarta Sans", "Space Grotesk", "Manrope"];

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

  // Inject fonts dynamically so tweak options actually load
  React.useEffect(() => {
    const families = [
      `${t.italicFont}:ital,wght@0,400;1,400`,
      `${t.sansFont}:wght@400;500;600;700`,
    ].map(f => f.replace(/ /g, "+"));
    const id = "tweak-fonts";
    let link = document.getElementById(id);
    if (!link) { link = document.createElement("link"); link.id = id; link.rel = "stylesheet"; document.head.appendChild(link); }
    link.href = `https://fonts.googleapis.com/css2?${families.map(f => `family=${f}`).join("&")}&display=swap`;
  }, [t.italicFont, t.sansFont]);

  const styleVars = {
    "--serif": `"${t.italicFont}", "Times New Roman", serif`,
    "--sans": `"${t.sansFont}", ui-sans-serif, system-ui, sans-serif`,
    fontSize: `${t.baseSize}px`,
  };

  return (
    <div style={styleVars}>
      <style>{`.display { font-weight: ${t.headlineWeight} !important; }`}</style>

      <Nav />
      <Hero />
      <Featured />
      <HowItWorks />
      <Catalogue />
      <About />
      <Testimonials />
      <Newsletter />
      <FooterCTA />
      <Foot />
      <WaFab />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Tipografie" />
        <TweakSelect
          label="Font cursiv (accent)"
          value={t.italicFont}
          options={ITALIC_OPTS}
          onChange={(v) => setTweak("italicFont", v)}
        />
        <TweakSelect
          label="Font principal"
          value={t.sansFont}
          options={SANS_OPTS}
          onChange={(v) => setTweak("sansFont", v)}
        />
        <TweakSlider
          label="Greutate titluri"
          value={t.headlineWeight}
          min={400} max={700} step={100}
          onChange={(v) => setTweak("headlineWeight", v)}
        />
        <TweakSlider
          label="Mărime text"
          value={t.baseSize}
          min={14} max={18} step={1} unit="px"
          onChange={(v) => setTweak("baseSize", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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