import Header from '../../../components/Header'
import { getTranslations } from 'next-intl/server'

export default async function AboutPage() {
  const t = await getTranslations('about')
  
  return (
    <>
      <Header />
      <main className="min-h-screen bg-black pt-16">
        <div className="container mx-auto px-4 py-16">
          <div className="text-center">
            <h1 className="text-6xl md:text-7xl font-bold text-white mb-6">
              {t('title')}
            </h1>
            <p className="text-xl text-gray-300 max-w-3xl mx-auto">
              {t('subtitle')}
            </p>
          </div>
          
          <div className="mt-16 max-w-6xl mx-auto">
            <div className="grid md:grid-cols-2 gap-8">
              <div className="bg-black/60 backdrop-blur-sm rounded-2xl p-8 border border-gray-700/50">
                <h2 className="text-3xl font-bold text-white mb-6">{t('mission.title')}</h2>
                <p className="text-gray-300 leading-relaxed">
                  {t('mission.description')}
                </p>
              </div>
              
              <div className="bg-black/60 backdrop-blur-sm rounded-2xl p-8 border border-gray-700/50">
                <h2 className="text-3xl font-bold text-white mb-6">{t('vision.title')}</h2>
                <p className="text-gray-300 leading-relaxed">
                  {t('vision.description')}
                </p>
              </div>
            </div>
            
            <div className="mt-8 bg-black/60 backdrop-blur-sm rounded-2xl p-8 border border-gray-700/50">
              <h2 className="text-3xl font-bold text-white mb-6 text-center">{t('contact.title')}</h2>
              <div className="text-center text-gray-300">
                <p>{t('contact.support')}</p>
                <p className="mt-4">{t('contact.serverIp', { ip: '188.165.140.93:22125' })}</p>
              </div>
            </div>
          </div>
        </div>
      </main>
    </>
  )
}