const { useState, useEffect } = React;

function getPage() {
  return window.location.hash.replace('#', '') || '/';
}

function App() {
  const [page, setPage] = useState(getPage);
  const [ready, setReady] = useState(false);

  const navigate = (path) => {
    window.location.hash = path;
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  useEffect(() => {
    const h = () => setPage(getPage());
    window.addEventListener('hashchange', h);
    return () => window.removeEventListener('hashchange', h);
  }, []);

  useEffect(() => {
    Promise.all([
      fetch('/api/content').then(r => r.json()),
      fetch('/api/public-config').then(r => r.json()).catch(() => ({})),
    ])
      .then(([data, cfg]) => {
        const merged = {
          ...data,
          settings: {
            ...(data.settings || {}),
            turnstileSiteKey: (cfg && cfg.turnstileSiteKey) || data.settings?.turnstileSiteKey || '',
          },
        };
        window.CONTENT = merged;
        window.SERVICES = Array.isArray(merged.services) ? merged.services : [];
        if (merged.courseDates) window.COURSE_START_DATES = merged.courseDates;
        if (merged.meta?.siteTitle) document.title = merged.meta.siteTitle;
        const metaDesc = document.querySelector('meta[name="description"]');
        if (metaDesc && merged.meta?.siteDescription) {
          metaDesc.setAttribute('content', merged.meta.siteDescription);
        }
      })
      .catch(() => {
        // Keep app usable with existing in-file fallbacks if API is unavailable.
        window.CONTENT = window.CONTENT || {};
      })
      .finally(() => setReady(true));
  }, []);

  const isHome     = page === '/' || page === '';
  const isAbout    = page === '/about';
  const isServices = page === '/services';
  const isContact  = page === '/contact';
  const isDocs     = page === '/documents';
  const isDetail   = page.startsWith('/service/');
  const isNews     = page.startsWith('/news/');
  const slug       = isDetail ? page.split('/').pop() : null;
  const newsSlug   = isNews ? page.split('/').pop() : null;

  if (!ready) {
    return (
      <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center', color: '#fff', fontFamily: "'Outfit', sans-serif" }}>
        Завантаження контенту...
      </div>
    );
  }

  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      <Header navigate={navigate} currentPage={page} />
      <main style={{ flex: 1, paddingTop: isContact ? 70 : 70 }}>
        {isHome     && <HomePage     navigate={navigate} />}
        {isAbout    && <AboutPage    navigate={navigate} />}
        {isServices && <ServicesPage navigate={navigate} />}
        {isContact  && <ContactPage  navigate={navigate} />}
        {isDocs     && <DocumentsPage navigate={navigate} />}
        {isDetail   && <ServiceDetailPage navigate={navigate} slug={slug} />}
        {isNews     && <NewsDetailPage navigate={navigate} slug={newsSlug} />}
        {!isHome && !isAbout && !isServices && !isContact && !isDocs && !isDetail && !isNews
          && <HomePage navigate={navigate} />}
      </main>
      <Footer navigate={navigate} />
      <button className="btt" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} aria-label="Вгору">
        <Ico n="up" s={18} />
      </button>
    </div>
  );
}

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