/* =========================================================
   Main App — assembles all sections.
   ========================================================= */
const SECTIONS = [
  { id: "bazaar",  short: "BAZaar",      label: "Live demo" },
  { id: "kit",     short: "Escrow Kit",  label: "Build with the Kit" },
  { id: "other",   short: "Build more",  label: "What else" },
  { id: "faq",     short: "FAQ",         label: "FAQ" },
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroSurface": "light",
  "showSideRail": true,
  "leadAccent": "#D4FF28"
}/*EDITMODE-END*/;

// Accent → deep variant for hover states.
const ACCENT_DEEP = {
  "#D4FF28": "#A9CC1F", // chartreuse → chartreuse-deep
  "#FF2DF4": "#CC24C3", // orchid → orchid-deep
  "#28FAE9": "#1FB5A7", // aqua → aqua-deep (synthesized)
};

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

  const styleVars = {
    "--az-chartreuse": t.leadAccent,
    "--az-chartreuse-deep": ACCENT_DEEP[t.leadAccent] || "#A9CC1F",
    "--accent": t.leadAccent,
  };

  return (
    <div style={styleVars}>
      <TopNav sections={SECTIONS} />
      {t.showSideRail && <SideRail sections={SECTIONS} />}

      <Hero surface={t.heroSurface} />
      <BAZaarSection />
      <KitSection />
      <OtherSection />
      <FAQSection />
      <FooterCTASection />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakRadio
            label="Surface"
            value={t.heroSurface}
            options={[
              { value: "light", label: "Parchment" },
              { value: "dark",  label: "Malachite" },
            ]}
            onChange={(v) => setTweak("heroSurface", v)}
          />
        </TweakSection>

        <TweakSection label="Accent">
          <TweakColor
            label="Lead accent"
            value={t.leadAccent}
            options={["#D4FF28", "#FF2DF4", "#28FAE9"]}
            onChange={(v) => setTweak("leadAccent", v)}
          />
        </TweakSection>

        <TweakSection label="Navigation">
          <TweakToggle
            label="Side rail (desktop)"
            value={t.showSideRail}
            onChange={(v) => setTweak("showSideRail", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

window.App = App;
window.SECTIONS = SECTIONS;
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;