// App shell: lays out the dashboard + wires Tweaks (accent, density).
const { useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C3FF00",
  "density": "regular",
  "showWallets": true,
  "podiumGlow": true
}/*EDITMODE-END*/;

const DENSITY = {
  compact: { gap: "12px", pad: "16px", row: "44px" },
  regular: { gap: "16px", pad: "20px", row: "52px" },
  comfy:   { gap: "22px", pad: "26px", row: "60px" },
};

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

  useEffectA(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--ll-neon", t.accent);
    const d = DENSITY[t.density] || DENSITY.regular;
    root.style.setProperty("--gap", d.gap);
    root.style.setProperty("--card-pad", d.pad);
    root.style.setProperty("--row-h", d.row);
    root.setAttribute("data-glow", t.podiumGlow ? "on" : "off");
  }, [t.accent, t.density, t.podiumGlow]);

  return (
    <div className="page">
      <div className="shell">
        <Hero />
        <Summary />
        <RecommendedMarkets />
        <Leaderboard />
        <CommunityPulse />
        <Raffle hideWallets={!t.showWallets} />
        <Rules />
        <footer className="foot">
          <span>Read-only · refreshes daily from backend export</span>
          <span className="foot-dot">·</span>
          <span>No PII beyond truncated wallets &amp; usernames</span>
        </footer>
      </div>

      <TweaksPanel>
        <TweakSection label="Appearance" />
        <TweakColor label="Accent" value={t.accent}
          options={["#C3FF00", "#0079FF", "#F5C544", "#ED5023"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakRadio label="Density" value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)} />
        <TweakSection label="Leaderboard" />
        <TweakToggle label="Podium glow" value={t.podiumGlow}
          onChange={(v) => setTweak("podiumGlow", v)} />
        <TweakSection label="Raffle" />
        <TweakToggle label="Show eligible wallets" value={t.showWallets}
          onChange={(v) => setTweak("showWallets", v)} />
      </TweaksPanel>
    </div>
  );
}

// Raffle variant when wallet list is hidden (Tweak off)
ReactDOM.createRoot(document.getElementById("root")).render(<App />);