import { I18nProvider, useI18n } from './i18n'
import { Header } from './sections/Header'
import { Hero } from './sections/Hero'
import { Features } from './sections/Features'
import { HowItWorks } from './sections/HowItWorks'
import { Privacy } from './sections/Privacy'
import { Pricing } from './sections/Pricing'
import { Download } from './sections/Download'
import { FAQ } from './sections/FAQ'
import { Footer } from './sections/Footer'

function Page() {
  const { t } = useI18n()
  return (
    <div id="top">
      <a href="#main" className="skip-link">{t.a11y.skipToContent}</a>
      <Header />
      <main id="main" tabIndex={-1} className="outline-none">
        <Hero />
        <Features />
        <HowItWorks />
        <Privacy />
        <Pricing />
        <Download />
        <FAQ />
      </main>
      <Footer />
    </div>
  )
}

export function App() {
  return (
    <I18nProvider>
      <Page />
    </I18nProvider>
  )
}