/* procura/app.jsx — assembles the page, wires Tweaks (accent + direction). */

const { useEffect: useEffectA } = React;

const ACCENTS = {
  "#0DAE7E": { ink: "#03372A", soft: "rgba(13,174,126,0.14)", line: "rgba(13,174,126,0.42)", glow: "rgba(13,174,126,0.32)" },
  "#2E9BE6": { ink: "#06263E", soft: "rgba(46,155,230,0.14)", line: "rgba(46,155,230,0.45)", glow: "rgba(46,155,230,0.30)" },
  "#00A9F4": { ink: "#042235", soft: "rgba(0,169,244,0.13)", line: "rgba(0,169,244,0.45)", glow: "rgba(0,169,244,0.30)" },
};
const DIRS = { "シネマティック": "a", "エディトリアル": "b", "ボールド": "c" };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0DAE7E",
  "direction": "シネマティック"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectA(() => {
    const a = ACCENTS[t.accent] || ACCENTS["#0DAE7E"];
    const r = document.documentElement.style;
    r.setProperty("--accent", t.accent);
    r.setProperty("--accent-ink", a.ink);
    r.setProperty("--accent-soft", a.soft);
    r.setProperty("--accent-line", a.line);
    r.setProperty("--accent-glow", a.glow);
  }, [t.accent]);

  useEffectA(() => {
    document.documentElement.setAttribute("data-dir", DIRS[t.direction] || "a");
  }, [t.direction]);

  // scroll reveal
  useEffectA(() => {
    const els = document.querySelectorAll(".sr");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
      });
    }, { threshold: 0.16, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [t.direction]);

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero />
        <Problem />
        <ProductSection />
        <Speed />
        <Pricing />
        <CTA />
        <WaitingList />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="アクセントカラー" />
        <TweakColor
          label="カラー"
          value={t.accent}
          options={["#0DAE7E", "#2E9BE6", "#00A9F4"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="アートディレクション" />
        <TweakRadio
          label="方向性"
          value={t.direction}
          options={["シネマティック", "エディトリアル", "ボールド"]}
          onChange={(v) => setTweak("direction", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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