/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSelect,
   HeroAtelier, HeroBold, HeroCraft, Header, Statement, Services, Process, Contact, Footer */
const { createElement: a, useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {
  heroDir: "Atelier",
  accent: "#FFDD15",
  display: "Safiro",
} /*EDITMODE-END*/;

const HERO = { Atelier: HeroAtelier, Bold: HeroBold, Craft: HeroCraft };
const HERO_KEY = { Atelier: "atelier", Bold: "bold", Craft: "craft" };

function deepen(hex) {
  // darken a yellow ~10% for the watermark/accent-deep tone
  const n = hex.replace("#", "");
  const r = parseInt(n.slice(0, 2), 16), g = parseInt(n.slice(2, 4), 16), b = parseInt(n.slice(4, 6), 16);
  const f = 0.88;
  return "#" + [r, g, b].map((v) => Math.round(v * f).toString(16).padStart(2, "0")).join("");
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLangState] = useState(() => localStorage.getItem("tito_lang") || "ro");
  const [scrolled, setScrolled] = useState(false);

  const setLang = (l) => { setLangState(l); localStorage.setItem("tito_lang", l); };

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 48);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // apply brand tokens from tweaks
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--yellow", t.accent);
    root.style.setProperty("--yellow-deep", deepen(t.accent));
    root.style.setProperty("--font-display", `"${t.display}"`);
  }, [t.accent, t.display]);

  const strings = window.TITO_I18N[lang];
  const heroMode = HERO_KEY[t.heroDir] || "bold";
  const HeroComp = HERO[t.heroDir] || HeroBold;

  const nav = (id) => {
    if (id === "top") { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 64;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };
  const onQuote = () => nav("contact");
  const onServices = () => nav("services");

  return a(
    "div",
    { id: "top", className: "tito-root", "data-hero": heroMode },
    a(Header, { t: strings, lang, setLang, heroMode, scrolled, onQuote, onNav: nav }),
    a(HeroComp, { t: strings, onQuote, onServices }),
    a(Statement, { t: strings }),
    a(PhotoBanner, { lang }),
    a(Services, { t: strings, onQuote }),
    a(PhotoGrid, { lang }),
    a(Process, { t: strings }),
    a(PhotoSlider, { lang }),
    a(Contact, { t: strings }),
    a(Footer, { t: strings, onNav: nav }),
    a(
      TweaksPanel,
      null,
      a(TweakSection, { label: "Hero" }),
      a(TweakRadio, {
        label: "Direction", value: t.heroDir, options: ["Atelier", "Bold", "Craft"],
        onChange: (v) => setTweak("heroDir", v),
      }),
      a(TweakSection, { label: "Brand" }),
      a(TweakColor, {
        label: "Primary", value: t.accent,
        options: ["#FFDD15", "#E6BDB6", "#9C857B", "#D9E1E5", "#5E83BC", "#BCB9BE"],
        onChange: (v) => setTweak("accent", v),
      }),
      a(TweakSelect, {
        label: "Headline font", value: t.display,
        options: ["Safiro", "Salome", "Space Grotesk", "Bricolage Grotesque", "Archivo"],
        onChange: (v) => setTweak("display", v),
      })
    )
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(a(App));