// GetContent website — gedeelde app-shell & routing.
// Elke pagina-entry zet window.__GC_VIEW en laadt dit bestand als laatste script.
// Views: 'home' | 'browse' | 'how' | 'post'. Deep-link via #hash werkt ook.
const GC_VIEWS = ['home', 'browse', 'how', 'post', 'about', 'creators', 'signup', 'signup-business', 'login', 'forgot', 'reset', 'contact', 'dashboard', 'my-jobs', 'my-responses', 'job', 'creator', 'account'];
const GC_PROTECTED = ['dashboard', 'my-jobs', 'my-responses', 'job', 'creator', 'account', 'post'];

function refreshIcons() { requestAnimationFrame(() => window.lucide && lucide.createIcons()); }

function useReveal(view) {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal, .gc-stagger');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12, root: document.querySelector('#gc-scroll') });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [view]);
}

// scroll-gedreven: brandmark-textuur wordt minder vaag naar onderen
function useMarkOpacity(view) {
  React.useEffect(() => {
    const s = document.querySelector('#gc-scroll');
    if (!s) return;
    const onScroll = () => {
      const p = Math.max(0, Math.min(1, s.scrollTop / 1800));
      document.documentElement.style.setProperty('--gc-mark-opacity', (0.05 + p * 0.13).toFixed(3));
    };
    onScroll();
    s.addEventListener('scroll', onScroll, { passive: true });
    return () => s.removeEventListener('scroll', onScroll);
  }, [view]);
}

function hashView() {
  const h = (window.location.hash || '').replace('#', '');
  return GC_VIEWS.includes(h) ? h : null;
}

function App({ initialView }) {
  const [view, setView] = React.useState(hashView() || initialView || 'home');

  React.useEffect(() => {
    // vuurt óók bij de browser-terug/vooruitknop: lege hash = home, zodat
    // teruggaan naar de homepage gewoon werkt
    const onHash = () => {
      const v = hashView() || 'home';
      setView(v);
      const s = document.querySelector('#gc-scroll');
      if (s) s.scrollTop = 0;
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const pendingAnchor = React.useRef(null);

  const onNav = (v, anchor) => {
    setView(v);
    pendingAnchor.current = anchor || null;
    // pushState (i.p.v. replaceState) zodat de browser-terugknop door de
    // bezochte pagina's heen werkt; guard voorkomt dubbele entries
    if (window.history && window.history.pushState && v !== view) {
      window.history.pushState(null, '', v === 'home' ? window.location.pathname : '#' + v);
    }
    const s = document.querySelector('#gc-scroll');
    if (s && !anchor) s.scrollTop = 0;
  };

  useReveal(view);
  useMarkOpacity(view);
  React.useEffect(refreshIcons);

  // bij elke paginawissel bovenaan beginnen — tenzij er naar een anker wordt gesprongen
  React.useEffect(() => {
    const s = document.querySelector('#gc-scroll');
    const anchor = pendingAnchor.current;
    if (anchor) {
      pendingAnchor.current = null;
      // wacht tot de nieuwe pagina is gerenderd, scroll dan naar het onderdeel
      requestAnimationFrame(() => requestAnimationFrame(() => {
        const el = document.getElementById(anchor);
        if (el && s) {
          const top = el.getBoundingClientRect().top + s.scrollTop - 90;
          s.scrollTop = Math.max(0, top);
        }
      }));
      return;
    }
    if (s) s.scrollTop = 0;
    if (window.scrollTo) window.scrollTo(0, 0);
  }, [view]);

  const store = window.useStore();
  const auth = store.auth;
  const authReady = store.authReady;

  const { Hero, ContentShowcase, RevealText, HowItWorks, HowItWorksPage, AboutPage, CreatorsPage, SignupPage, SignupBusinessPage, LoginPage, ForgotPage, ResetPage, ContactPage, PhoneShowcase, LiveShowcase, ValueProps, CTASection, TwoPaths, Footer, Nav, BrowseScreen, PostScreen, Dashboard, JobDetail, MyJobs, MyResponses, CreatorProfile, Account, RoleChoiceModal } = window;

  const isProtected = GC_PROTECTED.indexOf(view) !== -1;
  // ingelogde pagina's afschermen: wacht tot de Supabase-sessie bekend is
  // (voorkomt dat er kort een loginscherm flitst), daarna niet-ingelogd → login
  const authLoading = isProtected && !authReady;
  const guarded = isProtected && authReady && !auth;

  // Na Google-login (redirect terug naar de site) doorsturen naar het dashboard.
  React.useEffect(() => {
    if (!auth) return;
    let target = null;
    try { target = localStorage.getItem('gc_post_auth'); } catch (e) {}
    if (target) { try { localStorage.removeItem('gc_post_auth'); } catch (e) {} onNav(target); }
  }, [auth]);

  // Na klikken op de wachtwoord-reset-link → naar het "nieuw wachtwoord"-scherm.
  React.useEffect(() => {
    if (store.recovery) { window.GC_STORE.clearRecovery(); onNav('reset'); }
  }, [store.recovery]);

  // één gedeelde aanmeld-keuzemodal voor alle signup-CTA's (header + login)
  const [roleModal, setRoleModal] = React.useState(false);
  const openRoleModal = () => setRoleModal(true);

  return (
    <div id="gc-scroll">
      <Nav onNav={onNav} view={view} solid={view !== 'home'} onSignup={openRoleModal} />
      {authLoading && (
        <main style={{ minHeight: '70vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--surface-page)' }}>
          <span style={{ fontSize: 14, color: 'var(--text-muted)' }}>Even laden…</span>
        </main>
      )}
      {guarded && <LoginPage onNav={onNav} onSignup={openRoleModal} />}
      {view === 'home' && (
        <>
          <Hero onNav={onNav} />
          <ContentShowcase />
          <div className="reveal"><RevealText /></div>
          <div className="reveal"><PhoneShowcase /></div>
          <HowItWorks onNav={onNav} />
          <div className="reveal"><TwoPaths onNav={onNav} /></div>
          <ValueProps />
          <LiveShowcase />
          <CTASection onNav={onNav} />
        </>
      )}
      {view === 'browse' && <BrowseScreen onNav={onNav} />}
      {view === 'how' && <HowItWorksPage onNav={onNav} />}
      {view === 'about' && <AboutPage onNav={onNav} />}
      {view === 'contact' && <ContactPage onNav={onNav} />}
      {view === 'creators' && <CreatorsPage onNav={onNav} />}
      {view === 'signup' && <SignupPage onNav={onNav} />}
      {view === 'signup-business' && <SignupBusinessPage onNav={onNav} />}
      {view === 'login' && <LoginPage onNav={onNav} onSignup={openRoleModal} />}
      {view === 'forgot' && <ForgotPage onNav={onNav} />}
      {view === 'reset' && <ResetPage onNav={onNav} />}
      {view === 'post' && auth && <PostScreen onNav={onNav} />}
      {view === 'dashboard' && auth && <Dashboard onNav={onNav} />}
      {view === 'my-jobs' && auth && <MyJobs onNav={onNav} />}
      {view === 'my-responses' && auth && <MyResponses onNav={onNav} />}
      {view === 'job' && auth && <JobDetail onNav={onNav} />}
      {view === 'creator' && auth && <CreatorProfile onNav={onNav} />}
      {view === 'account' && auth && <Account onNav={onNav} />}
      <Footer onNav={onNav} />
      <RoleChoiceModal open={roleModal} onClose={() => setRoleModal(false)} onNav={onNav} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App initialView={window.__GC_VIEW || 'home'} />);
refreshIcons();