import type { Metadata } from 'next'
import { getTranslations, setRequestLocale } from 'next-intl/server'
import { getRealmName } from '@/lib/realm'

export const metadata: Metadata = { title: 'Ayuda' }

export const dynamic = 'force-dynamic'

export default async function HelpPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  const t = await getTranslations('Misc')
  const realm = await getRealmName()

  return (
    <div className="main-page">
      <div className="middle-content">
        <div className="body-content">
          <div className="title-content">
            <h1>{t('help.title')}</h1>
          </div>
          <div className="box-content">
            <div className="title-box-content">
              <h2>{t('help.subtitle')}</h2>
            </div>
            <div className="body-box-content justified">
              <p>{t('help.intro1')}</p>
              <p>{t('help.intro2')}</p>
              <p>{t('help.intro3')}</p>
              <br />
              <span>{t('help.clientTitle')}</span>
              <p>{t('help.clientText')}</p>
              <p>{t('help.mediaAre')}</p>
              <p>{t('help.mediaForos')}</p>
              <p>{t('help.mediaDiscord')}</p>
              <br />
              <span>{t('help.serverErrorsTitle')}</span>
              <p>{t('help.serverErrorsText')}</p>
              <p>{t('help.mediaAre')}</p>
              <p>{t('help.mediaForos')}</p>
              <br />
              <span>{t('help.characterTitle')}</span>
              <p>{t('help.characterText')}</p>
              <p>{t('help.mediaAre')}</p>
              <p>{t('help.mediaTicket')}</p>
              <p>{t('help.mediaDiscord')}</p>
              <br />
              <span>{t('help.otherPlayerTitle')}</span>
              <p>{t('help.otherPlayerText1')}</p>
              <p>{t('help.otherPlayerText2')}</p>
              <p>{t('help.mediaAre')}</p>
              <p>{t('help.mediaForos')}</p>
              <br />
              <span>{t('help.accountBlocksTitle')}</span>
              <p>{t('help.accountBlocksText', { realm })}</p>
              <p>{t('help.mediaAre')}</p>
              <p>{t('help.mediaForos')}</p>
              <br />
              <span>{t('help.websiteTitle')}</span>
              <p>{t('help.websiteText')}</p>
              <p>{t('help.mailTo')} <a href="mailto:ryuzaki@ultimowow.com">ryuzaki@ultimowow.com</a></p>
              <br />
              <span>{t('help.pdTitle')}</span>
              <p>{t('help.pdText')}</p>
              <p>{t('help.mailTo')} <a href="mailto:contacto@ultimowow.com">contacto@ultimowow.com</a></p>
              <br />
              <fieldset>
                <legend>{t('help.contactMeans')}</legend>
                <div className="separate2">
                  <span>{t('help.ticketTitle')}</span>
                  <p>{t('help.ticket1')}</p>
                  <p>{t('help.ticket2')}</p>
                  <p>{t('help.ticket3')}</p>
                  <p>{t('help.ticket4')}</p>
                  <p>{t('help.ticket5')}</p>
                  <p>{t('help.ticket6')}</p>
                  <p>{t('help.ticket7')}</p>
                  <br />
                  <span>{t('help.discordTitle')}</span>
                  <p>{t.rich('help.discord1', { link: (c) => <a href="https://discordapp.com/" target="_blank" rel="noopener noreferrer">{c}</a> })}</p>
                  <p>{t.rich('help.discord2', { link: (c) => <a href="https://discord.ultimowow.com" target="_blank" rel="noopener noreferrer">{c}</a> })}</p>
                  <p>{t('help.discord3')}</p>
                  <br />
                  <span>{t('help.forosTitle')}</span>
                  <p>{t('help.foros1', { realm })}</p>
                  <p>{t('help.foros2')}</p>
                  <p>{t.rich('help.foros3', { link: (c) => <a href="https://foro.ultimowow.com/" target="_blank" rel="noopener noreferrer">{c}</a> })}</p>
                  <br />
                  <span>{t('help.emailTitle')}</span>
                  <p>{t('help.email1')}</p>
                  <p>{t('help.email2')}</p>
                </div>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}