// App shell — hash routing, tweaks integration
const { useEffect: useEffectApp, useState: useStateApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "kinetic",
  "heroBg": "grid",
  "theme": "default",
  "accent": "#335C8E"
}/*EDITMODE-END*/;

function parseHash() {
  const h = (window.location.hash || "#top").replace("#", "");
  if (["top", "about", "service", "contact"].includes(h)) return h;
  return "top";
}

function App() {
  const [route, setRoute] = useStateApp(parseHash());
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectApp(() => {
    const onHash = () => {
      setRoute(parseHash());
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  useEffectApp(() => {
    document.documentElement.setAttribute("data-theme", t.theme || "default");
  }, [t.theme]);

  useEffectApp(() => {
    document.documentElement.style.setProperty("--navy", t.accent || "#335C8E");
    document.documentElement.style.setProperty("--blue", t.accent || "#335C8E");
  }, [t.accent]);

  const onNav = (id) => {
    window.location.hash = id;
  };

  let Page;
  if (route === "about") Page = window.AboutPage;
  else if (route === "service") Page = window.ServicePage;
  else if (route === "contact") Page = window.ContactPage;
  else Page = window.TopPage;

  return (
    <React.Fragment>
      <CustomCursor />
      <Nav current={route} onNav={onNav} />
      <main key={route} className="page" data-screen-label={route}>
        <Page onNav={onNav} heroVariant={t.heroVariant} heroBg={t.heroBg} />
      </main>
      <Footer onNav={onNav} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero Variant" />
        <TweakRadio
          label="レイアウト"
          value={t.heroVariant}
          onChange={(v) => setTweak("heroVariant", v)}
          options={[
            { value: "kinetic", label: "Kinetic" },
            { value: "collage", label: "Collage" },
            { value: "marquee", label: "Marquee" },
          ]}
        />
        <TweakSection label="Hero Background" />
        <TweakRadio
          label="背景"
          value={t.heroBg}
          onChange={(v) => setTweak("heroBg", v)}
          options={[
            { value: "grid", label: "Grid" },
            { value: "type", label: "Type" },
            { value: "motion", label: "Motion" },
          ]}
        />
        <TweakSection label="Theme" />
        <TweakRadio
          label="モード"
          value={t.theme}
          onChange={(v) => setTweak("theme", v)}
          options={[
            { value: "default", label: "Light" },
            { value: "ocean", label: "Navy" },
            { value: "warm", label: "Warm" },
          ]}
        />
        <TweakSection label="Accent color" />
        <TweakColor
          label="アクセント"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={["#335C8E", "#1F3D63", "#7BC7E2", "#C84632"]}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

window.App = App;