/* eslint-disable no-undef */
// App root — rose palette, animated rose backdrop, tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": "rose",
  "heroStyle": "lace"
}/*EDITMODE-END*/;

// hash route: '' = home, 'work', 'work/<slug>' = My Work pages, 'about' = About page
function useHashRoute() {
  const [hash, setHash] = React.useState(window.location.hash);
  React.useEffect(() => {
    const onChange = () => setHash(window.location.hash);
    window.addEventListener('hashchange', onChange);
    return () => window.removeEventListener('hashchange', onChange);
  }, []);
  return hash.replace(/^#/, '');
}

function App() {
  const route = useHashRoute();
  useReveal([route]);
  useScrollHearts();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const isWork = route.startsWith('work');
  const isAbout = route === 'about';
  const isStandalonePage = isWork || isAbout;
  const prevRoute = React.useRef(route);

  // Scroll handling on route change (anchors live on the home page)
  React.useEffect(() => {
    const prev = prevRoute.current;
    prevRoute.current = route;
    if (route === prev) return;
    if (isStandalonePage) { window.scrollTo(0, 0); return; }
    // Returning home to an anchor — wait a tick for sections to mount
    requestAnimationFrame(() => {
      const el = route && document.getElementById(route);
      if (el) {
        const top = el.getBoundingClientRect().top + window.scrollY - 64;
        window.scrollTo({ top, behavior: 'smooth' });
      } else {
        window.scrollTo(0, 0);
      }
    });
  }, [route, isStandalonePage]);

  return (
    <>
      <Nav />
      {isWork ? (
        <main>
          <MyWork route={route} />
        </main>
      ) : isAbout ? (
        <main>
          <About />
        </main>
      ) : (
        <main>
          <Hero />
          <Reels />
          <Pricing />
          <SaveDate />
        </main>
      )}
      <Footer />
      <TweaksPanel>
        <TweakSection label="Style" />
        <TweakRadio label="Accent" value={t.accentHue}
          options={['rose', 'blush', 'mauve']}
          onChange={(v) => setTweak('accentHue', v)} />
        <TweakRadio label="Hero" value={t.heroStyle}
          options={['lace', 'gradient', 'minimal']}
          onChange={(v) => setTweak('heroStyle', v)} />
      </TweaksPanel>
    </>
  );
}

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