// App.jsx — root of the 大志建設 marketing site

const TAISHI_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroChar": "志",
  "accentColor": "#b83228"
}/*EDITMODE-END*/;

function App() {
  const [active, setActive] = React.useState("top");
  const [t, setTweak] = useTweaks(TAISHI_DEFAULTS);

  function onNavigate(id) {
    setActive(id);
    if (id === "top") {
      window.scrollTo({ top: 0, behavior: "smooth" });
      return;
    }
    const el = document.getElementById(id);
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - 60;
    window.scrollTo({ top: y, behavior: "smooth" });
  }

  // Apply tweak: accent color overrides --shu
  React.useEffect(() => {
    document.documentElement.style.setProperty("--shu", t.accentColor);
    document.documentElement.style.setProperty("--accent", t.accentColor);
    document.documentElement.style.setProperty("--danger", t.accentColor);
  }, [t.accentColor]);

  // Track active section on scroll
  React.useEffect(() => {
    const ids = ["about", "services", "strengths", "works", "company", "contact"];
    function onScroll() {
      const offset = 200;
      let current = "top";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        if (el.getBoundingClientRect().top <= offset) current = id;
      }
      setActive(current);
    }
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <React.Fragment>
      <Nav active={active} onNavigate={onNavigate}/>
      <main id="app-main">
        <Hero onNavigate={onNavigate} t={t}/>
        <About/>
        <Services/>
        <Strengths/>
        <Works onNavigate={onNavigate}/>
        <Company/>
        <Contact/>
      </main>
      <Footer onNavigate={onNavigate}/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="ヒーロー · Hero">
          <TweakRadio
            label="主役の文字 / hero character"
            value={t.heroChar}
            onChange={(v) => setTweak("heroChar", v)}
            options={[
              { value: "志", label: "志" },
              { value: "建", label: "建" },
              { value: "大", label: "大" },
            ]}
          />
        </TweakSection>
        <TweakSection title="アクセント · Accent">
          <TweakColor
            label="アクセントカラー"
            value={t.accentColor}
            onChange={(v) => setTweak("accentColor", v)}
            options={["#b83228", "#c8453a", "#3a6b8a", "#5b6e3a"]}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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