/* App shell + Tweaks panel for the Shlomo Kalichman profile site. */

const APP_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "he",
  "accent": "coral",
  "motifDensity": "balanced",
  "showAvailability": true
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  coral: { primary: "#E8642A", primaryDeep: "#C84F18", primarySoft: "#FBE6D6", secondary: "#1F4E5F", secondarySoft: "#DCEAEE" },
  teal:  { primary: "#1F8A8A", primaryDeep: "#13686A", primarySoft: "#D8EDED", secondary: "#C45A2C", secondarySoft: "#FBE6D6" },
  violet:{ primary: "#6B4FE0", primaryDeep: "#4B33B5", primarySoft: "#E5DEFB", secondary: "#1F4E5F", secondarySoft: "#DCEAEE" },
  olive: { primary: "#7B8A50", primaryDeep: "#5B6B34", primarySoft: "#E5EAD3", secondary: "#C45A2C", secondarySoft: "#FBE6D6" },
};

function applyAccent(name) {
  const p = ACCENT_PALETTES[name] || ACCENT_PALETTES.coral;
  const r = document.documentElement;
  r.style.setProperty("--coral", p.primary);
  r.style.setProperty("--coral-deep", p.primaryDeep);
  r.style.setProperty("--coral-soft", p.primarySoft);
  r.style.setProperty("--teal", p.secondary);
  r.style.setProperty("--teal-soft", p.secondarySoft);
}

const App = () => {
  const [t, setTweak] = useTweaks(APP_DEFAULTS);
  const [lang, setLang] = useState(t.lang || "he");
  const [activeProject, setActiveProject] = useState(null);

  // Sync lang with tweaks
  useEffect(() => { if (t.lang && t.lang !== lang) setLang(t.lang); }, [t.lang]);
  const onSetLang = (l) => { setLang(l); setTweak("lang", l); };

  const content = CONTENT[lang];

  // Apply RTL/LTR
  useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = content.dir;
    document.title = lang === "he"
      ? "שלמה קליחמן — מוביל פרויקטים טכנולוגיים ויישום AI"
      : "Shlomo Kalichman — Technical Project Lead & AI Implementation Specialist";
  }, [lang]);

  // Accent
  useEffect(() => { applyAccent(t.accent); }, [t.accent]);

  useReveal();

  // Smooth scroll for anchor links
  useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute("href").slice(1);
      if (!id) return;
      const el = document.getElementById(id);
      if (!el) return;
      e.preventDefault();
      const top = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: "smooth" });
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  return (
    <>
      <Header content={content} lang={lang} setLang={onSetLang} />
      <main>
        <Hero content={content} lang={lang} />
        <Proof content={content} />
        <About content={content} lang={lang} />
        <Expertise content={content} lang={lang} />
        <Projects content={content} openModal={setActiveProject} />
        <Testimonials content={content} />
        <Contact content={content} lang={lang} />
      </main>
      <Footer content={content} lang={lang} setLang={onSetLang} />

      <Modal project={activeProject} content={content} onClose={() => setActiveProject(null)} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Language" />
        <TweakRadio
          label="Direction"
          value={lang}
          onChange={(v) => onSetLang(v)}
          options={[
            { value: "he", label: "עברית" },
            { value: "en", label: "English" },
          ]}
        />
        <TweakSection label="Accent palette" />
        <TweakSelect
          label="Accent"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={[
            { value: "coral",  label: "Coral (warm)" },
            { value: "teal",   label: "Teal (technology)" },
            { value: "violet", label: "Violet (creative)" },
            { value: "olive",  label: "Olive (grounded)" },
          ]}
        />
      </TweaksPanel>
    </>
  );
};

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