// app.jsx — page composition with global lang + CMS content + blog routing

// Pull blog components from window — scripts loaded before this file
const BlogList   = window.BlogList;
const BlogDetail = window.BlogDetail;

const App = () => {
  const [lang, setLang] = React.useState('en');
  const [cms,  setCms]  = React.useState(() => {
    try { return JSON.parse(localStorage.getItem('blan_cms_v1') || 'null') || {}; }
    catch { return {}; }
  });
  const [page,     setPage]     = React.useState('home');
  const [blogSlug, setBlogSlug] = React.useState('');

  const navigate = (path) => {
    if (path.startsWith('/blog/')) {
      setBlogSlug(path.slice(6));
      setPage('blog-detail');
    } else if (path === '/blog') {
      setBlogSlug('');
      setPage('blog-list');
    } else {
      setBlogSlug('');
      setPage('home');
    }
    window.scrollTo(0, 0);
  };

  const scrollTo = (id) =>
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });

  const goContact = () => {
    if (page === 'home') { scrollTo('ag-section-contact'); return; }
    navigate('/');
    setTimeout(() => scrollTo('ag-section-contact'), 80);
  };

  React.useEffect(() => {
    // dar (Moroccan Darija) → 'ar-MA'; ar (Standard Arabic) → 'ar'; others → direct
    document.documentElement.lang = lang === 'dar' ? 'ar-MA' : lang;
    document.documentElement.dir  = 'ltr';
  }, [lang]);

  React.useEffect(() => {
    db.from('content_sections')
      .select('section_name, content_json')
      .in('section_name', ['brand', 'hero', 'pricing', 'partners', 'services', 'about', 'works', 'faq', 'process', 'reviews'])
      .then(({ data }) => {
        if (!data) return;
        const map = {};
        data.forEach(r => { map[r.section_name] = r.content_json; });
        setCms(prev => ({ ...prev, ...map }));
        try { localStorage.setItem('blan_cms_v1', JSON.stringify({ ...JSON.parse(localStorage.getItem('blan_cms_v1') || '{}'), ...map })); } catch {}
        const brand = map.brand;
        if (brand) {
          const title = i18(brand.siteTitle, lang);
          if (title) document.title = title;
          const desc = i18(brand.metaDescription, lang);
          if (desc) {
            const meta = document.querySelector('meta[name="description"]');
            if (meta) meta.content = desc;
          }
          if (brand.favicon) {
            // Remove all existing icon links then create fresh elements.
            // Mutating link.href in-place is often ignored by the browser favicon cache;
            // removing + recreating forces a re-fetch.
            const bust = '?_v=' + Math.floor(Date.now() / 86400000); // daily buster
            const url  = brand.favicon.startsWith('data:') ? brand.favicon : brand.favicon + bust;
            document.querySelectorAll("link[rel~='icon']").forEach(l => l.remove());
            ['icon', 'apple-touch-icon'].forEach(rel => {
              const l = document.createElement('link');
              l.rel  = rel;
              l.href = url;
              document.head.appendChild(l);
            });
          }
        }
      });

    // Fetch published blog posts — override static mock data when available
    db.from('blog_posts')
      .select('*')
      .eq('status', 'published')
      .order('published_at', { ascending: false })
      .then(({ data }) => {
        if (data && data.length > 0) {
          setCms(prev => ({ ...prev, blogs: data }));
        }
      });
  }, [lang]);

  return (
    <div className="ag-app">
      <Header onCTA={goContact} onNavigate={navigate} lang={lang} setLang={setLang} />

      {page === 'home' && (
        <>
          <Hero
            onExplore={() => scrollTo('ag-section-services')}
            onPricing={() => scrollTo('ag-section-pricing')}
            content={cms.hero}
            lang={lang}
          />
          <Partners data={cms.partners} />
          <Services data={cms.services} lang={lang} />
          <About data={cms.about} lang={lang} />
          <Testimonials data={cms.reviews} lang={lang} />
          <HowItWorks data={cms.process} lang={lang} />
          <Work data={cms.works} lang={lang} />
          <Pricing data={cms.pricing} lang={lang} />
          <FAQ data={cms.faq} lang={lang} />
          <Contact lang={lang} />
        </>
      )}

      {page === 'blog-list' && BlogList && (
        <BlogList lang={lang} onNavigate={navigate} blogs={cms.blogs} />
      )}

      {page === 'blog-detail' && BlogDetail && (
        <BlogDetail slug={blogSlug} lang={lang} onNavigate={navigate} onCTA={goContact} blogs={cms.blogs} />
      )}

      <Footer lang={lang} />
    </div>
  );
};

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