// Font pairings
const FONT_PAIRS = {
  "Helvetica + Caveat": {
    sans: '"Helvetica Neue", "Inter", system-ui, sans-serif',
    cursive: '"Caveat", cursive',
  },
  "Inter + Playfair": {
    sans: '"Inter", system-ui, sans-serif',
    cursive: '"Playfair Display", serif',
  },
  "Inter + Cormorant": {
    sans: '"Inter", system-ui, sans-serif',
    cursive: '"Cormorant Garamond", serif',
  },
  "Space Grotesk + Instrument": {
    sans: '"Space Grotesk", sans-serif',
    cursive: '"Instrument Serif", serif',
  },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "fontPair": "Helvetica + Caveat"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const pair = FONT_PAIRS[tweaks.fontPair] || FONT_PAIRS["Helvetica + Caveat"];

  React.useEffect(() => {
    document.documentElement.style.setProperty("--font-sans", pair.sans);
    document.documentElement.style.setProperty("--font-cursive", pair.cursive);
  }, [pair.sans, pair.cursive]);

  return (
    <div className="bg-black text-white">
      <Nav />
      <Hero sansFont={pair.sans} cursiveFont={pair.cursive} />
      <Products sansFont={pair.sans} cursiveFont={pair.cursive} />
      <Projects sansFont={pair.sans} cursiveFont={pair.cursive} />
      <Founders sansFont={pair.sans} cursiveFont={pair.cursive} />
      <Footer sansFont={pair.sans} cursiveFont={pair.cursive} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Typography" />
        <TweakSelect
          label="Font pairing"
          value={tweaks.fontPair}
          options={Object.keys(FONT_PAIRS)}
          onChange={(v) => setTweak("fontPair", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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