i18n: traducir toda la app (ES + EN) — páginas y componentes con texto hardcodeado

Se externaliza el texto español hardcodeado de ~55 archivos a next-intl y se añaden
traducciones al inglés, con paridad de claves es/en. Nuevos namespaces: History,
CharService, CharServiceB, Points, Legal, UI, Misc (+ altas en Common/Admin).

- Historiales (PD/PV, transacciones, sanciones, seguridad), servicios de personaje
  (transfer, send-gift, quest, restore-*, change-*, customize, level-up, gold, rename),
  PD/pagos (d-points, trade, promo, transfer-dp, rename-guild, DPointsTabs), páginas
  legales (cookies, privacidad, términos, reembolsos, aviso legal, contacto), layout
  (cabecera, footer, cookies, 2FA, descargas, jugadores, recluta) y páginas varias
  (home, reino, ayuda, addons, 2falogin).
- Textos con markup inline via t.rich; interpolación con ICU.
- Componente <NoteLegend/> para la leyenda NOTA/NOTE compartida.
- payLabel/confirmText de los servicios de pago traducidos.
- Verificado: tsc OK, next build OK, todas las claves t() resuelven en es y en,
  todos los t.rich casan etiquetas, páginas 200 en /es/ y /en/ sin claves crudas.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web-next/components/DPointsTabs.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState } from 'react'
+import { useTranslations } from 'next-intl'
 import { Link } from '@/i18n/navigation'
 
 const LOGOS = '/nw-themes/nw-ryu/nw-images/nw-logos'
@@ -8,24 +9,25 @@ const RANKS = '/nw-themes/nw-ryu/nw-images/nw-ranks'
 
 type TabId = 'Info' | 'Stripe' | 'SumUp'
 
