import type { Metadata } from 'next'

export const metadata: Metadata = { title: 'Descarga de addons' }

// Lista de addons (edítala con los tuyos). name/desc/url.
const ADDONS: { name: string; desc: string; url: string }[] = [
  { name: 'Deadly Boss Mods (DBM)', desc: 'Avisos y temporizadores de habilidades de jefes en mazmorras y bandas.', url: 'https://www.curseforge.com/wow/addons/deadly-boss-mods' },
  { name: 'Details! Damage Meter', desc: 'Medidor de daño, curación y amenaza con gráficas detalladas.', url: 'https://www.curseforge.com/wow/addons/details' },
  { name: 'AtlasLoot', desc: 'Consulta el botín de jefes de mazmorras y bandas dentro del juego.', url: 'https://www.curseforge.com/wow/addons/atlasloot-enhanced' },
  { name: 'Questie', desc: 'Muestra objetivos y ubicaciones de misiones en el mapa y el minimapa.', url: 'https://www.curseforge.com/wow/addons/questie' },
  { name: 'Bagnon', desc: 'Unifica todas tus bolsas y el banco en una sola ventana con búsqueda.', url: 'https://www.curseforge.com/wow/addons/bagnon' },
  { name: 'Bartender4', desc: 'Personaliza por completo tus barras de acción.', url: 'https://www.curseforge.com/wow/addons/bartender4' },
  { name: 'Auctioneer', desc: 'Herramientas avanzadas para la casa de subastas.', url: 'https://www.curseforge.com/wow/addons/auctioneer' },
  { name: 'Pawn', desc: 'Compara equipo y te indica qué objeto es una mejora para tu personaje.', url: 'https://www.curseforge.com/wow/addons/pawn' },
]

export default function DownloadAddonsPage() {
  return (
    <div className="main-page">
      <div className="middle-content">
        <div className="body-content">
          <div className="title-content">
            <h1>Descarga de addons</h1>
          </div>

          <div className="box-content">
            <div className="title-box-content">
              <h2>Addons recomendados</h2>
            </div>
            <div className="body-box-content justified">
              <p>Los addons son complementos opcionales que mejoran y personalizan tu experiencia de juego.</p>
              <p>Descarga los que quieras desde su página oficial (elige la versión compatible con WotLK 3.4.3).</p>
              <br />
              <p><span>Cómo instalarlos</span></p>
              <p>1) Descarga el addon y descomprime el archivo .zip.</p>
              <p>2) Copia la carpeta resultante dentro de <span>Interface/AddOns</span> (en la carpeta de tu cliente).</p>
              <p>3) Inicia el juego y, en la pantalla de selección de personaje, pulsa <span>Complementos</span> para activarlos.</p>
              <br />
              <hr />
              <br />
              <table className="max-center-table">
                <tbody>
                  {ADDONS.map((a) => (
                    <tr key={a.name} className="team-center-table-tr">
                      <td className="lefted separate">
                        <span className="yellow-info">{a.name}</span>
                        <p className="third-brown small-font">{a.desc}</p>
                      </td>
                      <td className="real-info-box no-wrap-td">
                        <a href={a.url} target="_blank" rel="noopener noreferrer" className="nw-tool-btn">
                          Descargar
                        </a>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}