Añadir ruta /d-points (Adquirir PD) con pasarelas multi-método

Reproduce fielmente el panel de compra de PD de UltimoWoW como componente cliente con pestañas (Información, PayPal, dLocal Go, Crypto, Skrill y métodos alternativos por país: Argentina, Chile, Colombia, Perú). - Página servidor con login requerido (redirige a /login y /select-account como battlepay); inyecta username de la cuenta de juego e IP reales. - Pestañas, tabla de rangos con mostrar/ocultar, y calculadora ARS (dolarapi) migradas a estado/efectos de React. - Formularios con casilla de T&C que habilita el botón; PayPal usa PAYPAL_BUSINESS_EMAIL por entorno; dLocal/NOWPayments muestran aviso hasta configurar su backend (no se fabrican credenciales/gateways). - Banderas por país y logo de NOWPayments añadido a nw-logos. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-13 16:59:53 +00:00
parent c3e57ff25e
commit 44fcedbe62
3 changed files with 858 additions and 0 deletions
@@ -0,0 +1,44 @@
+import type { Metadata } from 'next'
+import { headers } from 'next/headers'
+import { setRequestLocale } from 'next-intl/server'
+import { redirect } from '@/i18n/navigation'
+import { getSession } from '@/lib/session'
+import { getRealmName } from '@/lib/realm'
+import { PageShell } from '@/components/PageShell'
+import { DPointsTabs } from '@/components/DPointsTabs'
+
+export const dynamic = 'force-dynamic'
+
+export const metadata: Metadata = { title: 'Adquirir PD' }
+
+export default async function DPointsPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params
+  setRequestLocale(locale)
+
+  const session = await getSession()
+  if (!session.bnetId) redirect({ href: '/login', locale })
+  if (!session.username) redirect({ href: '/select-account', locale })
+
+  const realm = await getRealmName()
+  const h = await headers()
+  const ip = (h.get('x-forwarded-for') || '').split(',')[0].trim() || '0.0.0.0'
+  const host = h.get('x-forwarded-host') || h.get('host') || ''
+  const proto = h.get('x-forwarded-proto') || 'https'
+  const origin = host ? `${proto}://${host}` : ''
+
+  // Pasarelas automáticas: se habilitan al configurar sus credenciales por entorno.
+  const paypalBusiness = process.env.PAYPAL_BUSINESS_EMAIL || ''
+
+  return (
+    <PageShell title="Adquirir PD">
+      <DPointsTabs
+        realm={realm}
+        username={session.username!}
+        ip={ip}
+        locale={locale}
+        origin={origin}
+        paypalBusiness={paypalBusiness}
+      />
+    </PageShell>
+  )
+}
@@ -0,0 +1,814 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Link } from '@/i18n/navigation'
+
+const IMG = '/nw-themes/nw-ryu/nw-images'
+const LOGOS = `${IMG}/nw-logos`
+const RANKS = `${IMG}/nw-ranks`
+const FLAGS = `${IMG}/nw-country-flags`
+
+type TabId = 'Info' | 'PayPal' | 'dLocal' | 'Crypto' | 'Skrill' | 'Argentina' | 'Chile' | 'Colombia' | 'Perú'
+
+// Las banderas son .png sólo para México y Panamá; el resto son .webp.
+function flagSrc(code: string) {
+  const ext = code === 'mx' || code === 'pa' ? 'png' : 'webp'
+  return `${FLAGS}/${code}.${ext}`
+}
+function Flag({ code, name }: { code: string; name: string }) {
+  return <img src={flagSrc(code)} alt={name} title={`WoW ${name}`} />
+}
+
+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'],
+]
+
+export function DPointsTabs({
+  realm,
+  username,
+  ip,
+  locale,
+  origin,
+  paypalBusiness,
+}: {
+  realm: string
+  username: string
+  ip: string
+  locale: string
+  origin: string
+  paypalBusiness: string
+}) {
+  const [active, setActive] = useState<TabId>('Info')
+  const [showRanks, setShowRanks] = useState(false)
+
+  return (
+    <>
+      <div className="body-box-content justified">
+        <div className="dnt-sidebar">
+          <button
+            className={`dnt-button-2 tablink${active === 'Info' ? ' dnt-selected' : ''}`}
+            onClick={() => setActive('Info')}
+          >
+            Información
+          </button>
+          <Link className="back-to-account" href="/account">Regresar a mi cuenta</Link>
+          <Link className="back-to-account-responsive" href="/account">Regresar</Link>
+        </div>
+        <div className="dnt-sidebar dnt-methods">
+          <button className={`dnt-button-2 tablink${active === 'PayPal' ? ' dnt-selected' : ''}`} onClick={() => setActive('PayPal')}>
+            <img src={`${LOGOS}/paypal-p-logo.webp`} alt="PayPal" title="PayPal" /> PayPal
+          </button>
+          <button className={`dnt-button-2 tablink${active === 'dLocal' ? ' dnt-selected' : ''}`} onClick={() => setActive('dLocal')}>
+            <img src={`${LOGOS}/dlocalgo-logo.webp`} alt="dLocal" title="dLocal" /> dLocal go
+          </button>
+          <button className={`dnt-button-2 tablink${active === 'Crypto' ? ' dnt-selected' : ''}`} onClick={() => setActive('Crypto')}>
+            <i className="fab fa-bitcoin" style={{ color: '#f7931a' }}></i>{' '}
+            <span className="new-msg"><sup>¡Nuevo!</sup></span> Crypto
+          </button>
+          <button className={`dnt-button-2 tablink${active === 'Skrill' ? ' dnt-selected' : ''}`} onClick={() => setActive('Skrill')}>
+            <img src={`${LOGOS}/skrill-logo-small.webp`} alt="Skrill" title="Skrill" /> Skrill
+          </button>
+          <button className={`dnt-button-2 tablink${active === 'Argentina' ? ' dnt-selected' : ''}`} onClick={() => setActive('Argentina')}>
+            <Flag code="ar" name="Argentina" /> Argentina
+          </button>
+          <button className={`dnt-button-2 tablink${active === 'Chile' ? ' dnt-selected' : ''}`} onClick={() => setActive('Chile')}>
+            <Flag code="cl" name="Chile" /> Chile
+          </button>
+          <button className={`dnt-button-2 tablink${active === 'Colombia' ? ' dnt-selected' : ''}`} onClick={() => setActive('Colombia')}>
+            <Flag code="co" name="Colombia" /> Colombia
+          </button>
+          <button className={`dnt-button-2 tablink${active === 'Perú' ? ' dnt-selected' : ''}`} onClick={() => setActive('Perú')}>
+            <Flag code="pe" name="Perú" /> Perú
+          </button>
+        </div>
+      </div>
+      <br />
+
+      <div className="dnt-tabs">
+        {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>
+              <br />
+              <hr />
+              <br />
+              <span>¿Cuáles son los niveles disponibles?</span>
+              {!showRanks ? (
+                <p id="rank-div-show" onClick={() => setShowRanks(true)}>Mostrar</p>
+              ) : (
+                <p id="rank-div-hide" style={{ display: 'block' }} onClick={() => setShowRanks(false)}>Ocultar</p>
+              )}
+              {showRanks && (
+                <div className="rank-div" id="rank-div" style={{ display: 'block' }}>
+                  <table className="rank-table">
+                    <tbody>
+                      {RANK_ROWS.map(([file, nivel, desde]) => (
+                        <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>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+              <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>- PayPal (Para todos los países)</p>
+              <p>- dLocal Go para Argentina <Flag code="ar" name="Argentina" />, Bolivia <Flag code="bo" name="Bolivia" />, Chile <Flag code="cl" name="Chile" />, Colombia <Flag code="co" name="Colombia" />, Costa Rica <Flag code="cr" name="Costa Rica" />, Ecuador <Flag code="ec" name="Ecuador" />, Guatemala <Flag code="gt" name="Guatemala" />, México <Flag code="mx" name="México" />, Panamá <Flag code="pa" name="Panamá" />, Perú <Flag code="pe" name="Perú" />, Paraguay <Flag code="py" name="Paraguay" />, Uruguay <Flag code="uy" name="Uruguay" />.</p>
+              <p>- Criptomonedas (Para todos los países)</p>
+              <p>- Skrill (Para todos los países)</p>
+              <p>- Métodos alternativos sólo para Argentina (<Flag code="ar" name="Argentina" /> ARG)</p>
+              <p>- Métodos alternativos sólo para Chile ( <Flag code="cl" name="Chile" /> CHI)</p>
+              <p>- Métodos alternativos sólo para Colombia (<Flag code="co" name="Colombia" /> COL)</p>
+              <p>- Métodos alternativos sólo para Perú (<Flag code="pe" name="Perú" /> PER)</p>
+              <br />
+              <p>Puedes hacer una sugerencia sobre nuevos métodos en nuestro foro de sugerencias <Link href="/forum">aquí</Link>.</p>
+              <br />
+              <hr />
+              <br />
+              <span>¿Cuántos PD se reciben?</span>
+              <p>Cada método indicará cuántos PD se reciben.</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 o el de alguna de nuestras herramientas, 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>
+            </div>
+          </div>
+        )}
+
+        {active === 'PayPal' && (
+          <PayPalTab realm={realm} username={username} ip={ip} origin={origin} locale={locale} paypalBusiness={paypalBusiness} />
+        )}
+        {active === 'dLocal' && <DLocalTab username={username} realm={realm} />}
+        {active === 'Crypto' && <CryptoTab username={username} realm={realm} />}
+        {active === 'Skrill' && <SkrillTab />}
+        {active === 'Argentina' && <ArgentinaTab />}
+        {active === 'Chile' && <ChileTab />}
+        {active === 'Colombia' && <ColombiaTab />}
+        {active === 'Perú' && <PeruTab />}
+      </div>
+    </>
+  )
+}
+
+/* ---------- Nota común para pasarelas automáticas sin backend configurado ---------- */
+function gatewayUnavailable(realm: string) {
+  alert(`Este método de pago aún no está disponible en ${realm}. Por favor, inténtalo de nuevo más tarde o utiliza otro método.`)
+}
+
+/* ---------------------------------- PayPal ---------------------------------- */
+function PayPalTab({
+  realm,
+  username,
+  ip,
+  origin,
+  locale,
+  paypalBusiness,
+}: {
+  realm: string
+  username: string
+  ip: string
+  origin: string
+  locale: string
+  paypalBusiness: string
+}) {
+  const [accepted, setAccepted] = useState(false)
+  const configured = Boolean(paypalBusiness)
+
+  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+    if (!configured) {
+      e.preventDefault()
+      gatewayUnavailable(realm)
+      return
+    }
+    const form = e.currentTarget
+    const amount = (form.elements.namedItem('amount') as HTMLInputElement)?.value
+    if (!window.confirm(`Por favor revisa que el valor en USD que has ingresado es correcto.\nEl valor ingresado es el costo final en USD que pagarás al ser redirigido.\n\nEl monto a pagar es ${amount} USD.`)) {
+      e.preventDefault()
+    }
+  }
+
+  return (
+    <div className="box-content dnt-tab dnt-animate">
+      <div className="body-box-content">
+        <span>¿Qué es PayPal?</span><img className="pp-icon" src={`${LOGOS}/paypal-logo.webp`} alt="PayPal" />
+        <p>Un servicio que te permite pagar, enviar dinero y aceptar pagos sin tener que introducir tus datos financieros continuamente. Paga con PayPal de forma más rápida y segura. 250 millones de personas de más de 200 países y mercados usan PayPal. Y en 25 divisas.<br />Más información sobre PayPal <a href="https://www.paypal.com/es/webapps/mpp/paypal-popup" target="_blank" rel="noopener noreferrer">aquí</a>.</p>
+        <br />
+        <hr />
+        <br />
+        <span>¿Cómo adquirir PD a través de PayPal?</span>
+        <p>Al ser un sistema auto-gestionado, las adquisiciones mediante este sistema son automáticas y en cuestión de minutos tras realizar tu compra, recibirás los PD en tu cuenta en la página web.</p>
+        <br />
+        <hr />
+        <br />
+        <p>- Introduce en el campo de texto que aparece más abajo (el recuadro negro), la cantidad que deseas adquirir en USD.</p>
+        <p>- Al presionar el botón ADQUIRIR PD, serás redirigido a la plataforma de PayPal donde tendrás que ingresar con tu cuenta de PayPal y confirmar la compra en su plataforma.</p>
+        <p>- Una vez que PayPal valide tu pago, tendrás los PD en tu cuenta.</p>
+        <br />
+        <p>Por favor ten en cuenta que a la hora de realizar tu compra, la cantidad a adquirir sólo acepta números enteros y el mínimo posible es $1 USD.</p>
+        <p>Ejemplos de valor incorrecto: <span className="red-info2">$5,90 | $22,30 | $53,10</span></p>
+        <p>Ejemplos de valor correcto: <span className="green-info2">$6 | $22 | $53</span></p>
+        <br /><br /><br />
+        <p className="yellow-info centered">$1 USD = 100 PD</p>
+        <p className="centered second-brown">Valor máximo por transacción: $200</p>
+        <br />
+        <fieldset>
+          <div className="separate2">
+            <p className="centered red-info2">¡Importante!</p>
+            <p className="centered">No añadas ceros decimales, sólo valores enteros.</p>
+            <p className="centered">Ejemplo: Si deseas 200 PD, escribe sólo el número 2, sin ceros.</p>
+          </div>
+        </fieldset>
+        <br />
+        <p className="centered">Cantidad en USD a adquirir</p>
+        <form className="centered" name="_xclick" id="pp-purch-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" onSubmit={onSubmit}>
+          <input type="hidden" name="cmd" value="_xclick" />
+          <input type="number" name="amount" id="pp-input-value" placeholder="Cantidad en USD" min="1" max="200" step="1" required /> USD
+          <input type="hidden" name="charset" value="utf-8" />
+          <input type="hidden" name="custom" value={`username=${username}&ip=${ip}`} />
+          <input type="hidden" name="currency_code" value="USD" />
+          <input type="hidden" name="item_name" value="Points" />
+          <input type="hidden" name="item_number" value="2023" />
+          <input type="hidden" name="business" value={paypalBusiness} />
+          <input type="hidden" name="return" value={`${origin}/${locale}/account`} />
+          <input type="hidden" name="cancel_return" value={`${origin}/${locale}/account`} />
+          <input type="hidden" name="notify_url" value={`${origin}/api/paypal/ipn`} />
+          <br /><br />
+          <input type="checkbox" id="accept-terms-refund-pp" className="terms-check" name="accept-terms-refund-pp" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} required />
+          <label htmlFor="accept-terms-refund-pp"> 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>
+          <br /><br />
+          <input type="submit" id="pp-dnt-button" className="dnt-button" value="ADQUIRIR PD" disabled={!accepted} />
+        </form>
+      </div>
+    </div>
+  )
+}
+
+/* ---------------------------------- dLocal ---------------------------------- */
+function DLocalTab({ username, realm }: { username: string; realm: string }) {
+  const [accepted, setAccepted] = useState(false)
+  return (
+    <div className="box-content dnt-tab dnt-animate">
+      <div className="body-box-content">
+        <span>¿Qué es dLocal Go?</span><img className="pp-icon" src={`${LOGOS}/dlocalgo-logo.webp`} alt="dLocal Go" />
+        <p>dLocal Go es una plataforma de pagos que permite una conexión en directo con todas las tarjetas de crédito y débito, pagos en efectivo y transferencias bancarias en diferentes países de América Latina.<br />Más información sobre dLocal Go <a href="https://dlocalgo.com/" target="_blank" rel="noopener noreferrer">aquí</a>.</p>
+        <br />
+        <hr />
+        <br />
+        <span>¿Cómo adquirir PD a través de dlocal Go?</span>
+        <p>Al ser un sistema auto-gestionado, las adquisiciones mediante este sistema son automáticas y tras realizar tu compra, recibirás los PD en tu cuenta en la página web.</p>
+        <div className="trade-information">
+          <p>Tiempo aproximado de procesamiento de pagos según método:</p>
+          <p>- Tarjeta de crédito/debito: De minutos a 1 día hábil</p>
+          <p>- Efectivo: 1 a 2 días hábiles</p>
+          <p>- Transferencia bancaria: 1 día hábil</p>
+        </div>
+        <br /><br />
+        <p><i className="fas fa-exclamation-triangle"></i> <span>Importante:</span></p>
+        <p>Los tiempos indicados en la tabla son orientativos. En algunas ocasiones, la demora puede ser mayor.</p>
+        <p>Ante cualquier duda con la demora, por favor contáctanos en nuestra plataforma de Discord o a través de los medios de contacto disponibles en <Link href="/help">Ayuda</Link>.</p>
+        <br />
+        <hr />
+        <br />
+        <p>- Introduce en el campo de texto que aparece más abajo (el recuadro negro), la cantidad que deseas adquirir en USD.</p>
+        <p>- Al presionar el botón ADQUIRIR PD, serás redirigido a la plataforma de dLocal Go donde tendrás que realizar el pago y completar la compra en su plataforma.</p>
+        <p>- Una vez que dLocal Go valide tu pago, tendrás los PD en tu cuenta.</p>
+        <br />
+        <p>Por favor ten en cuenta que a la hora de realizar tu compra, la cantidad a adquirir sólo acepta números enteros y el mínimo posible es $2 USD.</p>
+        <p>Ejemplos de valor incorrecto: <span className="red-info2">$5,90 | $22,30 | $53,10</span></p>
+        <p>Ejemplos de valor correcto: <span className="green-info2">$6 | $22 | $53</span></p>
+        <br /><br /><br />
+        <p className="yellow-info centered">$1 USD = 100 PD</p>
+        <p className="centered second-brown">Valor mínimo por transacción: $2</p>
+        <br />
+        <p className="centered">Cantidad en USD a adquirir</p>
+        <form className="centered" id="dlocal-form" onSubmit={(e) => { e.preventDefault(); if (!accepted) { alert('Debes aceptar los Términos y Condiciones y la Política de Reembolso'); return } gatewayUnavailable(realm) }}>
+          <input type="number" placeholder="Cantidad en USD" min="2" step="1" max="200" id="cantidad" name="cantidad" required /> USD
+          <input type="hidden" id="username" name="username" value={username} />
+          <br /><br />
+          <input type="checkbox" id="accept-terms-refund-dl" className="terms-check" name="accept-terms-refund-dl" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} required />
+          <label htmlFor="accept-terms-refund-dl"> 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>
+          <br /><br />
+          <button className="dnt-button" id="dl-dnt-button" type="submit" disabled={!accepted}>Adquirir PD</button>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+/* ---------------------------------- Crypto ---------------------------------- */
+function CryptoTab({ username, realm }: { username: string; realm: string }) {
+  const [accepted, setAccepted] = useState(false)
+  return (
+    <div className="box-content dnt-tab dnt-animate">
+      <div className="body-box-content">
+        <span>¿Qué son las criptomonedas?</span><img className="pp-icon" src={`${LOGOS}/nowpayments-logo.png`} alt="NOWPayments" title="NOWPayments" />
+        <p>Las criptomonedas son monedas digitales descentralizadas que permiten realizar pagos de forma rápida, segura y sin intermediarios. Aceptamos más de 150 criptomonedas a través de NOWPayments.</p>
+        <p>Más información sobre NOWPayments <a href="https://nowpayments.io/" target="_blank" rel="noopener noreferrer">aquí</a>.</p>
+        <br />
+        <hr />
+        <br />
+        <span>¿Cómo adquirir PD con criptomonedas?</span>
+        <p>Al ser un sistema auto-gestionado, las adquisiciones mediante este sistema son automáticas y tras realizar tu compra, recibirás los PD en tu cuenta en la página web.</p>
+        <div className="trade-information">
+          <p>Tiempo aproximado de procesamiento según criptomoneda:</p>
+          <p>- BNB, USDT (BSC), USDC (BSC): 1-5 minutos</p>
+          <p>- ETH (Base), USDC (Base): 1-5 minutos</p>
+          <p>- Bitcoin (BTC): 10-60 minutos</p>
+        </div>
+        <br /><br />
+        <p><i className="fas fa-exclamation-triangle"></i> <span>Importante:</span></p>
+        <p>Los tiempos indicados son orientativos y dependen de la congestión de la red blockchain.</p>
+        <p>Ante cualquier duda, por favor contáctanos en nuestra plataforma de Discord o a través de los medios de contacto disponibles en <Link href="/help">Ayuda</Link>.</p>
+        <br />
+        <hr />
+        <br />
+        <p>- Introduce en el campo de texto la cantidad que deseas adquirir en USD.</p>
+        <p>- Al presionar el botón ADQUIRIR PD, serás redirigido a la plataforma de NOWPayments donde podrás elegir la criptomoneda con la que deseas pagar.</p>
+        <p>- Una vez que NOWPayments confirme tu pago en la blockchain, tendrás los PD en tu cuenta.</p>
+        <br />
+        <p>Por favor ten en cuenta que la cantidad a adquirir sólo acepta números enteros y el mínimo posible es $2 USD.</p>
+        <p>Ejemplos de valor incorrecto: <span className="red-info2">$5,90 | $22,30 | $53,10</span></p>
+        <p>Ejemplos de valor correcto: <span className="green-info2">$6 | $22 | $53</span></p>
+        <br /><br /><br />
+        <p className="yellow-info centered">$1 USD = 100 PD</p>
+        <p className="centered second-brown">Valor mínimo por transacción: $2 | Valor máximo: $200</p>
+        <br />
+        <fieldset>
+          <div className="separate2">
+            <p className="centered red-info2">¡Importante!</p>
+            <p className="centered">Envía el monto <span>EXACTO</span> que indica NOWPayments.</p>
+            <p className="centered">Si envías menos, el pago quedará pendiente y deberás contactar a soporte.</p>
+          </div>
+        </fieldset>
+        <br />
+        <p className="centered">Cantidad en USD a adquirir</p>
+        <form className="centered" id="nowpayments-form" onSubmit={(e) => { e.preventDefault(); if (!accepted) { alert('Debes aceptar los Términos y Condiciones y la Política de Reembolso'); return } gatewayUnavailable(realm) }}>
+          <input type="number" placeholder="Cantidad en USD" min="2" max="200" step="1" id="cantidad-np" name="cantidad" required /> USD
+          <input type="hidden" id="username-np" name="username" value={username} />
+          <br /><br />
+          <input type="checkbox" id="accept-terms-refund-np" className="terms-check" name="accept-terms-refund-np" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} required />
+          <label htmlFor="accept-terms-refund-np"> 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>
+          <br /><br />
+          <button className="dnt-button" id="np-dnt-button" type="submit" disabled={!accepted}>Adquirir PD</button>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+/* ---------------------------------- Skrill ---------------------------------- */
+function SkrillTab() {
+  return (
+    <div className="box-content dnt-tab dnt-animate">
+      <div className="body-box-content">
+        <span>¿Qué es Skrill?</span><img className="pp-icon" src={`${LOGOS}/skrill-logo.webp`} alt="Skrill" />
+        <p>Skrill es una plataforma de pagos en línea rápida y segura. Envía dinero, paga y recibe pagos sin ingresar tus datos financieros constantemente. Presente en 200 países y acepta 40 monedas.</p>
+        <p>Más información sobre Skrill <a href="https://www.skrill.com/es/" target="_blank" rel="noopener noreferrer">aquí</a>.</p>
+        <br />
+        <hr />
+        <br />
+        <span>¿Cuál es el valor de los PD?</span>
+        <p>El valor será calculado según país en base al cambio indicado en el momento del envío.</p>
+        <br />
+        <p className="yellow-info centered">$1 USD = 100 PD</p>
+        <br />
+        <hr />
+        <br />
+        <span>¿Cómo adquirir PD por Skrill?</span>
+        <p>Paso 1) Inicia sesión en Skrill. Accede a tu cuenta desde la aplicación o la página web oficial de Skrill.</p>
+        <br />
+        <p>Paso 2) Envía el dinero</p>
+        <p>1. Selecciona la opción &quot;Enviar&quot; o &quot;Send Money&quot;.</p>
+        <p>2. Elige &quot;Skrill a Skrill&quot;.</p>
+        <p>3. Introduce el correo del destinatario: <a href="mailto:skrill@ultimowow.com">skrill@ultimowow.com</a></p>
+        <p>4. Indica el importe que deseas enviar.</p>
+        <p>5. Revisa los datos y confirma la operación.</p>
+        <br />
+        <p>Paso 3) Guarda el comprobante</p>
+        <p>Una vez completado el pago, realiza una captura de pantalla donde se vea claramente:</p>
+        <p>- El correo del destinatario.</p>
+        <p>- El importe enviado.</p>
+        <p>- El estado de la transacción (Completada, Exitosa o similar).</p>
+        <br />
+        <p>Paso 4) Envía la información</p>
+        <p>Envía un correo a <a href="mailto:skrill@ultimowow.com">skrill@ultimowow.com</a> indicando:</p>
+        <p className="second-brown">- El nombre de cualquier personaje de la cuenta donde deseas recibir los PD.</p>
+        <p className="second-brown">- La captura de pantalla de la transacción. No envíes el comprobante en formato PDF.</p>
+        <br />
+        <p>Paso 5) Recepción de PD</p>
+        <p>Una vez verificado el pago, los PD serán acreditados en tu cuenta lo antes posible. Cuando la entrega haya sido completada, serás informado.</p>
+        <br />
+        <hr />
+        <br />
+        <span>Contacto</span>
+        <p>Correo: <a href="mailto:skrill@ultimowow.com">skrill@ultimowow.com</a></p>
+        <br />
+        <p><i className="fas fa-exclamation-triangle"></i> Este método no es automático sino manual siendo realizado por la persona encargada.</p>
+        <p>Recomendamos no realizar ninguna acción sin comprobar primero si la persona encargada está disponible para entregar los PD.</p>
+      </div>
+    </div>
+  )
+}
+
+/* -------------------------------- Argentina --------------------------------- */
+function ArgentinaTab() {
+  const [usd, setUsd] = useState(1)
+  const [rate, setRate] = useState<number | null>(null)
+
+  useEffect(() => {
+    let alive = true
+    fetch('https://dolarapi.com/v1/dolares/oficial')
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error('HTTP ' + r.status))))
+      .then((j) => { if (alive) setRate(typeof j?.venta === 'number' ? j.venta : null) })
+      .catch(() => {})
+    return () => { alive = false }
+  }, [])
+
+  const fmtARS = (v: number) => v.toLocaleString('es-AR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+  const validUsd = Number.isInteger(usd) && usd >= 1
+  const arsText = rate && validUsd ? fmtARS(rate * usd) : '—'
+  const pdText = validUsd ? String(usd * 100) : '—'
+
+  return (
+    <div className="box-content dnt-tab dnt-animate">
+      <div className="body-box-content">
+        <span>¿Qué son los métodos alternativos para Argentina?</span>
+        <p>Son métodos disponibles para Argentina para aquellos que no tienen acceso a PayPal.</p>
+        <p>Este método trabaja con Pesos Argentinos.</p>
+        <br />
+        <hr />
+        <br />
+        <span>Métodos disponibles</span>
+        <p>- Transferencia bancaria en pesos argentinos (ARS)</p>
+        <br />
+        <hr />
+        <br />
+        <span>¿Cuál es el valor de los PD?</span>
+        <p>La cantidad de Pesos según país será en base al cambio indicado en el momento de la transferencia.</p>
+        <p>El siguiente recuadro permite hacer una conversión de USD a Pesos argentinos mostrando el valor final y no habrá impuestos ni recargos.</p>
+        <p>Se puede cambiar los valores para ver el precio de la cantidad deseada de PD.</p>
+        <br />
+        <p className="centered">
+          <span>Calculadora de conversión</span>
+          <br /><br />
+          <input
+            type="number"
+            min="1"
+            step="1"
+            value={usd}
+            onChange={(e) => setUsd(parseInt(e.target.value, 10))}
+            style={{ width: '60px', textAlign: 'center' }}
+          />{' '}
+          <span className="yellow-info">USD =</span>{' '}
+          <span id="ars-output">{arsText}</span> <span className="yellow-info">ARS =</span>{' '}
+          <span id="pd-output">{pdText}</span> <span className="yellow-info">PD</span>
+        </p>
+        <br />
+        <hr />
+        <br />
+        <span>¿Cómo adquirir PD por Transferencia?</span>
+        <p>Paso 1) Realiza la transferencia con los siguientes datos:</p>
+        <p>&nbsp;&nbsp;&nbsp;El valor en ARS puede obtenerse usando la calculadora disponible.</p>
+        <p>&nbsp;&nbsp;&nbsp;Ejemplo: Si deseas 200 PD, coloca 2 en la casilla USD y te dirá el monto en ARS</p>
+        <p>&nbsp;&nbsp;&nbsp;<span className="red-info2">Envía el monto exacto que indica la calculadora.</span></p>
+        <br />
+        <p>Paso 2) Envia el correo detallando:</p>
+        <p className="second-brown">&nbsp;- Nombre de cualquier PERSONAJE de la cuenta donde deseas recibir los PD.</p>
+        <p className="second-brown">&nbsp;- Cantidad de PD deseada.</p>
+        <p>Paso 3) Adjunta al correo una captura de pantalla (imagen, no pdf) del comprobante.</p>
+        <p>Paso 4) Envia el correo a la dirección indicada en <span>Contacto</span>.</p>
+        <p>Paso 5) Espera la respuesta al correo enviado.</p>
+        <p>Paso 6) Dentro del horario de atención, serás informado que has recibido los PD.</p>
+        <br />
+        <hr />
+        <br />
+        <span>Contacto</span>
+        <p>Correo: <a href="mailto:arg@ultimowow.com">arg@ultimowow.com</a></p>
+        <p>Lunes a Viernes por las tardes (Horario Argentina).</p>
+        <br /><br />
+        <p><i className="fas fa-exclamation-triangle"></i> Este método no es automático sino manual siendo realizado por la persona encargada.</p>
+        <p>Recomendamos no realizar ninguna acción sin comprobar primero si la persona encargada está disponible para entregar los PD.</p>
+      </div>
+    </div>
+  )
+}
+
+/* ----------------------------------- Chile ---------------------------------- */
+function ChileTab() {
+  const rows: [string, string][] = [
+    ['1.200 Pesos Chilenos', '100 PD'],
+    ['3.600 Pesos Chilenos', '300 PD'],
+    ['6.000 Pesos Chilenos', '500 PD'],
+    ['9.600 Pesos Chilenos', '800 PD'],
+    ['12.000 Pesos Chilenos', '1000 PD'],
+    ['30.000 Pesos Chilenos', '2500 PD'],
+    ['60.000 Pesos Chilenos', '5000 PD'],
+  ]
+  return (
+    <div className="box-content dnt-tab dnt-animate">
+      <div className="body-box-content">
+        <span>¿Qué son los métodos alternativos para Chile?</span>
+        <p>Son métodos disponibles para Chile para aquellos que no tienen acceso a PayPal.</p>
+        <p>Este método trabaja con Pesos Chilenos.</p>
+        <br />
+        <hr />
+        <br />
+        <span>Métodos disponibles</span>
+        <p>- Transferencia bancaria en pesos chilenos (CLP)</p>
+        <p>- Mach en pesos chilenos (CLP)</p>
+        <br />
+        <hr />
+        <br />
+        <span>¿Cuál es el valor de los PD?</span>
+        <table className="points-center-table">
+          <tbody>
+            <tr><th>Precio</th><th>PD</th></tr>
+            {rows.map(([p, pd]) => (<tr key={p}><td>{p}</td><td>{pd}</td></tr>))}
+          </tbody>
+        </table>
+        <br />
+        <hr />
+        <br />
+        <span>¿Cómo adquirir PD por Transferencia?</span>
+        <p>Paso 1) Contacta con la persona encargada mediante Discord. El medio de contacto aparece al final de esta sección.</p>
+        <p>Paso 2) Debes informarle:</p>
+        <p>- Nombre de cualquier personaje de la cuenta donde deseas recibir los PD.</p>
+        <p>- Cantidad de PD deseada.</p>
+        <p>Paso 3) La persona encargada te dará los datos necesarios para la transferencia.</p>
+        <p>Paso 4) Confirma con la persona encargada el costo final antes de realizar la transferencia.</p>
+        <p>Si usas el método Mach, se te entregará un código QR para realizar la transferencia.</p>
+        <p>Paso 5) Una vez realizada la transferencia, deberás enviarla como imagen (no como archivo pdf) a la persona encargada.</p>
+        <p>Paso 6) Serás informado que has recibido los PD.</p>
+        <br />
+        <hr />
+        <br />
+        <span>Contacto</span>
+        <p>- Discord al usuario <span className="blue-gm">Bhaal</span> (ID <span className="blue-gm">dakiron</span>)</p>
+        <br />
+        <button className="discord-button" onClick={() => window.open('https://discordapp.com/users/300063037958914048', '_blank')}><img className="discord-icon" src={`${LOGOS}/discord-logo.webp`} alt="Discord" /> Discord</button>
+        <br /><br />
+        <p>* Asegúrate que la persona que contactes tiene rango <span className="blue-gm">Maestro de Juego</span> en nuestro discord.</p>
+        <br />
+        <p><i className="fas fa-exclamation-triangle"></i> Este método no es automático sino manual siendo realizado por la persona encargada.</p>
+        <p>Recomendamos no realizar ninguna acción sin comprobar primero si la persona encargada está disponible para entregar los PD.</p>
+      </div>
+    </div>
+  )
+}
+
+/* --------------------------------- Colombia --------------------------------- */
+function ColombiaTab() {
+  const rows: [string, string][] = [
+    ['17.200 Pesos Colombianos', '300 PD'],
+    ['23.000 Pesos Colombianos', '400 PD'],
+    ['28.700 Pesos Colombianos', '500 PD'],
+    ['34.400 Pesos Colombianos', '600 PD'],
+    ['57.350 Pesos Colombianos', '1000 PD'],
+    ['143.350 Pesos Colombianos', '2500 PD'],
+  ]
+  return (
+    <div className="box-content dnt-tab dnt-animate">
+      <div className="body-box-content">
+        <span>¿Qué son los métodos alternativos para Colombia?</span>
+        <p>Son métodos disponibles para Colombia para aquellos que no tienen acceso a PayPal que se lleva a cabo a través de un representante oficial, a través de diversos métodos de pago para un país en específico.</p>
+        <p>Este método trabaja con Pesos Colombianos.</p>
+        <br />
+        <hr />
+        <br />
+        <span>¿Cuál es el valor de los PD?</span>
+        <table className="points-center-table">
+          <tbody>
+            <tr><th>Precio</th><th>PD</th></tr>
+            {rows.map(([p, pd]) => (<tr key={p}><td>{p}</td><td>{pd}</td></tr>))}
+          </tbody>
+        </table>
+        <br />
+        <hr />
+        <br />
+        <span>¿Cómo adquiir PD por Representante?</span>
+        <p>Para realizar una adquisición y recibir tus PD, tienes varios medios disponibles:</p>
+        <p>- Recarga NEQUI en Efectivo</p>
+        <p>- Recarga NEQUI mediante PSE</p>
+        <p>- Transferencia mediante NEQUI</p>
+        <p>- Consignación o transferencia bancaria</p>
+        <br />
+        <fieldset>
+          <legend>Por Recarga NEQUI en Efectivo</legend><img className="bolivia-banks-icon" src={`${LOGOS}/nequi-logo.webp`} alt="Nequi" />
+          <div className="separate">
+            <p>1 - Ubica el punto más cercano a donde estés <a href="https://www.nequi.com.co/mapas/" target="_blank" rel="noopener noreferrer">aquí</a>.</p>
+            <p>2 - Al entrar te solicitará conocer tu ubicación y debes hacer clic al botón Permitir.</p>
+            <p>3 - Cuando la web te pregunte ¿Qué quieres hacer? Selecciona la opción Recargar.</p>
+            <p>4 - Mira las ubicaciones que te aparecen señalados en el mapa en color amarillo (Para ver la dirección exacta toca el punto que deseas ver en el mapa).</p>
+            <p>5 - Ve al establecimiento elegido e indica que quieres Recargar a NEQUI X Pesos donde X es la cantidad de pesos correspondiente a los PD deseados (Verifica la tabla y coloca el valor correctamente).</p>
+            <p>6 - Necesitarás dar la siguiente información:</p>
+            <br />
+            <ul>
+              <li>Número de convenio: <span>63703</span></li>
+              <li>Número de celular: <span>3133639892</span></li>
+            </ul>
+            <br />
+            <p>7 - Solicita recibo de la transacción.</p>
+            <p>8 - Escanea o toma una foto de dicho recibo y envíalo al representante junto con la cantidad de PD y el nombre del personaje donde deseas recibir los PD.</p>
+            <p>9 - Espera a que el encargado te envíe respuesta por el medio que le enviaste el mensaje donde te indicará que ya fueron cargados los PD.</p>
+          </div>
+        </fieldset>
+        <br />
+        <fieldset>
+          <legend>Por Recarga NEQUI mediante PSE</legend><img className="bolivia-banks-icon" src={`${LOGOS}/nequi-logo.webp`} alt="Nequi" />
+          <div className="separate">
+            <p>El recargar NEQUI por PSE es un método que permite enviar dinero de una cuenta bancaria (de casi cualquier banco) a NEQUI.</p>
+            <p>Nota: Este método puede implicar que tengas activo algunos servicios en el banco donde tienes tu cuenta para poder realizarlo.</p>
+            <br />
+            <p>1 - Ingresa a la web de <a href="https://www.nequi.com.co/" target="_blank" rel="noopener noreferrer">Nequi</a>.</p>
+            <p>2 - Haz clic en la opción Recarga.</p>
+            <p>3 - Aparecerá un formulario que solicitará la siguiente información:</p>
+            <br />
+            <ul>
+              <li>Número de celular: <span>3133639892</span></li>
+              <li>Confirma el número de celular: <span>3133639892</span></li>
+              <li>Tipo de persona: <span>Natural</span></li>
+              <li>Cantidad: <span>Cantidad correspondiente a los PD deseados (Verifica la tabla y coloca correctamente el valor)</span></li>
+            </ul>
+            <br />
+            <p>4 - Haz clic en No soy robot y de ahí a Continuar.</p>
+            <p>5 - Al momento de dar a Continuar serás redireccionado a la web oficial de PSE, donde deberás ingresar TU cuenta de PSE (si nunca antes haz hecho pagos por PSE deberás registrarte).</p>
+            <p>6 - Cuando ingreses la cuenta de PSE serás redireccionado a la web de tu banco que accede a este servicio donde deberás completar el proceso que tenga el banco de TU cuenta bancaria (puede que algunos bancos cobren adicional por el acceso o uso de este servicio).</p>
+            <p>7 - Una vez completado y finalizado el pago por PSE, serás re direccionado a NEQUI donde te mostrará un enlace con el mensaje Ver comprobante al cual debes hacerle clic.</p>
+            <p>8 - Descarga el comprobante de pago para generar un archivo en formato pdf y envíalo al representante junto con la cantidad de PD y el nombre del personaje donde deseas recibir los PD.</p>
+            <p>9 - Espera a que el encargado te envíe respuesta por el medio que le enviaste el mensaje donde te indicará que ya fueron cargados los PD.</p>
+          </div>
+        </fieldset>
+        <br />
+        <fieldset>
+          <legend>Transferencia mediante NEQUI</legend><img className="bolivia-banks-icon" src={`${LOGOS}/nequi-logo.webp`} alt="Nequi" />
+          <div className="separate">
+            <p>1 - Ingresa a tu cuenta NEQUI Desde la App móvil de NEQUI Colombia.</p>
+            <p>2 - Al ingresar, selecciona el botón con el símbolo $ de color rosa.</p>
+            <p>3 - Selecciona la opción Envía plata.</p>
+            <p>4 - Indica desde dónde enviarás el dinero.</p>
+            <p>5 - En los campos que están en Envía a NEQUI coloca la siguiente información:</p>
+            <br />
+            <ul>
+              <li>Número de celular: <span>3133639892</span></li>
+              <li>Cantidad: <span>Cantidad correspondiente a los PD deseados (Verifica la tabla y coloca correctamente el valor)</span></li>
+              <li>Mensaje: <span>PD UltimoWoW</span></li>
+            </ul>
+            <br />
+            <p>6 - Presiona Continuar.</p>
+            <p>7 - Una vez que se termine de procesar el pago te mostrará la lista de tus movimientos, en el último sale el nombre de la persona relacionada a la cuenta transferida que es ROBERT PENA.</p>
+            <p>8 - Selecciona dicho movimiento para que te muestre los detalles del mismo.</p>
+            <p>9 - Toma una captura de pantalla de los detalles y envíalo al representante junto con la cantidad de PD y el nombre del personaje donde deseas recibir los PD.</p>
+            <p>10 - Espera a que el encargado te envíe respuesta por el medio que le enviaste el mensaje donde te indicará que ya fueron cargados los PD.</p>
+          </div>
+        </fieldset>
+        <br />
+        <fieldset>
+          <legend>Consignación o Transferencia a cuenta bancaria</legend><img className="bolivia-banks-icon" src={`${LOGOS}/bancolombia-logo.webp`} alt="Bancolombia" />
+          <div className="separate">
+            <p>Mediante este método deberas realizar una consignación en un banco o corresponsal bancario por el valor de los PD que quieres adquirir (Verifica la tabla y coloca correctamente el valor).</p>
+            <br />
+            <p>1 - Cuando realices la consignación te solicitarán los siguientes datos:</p>
+            <br />
+            <ul>
+              <li>Número de cuenta: <span>203-133849-78</span></li>
+              <li>A nombre de: <span>Robert Camilo Peña</span></li>
+              <li>Tipo de cuenta: <span>De ahorros</span></li>
+              <li>Banco: <span>Bancolombia</span></li>
+            </ul>
+            <br />
+            <p>2 - Solicita copia del recibo de transacción.</p>
+            <p>3 - Escanea o toma una foto del recibo y envíalo al representante junto con la cantidad de PD y el nombre del personaje donde deseas recibir los PD.</p>
+            <p>4 - Espera a que el encargado te envíe respuesta por el medio que le enviaste el mensaje donde te indicará que ya fueron cargados los PD.</p>
+          </div>
+        </fieldset>
+        <br />
+        <hr />
+        <br />
+        <span>¿Cómo contactar con el Representante?</span>
+        <p>Nombre: Robert Peña</p>
+        <p>Usuario de Discord: <span className="blue-gm">Raziel#1403</span></p>
+        <p>Lunes a Jueves: 15:00 a 22:00 (Horario Colombia)</p>
+        <p>Sábados y Domingos: 18:00 a 23:00 (Horario Colombia)</p>
+        <p className="red-info2">Importante: Los días Viernes no hay atención</p>
+        <br />
+        <button className="discord-button" onClick={() => window.open('https://discordapp.com/users/1053037915065831425', '_blank')}><img className="discord-icon" src={`${LOGOS}/discord-logo.webp`} alt="Discord" /> Discord</button>
+        <button className="wp-button" onClick={() => window.open('https://wa.me/573195069649', '_blank')}><img className="wp-icon" src={`${LOGOS}/whatsapp-logo.webp`} alt="WhatsApp" /> Whatsapp</button>
+        <br />
+      </div>
+    </div>
+  )
+}
+
+/* ----------------------------------- Perú ----------------------------------- */
+function PeruTab() {
+  const rows: [string, string][] = [
+    ['5.5 Soles Peruanos', '100 PD'],
+    ['25,5 Soles Peruanos', '500 PD'],
+    ['40 Soles Peruanos', '800 PD'],
+    ['48 Soles Peruanos', '1000 PD'],
+    ['118 Soles Peruanos', '2500 PD'],
+  ]
+  return (
+    <div className="box-content dnt-tab dnt-animate">
+      <div className="body-box-content">
+        <span>¿Qué son los métodos alternativos para Perú?</span>
+        <p>Son métodos disponibles para aquellos que no tienen acceso a PayPal que se lleva a cabo a través de un representante oficial, a través de diversos métodos de pago para un país en específico.</p>
+        <p>Este método trabaja con Soles Peruanos.</p>
+        <br />
+        <hr />
+        <br />
+        <span>¿Cuál es el valor de los PD?</span>
+        <table className="points-center-table">
+          <tbody>
+            <tr><th>Precio</th><th>PD</th></tr>
+            {rows.map(([p, pd]) => (<tr key={p}><td>{p}</td><td>{pd}</td></tr>))}
+          </tbody>
+        </table>
+        <br />
+        <hr />
+        <br />
+        <span>¿Cómo adquirir PD por Representante?</span>
+        <p>Para realizar una adquisición y recibir tus PD, tienes varios medios disponibles:</p>
+        <p>- Recarga por medio de YAPE</p>
+        <p>- Recarga por medio de PLIN</p>
+        <p>- Pago presencial mediante OFICINA (LIMA)</p>
+        <p>- Transferencia bancaria y interbancaria</p>
+        <br />
+        <fieldset>
+          <legend>Recarga por medio de YAPE</legend>
+          <div className="separate">
+            <img className="peru-logo" src={`${LOGOS}/yape-peru.png`} alt="Yape" />
+          </div>
+        </fieldset>
+        <br />
+        <fieldset>
+          <legend>Pago por medio de PLIN</legend>
+          <div className="separate">
+            <p>Pago mediante número.</p>
+            <br />
+            <img className="peru-logo" src={`${LOGOS}/plin-peru.webp`} alt="Plin" />
+          </div>
+        </fieldset>
+        <br />
+        <fieldset>
+          <legend>Pago presencial mediante OFICINA</legend>
+          <div className="separate">
+            <p>Contactarse con el número mediante 941841649 previamente cita.</p>
+            <br />
+            <img className="peru-logo" src={`${LOGOS}/oficina-peru.png`} alt="Oficina" />
+          </div>
+        </fieldset>
+        <br />
+        <fieldset>
+          <legend>Transferencia bancaria y interbancaria</legend>
+          <div className="separate">
+            <p>Mediante este método deberas realizar una consignación en un banco o corresponsal bancario por el valor de los PD que quieres adquirir (Verifica la tabla y coloca correctamente el valor).</p>
+            <br />
+            <p>- BANCO BCP</p>
+            <p>- BANCO BBVA</p>
+            <p>- BANCO SCOTIABANK</p>
+            <p>- BANCO DE LA NACIÓN</p>
+            <br />
+            <p>Comunicarse previamente con el representante.</p>
+          </div>
+        </fieldset>
+        <br />
+        <p>Una vez realizado el proceso por cualquiera de los medios indicados, contactar con el Representante.</p>
+        <p>Si es en los horarios de atención, los PD serán cargados en minutos en la cuenta.</p>
+        <br />
+        <hr />
+        <br />
+        <span>¿Cómo contactar con el Representante?</span>
+        <p>Nombre: Anibal Gavidia Correa</p>
+        <p>Lunes a Jueves: 9:00 a 22:00 (Horario Perú)</p>
+        <p>Sábados y Domingos: 9:00 a 23:00 (Horario Perú)</p>
+        <br />
+        <button className="discord-button" onClick={() => window.open('https://discordapp.com/users/642217524737605642', '_blank')}><img className="discord-icon" src={`${LOGOS}/discord-logo.webp`} alt="Discord" /> Discord</button>
+        <button className="wp-button" onClick={() => window.open('https://wa.me/51941841649', '_blank')}><img className="wp-icon" src={`${LOGOS}/whatsapp-logo.webp`} alt="WhatsApp" /> Contacto</button>
+        <br />
+      </div>
+    </div>
+  )
+}