// app.jsx — HOTMESS brand site root

const GOLD_PRESETS = {
  brand: "#C8962C",
  bright: "#F2C24A",
  dark: "#8E6A1F",
  desat: "#A09682",
};

function App() {
  const [t, setTweak] = useTweaks(window.HM_TWEAK_DEFAULTS || {
    heroVariant: "wordmark",
    goldIntensity: "brand",
    showPulse: true,
    showSafety: true,
    showTapPack: true,
    showRadio: true,
    showRecovery: true,
  });

  // Apply gold to CSS variable
  React.useEffect(() => {
    const c = GOLD_PRESETS[t.goldIntensity] || GOLD_PRESETS.brand;
    document.documentElement.style.setProperty("--gold", c);
  }, [t.goldIntensity]);

  return (
    <>
      <Nav />
      <Hero variant={t.heroVariant} />

      <Definition />
      <Why />
      <Principles />

      {t.showPulse    && <PulseSection />}
      {t.showSafety   && <SafetySection />}
      {t.showTapPack  && <TapPackSection />}
      {t.showRadio    && <RadioSection />}
      <HNHMessSection />
      {t.showRecovery && <RecoverySection />}

      {/* Emotional anchor pair — Dedication immediately into Founder Note */}
      <Dedication />
      <FounderNote />

      {/* Practical / commercial */}
      <MembersSection />
      <PartnersSection />

      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio
          label="Variant"
          value={t.heroVariant}
          options={["wordmark", "manifesto", "globe"]}
          onChange={(v) => setTweak("heroVariant", v)}
        />

        <TweakSection label="Gold accent" />
        <TweakColor
          label="Intensity"
          value={GOLD_PRESETS[t.goldIntensity] || GOLD_PRESETS.brand}
          options={[GOLD_PRESETS.brand, GOLD_PRESETS.bright, GOLD_PRESETS.dark, GOLD_PRESETS.desat]}
          onChange={(v) => {
            const key = Object.keys(GOLD_PRESETS).find((k) => GOLD_PRESETS[k] === v) || "brand";
            setTweak("goldIntensity", key);
          }}
        />

        <TweakSection label="Sections" />
        <TweakToggle label="Pulse"     value={t.showPulse}    onChange={(v) => setTweak("showPulse", v)} />
        <TweakToggle label="Safety"    value={t.showSafety}   onChange={(v) => setTweak("showSafety", v)} />
        <TweakToggle label="Tap-Pack"  value={t.showTapPack}  onChange={(v) => setTweak("showTapPack", v)} />
        <TweakToggle label="Radio"     value={t.showRadio}    onChange={(v) => setTweak("showRadio", v)} />
        <TweakToggle label="Recovery"  value={t.showRecovery} onChange={(v) => setTweak("showRecovery", v)} />
      </TweaksPanel>
    </>
  );
}

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