/* global React, ReactDOM, Nav, Hero, WhatWeDo, About, ProjectsTeaser, Contact, Footer, ProjectsPage, SellPage, LegalPage, useReveal, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSlider */
const { useState: useStateMain, useEffect: useEffectMain } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#B8623C",
  "olive": "#2E3027",
  "videoBrightness": 0.7,
  "overlayDarkness": 0.55,
  "heroLayout": "left",
  "logoMark": "rose"
}/*EDITMODE-END*/;

function HomePage({ onNavigate }) {
  useReveal();
  return (
    <div>
      <Nav route="home" onNavigate={onNavigate} mode="hero" />
      <Hero onNavigate={onNavigate} />
      <WhatWeDo />
      <About />
      <ProjectsTeaser onNavigate={onNavigate} />
      <Contact />
      <Footer onNavigate={onNavigate} />
    </div>
  );
}

function App() {
  const [route, setRoute] = useStateMain("home");
  const [pendingAnchor, setPendingAnchor] = useStateMain(null);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const navigate = (r, anchor) => {
    if (r === route && anchor) {
      const el = document.getElementById(anchor);
      if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
      return;
    }
    setRoute(r);
    setPendingAnchor(anchor || null);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  useEffectMain(() => {
    if (pendingAnchor) {
      const id = setTimeout(() => {
        const el = document.getElementById(pendingAnchor);
        if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
        setPendingAnchor(null);
      }, 80);
      return () => clearTimeout(id);
    }
  }, [route, pendingAnchor]);

  // Live tweak application
  useEffectMain(() => {
    const root = document.documentElement;
    root.style.setProperty("--olive", t.olive);
    root.style.setProperty("--terracotta", t.accent);
    // derive a soft variant of the accent for hovers
    root.style.setProperty("--terracotta-soft", t.accent);
    // overlay + video brightness applied via CSS vars
    root.style.setProperty("--hero-video-brightness", t.videoBrightness);
    root.style.setProperty("--hero-overlay-alpha", t.overlayDarkness);
    // overlay re-styled via direct rule
    const styleId = "__tweak-runtime";
    let s = document.getElementById(styleId);
    if (!s) { s = document.createElement("style"); s.id = styleId; document.head.appendChild(s); }
    s.textContent = `
      .hero__video { filter: brightness(${t.videoBrightness}); }
      .hero__overlay {
        background:
          linear-gradient(90deg,
            rgba(34,36,29, ${t.overlayDarkness + 0.2}) 0%,
            rgba(34,36,29, ${t.overlayDarkness}) 38%,
            rgba(34,36,29, ${Math.max(0.1, t.overlayDarkness - 0.3)}) 70%,
            rgba(34,36,29, ${t.overlayDarkness - 0.1}) 100%),
          linear-gradient(180deg, rgba(34,36,29, ${t.overlayDarkness - 0.1}) 0%, rgba(34,36,29, 0.15) 30%, rgba(34,36,29, ${t.overlayDarkness - 0.1}) 100%) !important;
      }
      .hero { text-align: ${t.heroLayout}; }
      .hero__content { ${t.heroLayout === "center" ? "margin: 0 auto; max-width: 820px;" : t.heroLayout === "right" ? "margin-left: auto; max-width: 720px;" : ""} }
      .hero__cta-row { ${t.heroLayout === "center" ? "justify-content: center;" : t.heroLayout === "right" ? "justify-content: flex-end;" : ""} }
      .hero__eyebrow { ${t.heroLayout === "center" ? "justify-content: center;" : ""} }
    `;
  }, [t]);

  let view = null;
  if (route === "home") view = <HomePage onNavigate={navigate} />;
  else if (route === "projects") view = <ProjectsPage onNavigate={navigate} />;
  else if (route === "sell") view = <SellPage onNavigate={navigate} />;
  else if (route === "privacy" || route === "cookies" || route === "acceptable" || route === "terms")
    view = <LegalPage slug={route} onNavigate={navigate} />;

  return (
    <React.Fragment>
      {view}
      <TweaksPanel title="Tweaks" subtitle="Rose Family Properties">
        <TweakSection title="Palette">
          <TweakColor
            label="Accent (terracotta)"
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#B8623C", "#8C4A2E", "#C97A55", "#A87A4A", "#6F8B5D"]}
          />
          <TweakColor
            label="Primary (olive)"
            value={t.olive}
            onChange={(v) => setTweak("olive", v)}
            options={["#2E3027", "#1F2118", "#3B3D32", "#23291F", "#2C2A22"]}
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio
            label="Headline alignment"
            value={t.heroLayout}
            onChange={(v) => setTweak("heroLayout", v)}
            options={[
              { value: "left", label: "Left" },
              { value: "center", label: "Center" },
              { value: "right", label: "Right" },
            ]}
          />
          <TweakSlider
            label="Video brightness"
            value={t.videoBrightness}
            onChange={(v) => setTweak("videoBrightness", v)}
            min={0.2} max={1.2} step={0.05}
          />
          <TweakSlider
            label="Overlay darkness"
            value={t.overlayDarkness}
            onChange={(v) => setTweak("overlayDarkness", v)}
            min={0.1} max={0.9} step={0.05}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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