// Horton Interiors — main app, hash router + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#B07A3C",
  "heroLight": false,
  "density": "editorial",
  "displayFont": "Instrument Serif"
}/*EDITMODE-END*/;

function parseRoute() {
  const hash = window.location.hash.replace(/^#/, "") || "/";
  // /projects/<slug>   → case study
  // /projects          → projects index
  // /                  → home
  if (hash.startsWith("/projects/")) {
    return { name: "case-study", slug: hash.split("/")[2].split("?")[0] };
  }
  if (hash.startsWith("/projects")) return { name: "projects" };
  if (hash === "/" || hash === "") return { name: "home" };
  // any other route → home, but anchor a banner
  return { name: "home", placeholder: hash };
}

function App() {
  const [route, setRoute] = useState(parseRoute());
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

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

  // Apply tweaks to the root element
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", tweaks.accent);
    root.setAttribute("data-density", tweaks.density);
    const fontMap = {
      "Instrument Serif": '"Instrument Serif", "GT Sectra", Georgia, serif',
      "Fraunces": '"Fraunces", "GT Sectra", Georgia, serif',
      "Newsreader": '"Newsreader", "GT Sectra", Georgia, serif',
      "Space Grotesk": '"Space Grotesk", "Switzer", sans-serif'
    };
    root.style.setProperty("--serif", fontMap[tweaks.displayFont] || fontMap["Instrument Serif"]);
  }, [tweaks]);

  const navDark = route.name === "case-study" || (route.name === "home" && !tweaks.heroLight);
  const currentRoutePath = window.location.hash.replace(/^#/, "") || "/";

  return (
    <>
      <ScrollProgress />
      <IssueMarker />
      <Nav route={currentRoutePath} dark={false} />
      {route.name === "home" && <Home heroLight={tweaks.heroLight} />}
      {route.name === "projects" && <ProjectsIndex />}
      {route.name === "case-study" && <CaseStudy slug={route.slug} />}
      <Footer />
      <WhatsAppFAB />
      <HortonTweaksPanel tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

function ScrollProgress() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => {
      const el = ref.current;
      if (!el) return;
      const h = document.documentElement.scrollHeight - window.innerHeight;
      const p = h > 0 ? (window.scrollY / h) * 100 : 0;
      el.style.width = `${Math.max(0, Math.min(100, p))}%`;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className="scroll-progress">
      <div className="fill" ref={ref}></div>
    </div>
  );
}

function IssueMarker() {
  return (
    <div className="issue-marker">
      <span className="dot"></span>
      Issue 026 · Vol III · 2026 — Horton Interiors / Dubai · GCC
    </div>
  );
}

function HortonTweaksPanel({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Visual">
        <TweakColor
          label="Accent color"
          value={tweaks.accent}
          onChange={v => setTweak("accent", v)}
          options={[
            "#B07A3C", // bronze (brief default)
            "#2C5F73", // steel-teal (brief alt)
            "#15181C", // mono
            "#7A6A4E"  // muted sand
          ]}
        />
        <TweakRadio
          label="Density"
          value={tweaks.density}
          onChange={v => setTweak("density", v)}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "compact", label: "Compact" }
          ]}
        />
        <TweakSelect
          label="Display typeface"
          value={tweaks.displayFont}
          onChange={v => setTweak("displayFont", v)}
          options={[
            { value: "Instrument Serif", label: "Instrument Serif" },
            { value: "Fraunces", label: "Fraunces" },
            { value: "Newsreader", label: "Newsreader" },
            { value: "Space Grotesk", label: "Space Grotesk (sans)" }
          ]}
        />
        <TweakToggle
          label="Light hero band"
          value={tweaks.heroLight}
          onChange={v => setTweak("heroLight", v)}
        />
      </TweakSection>
      <TweakSection label="Jump to">
        <div style={{ display: "grid", gap: "0.4rem" }}>
          <a href="#/" className="btn btn-ghost" style={{ justifyContent: "space-between", borderColor: "rgba(255,255,255,0.18)", color: "white" }}>Home</a>
          <a href="#/projects" className="btn btn-ghost" style={{ justifyContent: "space-between", borderColor: "rgba(255,255,255,0.18)", color: "white" }}>Projects index</a>
          <a href="#/projects/land-sterling-hq" className="btn btn-ghost" style={{ justifyContent: "space-between", borderColor: "rgba(255,255,255,0.18)", color: "white" }}>Case study · Land Sterling</a>
        </div>
      </TweakSection>
    </TweaksPanel>
  );
}

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