/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "fontSet": "editorial",
  "density": "normal",
  "heroLayout": "split",
  "palette": "parchment"
}/*EDITMODE-END*/;

const PALETTES = {
  parchment: {
    "--bg": "#F5F1EB", "--surface": "#FFFFFF", "--surface-warm": "#EFE9DD",
    "--ink": "#1B1A17", "--ink-2": "#2B2925", "--muted": "#736D62",
    "--hairline": "#E2DBCE", "--hairline-strong": "#CFC6B4",
    "--oak": "#B58A63", "--oak-deep": "#8E6948", "--forest": "#3B4A3F"
  },
  cloud: {
    "--bg": "#F2F2F0", "--surface": "#FFFFFF", "--surface-warm": "#E8E8E5",
    "--ink": "#15151A", "--ink-2": "#26262C", "--muted": "#6D6D74",
    "--hairline": "#DEDEDB", "--hairline-strong": "#C2C2BE",
    "--oak": "#8C8C7E", "--oak-deep": "#5F5F54", "--forest": "#3C4441"
  },
  forest: {
    "--bg": "#EFEDE5", "--surface": "#F8F6F0", "--surface-warm": "#E2E0D5",
    "--ink": "#1A1F1A", "--ink-2": "#2A312A", "--muted": "#6B7068",
    "--hairline": "#D4D2C6", "--hairline-strong": "#B8B5A6",
    "--oak": "#7A8270", "--oak-deep": "#4F5A4A", "--forest": "#2E3A2E"
  },
  earth: {
    "--bg": "#F2EAE0", "--surface": "#FFF8EE", "--surface-warm": "#E8DCC9",
    "--ink": "#1F1714", "--ink-2": "#2F2520", "--muted": "#7A6A5C",
    "--hairline": "#DDCFB9", "--hairline-strong": "#C7B499",
    "--oak": "#C28455", "--oak-deep": "#9A5F34", "--forest": "#4A3525"
  }
};

function applyPalette(root, paletteKey, theme) {
  const p = PALETTES[paletteKey] || PALETTES.parchment;
  for (const k in p) {
    if (theme === "dark") {
      root.style.removeProperty(k);
    } else {
      root.style.setProperty(k, p[k]);
    }
  }
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = React.useState("el");
  const [stickyVisible, setStickyVisible] = React.useState(false);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme);
    document.documentElement.setAttribute("data-font-set", tweaks.fontSet);
    document.documentElement.setAttribute("data-density", tweaks.density);
    applyPalette(document.documentElement, tweaks.palette, tweaks.theme);
  }, [tweaks.theme, tweaks.palette, tweaks.fontSet, tweaks.density]);

  React.useEffect(() => {
    function onScroll() {
      const calc = document.getElementById("calculator");
      const hero = document.getElementById("top");
      if (!calc || !hero) return;
      const scrollY = window.scrollY;
      const heroH = hero.offsetHeight;
      const calcTop = calc.offsetTop;
      const calcBottom = calcTop + calc.offsetHeight;
      setStickyVisible(scrollY > heroH * 0.6 && (scrollY < calcTop - 600 || scrollY > calcBottom));
    }
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const t = window.I18N[lang];

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
  };

  return (
    <React.Fragment>
      <Nav t={t} lang={lang} setLang={setLang} onCalc={() => scrollTo("calculator")} />
      <main>
        <Hero
          t={t}
          lang={lang}
          layout={tweaks.heroLayout}
          onCalc={() => scrollTo("calculator")}
          onModels={() => scrollTo("models")}
        />
        <Calculator t={t} lang={lang} />
        <Models t={t} lang={lang} />
        <Process t={t} />
        <Materials t={t} lang={lang} />
        <Testimonials t={t} />
        <FAQ t={t} />
        <BlogTeaser t={t} lang={lang} />
        <LeadForm t={t} />
      </main>
      <Footer t={t} />
      <StickyCTA t={t} visible={stickyVisible} onClick={() => scrollTo("calculator")} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Aesthetic">
          <div style={{display:"flex",flexDirection:"column",gap:6}}>
            <div style={{fontSize:11,opacity:.7}}>Palette</div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:6}}>
              {[
                ["parchment", ["#F5F1EB","#B58A63","#1B1A17"], "Parchment"],
                ["cloud",     ["#F2F2F0","#8C8C7E","#15151A"], "Cloud"],
                ["forest",    ["#EFEDE5","#7A8270","#2E3A2E"], "Forest"],
                ["earth",     ["#F2EAE0","#C28455","#1F1714"], "Earth"]
              ].map(([k, sw, name]) => (
                <button
                  key={k}
                  onClick={() => setTweak("palette", k)}
                  style={{
                    display:"flex",alignItems:"center",gap:8,
                    padding:"6px 8px",border:tweaks.palette===k?"1.5px solid #29261b":"1px solid rgba(0,0,0,.1)",
                    borderRadius:6,background:"transparent",cursor:"pointer",fontSize:11
                  }}
                >
                  <span style={{display:"flex",gap:2}}>
                    {sw.map((c,i)=>(<span key={i} style={{width:10,height:14,background:c,borderRadius:2}}/>))}
                  </span>
                  <span>{name}</span>
                </button>
              ))}
            </div>
          </div>
          <TweakRadio
            label="Mode"
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[{value:"light",label:"Light"},{value:"dark",label:"Dark"}]}
          />
        </TweakSection>
        <TweakSection label="Typography">
          <TweakSelect
            label="Font set"
            value={tweaks.fontSet}
            onChange={(v) => setTweak("fontSet", v)}
            options={[
              { value: "editorial", label: "Editorial — Instrument Serif + Geist" },
              { value: "all-sans",  label: "All Sans — Geist only" },
              { value: "mono-accent", label: "Mono Display — Geist Mono + Geist" }
            ]}
          />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakRadio
            label="Hero"
            value={tweaks.heroLayout}
            onChange={(v) => setTweak("heroLayout", v)}
            options={[
              { value:"split",label:"Split" },
              { value:"centered",label:"Centered" }
            ]}
          />
          <TweakRadio
            label="Density"
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value:"compact",label:"Compact" },
              { value:"normal",label:"Normal" },
              { value:"airy",label:"Airy" }
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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