/* global React, ReactDOM, Nav, Hero, Difference, Configurator, Gallery, Specs, Custom, Why, Testimonials, Contact,
   useTweaks, TweaksPanel, TweakSection, TweakColor, TweakSelect, TweakToggle */

const ACCENTS = {
  Caerula: { a: "#5B9BE8", dim: "#3D7AC4", ink: "#06182f", swatch: "#5B9BE8" },
  Teal:  { a: "oklch(0.74 0.085 205)", dim: "oklch(0.62 0.075 205)", ink: "oklch(0.22 0.04 205)", swatch: "#3fb6c0" },
  Ember: { a: "oklch(0.72 0.13 45)",   dim: "oklch(0.60 0.12 45)",   ink: "oklch(0.22 0.05 45)",  swatch: "#e2603b" },
  Steel: { a: "oklch(0.80 0.03 240)",  dim: "oklch(0.68 0.03 240)",  ink: "oklch(0.24 0.02 240)", swatch: "#aab6c2" },
  Kelp:  { a: "oklch(0.70 0.08 150)",  dim: "oklch(0.58 0.07 150)",  ink: "oklch(0.22 0.04 150)", swatch: "#4f9a6a" },
};
const DISPLAY_FONTS = {
  "Archivo (automotive)": '"Archivo", system-ui, sans-serif',
  "Anton (bold poster)": '"Anton", "Archivo", sans-serif',
  "Space Grotesk (techy)": '"Space Grotesk", "Archivo", sans-serif',
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Caerula",
  "displayFont": "Archivo (automotive)",
  "motion": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  const ac = ACCENTS[t.accent] || ACCENTS.Teal;
  root.style.setProperty("--accent", ac.a);
  root.style.setProperty("--accent-dim", ac.dim);
  root.style.setProperty("--accent-ink", ac.ink);
  root.style.setProperty("--font-display", DISPLAY_FONTS[t.displayFont] || DISPLAY_FONTS["Archivo (automotive)"]);
  root.classList.toggle("no-motion", !t.motion);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero />
        <Difference />
        <Configurator />
        <Gallery />
        <Specs />
        <Custom />
        <Why />
        <Testimonials />
        <Contact />
      </main>

      <TweaksPanel>
        <TweakSection label="Accent" />
        <TweakColor
          label="Ocean accent"
          value={(ACCENTS[t.accent] || ACCENTS.Teal).swatch}
          options={Object.values(ACCENTS).map((x) => x.swatch)}
          onChange={(hex) => {
            const name = Object.keys(ACCENTS).find((k) => ACCENTS[k].swatch === hex) || "Teal";
            setTweak("accent", name);
          }}
        />
        <TweakSection label="Typography" />
        <TweakSelect
          label="Display font"
          value={t.displayFont}
          options={Object.keys(DISPLAY_FONTS)}
          onChange={(v) => setTweak("displayFont", v)}
        />
        <TweakSection label="Motion" />
        <TweakToggle label="Scroll & parallax animation" value={t.motion} onChange={(v) => setTweak("motion", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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