const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "slate",
  "accent": "ember",
  "headlineFont": "fraunces",
  "showInstructor": true,
  "showGallery": true
}/*EDITMODE-END*/;

const themes = {
  forest: { paper: "#F1ECE0", paperWarm: "#E9E1CF", paperDeep: "#DDD2BB", ink: "#14181C" },
  cream:  { paper: "#F5F0E5", paperWarm: "#EFE8D8", paperDeep: "#E2D8C0", ink: "#1A1814" },
  slate:  { paper: "#E9EAEC", paperWarm: "#DDDFE2", paperDeep: "#CACDD2", ink: "#0F1418" },
  dusk:   { paper: "#1F2A2A", paperWarm: "#192424", paperDeep: "#142020", ink: "#F1ECE0" },
};
const accents = {
  ember:   { c: "#D75A2D", forest: "#1F3A33", forestDeep: "#14241F" },
  blue:    { c: "#2E5AA8", forest: "#1F3340", forestDeep: "#142230" },
  crimson: { c: "#B23A48", forest: "#2A2A2E", forestDeep: "#1A1A1D" },
  ochre:   { c: "#C49447", forest: "#1F3A33", forestDeep: "#14241F" },
};
const fonts = {
  fraunces: '"Fraunces", Georgia, serif',
  playfair: '"Fraunces", Georgia, serif', // same family, different opsz
  inter:    '"Inter", system-ui, sans-serif',
};

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

  React.useEffect(() => {
    const t = themes[tweaks.theme] || themes.forest;
    const a = accents[tweaks.accent] || accents.ember;
    const r = document.documentElement.style;
    r.setProperty("--paper", t.paper);
    r.setProperty("--paper-warm", t.paperWarm);
    r.setProperty("--paper-deep", t.paperDeep);
    r.setProperty("--ink", t.ink);
    r.setProperty("--ember", a.c);
    r.setProperty("--forest", a.forest);
    r.setProperty("--forest-deep", a.forestDeep);
    r.setProperty("--serif", tweaks.headlineFont === "inter" ? fonts.inter : fonts.fraunces);
  }, [tweaks]);

  return (
    <React.Fragment>
      <Marquee />
      <Nav />
      <Hero />
      <StatsBand />
      <Mission />
      {tweaks.showInstructor && <InstructorBlock />}
      <Curriculum />
      <Pillars />
      {tweaks.showGallery && <Gallery />}
      <Faq />
      <CTA />
      <Footer />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Theme">
          <window.TweakSelect
            label="Παλέτα"
            value={tweaks.theme}
            onChange={v => setTweak("theme", v)}
            options={[
              {label: "Paper (warm)", value: "forest"},
              {label: "Cream", value: "cream"},
              {label: "Slate (cool)", value: "slate"},
              {label: "Dusk (dark)", value: "dusk"},
            ]}
          />
          <window.TweakSelect
            label="Έμφαση"
            value={tweaks.accent}
            onChange={v => setTweak("accent", v)}
            options={[
              {label: "Ember", value: "ember"},
              {label: "Blue (logo)", value: "blue"},
              {label: "Crimson", value: "crimson"},
              {label: "Ochre", value: "ochre"},
            ]}
          />
          <window.TweakRadio
            label="Headline"
            value={tweaks.headlineFont}
            onChange={v => setTweak("headlineFont", v)}
            options={[
              {label: "Serif", value: "fraunces"},
              {label: "Sans", value: "inter"},
            ]}
          />
        </window.TweakSection>
        <window.TweakSection title="Sections">
          <window.TweakToggle
            label="Δείξε ενότητα ιδρύτριας"
            value={tweaks.showInstructor}
            onChange={v => setTweak("showInstructor", v)}
          />
          <window.TweakToggle
            label="Δείξε platform gallery"
            value={tweaks.showGallery}
            onChange={v => setTweak("showGallery", v)}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </React.Fragment>
  );
}

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