/* global React, ReactDOM, Header, Hero, Reasons, Services, TechStack, FeaturedProjects, Profile, Contact, Footer, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "indigo",
  "density": "default",
  "lang": "jp"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = React.useState(tweaks.lang || "jp");

  React.useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    document.documentElement.dataset.density = tweaks.density;
  }, [tweaks.theme, tweaks.density]);

  React.useEffect(() => {
    document.documentElement.dataset.lang = lang;
  }, [lang]);

  // Sync tweak->lang
  React.useEffect(() => {
    if (tweaks.lang && tweaks.lang !== lang) setLang(tweaks.lang);
  }, [tweaks.lang]);

  // Reveal-on-scroll
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("visible");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [lang]);

  const setLangBoth = (l) => { setLang(l); setTweak("lang", l); };

  return (
    <>
      <window.ParticlesBackground />
      <Header lang={lang} setLang={setLangBoth} />
      <main>
        <Hero lang={lang} />
        <Reasons lang={lang} />
        <Services lang={lang} />
        <TechStack lang={lang} />
        <FeaturedProjects lang={lang} />
        <Profile lang={lang} />
        <Contact lang={lang} />
      </main>
      <Footer lang={lang} />

      <div className="sticky-cta">
        <a href="#contact">
          {lang === "jp" ? "無料で案件相談する" : "Get a free consultation"}
          <span className="arrow">→</span>
        </a>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Language">
          <TweakRadio
            value={lang}
            onChange={(v) => setLangBoth(v)}
            options={[{ value: "jp", label: "日本語" }, { value: "en", label: "English" }]}
          />
        </TweakSection>
        <TweakSection title="Theme">
          <TweakSelect
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "indigo", label: "Indigo (default)" },
              { value: "ink", label: "Ink — near black" },
              { value: "forest", label: "Forest — deep green" },
              { value: "charcoal", label: "Charcoal — neutral" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "compact", label: "Compact" },
              { value: "default", label: "Default" },
              { value: "airy", label: "Airy" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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