import React, { useEffect, useState } from 'react'
import { LanguageProvider, useLanguage } from './contexts/LanguageContext.jsx'
import Navigation from './components/Navigation.jsx'
import Footer from './components/Footer.jsx'
import Home from './pages/Home.jsx'
import NotFound from './pages/NotFound.jsx'
import FloatingContacts from './components/FloatingContacts.jsx'
import ScrollToTop from './components/ScrollToTop.jsx'

function LangSync() {
  const { lang } = useLanguage()
  useEffect(() => {
    document.documentElement.lang = lang
  }, [lang])
  return null
}

function Router() {
  const [path, setPath] = useState(typeof window !== 'undefined' ? window.location.pathname : '/')
  useEffect(() => {
    const handler = () => setPath(window.location.pathname)
    window.addEventListener('popstate', handler)
    return () => window.removeEventListener('popstate', handler)
  }, [])

  const isHome = path === '/' || path === '/index.html'
  return isHome ? <Home /> : <NotFound />
}

export default function App() {
  return (
    <LanguageProvider>
      <LangSync />
      <Navigation />
      <main>
        <Router />
      </main>
      <Footer />
      <FloatingContacts />
      <ScrollToTop />
    </LanguageProvider>
  )
}