import type { Metadata } from 'next'
import { getTranslations } from 'next-intl/server'
import { Link } from '@/i18n/navigation'
import { CookieConsentButtons, ConsentStatus } from '@/components/CookieConsent'

export const metadata: Metadata = {
  title: 'Declaración de Cookies',
}

export default async function CookiesPage() {
  const t = await getTranslations('Legal')
  return (
    <div className="main-page">
      <div className="middle-content">
        <div className="body-content">
          <div className="title-content">
            <h1>{t('cookies.title')}</h1>
          </div>
          <div className="box-content">
            <div className="body-box-content justified">
              <p>{t('cookies.p1')}</p>
              <br />
              <p>{t('cookies.p2')}</p>
              <p>{t('cookies.p3')}</p>
              <br />
              <p>{t('cookies.p4')}</p>
              <p>{t('cookies.p5')}</p>
              <br />
              <p>{t.rich('cookies.p6', { link: (c) => <Link href="/privacy-policy">{c}</Link> })}</p>
              <br />
              <hr />
              <br />
              <span>{t('cookies.h1cat')}</span>
              <br />
              <span className="second-brown">{t('cookies.necessaryTitle')}</span>
              <p>{t('cookies.necessaryDesc')}</p>

              <table className="uw-cookie-table">
                <thead>
                  <tr>
                    <th>{t('cookies.thCookie')}</th>
                    <th>{t('cookies.thProvider')}</th>
                    <th>{t('cookies.thPurpose')}</th>
                    <th>{t('cookies.thDuration')}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr><td>PHPSESSID</td><td>UltimoWoW</td><td>{t('cookies.nPurpose1')}</td><td>{t('cookies.durSession')}</td></tr>
                  <tr><td>uw_cookie_consent</td><td>UltimoWoW</td><td>{t('cookies.nPurpose2')}</td><td>{t('cookies.dur1Year')}</td></tr>
                  <tr><td>cf_clearance</td><td>Cloudflare</td><td>{t('cookies.nPurpose3')}</td><td>{t('cookies.dur1Year')}</td></tr>
                  <tr><td>__cf_bm</td><td>Cloudflare</td><td>{t('cookies.nPurpose4')}</td><td>{t('cookies.dur30Min')}</td></tr>
                  <tr><td>_cfuvid</td><td>Cloudflare</td><td>{t('cookies.nPurpose5')}</td><td>{t('cookies.durSession')}</td></tr>
                  <tr><td>CF_VERIFIED_DEVICE_*</td><td>Cloudflare</td><td>{t('cookies.nPurpose6')}</td><td>{t('cookies.dur30Days')}</td></tr>
                  <tr><td>_cf_logged_in</td><td>Cloudflare</td><td>{t('cookies.nPurpose7')}</td><td>{t('cookies.durSession')}</td></tr>
                  <tr><td>cf_chl_*</td><td>Cloudflare Turnstile</td><td>{t('cookies.nPurpose8')}</td><td>{t('cookies.durVariable')}</td></tr>
                  <tr><td>cf.turnstile.u</td><td>Cloudflare Turnstile</td><td>{t('cookies.nPurpose9')}</td><td>{t('cookies.durPersistent')}</td></tr>
                  <tr><td>zaraz-consent</td><td>Cloudflare Zaraz</td><td>{t('cookies.nPurpose10')}</td><td>{t('cookies.dur1Year')}</td></tr>
                  <tr><td>cfz_*</td><td>Cloudflare Zaraz</td><td>{t('cookies.nPurpose11')}</td><td>{t('cookies.durVariable')}</td></tr>
                </tbody>
              </table>

              <p className="third-brown">{t.rich('cookies.cfNote', { link: (c) => <a href="https://www.cloudflare.com/cookie-policy/" target="_blank" rel="noopener">{c}</a> })}</p>
              <br />
              <span className="second-brown">{t('cookies.prefTitle')}</span>
              <p>{t('cookies.prefDesc')}</p>

              <table className="uw-cookie-table">
                <thead>
                  <tr>
                    <th>{t('cookies.thCookie')}</th>
                    <th>{t('cookies.thProvider')}</th>
                    <th>{t('cookies.thPurpose')}</th>
                    <th>{t('cookies.thDuration')}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr><td>comments_sort</td><td>wotlk.ultimowow.com</td><td>{t('cookies.prefPurpose1')}</td><td>{t('cookies.dur1Year')}</td></tr>
                  <tr><td>wwcomments_sort</td><td>wotlk.ultimowow.com</td><td>{t('cookies.prefPurpose2')}</td><td>{t('cookies.dur1Year')}</td></tr>
                  <tr><td>temp_default_3dmodel</td><td>wotlk.ultimowow.com</td><td>{t('cookies.prefPurpose3')}</td><td>{t('cookies.dur1Year')}</td></tr>
                </tbody>
              </table>

              <span className="second-brown">{t('cookies.analyticsTitle')}</span>
              <p>{t('cookies.analyticsDesc')}</p>

              <table className="uw-cookie-table">
                <thead>
                  <tr>
                    <th>{t('cookies.thCookie')}</th>
                    <th>{t('cookies.thProvider')}</th>
                    <th>{t('cookies.thPurpose')}</th>
                    <th>{t('cookies.thDuration')}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr><td>_ga</td><td>Google Analytics</td><td>{t('cookies.aPurpose1')}</td><td>{t('cookies.dur2Years')}</td></tr>
                  <tr><td>_ga_*</td><td>Google Analytics</td><td>{t('cookies.aPurpose2')}</td><td>{t('cookies.dur2Years')}</td></tr>
                  <tr><td>_gid</td><td>Google Analytics</td><td>{t('cookies.aPurpose3')}</td><td>{t('cookies.dur24Hours')}</td></tr>
                  <tr><td>_gat</td><td>Google Analytics</td><td>{t('cookies.aPurpose4')}</td><td>{t('cookies.dur1Minute')}</td></tr>
                  <tr><td>sparrow_id</td><td>Cloudflare</td><td>{t('cookies.aPurpose5')}</td><td>{t('cookies.dur1Year')}</td></tr>
                </tbody>
              </table>

              <span className="second-brown">{t('cookies.marketingTitle')}</span>
              <p>{t('cookies.marketingDesc')}</p>

              <table className="uw-cookie-table">
                <thead>
                  <tr>
                    <th>{t('cookies.thCookie')}</th>
                    <th>{t('cookies.thProvider')}</th>
                    <th>{t('cookies.thPurpose')}</th>
                    <th>{t('cookies.thDuration')}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr><td>_gcl_*</td><td>Google</td><td>{t('cookies.mPurpose1')}</td><td>{t('cookies.dur90Days')}</td></tr>
                  <tr><td>IDE</td><td>Google DoubleClick</td><td>{t('cookies.mPurpose2')}</td><td>{t('cookies.dur1Year')}</td></tr>
                  <tr><td>_fbp</td><td>Facebook (Meta)</td><td>{t('cookies.mPurpose3')}</td><td>{t('cookies.dur3Months')}</td></tr>
                  <tr><td>_fbc</td><td>Facebook (Meta)</td><td>{t('cookies.mPurpose4')}</td><td>{t('cookies.dur3Months')}</td></tr>
                  <tr><td>fr</td><td>Facebook (Meta)</td><td>{t('cookies.mPurpose5')}</td><td>{t('cookies.dur3Months')}</td></tr>
                  <tr><td>AMCV_*</td><td>Adobe Experience Cloud</td><td>{t('cookies.mPurpose6')}</td><td>{t('cookies.dur2Years')}</td></tr>
                  <tr><td>_q_state_*</td><td>{t('cookies.providerVarious')}</td><td>{t('cookies.mPurpose7')}</td><td>{t('cookies.durVariable')}</td></tr>
                </tbody>
              </table>

              <p className="third-brown">{t('cookies.thirdPartyNote')}</p>

              <br />
              <span className="second-brown">{t('cookies.embeddedTitle')}</span>
              <p>{t('cookies.embeddedDesc')}</p>

              <table className="uw-cookie-table">
                <thead>
                  <tr>
                    <th>{t('cookies.thProvider')}</th>
                    <th>{t('cookies.thContentType')}</th>
                    <th>{t('cookies.thMoreInfo')}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr><td>YouTube (Google)</td><td>{t('cookies.embType1')}</td><td><a href="https://policies.google.com/privacy" target="_blank" rel="noopener">{t('cookies.privacyPolicyLink')}</a></td></tr>
                  <tr><td>Discord</td><td>{t('cookies.embType2')}</td><td><a href="https://discord.com/privacy" target="_blank" rel="noopener">{t('cookies.privacyPolicyLink')}</a></td></tr>
                  <tr><td>Twitch</td><td>{t('cookies.embType3')}</td><td><a href="https://www.twitch.tv/p/legal/privacy-notice/" target="_blank" rel="noopener">{t('cookies.privacyPolicyLink')}</a></td></tr>
                  <tr><td>Facebook (Meta)</td><td>{t('cookies.embType4')}</td><td><a href="https://www.facebook.com/privacy/policy/" target="_blank" rel="noopener">{t('cookies.privacyPolicyLink')}</a></td></tr>
                </tbody>
              </table>

              <p className="third-brown">{t('cookies.embeddedNote')}</p>

              <br />
              <hr />
              <br />
              <span>{t('cookies.h2cat')}</span>
              <p>{t('cookies.deleteP')}</p>
              <ul>
                <li>{t('cookies.deleteLi1')}</li>
                <li>{t('cookies.deleteLi2')}</li>
                <li>{t('cookies.deleteLi3')}</li>
                <li>{t('cookies.deleteLi4')}</li>
              </ul>
              <br />
              <hr />
              <br />
              <span>{t('cookies.h3cat')}</span>
              <p>{t('cookies.consentP')}</p>

              <ConsentStatus />
              <CookieConsentButtons />
              <br />
              <hr />
              <br />
              <span>{t('cookies.h4cat')}</span>
              <p>{t.rich('cookies.moreInfoP', { link: (c) => <Link href="/contact-us">{c}</Link> })}</p>
              <br />
              <p className="grey-info2">{t('cookies.updated')}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}