// App entry — composes sections + Tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1AA5F5",
  "background": "warm",
  "headlineStyle": "mixed",
  "showReelInHeadline": true,
  "displayFont": "Funnel Display"
} /*EDITMODE-END*/;

const FONT_OPTIONS = [
{ value: "Funnel Display", label: "Funnel" },
{ value: "Bricolage Grotesque", label: "Bricolage" },
{ value: "Fraunces", label: "Fraunces" },
{ value: "Boldonse", label: "Boldonse" }];


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

  // Apply tweaks to CSS vars
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--blue", tweaks.accent);
    if (tweaks.background === "warm") {
      root.style.setProperty("--paper", "#F4F1EA");
      root.style.setProperty("--paper-2", "#ECE7DD");
    } else if (tweaks.background === "cool") {
      root.style.setProperty("--paper", "#EEF1F5");
      root.style.setProperty("--paper-2", "#E2E7EE");
    } else {// pure
      root.style.setProperty("--paper", "#F7F7F7");
      root.style.setProperty("--paper-2", "#EDEDED");
    }
    root.style.setProperty("--display", `"${tweaks.displayFont}", "Helvetica Neue", Helvetica, Arial, sans-serif`);
  }, [tweaks]);

  return (
    <div>
      <Nav />
      <Hero showReel={tweaks.showReelInHeadline} />
      <Different />
      <SystemSection />
      <Ecosystem />
      <Results />
      <Clients />
      <About />
      <Partners />
      <Cta />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakColor label="Accent color" value={tweaks.accent} onChange={(v) => setTweak("accent", v)} />
          <TweakRadio
            label="Background tone"
            value={tweaks.background}
            options={[
            { value: "warm", label: "Warm" },
            { value: "cool", label: "Cool" },
            { value: "pure", label: "Neutral" }]
            }
            onChange={(v) => setTweak("background", v)} />
          
        </TweakSection>
        <TweakSection title="Type">
          <TweakSelect
            label="Display font"
            value={tweaks.displayFont}
            options={FONT_OPTIONS}
            onChange={(v) => setTweak("displayFont", v)} />
          
        </TweakSection>
        <TweakSection title="Layout">
          <TweakToggle label="Reel in headline" value={tweaks.showReelInHeadline} onChange={(v) => setTweak("showReelInHeadline", v)} />
          <TweakRadio
            label="Headline weight"
            value={tweaks.headlineStyle}
            options={[
            { value: "mixed", label: "Mixed italic" },
            { value: "all-bold", label: "All bold" }]
            }
            onChange={(v) => setTweak("headlineStyle", v)} />
          
        </TweakSection>
      </TweaksPanel>
    </div>);

};

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