// v2-app.jsx — App shell, navigation, tweaks

const { useState: useAppState, useEffect: useAppEffect } = React;

const TWEAK_DEFAULTS2 = /*EDITMODE-BEGIN*/{
  "accent": "violet",
  "displayFont": "cormorant",
  "ctaStyle": "loud",
  "motionFx": true,
  "workLayout": "cinematic",
  "caseLayout": "editorial",
  "heroVideo": "uploads/Video May 4 2026.mp4"
}/*EDITMODE-END*/;

const ACCENTS2 = {
  violet:    { accent: "#a283d4", deep: "#5d3f87", ctaInk: "#ffffff" },
  champagne: { accent: "#b9a275", deep: "#8a7350", ctaInk: "#14110c" },
  porcelain: { accent: "#c9c4ba", deep: "#7d7870", ctaInk: "#14110c" },
};

const DISPLAY_FONTS = {
  cormorant: `"Cormorant Garamond", Georgia, serif`,
  marcellus: `"Marcellus", Georgia, serif`,
};

function App2() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS2);
  const [page, setPage] = useAppState("home");
  const [project, setProject] = useAppState("terrace-steps");
  const [menuOpen, setMenuOpen] = useAppState(false);

  useAppEffect(() => {
    const a = ACCENTS2[t.accent] || ACCENTS2.violet;
    const root = document.documentElement.style;
    root.setProperty("--accent", a.accent);
    root.setProperty("--accent-deep", a.deep);
    root.setProperty("--cta-ink", a.ctaInk);
    root.setProperty("--serif", DISPLAY_FONTS[t.displayFont] || DISPLAY_FONTS.cormorant);
    document.body.dataset.cta = t.ctaStyle || "loud";
    const fxOk = window.__FX_OK === true;
    document.body.classList.toggle("fx-on", fxOk && t.motionFx !== false);
  }, [t.accent, t.displayFont, t.ctaStyle, t.motionFx]);

  const navigate = (key) => {
    setMenuOpen(false);
    if (key === "home") { location.hash = "#/"; }
    else { location.hash = "#/" + key; }
  };

  const openProject = (slug) => {
    setMenuOpen(false);
    location.hash = "#/work/" + slug;
  };

  // hash routing — shareable links + browser back/forward
  useAppEffect(() => {
    const apply = () => {
      const h = (location.hash || "#/").replace(/^#\/?/, "");
      const parts = h.split("/").filter(Boolean);
      setMenuOpen(false);
      if (parts[0] === "work" && parts[1]) {
        setProject(parts[1]); setPage("project");
      } else if (["work", "projects"].includes(parts[0])) {
        setPage("projects");
      } else if (["services", "about", "contact"].includes(parts[0])) {
        setPage(parts[0]);
      } else {
        setPage("home");
      }
      const titles = { services: "Services & Pricing", about: "Studio", contact: "Contact", projects: "Work", work: "Work" };
      let title = "Obsidian Studio — Architectural Visualization";
      if (parts[0] === "work" && parts[1] && window.getProject) {
        const pr = window.getProject(parts[1]);
        title = `${pr.name} — ${pr.cat} visualization · Obsidian Studio`;
      } else if (titles[parts[0]]) {
        title = `${titles[parts[0]]} — Obsidian Studio`;
      }
      document.title = title;
      window.scrollTo({ top: 0, behavior: "auto" });
    };
    apply();
    window.addEventListener("hashchange", apply);
    return () => window.removeEventListener("hashchange", apply);
  }, []);

  const pageEl = (() => {
    switch (page) {
      case "about":    return <AboutPage2 onContact={() => navigate("contact")} />;
      case "services": return <ServicesPage2 onContact={() => navigate("contact")} />;
      case "projects": return <ProjectsPage2 onOpenProject={openProject} />;
      case "project":  return <ProjectPage2 slug={project} layout={t.caseLayout || "editorial"} onOpenProject={openProject} onBack={() => navigate("projects")} onContact={() => navigate("contact")} />;
      case "contact":  return <ContactPage2 />;
      default:         return <HomePage2 heroVideo={t.heroVideo} workLayout={t.workLayout} onNavigate={navigate} onOpenProject={openProject} onContact={() => navigate("contact")} />;
    }
  })();

  return (
    <>
      <main id="main">{pageEl}</main>

      <Header2 page={page === "project" ? "projects" : page} onNavigate={navigate} onMenu={() => setMenuOpen(true)} tone="dark" solid={page === "contact" || page === "project"} />

      {page !== "contact" && <Footer2 onNavigate={navigate} />}

      <Lightbox />

      {menuOpen && (
        <Menu2 activeKey={page} onNavigate={navigate} onClose={() => setMenuOpen(false)} />
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual" />
        <TweakColor
          label="Accent"
          value={(ACCENTS2[t.accent] || ACCENTS2.violet).accent}
          options={[ACCENTS2.violet.accent, ACCENTS2.champagne.accent, ACCENTS2.porcelain.accent]}
          onChange={(v) => {
            const key = Object.keys(ACCENTS2).find(k => ACCENTS2[k].accent === v) || "violet";
            setTweak("accent", key);
          }}
        />
        <TweakRadio
          label="Display face"
          value={t.displayFont}
          options={["cormorant", "marcellus"]}
          onChange={(v) => setTweak("displayFont", v)}
        />
        <TweakRadio
          label="CTA"
          value={t.ctaStyle || "loud"}
          options={["loud", "quiet"]}
          onChange={(v) => setTweak("ctaStyle", v)}
        />
        <TweakSelect
          label="Selected work"
          value={t.workLayout || "cinematic"}
          options={[
            { value: "cinematic", label: "Cinematic (full-bleed)" },
            { value: "uniform",   label: "Uniform grid" },
            { value: "editorial", label: "Editorial split" },
          ]}
          onChange={(v) => setTweak("workLayout", v)}
        />
        <TweakSelect
          label="Case page"
          value={t.caseLayout || "editorial"}
          options={[
            { value: "editorial", label: "Editorial (facts band)" },
            { value: "cinematic", label: "Cinematic (full-bleed)" },
            { value: "magazine",  label: "Magazine (sticky facts)" },
          ]}
          onChange={(v) => setTweak("caseLayout", v)}
        />
        <TweakToggle
          label="Motion FX"
          value={t.motionFx !== false}
          onChange={(v) => setTweak("motionFx", v)}
        />
        <TweakSelect
          label="Hero video"
          value={t.heroVideo}
          options={[
            { value: "uploads/Video May 4 2026.mp4", label: "★ Your upload" },
            { value: "", label: "— none (placeholder) —" },
            { value: "https://cdn.pixabay.com/video/2023/03/14/154235-808725988_large.mp4", label: "Architecture · loft" },
            { value: "https://cdn.pixabay.com/video/2020/03/04/32988-396592309_large.mp4", label: "Architecture · stairwell" },
            { value: "https://cdn.pixabay.com/video/2022/12/12/142078-781068949_large.mp4", label: "Architecture · interior" },
          ]}
          onChange={(v) => setTweak("heroVideo", v)}
        />

        <TweakSection label="Navigate" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
          {PAGES2.map(p => (
            <button key={p.key} onClick={() => navigate(p.key)} style={{
              padding: "8px 6px", cursor: "pointer",
              background: page === p.key ? "rgba(138,115,80,0.15)" : "rgba(0,0,0,0.04)",
              border: page === p.key ? "1px solid rgba(138,115,80,0.4)" : "1px solid transparent",
              borderRadius: 6,
              fontSize: 11, color: page === p.key ? "#8a7350" : "#29261b",
              fontFamily: "ui-sans-serif, system-ui",
              fontWeight: 500, letterSpacing: ".02em",
            }}>{p.label}</button>
          ))}
        </div>
      </TweaksPanel>
    </>
  );
}

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