// Main app — wires sections together and exposes a small Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#4F46E5",
  "heroVariant": "split",
  "showLeaderboard": true,
  "showGamification": true,
  "density": "comfy"
}/*EDITMODE-END*/;

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

  // Apply tweaks to CSS custom properties on :root
  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--indigo", t.accent);
    // Derive deep / soft from the accent. Quick hand-rolled tint/shade by
    // mixing with black/white — good enough for buttons & gradients.
    r.setProperty("--indigo-deep", shade(t.accent, -0.25));
  }, [t.accent]);

  React.useEffect(() => {
    // Section vertical rhythm
    const r = document.documentElement.style;
    const map = { tight: "64px", comfy: "96px", loose: "128px" };
    r.setProperty("--section-pad", map[t.density] || "96px");
    document.querySelectorAll("section").forEach((el) => {
      if (!el.classList.contains("hero")) el.style.padding = `${map[t.density]} 0`;
    });
  }, [t.density]);

  return (
    <div className="page">
      <Nav />
      <main>
        <Hero />
        <Subjects />
        <HowItWorks />
        <CEFR current={2} />
        {t.showGamification && <Gamification />}
        <AskFrank />
        <Topics />
        {t.showLeaderboard && <Leaderboard />}
        <FinalCTA />
      </main>
      <Footer />

      <TweaksPanel title="Landing tweaks">
        <TweakSection label="Theme">
          <TweakColor
            label="Accent"
            value={t.accent}
            options={["#4F46E5", "#7C3AED", "#0891B2", "#059669", "#DB2777"]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakRadio
            label="Density"
            value={t.density}
            options={["tight", "comfy", "loose"]}
            onChange={(v) => setTweak("density", v)}
          />
        </TweakSection>
        <TweakSection label="Sections">
          <TweakToggle
            label="Gamification"
            value={t.showGamification}
            onChange={(v) => setTweak("showGamification", v)}
          />
          <TweakToggle
            label="Leaderboard"
            value={t.showLeaderboard}
            onChange={(v) => setTweak("showLeaderboard", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

// Quick color shade by mixing toward black (negative) or white (positive).
// hex in, hex out. -1..1 range.
function shade(hex, amt) {
  const h = hex.replace("#", "");
  const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h;
  const n = parseInt(x, 16);
  let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  if (amt < 0) {
    r = Math.round(r * (1 + amt));
    g = Math.round(g * (1 + amt));
    b = Math.round(b * (1 + amt));
  } else {
    r = Math.round(r + (255 - r) * amt);
    g = Math.round(g + (255 - g) * amt);
    b = Math.round(b + (255 - b) * amt);
  }
  return "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("");
}

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