// Main app — wires tweaks + composes page
const { useEffect: useEffectM } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "diplomat",
  "paper": "parchment",
  "displayFont": "newsreader",
  "showDropcap": true,
  "insightsPosition": "high",
  "headerStyle": "split"
}/*EDITMODE-END*/;

const ACCENTS = {
  bordeaux: { c: "oklch(0.40 0.07 25)",  deep: "oklch(0.30 0.06 25)",  light: "oklch(0.60 0.07 25)" },
  diplomat: { c: "oklch(0.38 0.08 250)", deep: "oklch(0.28 0.07 250)", light: "oklch(0.60 0.08 250)" },
  forest:   { c: "oklch(0.38 0.06 155)", deep: "oklch(0.28 0.05 155)", light: "oklch(0.60 0.07 155)" },
  steel:    { c: "oklch(0.42 0.04 240)", deep: "oklch(0.30 0.03 240)", light: "oklch(0.60 0.04 240)" },
};

const PAPERS = {
  parchment: { p: "#EFEDE6", warm: "#E8E5DC", deep: "#DEDAD0", panel: "#F5F3EC", rule: "oklch(0.82 0.01 245)", ruleSoft: "oklch(0.88 0.008 245)" },
  stone:     { p: "#E9E6DD", warm: "#E0DCD1", deep: "#D5D0C2", panel: "#EFEDE5", rule: "oklch(0.78 0.01 245)", ruleSoft: "oklch(0.85 0.008 245)" },
  cool:      { p: "#ECEDEC", warm: "#E3E5E4", deep: "#D6D9D8", panel: "#F2F3F2", rule: "oklch(0.82 0.005 240)", ruleSoft: "oklch(0.88 0.004 240)" },
  white:     { p: "#F6F5F1", warm: "#EDECE7", deep: "#E0DFD9", panel: "#FAF9F5", rule: "oklch(0.85 0.008 245)", ruleSoft: "oklch(0.90 0.005 245)" },
};

const FONTS = {
  newsreader: '"Newsreader", "Source Serif 4", Georgia, serif',
  fraunces:   '"Fraunces", "Newsreader", Georgia, serif',
  source:     '"Source Serif 4", "Newsreader", Georgia, serif',
};

function applyTweaks(t) {
  const r = document.documentElement.style;
  const a = ACCENTS[t.accent] || ACCENTS.diplomat;
  const p = PAPERS[t.paper] || PAPERS.parchment;
  r.setProperty("--bordeaux", a.c);
  r.setProperty("--bordeaux-deep", a.deep);
  r.setProperty("--paper", p.p);
  r.setProperty("--paper-warm", p.warm);
  r.setProperty("--paper-deep", p.deep);
  r.setProperty("--panel", p.panel);
  r.setProperty("--rule", p.rule);
  r.setProperty("--rule-soft", p.ruleSoft);
  r.setProperty("--serif", FONTS[t.displayFont] || FONTS.newsreader);
  document.body.dataset.dropcap = t.showDropcap ? "on" : "off";
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const data = window.WDA_DATA;

  useEffectM(() => { applyTweaks(tweaks); }, [tweaks]);

  // Toggle dropcap
  useEffectM(() => {
    const dc = document.querySelectorAll(".dropcap");
    dc.forEach(el => {
      el.classList.toggle("dropcap-off", !tweaks.showDropcap);
    });
  }, [tweaks.showDropcap]);

  return (
    <React.Fragment>
      <a href="#main" className="skip-link">Skip to main content</a>
      <Header data={data} />
      <main id="main">
      <Hero data={data} />
      <Proof data={data} />
      {tweaks.insightsPosition === "high" ? (
        <React.Fragment>
          <Insights data={data} />
          <Programs data={data} />
          <Faculty data={data} />
          <Differentiation data={data} />
        </React.Fragment>
      ) : (
        <React.Fragment>
          <Programs data={data} />
          <Faculty data={data} />
          <Differentiation data={data} />
          <Insights data={data} />
        </React.Fragment>
      )}
      <Testimonials data={data} />
      <FinalCTA data={data} />
      </main>
      <Footer data={data} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakRadio
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { value: "diplomat", label: "Diplomat" },
              { value: "bordeaux", label: "Bordeaux" },
              { value: "forest", label: "Forest" },
              { value: "steel", label: "Steel" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Paper tone">
          <TweakRadio
            value={tweaks.paper}
            onChange={(v) => setTweak("paper", v)}
            options={[
              { value: "parchment", label: "Parchment" },
              { value: "stone", label: "Stone" },
              { value: "cool", label: "Cool grey" },
              { value: "white", label: "Soft white" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Editorial serif">
          <TweakSelect
            value={tweaks.displayFont}
            onChange={(v) => setTweak("displayFont", v)}
            options={[
              { value: "newsreader", label: "Newsreader" },
              { value: "fraunces", label: "Fraunces" },
              { value: "source", label: "Source Serif 4" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Diary placement">
          <TweakRadio
            value={tweaks.insightsPosition}
            onChange={(v) => setTweak("insightsPosition", v)}
            options={[
              { value: "high", label: "High (after proof)" },
              { value: "mid", label: "Mid (after differentiation)" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Dropcap in essay">
          <TweakToggle checked={tweaks.showDropcap} onChange={(v) => setTweak("showDropcap", v)} label="On" />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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