// Main app — hash-routed
const { useEffect, useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#6B3FFE",
  "accent": "#FF2895",
  "fontDisplay": "Manrope"
}/*EDITMODE-END*/;

function getRouteFromHash() {
  const h = (location.hash || "#home").replace("#", "");
  const validStatic = [
    "home","media","agency","casi","chi","contatti",
    "media-economico","media-techy",
    "agency-yt","agency-shortform","agency-social"
  ];
  if (validStatic.includes(h)) return h;
  if (h.startsWith("cs-")) return h;
  return "home";
}

function App() {
  const [route, setRoute] = useState(getRouteFromHash());
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

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

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--c-violet", t.primary);
    root.style.setProperty("--c-magenta", t.accent);
    root.style.setProperty("--font-display", `"Parkinsans", "${t.fontDisplay}", -apple-system, sans-serif`);
    root.style.setProperty("--font-body", `"Parkinsans", "${t.fontDisplay}", -apple-system, sans-serif`);
  }, [t.primary, t.accent, t.fontDisplay]);

  const navigate = (id) => { location.hash = "#" + id; };

  const isMediaSub = ["media-economico","media-techy"].includes(route);
  const isAgencySub = ["agency-yt","agency-shortform","agency-social"].includes(route);
  const isCaseStudy = route.startsWith("cs-");

  const Page = isMediaSub
    ? (props) => <MediaSubPage slug={route} {...props} />
    : isAgencySub
    ? (props) => <AgencySubPage slug={route} {...props} />
    : isCaseStudy
    ? (props) => <CaseStudyPage slug={route} {...props} />
    : ({
        home: HomePage,
        media: MediaPage,
        agency: AgencyPage,
        casi: CasiPage,
        chi: ChiSiamoPage,
        contatti: ContattiPage,
      }[route]);

  return (
    <>
      <Nav route={route} navigate={navigate} />
      <Page navigate={navigate} />
      <Footer navigate={navigate} />
      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Brand">
          <window.TweakColor label="Primary" value={t.primary}
            options={["#6B3FFE", "#0F5132", "#0A66C2", "#FF5C2E"]}
            onChange={(v) => setTweak("primary", v)} />
          <window.TweakColor label="Accent" value={t.accent}
            options={["#FF2895", "#FFC5A8", "#B5E0CC", "#0F5132"]}
            onChange={(v) => setTweak("accent", v)} />
        </window.TweakSection>
        <window.TweakSection label="Type">
          <window.TweakSelect label="Display font" value={t.fontDisplay}
            options={["Manrope", "Space Grotesk", "Plus Jakarta Sans", "DM Sans"]}
            onChange={(v) => setTweak("fontDisplay", v)} />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

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