/* App root + Tweaks. */

const TWEAK_DEFAULTS = window.__BBD_TWEAKS || {
  palette: "orange",
  hero: "stack",
  displayFont: "archivo",
};

const PALETTES = {
  orange: {
    name: "orange (default)",
    bone: "oklch(96% 0.008 80)",
    ink: "oklch(15% 0.005 60)",
    inkSoft: "oklch(28% 0.005 60)",
    accent: "#e5383b",
    rule: "oklch(15% 0.005 60 / 0.12)",
  },
  blue: {
    name: "electric blue",
    bone: "oklch(96% 0.006 250)",
    ink: "oklch(14% 0.02 250)",
    inkSoft: "oklch(28% 0.01 250)",
    accent: "oklch(62% 0.22 248)",
    rule: "oklch(14% 0.02 250 / 0.12)",
  },
  acid: {
    name: "acid yellow",
    bone: "oklch(97% 0.01 100)",
    ink: "oklch(14% 0.005 100)",
    inkSoft: "oklch(28% 0.005 100)",
    accent: "oklch(88% 0.19 110)",
    rule: "oklch(14% 0.005 100 / 0.12)",
  },
  pink: {
    name: "hot pink",
    bone: "oklch(96% 0.008 15)",
    ink: "oklch(15% 0.005 15)",
    inkSoft: "oklch(28% 0.005 15)",
    accent: "oklch(70% 0.22 5)",
    rule: "oklch(15% 0.005 15 / 0.12)",
  },
  olive: {
    name: "olive / sage",
    bone: "oklch(95% 0.012 110)",
    ink: "oklch(18% 0.012 130)",
    inkSoft: "oklch(32% 0.01 130)",
    accent: "oklch(52% 0.12 130)",
    rule: "oklch(18% 0.012 130 / 0.12)",
  },
  ink: {
    name: "inverted / dark mode",
    bone: "oklch(14% 0.005 60)",
    ink: "oklch(96% 0.008 80)",
    inkSoft: "oklch(72% 0.008 80)",
    accent: "oklch(68% 0.21 38)",
    rule: "oklch(96% 0.008 80 / 0.14)",
  },
};

const FONTS = {
  archivo: {
    name: "archivo (wide)",
    display: '"Archivo", system-ui, sans-serif',
  },
  anton: {
    name: "anton (condensed)",
    display: '"Anton", "Archivo", system-ui, sans-serif',
  },
};

function applyTheme(t) {
  const p = PALETTES[t.palette] || PALETTES.orange;
  const f = FONTS[t.displayFont] || FONTS.archivo;
  const r = document.documentElement.style;
  r.setProperty("--bone", p.bone);
  r.setProperty("--ink", p.ink);
  r.setProperty("--ink-soft", p.inkSoft);
  r.setProperty("--accent", p.accent);
  r.setProperty("--rule", p.rule);
  r.setProperty("--font-display", f.display);
}

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

  React.useEffect(() => {
    applyTheme(tweaks);
  }, [tweaks]);

  /* Reveal on scroll */
  React.useEffect(() => {
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            obs.unobserve(e.target);
          }
        });
      },
      { rootMargin: "-10% 0px -10% 0px", threshold: 0.05 }
    );
    document.querySelectorAll(".reveal:not(.in)").forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, [tweaks.hero]);

  const Hero =
    tweaks.hero === "split" ? HeroSplit :
    tweaks.hero === "manifesto" ? HeroManifesto :
    HeroStack;

  return (
    <>
      <Nav />
      <Marquee />
      <Hero />
      <ProductHighlight />
      <CompatTable />
      <Stockists />
      <InstallGuide />
      <Process />
      <Newsletter />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="palette" />
        <TweakRadio
          label="warm/cool"
          value={tweaks.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            { value: "orange", label: "orange" },
            { value: "blue",   label: "blue" },
            { value: "acid",   label: "acid" },
          ]}
        />
        <TweakRadio
          label="extra"
          value={tweaks.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            { value: "pink", label: "pink" },
            { value: "olive", label: "olive" },
          ]}
        />

        <TweakSection label="hero style" />
        <TweakRadio
          label="layout"
          value={tweaks.hero}
          onChange={(v) => setTweak("hero", v)}
          options={[
            { value: "stack",     label: "stack" },
            { value: "split",     label: "split" },
            { value: "manifesto", label: "manifesto" },
          ]}
        />

        <TweakSection label="display type" />
        <TweakRadio
          label="headline"
          value={tweaks.displayFont}
          onChange={(v) => setTweak("displayFont", v)}
          options={[
            { value: "archivo", label: "archivo" },
            { value: "anton",   label: "anton" },
          ]}
        />
      </TweaksPanel>
    </>
  );
}

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