// Marius Pop — Vertriebspartner Karriere · app composition + Tweaks
const { useState: useStateApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#2563EB", "#1E3A8A"],
  "headingFont": "Plus Jakarta Sans"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [funnelOpen, setFunnelOpen] = useStateApp(false);
  const apply = () => setFunnelOpen(true);

  const accent = Array.isArray(t.accent) ? t.accent[0] : t.accent;
  const accentStrong = Array.isArray(t.accent) ? (t.accent[1] || t.accent[0]) : t.accent;

  return (
    <div style={{ "--accent": accent, "--accent-strong": accentStrong, "--font-head": `'${t.headingFont}', system-ui, sans-serif` }}>
      <Nav onApply={apply} />
      <main>
        <Hero onApply={apply} />
        <Vorwort />
        <StatusQuo />
        <Reasons onApply={apply} />
        <Testimonial />
        <About />
        <Pfad onApply={apply} />
        <Fit />
        <Compare />
        <Skills />
        <Quer />
        <FAQ />
        <FinalCta onApply={apply} />
      </main>
      <Footer onApply={apply} />

      <Funnel open={funnelOpen} onClose={() => setFunnelOpen(false)} />

      <TweaksPanel>
        <TweakSection label="Marke" />
        <TweakColor label="Akzentfarbe" value={t.accent} onChange={(v) => setTweak("accent", v)}
          options={[["#2563EB", "#1E3A8A"], ["#20C39D", "#1C7F7A"], ["#D6FD70", "#6FA80F"], ["#F1EE46", "#9C9A06"]]} />
        <TweakSelect label="Headline-Schrift" value={t.headingFont} onChange={(v) => setTweak("headingFont", v)}
          options={["Plus Jakarta Sans", "Space Grotesk", "Geist", "Bricolage Grotesque"]} />
      </TweaksPanel>
    </div>
  );
}

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