// App: loads content bundle for the active language, normalizes title_parts
// back into the [string|{em:string}] shape the existing components expect,
// then renders. Language is derived from the URL path (/ vs /en/) so the
// switcher does a real navigation rather than a state flip.

function App() {
  const defaults = window.__TWEAKS__ || {};
  const lang = defaults.defaultLang || (window.location.pathname.startsWith('/en/') ? 'en' : 'de');
  const [theme, setThemeState] = useState(() => localStorage.getItem("eric-theme") || defaults.defaultTheme || "light");
  const [accent, setAccentState] = useState(defaults.accent || "#C8102E");
  const [content, setContent] = useState(null);
  const [loadError, setLoadError] = useState(null);

  useEffect(() => {
    window.__CONTENT_LOADER__.load(lang)
      .then(setContent)
      .catch(err => {
        console.error('Content load error:', err);
        setLoadError(err.message);
      });
  }, [lang]);

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    document.documentElement.style.setProperty("--accent", accent);
    document.documentElement.lang = lang;
  }, [theme, lang, accent]);

  const setTheme = (t) => { setThemeState(t); localStorage.setItem("eric-theme", t); };
  const setLang = (l) => {
    const isEn = window.location.pathname.startsWith('/en/');
    if ((l === 'en') !== isEn) window.location.href = l === 'en' ? '/en/' : '/';
  };
  const setAccent = (a) => setAccentState(a);

  if (loadError) {
    return <div className="loading-screen"><p style={{ color: 'var(--accent)' }}>Content load error: {loadError}</p></div>;
  }
  if (!content) {
    return <div className="loading-screen"><LogoMark size={64} /></div>;
  }

  const renderTitle = window.__CONTENT_LOADER__.renderTitle;
  const c = {
    ...content,
    hero:         { ...content.hero,         title: renderTitle(content.hero.title_parts) },
    services:     { ...content.services,     title: renderTitle(content.services.title_parts) },
    showreel:     { ...content.showreel,     title: renderTitle(content.showreel.title_parts) },
    audio:        { ...content.audio,        title: renderTitle(content.audio.title_parts) },
    clients:      { ...content.clients,      title: renderTitle(content.clients.title_parts) },
    about:        { ...content.about,        title: renderTitle(content.about.title_parts) },
    process:      { ...content.process,      title: renderTitle(content.process.title_parts) },
    faq:          { ...content.faq,          title: renderTitle(content.faq.title_parts) },
    testimonials: { ...content.testimonials, title: renderTitle(content.testimonials.title_parts) },
    contact:      { ...content.contact,      title: renderTitle(content.contact.title_parts) },
    footer:       { ...content.footer,       statement: renderTitle(content.footer.statement_parts) },
  };

  return (
    <>
      <Nav lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} content={c} />
      <Hero content={c} lang={lang} />
      <Services content={c.services} />
      <ShowreelGrid content={c.showreel} />
      <AudioSamples content={c.audio} />
      <Clients content={c.clients} />
      <About content={c.about} />
      <Process content={c.process} />
      <Testimonials content={c.testimonials} />
      <FAQ content={c.faq} />
      <Contact content={c.contact} lang={lang} />
      <Footer content={c.footer} navLinks={c.nav} />
      {window.Tweaks && <Tweaks theme={theme} setTheme={setTheme} lang={lang} setLang={setLang} accent={accent} setAccent={setAccent} />}
    </>
  );
}

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