import type { Metadata } from 'next'
import { getTranslations } from 'next-intl/server'

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params
  const t = await getTranslations({ locale, namespace: 'Legal' })
  return { title: t('terms.title') }
}

export default async function TermsAndConditionsPage() {
  const t = await getTranslations('Legal')
  return (
    <div className="main-page">
      <div className="middle-content">
        <div className="body-content">
          <div className="title-content">
            <h1>{t('terms.title')}</h1>
          </div>
          <div className="box-content">
            <div className="body-box-content">
              <span className="second-brown">{t('terms.h1')}</span>
              <p>{t('terms.p1')}</p>
              <br />
              <hr />
              <br />
              <span className="second-brown">{t('terms.h2')}</span>
              <p>{t('terms.p2')}</p>
              <br />
              <p>{t('terms.p3')}</p>
              <br />
              <p>{t('terms.p4')}</p>
              <br />
              <p>{t('terms.p5')}</p>
              <br />
              <p>{t('terms.p6')}</p>
              <br />
              <p>{t('terms.p7')}</p>
              <br />
              <hr />
              <br />
              <span className="second-brown">{t('terms.h3')}</span>
              <p>{t('terms.p8')}</p>
              <br />
              <p>{t('terms.p9')}</p>
              <p>{t('terms.p10')}</p>
              <p>{t('terms.p11')}</p>
              <p>{t('terms.p12')}</p>
              <p>{t('terms.p13')}</p>
              <br />
              <p>{t('terms.p14')}</p>
              <br />
              <p>{t('terms.p15')}</p>
              <p>{t('terms.p16')}</p>
              <p>{t('terms.p17')}</p>
              <p>{t('terms.p18')}</p>
              <br />
              <hr />
              <br />
              <span className="second-brown">{t('terms.h4')}</span>
              <p>{t('terms.p19')}</p>
              <br />
              <p>{t('terms.p20')}</p>
              <br />
              <p>{t('terms.p21')}</p>
              <br />
              <p>{t('terms.p22')}</p>
              <br />
              <hr />
              <br />
              <span className="second-brown">{t('terms.h5')}</span>
              <p>{t('terms.p23')}</p>
              <p>{t('terms.p24')}</p>
              <p>{t('terms.p25')}</p>
              <p>{t('terms.p26')}</p>
              <br />
              <p>{t('terms.p27')}</p>
              <br />
              <hr />
              <br />
              <span className="second-brown">{t('terms.h6')}</span>
              <p>{t('terms.p28')}</p>
              <br />
              <p>{t('terms.p29')}</p>
              <br />
              <p>{t('terms.p30')}</p>
              <br />
              <p>{t('terms.p31')}</p>
              <br />
              <p>{t('terms.p32')}</p>
              <p className="second-brown">{t('terms.h7')}</p>
              <p>{t('terms.p33')}</p>
              <br />
              <p>{t('terms.p34')}</p>
              <br />
              <p>{t('terms.p35')}</p>
              <p>{t('terms.p36')}</p>
              <p>{t('terms.p37')}</p>
              <br />
              <p>{t('terms.p38')}</p>
              <br />
              <p>{t('terms.p39')}</p>
              <br />
              <p className="second-brown">{t('terms.h8')}</p>
              <p>{t('terms.p40')}</p>
              <br />
              <p>{t('terms.p41')}</p>
              <br />
              <hr />
              <br />
              <span className="second-brown">{t('terms.h9')}</span>
              <p>{t('terms.p42')}</p>
              <br />
              <p>{t('terms.p43')}</p>
              <br />
              <p className="grey-info2">NightSpire</p>
              <p className="grey-info2">consultas@nightspire.gg</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}