-const RANK_ROWS = [
-  ['1_Newbie', 'Nivel 1', 'Desde 0 PD'],
-  ['2_Rookie', 'Nivel 2', 'Hasta 100 PD'],
-  ['3_Apprentice', 'Nivel 3', 'Hasta 200 PD'],
-  ['4_Explorer', 'Nivel 4', 'Hasta 300 PD'],
-  ['5_Contributor', 'Nivel 5', 'Hasta 400 PD'],
-  ['6_Enthusiast', 'Nivel 6', 'Hasta 500 PD'],
-  ['7_Collaborator', 'Nivel 7', 'Hasta 600 PD'],
-  ['8_Regular', 'Nivel 8', 'Hasta 700 PD'],
-  ['9_RisingStar', 'Nivel 9', 'Hasta 800 PD'],
-  ['10_Proficient', 'Nivel 10', 'Hasta 900 PD'],
-  ['11_Experienced', 'Nivel 11', 'Hasta 1000 PD'],
-  ['12_Mentor', 'Nivel 12', 'Hasta 5000 PD'],
-  ['13_Veteran', 'Nivel 13', 'Hasta 10000 PD'],
-  ['14_GrandMaster', 'Nivel 14', 'Más de 10000 PD'],
+const RANK_ROWS: [string, number, string][] = [
+  ['1_Newbie', 1, 'range1'],
+  ['2_Rookie', 2, 'range2'],
+  ['3_Apprentice', 3, 'range3'],
+  ['4_Explorer', 4, 'range4'],
+  ['5_Contributor', 5, 'range5'],
+  ['6_Enthusiast', 6, 'range6'],
+  ['7_Collaborator', 7, 'range7'],
+  ['8_Regular', 8, 'range8'],
+  ['9_RisingStar', 9, 'range9'],
+  ['10_Proficient', 10, 'range10'],
+  ['11_Experienced', 11, 'range11'],
+  ['12_Mentor', 12, 'range12'],
+  ['13_Veteran', 13, 'range13'],
+  ['14_GrandMaster', 14, 'range14'],
 ]
 
 export function DPointsTabs({ realm, currency }: { realm: string; currency: string }) {
+  const t = useTranslations('Points')
   const [active, setActive] = useState<TabId>('Info')
   const [showRanks, setShowRanks] = useState(false)
   const sym = currency === 'usd' ? '$' : '€'
@@ -38,10 +40,10 @@ export function DPointsTabs({ realm, currency }: { realm: string; currency: stri
             className={`dnt-button-2 tablink${active === 'Info' ? ' dnt-selected' : ''}`}
             onClick={() => setActive('Info')}
           >
-            Información
+            {t('tabs.info')}
           </button>
-          <Link className="back-to-account" href="/my-account">Regresar a mi cuenta</Link>
-          <Link className="back-to-account-responsive" href="/my-account">Regresar</Link>
+          <Link className="back-to-account" href="/my-account">{t('tabs.backToAccount')}</Link>
+          <Link className="back-to-account-responsive" href="/my-account">{t('tabs.back')}</Link>
         </div>
         <div className="dnt-sidebar dnt-methods">
           <button className={`dnt-button-2 tablink${active === 'Stripe' ? ' dnt-selected' : ''}`} onClick={() => setActive('Stripe')}>
@@ -58,26 +60,26 @@ export function DPointsTabs({ realm, currency }: { realm: string; currency: stri
         {active === 'Info' && (
           <div className="box-content dnt-tab dnt-animate">
             <div className="body-box-content">
-              <span>¿Qué son los PD?</span>
-              <p>Ofrecemos a nuestros usuarios la oportunidad de obtener niveles que les brindan beneficios exclusivos dentro de nuestra comunidad en línea. Estos beneficios incluyen acceso a herramientas especiales, contenido exclusivo y mejoras significativas para su experiencia en nuestro sitio web. Al realizar una compra, nuestros usuarios reciben PD, una unidad de reconocimiento interna que refleja su compromiso y progreso en nuestra plataforma. Los PD les permiten alcanzar nuevos niveles y desbloquear recompensas exclusivas. Cabe destacar que estos PD son una forma única de valorar y premiar la participación activa de nuestros usuarios en nuestra comunidad.</p>
+              <span>{t('tabs.whatArePd')}</span>
+              <p>{t('tabs.whatArePdText')}</p>
               <br />
               <hr />
               <br />
-              <span>¿Cuáles son los niveles disponibles?</span>
+              <span>{t('tabs.availableLevels')}</span>
               {!showRanks ? (
-                <p id="rank-div-show" onClick={() => setShowRanks(true)}>Mostrar</p>
+                <p id="rank-div-show" onClick={() => setShowRanks(true)}>{t('tabs.show')}</p>
               ) : (
-                <p id="rank-div-hide" style={{ display: 'block' }} onClick={() => setShowRanks(false)}>Ocultar</p>
+                <p id="rank-div-hide" style={{ display: 'block' }} onClick={() => setShowRanks(false)}>{t('tabs.hide')}</p>
               )}
               {showRanks && (
                 <div className="rank-div" id="rank-div" style={{ display: 'block' }}>
                   <table className="rank-table">
                     <tbody>
-                      {RANK_ROWS.map(([file, nivel, desde]) => (
+                      {RANK_ROWS.map(([file, level, rangeKey]) => (
                         <tr key={file}>
-                          <td><img src={`${RANKS}/${file}.svg`} alt={nivel} title={nivel} width="24px" /></td>
-                          <td>{nivel}</td>
-                          <td className="second-brown">{desde}</td>
+                          <td><img src={`${RANKS}/${file}.svg`} alt={t('tabs.level', { n: level })} title={t('tabs.level', { n: level })} width="24px" /></td>
+                          <td>{t('tabs.level', { n: level })}</td>
+                          <td className="second-brown">{t(`tabs.${rangeKey}`)}</td>
                         </tr>
                       ))}
                     </tbody>
@@ -87,21 +89,21 @@ export function DPointsTabs({ realm, currency }: { realm: string; currency: stri
               <br />
               <hr />
               <br />
-              <span>¿Cuáles son los métodos de compra de PD?</span>
-              <p>Los métodos de compra disponibles actualmente son:</p>
-              <p>- <img className="pay-inline-logo" src={`${LOGOS}/stripe-p-logo.svg`} alt="Stripe" /> Stripe (tarjeta de crédito/débito, para todos los países).</p>
-              <p>- <img className="pay-inline-logo" src={`${LOGOS}/sumup-p-logo.svg`} alt="SumUp" /> SumUp (tarjeta de crédito/débito).</p>
+              <span>{t('tabs.purchaseMethods')}</span>
+              <p>{t('tabs.purchaseMethodsText')}</p>
+              <p>- <img className="pay-inline-logo" src={`${LOGOS}/stripe-p-logo.svg`} alt="Stripe" /> {t('tabs.stripeMethod')}</p>
+              <p>- <img className="pay-inline-logo" src={`${LOGOS}/sumup-p-logo.svg`} alt="SumUp" /> {t('tabs.sumupMethod')}</p>
               <br />
               <hr />
               <br />
-              <span>¿Cuántos PD se reciben?</span>
-              <p>Por cada {sym}1 recibes 100 PD. La cantidad final se indica antes de confirmar el pago.</p>
+              <span>{t('tabs.howManyPd')}</span>
+              <p>{t('tabs.howManyPdText', { sym })}</p>
               <br />
               <hr />
               <br />
-              <span>¿Tienes dudas o problemas con una compra?</span>
-              <p>No realices una compra hasta estar completamente seguro de que has leído esta información y sabes cómo es el proceso que vayas a escoger.</p>
-              <p>Si a pesar de leer este instructivo aún tienes dudas, el equipo de {realm} podrá asesorarte en cualquier momento. Puedes colocar un ticket en el servidor, o contactarnos mediante nuestra plataforma de Discord.</p>
+              <span>{t('tabs.doubts')}</span>
+              <p>{t('tabs.doubtsText1')}</p>
+              <p>{t('tabs.doubtsText2', { realm })}</p>
             </div>
           </div>
         )}
@@ -114,20 +116,22 @@ export function DPointsTabs({ realm, currency }: { realm: string; currency: stri
 }
 
 /* --------------------------- Lógica de pago común --------------------------- */
-function checkoutError(error?: string): string {
+function checkoutErrorKey(error?: string): string {
   switch (error) {
     case 'notConfigured':
-      return 'Este método de pago aún no está disponible. Por favor, utiliza otro método o inténtalo más tarde.'
+      return 'notConfigured'
     case 'invalidAmount':
-      return 'La cantidad debe ser un número entero entre 1 y 200.'
+      return 'invalidAmount'
     case 'notAuthenticated':
-      return 'Tu sesión ha expirado. Inicia sesión de nuevo.'
+      return 'notAuthenticated'
     default:
-      return 'No se pudo iniciar el pago. Inténtalo de nuevo.'
+      return 'generic'
   }
 }
 
 function usePayment(provider: 'stripe' | 'sumup') {
+  const t = useTranslations('Points')
+  const checkoutError = (error?: string) => t(`tabs.checkoutErrors.${checkoutErrorKey(error)}`)
   const [amount, setAmount] = useState('')
   const [accepted, setAccepted] = useState(false)
   const [busy, setBusy] = useState(false)
@@ -136,7 +140,7 @@ function usePayment(provider: 'stripe' | 'sumup') {
   async function pay(e: React.FormEvent<HTMLFormElement>, sym: string) {
     e.preventDefault()
     if (!accepted) {
-      alert('Debes aceptar los Términos y Condiciones y la Política de Reembolso')
+      alert(t('tabs.mustAccept'))
       return
     }
     const n = Number(amount)
@@ -144,7 +148,7 @@ function usePayment(provider: 'stripe' | 'sumup') {
       setErr(checkoutError('invalidAmount'))
       return
     }
-    if (!window.confirm(`Vas a adquirir ${n * 100} PD por ${sym}${n}.\n¿Deseas continuar al pago?`)) return
+    if (!window.confirm(t('tabs.confirmPurchase', { points: n * 100, sym, amount: n }))) return
     setBusy(true)
     setErr(null)
     try {
@@ -180,26 +184,28 @@ function AmountForm({
   sym: string
   buttonLabel: string
 }) {
+  const t = useTranslations('Points')
   const st = usePayment(provider)
   const points = Number(st.amount) > 0 ? Number(st.amount) * 100 : 0
+  const currency = sym === '$' ? 'USD' : 'EUR'
   return (
     <>
-      <p className="yellow-info centered">{sym}1 = 100 PD</p>
-      <p className="centered second-brown">Valor mínimo: {sym}1 · Valor máximo por transacción: {sym}200</p>
+      <p className="yellow-info centered">{t('tabs.rate', { sym })}</p>
+      <p className="centered second-brown">{t('tabs.minMax', { sym })}</p>
       <br />
       <fieldset>
         <div className="separate2">
-          <p className="centered red-info2">¡Importante!</p>
-          <p className="centered">Introduce sólo valores enteros (sin decimales).</p>
-          <p className="centered">Ejemplo: para 200 PD escribe 2.</p>
+          <p className="centered red-info2">{t('tabs.important')}</p>
+          <p className="centered">{t('tabs.integersOnly')}</p>
+          <p className="centered">{t('tabs.example')}</p>
         </div>
       </fieldset>
       <br />
-      <p className="centered">Cantidad en {sym === '$' ? 'USD' : 'EUR'} a adquirir</p>
+      <p className="centered">{t('tabs.amountLabel', { currency })}</p>
       <form className="centered" onSubmit={(e) => st.pay(e, sym)}>
         <input
           type="number"
-          placeholder={`Cantidad en ${sym === '$' ? 'USD' : 'EUR'}`}
+          placeholder={t('tabs.amountPlaceholder', { currency })}
           min="1"
           max="200"
           step="1"
@@ -207,8 +213,8 @@ function AmountForm({
           onChange={(e) => st.setAmount(e.target.value)}
           required
         />{' '}
-        {sym === '$' ? 'USD' : 'EUR'}
-        {points > 0 && <p className="centered green-info2">Recibirás {points} PD</p>}
+        {currency}
+        {points > 0 && <p className="centered green-info2">{t('tabs.willReceive', { points })}</p>}
         <br /><br />
         <input
           type="checkbox"
@@ -218,11 +224,14 @@ function AmountForm({
           onChange={(e) => st.setAccepted(e.target.checked)}
           required
         />
-        <label htmlFor={`accept-${provider}`}> Acepto los <Link href="/terms-and-conditions" target="_blank">Términos y Condiciones</Link> y la <Link href="/refund-policy" target="_blank">Política de Reembolso</Link></label>
+        <label htmlFor={`accept-${provider}`}>{t.rich('tabs.acceptTerms', {
+          terms: (c) => <Link href="/terms-and-conditions" target="_blank">{c}</Link>,
+          refund: (c) => <Link href="/refund-policy" target="_blank">{c}</Link>,
+        })}</label>
         <br /><br />
         {st.err && <p className="red-form-response">{st.err}</p>}
         <button type="submit" className="dnt-button" disabled={!st.accepted || st.busy}>
-          {st.busy ? 'Redirigiendo…' : buttonLabel}
+          {st.busy ? t('tabs.redirecting') : buttonLabel}
         </button>
       </form>
     </>
@@ -231,28 +240,33 @@ function AmountForm({
 
 /* ---------------------------------- Stripe ---------------------------------- */
 function StripeTab({ realm, sym }: { realm: string; sym: string }) {
+  const t = useTranslations('Points')
   return (
     <div className="box-content dnt-tab dnt-animate">
       <div className="body-box-content">
-        <span>¿Qué es Stripe?</span><img className="pp-icon" src={`${LOGOS}/stripe-logo.svg`} alt="Stripe" />
-        <p>Stripe es una plataforma de pagos en línea segura que procesa tarjetas de crédito y débito de todo el mundo. Tus datos de pago se gestionan directamente en Stripe; {realm} nunca los almacena.<br />Más información sobre Stripe <a href="https://stripe.com/es" target="_blank" rel="noopener noreferrer">aquí</a>.</p>
+        <span>{t('tabs.whatIsStripe')}</span><img className="pp-icon" src={`${LOGOS}/stripe-logo.svg`} alt="Stripe" />
+        <p>{t.rich('tabs.stripeAboutText', {
+          realm,
+          br: () => <br />,
+          link: (c) => <a href="https://stripe.com/es" target="_blank" rel="noopener noreferrer">{c}</a>,
+        })}</p>
         <br />
         <hr />
         <br />
-        <span>¿Cómo adquirir PD a través de Stripe?</span>
-        <p>Al ser un sistema auto-gestionado, las adquisiciones son automáticas y en cuestión de minutos tras completar el pago recibirás los PD en tu cuenta.</p>
+        <span>{t('tabs.howStripe')}</span>
+        <p>{t('tabs.stripeHowText')}</p>
         <br />
         <hr />
         <br />
-        <p>- Introduce en el campo de más abajo la cantidad que deseas adquirir.</p>
-        <p>- Al presionar <span>ADQUIRIR PD</span>, serás redirigido a la pasarela segura de Stripe para completar el pago con tu tarjeta.</p>
-        <p>- Una vez que Stripe valide tu pago, tendrás los PD en tu cuenta de forma automática.</p>
+        <p>{t('tabs.step1')}</p>
+        <p>{t.rich('tabs.stripeStep2', { s: (c) => <span>{c}</span> })}</p>
+        <p>{t('tabs.stripeStep3')}</p>
         <br />
-        <p>Recuerda que la cantidad sólo acepta números enteros y el mínimo posible es {sym}1.</p>
-        <p>Ejemplos de valor incorrecto: <span className="red-info2">{sym}5,90 | {sym}22,30 | {sym}53,10</span></p>
-        <p>Ejemplos de valor correcto: <span className="green-info2">{sym}6 | {sym}22 | {sym}53</span></p>
+        <p>{t('tabs.reminderMin', { sym })}</p>
+        <p>{t.rich('tabs.wrongExamples', { sym, s: (c) => <span className="red-info2">{c}</span> })}</p>
+        <p>{t.rich('tabs.rightExamples', { sym, s: (c) => <span className="green-info2">{c}</span> })}</p>
         <br /><br /><br />
-        <AmountForm provider="stripe" sym={sym} buttonLabel="ADQUIRIR PD" />
+        <AmountForm provider="stripe" sym={sym} buttonLabel={t('tabs.acquireButton')} />
       </div>
     </div>
   )
@@ -260,28 +274,33 @@ function StripeTab({ realm, sym }: { realm: string; sym: string }) {
 
 /* ---------------------------------- SumUp ----------------------------------- */
 function SumUpTab({ realm, sym }: { realm: string; sym: string }) {
+  const t = useTranslations('Points')
   return (
     <div className="box-content dnt-tab dnt-animate">
       <div className="body-box-content">
-        <span>¿Qué es SumUp?</span><img className="pp-icon" src={`${LOGOS}/sumup-logo.svg`} alt="SumUp" />
-        <p>SumUp es una plataforma de pagos europea que permite pagar de forma rápida y segura con tarjeta de crédito o débito. Tus datos de pago se gestionan directamente en SumUp; {realm} nunca los almacena.<br />Más información sobre SumUp <a href="https://sumup.com/es-es/" target="_blank" rel="noopener noreferrer">aquí</a>.</p>
+        <span>{t('tabs.whatIsSumup')}</span><img className="pp-icon" src={`${LOGOS}/sumup-logo.svg`} alt="SumUp" />
+        <p>{t.rich('tabs.sumupAboutText', {
+          realm,
+          br: () => <br />,
+          link: (c) => <a href="https://sumup.com/es-es/" target="_blank" rel="noopener noreferrer">{c}</a>,
+        })}</p>
         <br />
         <hr />
         <br />
-        <span>¿Cómo adquirir PD a través de SumUp?</span>
-        <p>Al ser un sistema auto-gestionado, las adquisiciones son automáticas y tras completar el pago recibirás los PD en tu cuenta.</p>
+        <span>{t('tabs.howSumup')}</span>
+        <p>{t('tabs.sumupHowText')}</p>
         <br />
         <hr />
         <br />
-        <p>- Introduce en el campo de más abajo la cantidad que deseas adquirir.</p>
-        <p>- Al presionar <span>ADQUIRIR PD</span>, serás redirigido a la pasarela segura de SumUp para completar el pago con tu tarjeta.</p>
-        <p>- Una vez que SumUp valide tu pago, tendrás los PD en tu cuenta de forma automática.</p>
+        <p>{t('tabs.step1')}</p>
+        <p>{t.rich('tabs.sumupStep2', { s: (c) => <span>{c}</span> })}</p>
+        <p>{t('tabs.sumupStep3')}</p>
         <br />
-        <p>Recuerda que la cantidad sólo acepta números enteros y el mínimo posible es {sym}1.</p>
-        <p>Ejemplos de valor incorrecto: <span className="red-info2">{sym}5,90 | {sym}22,30 | {sym}53,10</span></p>
-        <p>Ejemplos de valor correcto: <span className="green-info2">{sym}6 | {sym}22 | {sym}53</span></p>
+        <p>{t('tabs.reminderMin', { sym })}</p>
+        <p>{t.rich('tabs.wrongExamples', { sym, s: (c) => <span className="red-info2">{c}</span> })}</p>
+        <p>{t.rich('tabs.rightExamples', { sym, s: (c) => <span className="green-info2">{c}</span> })}</p>
         <br /><br /><br />
-        <AmountForm provider="sumup" sym={sym} buttonLabel="ADQUIRIR PD" />
+        <AmountForm provider="sumup" sym={sym} buttonLabel={t('tabs.acquireButton')} />
       </div>
     </div>
   )