import Head from 'next/head'
import { PageHeader } from '@/components/PageHeader'
import { Footer } from '@/components/Footer'
import { FundingGauge } from '@/components/FundingGauge'
import { t } from '@/lib/i18n'
import React from 'react'

export default function FundingPage(): React.ReactElement {
  return (
    <>
      <Head>
        <title>{t('funding.title')} - zapwall.fr</title>
        <meta name="description" content={t('funding.meta.description')} />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
      </Head>
      <main className="min-h-screen bg-cyber-darker">
        <PageHeader />
        <div className="w-full px-4 py-8">
          <div className="mb-8">
            <h1 className="text-3xl font-bold text-neon-cyan mb-4">{t('funding.title')}</h1>
            <p className="text-cyber-accent/70 mb-6">
              {t('funding.description')}
            </p>
          </div>
          <FundingGauge />
        </div>
        <Footer />
      </main>
    </>
  )
}
