// app.jsx — root composition + Tweaks

const App = () => {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  // apply accent color + density to :root
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    // derive deep / soft variants from the picked accent for hero gradient
    root.style.setProperty("--accent-tint", hexA(t.accent, .08));
    root.style.setProperty("--accent-tint-strong", hexA(t.accent, .14));
    root.dataset.density = t.density;
  }, [t.accent, t.density]);

  return (
    <>
      <Header />
      <Hero variant={t.heroVariant} />
      <Timeline />
      <Services />
      <Story />
      <References />
      <FAQ />
      <FinalCTA />
      <Contact />
      <Footer />
      <WhatsAppFab />

      {t.showTweaks && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Hero" />
          <TweakRadio label="Headline"
            value={t.heroVariant}
            options={[
              { value: "starosti", label: "Bez starostí" },
              { value: "klic",     label: "Na klíč" },
            ]}
            onChange={(v) => setTweak("heroVariant", v)} />

          <TweakSection label="Vzhled" />
          <TweakColor label="Akcent"
            value={t.accent}
            options={["#0A66C2", "#1B3A5F", "#0F766E", "#9A3412"]}
            onChange={(v) => setTweak("accent", v)} />
          <TweakRadio label="Hustota"
            value={t.density}
            options={["compact", "regular", "comfy"]}
            onChange={(v) => setTweak("density", v)} />
        </TweaksPanel>
      )}
    </>
  );
};

// helper — hex to rgba()
function hexA(hex, a) {
  const h = hex.replace("#","");
  const v = h.length === 3 ? h.split("").map(c => c+c).join("") : h;
  const n = parseInt(v, 16);
  return `rgba(${(n>>16)&255}, ${(n>>8)&255}, ${n&255}, ${a})`;
}

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