// app.jsx — top-level composition + Tweaks integration

const { useState: useState_A, useEffect: useEffect_A } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "productName": "HELVOX",
  "accent": "#DA291C",
  "heroVariant": "split",
  "density": "regular",
  "showComparison": true
}/*EDITMODE-END*/;

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

  // Apply accent to CSS vars
  useEffect_A(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.accent]);

  return (
    <div style={{ background: "#0a0a0a", color: "#f5f5f1", minHeight: "100vh" }} id="top">
      <Nav name={t.productName} />
      <Hero name={t.productName} />
      <LogoBar />
      <LatencySection />
      <DialectSection />
      <DXSection />
      <IntegrationsSection />
      <PricingSection />
      {t.showComparison && <ComparisonSection />}
      <TrustSection />
      <FinalCTA name={t.productName} />
      <Footer name={t.productName} />

      <TweaksPanel>
        <TweakSection label="Marke" />
        <TweakText
          label="Produktname"
          value={t.productName}
          onChange={(v) => setTweak("productName", v || "HELVOX")}
        />
        <TweakColor
          label="Akzentfarbe"
          value={t.accent}
          options={["#DA291C", "#FF0000", "#d2f24a", "#3aa1ff", "#f5b400", "#e8e8e8"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Layout" />
        <TweakToggle
          label="Vergleichstabelle"
          value={t.showComparison}
          onChange={(v) => setTweak("showComparison", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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