// BEGIN CHANGE: Eventos & Vantagens em abas/cards (anti-? nos slots vazios)
"use client";

import { useEffect, useMemo, useState, type ReactNode } from "react";
import Link from "next/link";
import { useI18n } from "@/i18n/LanguageProvider";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { Outfit } from "@/components/Outfit";
import { apiUrl, guildLogoUrl, patenteUrl, type Look } from "@/lib/api";
import {
  BOSS_SCHEDULE,
  CASTLE,
  DAYS,
  DONATE,
  DTT,
  EVENT_COINS,
  FEATURED_EVENTS,
  FEATURED_EVENT_TAB,
  FAVELA,
  INVASION_SCHEDULE,
  PATENT_RANKS,
  PATENTS_INFO,
  SNOWBALL,
  TEMPLE_TIP,
  TOC_IDS,
  TRAINING,
  VANTAGENS_IMG,
  WAR_EVENT,
  WOCF,
  type TocId,
} from "@/lib/events-content";

type GuildDom = { id: number; name: string; logo: string } | null;
type SnowTop = { name: string; points: number; look: Look };
type SnowWin = { name: string; score: number; date: string; time: string };
type DttRow = {
  fragsBlue: number;
  fragsRed: number;
  towersBlue: number;
  towersRed: number;
  date: string;
  time: string;
};

type Live = {
  castle: GuildDom;
  favela: GuildDom;
  snowball: { top: SnowTop[]; winners: SnowWin[] };
  dtt: DttRow[];
};

function Panel({ children, className = "" }: { children: ReactNode; className?: string }) {
  return (
    <div className={`rounded-xl border border-border bg-panel p-5 ${className}`}>
      {children}
    </div>
  );
}

function ScheduleTable({
  rows,
  emptySlot,
}: {
  rows: { hour: string; days: string[] }[];
  emptySlot: string;
}) {
  return (
    <div className="overflow-x-auto rounded-xl border border-border">
      <table className="w-full min-w-[720px] text-left text-xs sm:text-sm">
        <thead className="border-b border-border bg-background/40 text-muted">
          <tr>
            <th className="px-2 py-2 font-medium">Hora</th>
            {DAYS.map((d) => (
              <th key={d} className="px-2 py-2 font-medium">
                {d}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => (
            <tr key={r.hour} className="border-t border-border/40">
              <td className="px-2 py-2 font-semibold">{r.hour}</td>
              {r.days.map((cell, i) => (
                <td key={i} className="px-2 py-2 text-muted">
                  {cell || emptySlot}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function DominionCard({
  label,
  guild,
  empty,
}: {
  label: string;
  guild: GuildDom;
  empty: string;
}) {
  return (
    <div className="flex items-center gap-3 rounded-lg border border-border/60 bg-background/40 p-3">
      {guild ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={guildLogoUrl(guild.logo)}
          alt={guild.name}
          width={48}
          height={48}
          className="h-12 w-12 rounded object-contain"
        />
      ) : (
        <div className="flex h-12 w-12 items-center justify-center rounded border border-dashed border-border text-xs text-muted">
          -
        </div>
      )}
      <div>
        <div className="text-xs text-muted">{label}</div>
        {guild ? (
          <Link
            href={`/guild/?name=${encodeURIComponent(guild.name)}`}
            className="font-medium text-brand hover:underline"
          >
            {guild.name}
          </Link>
        ) : (
          <div className="text-sm text-muted">{empty}</div>
        )}
      </div>
    </div>
  );
}

function readTabFromUrl(): TocId {
  if (typeof window === "undefined") return "overview";
  const hash = window.location.hash.replace(/^#/, "") as TocId;
  if ((TOC_IDS as readonly string[]).includes(hash)) return hash;
  const q = new URLSearchParams(window.location.search).get("tab") as TocId | null;
  if (q && (TOC_IDS as readonly string[]).includes(q)) return q;
  return "overview";
}

export default function EventsPage() {
  const { t } = useI18n();
  const [live, setLive] = useState<Live | null>(null);
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");
  const [showAllRanks, setShowAllRanks] = useState(false);
  const [tab, setTab] = useState<TocId>("overview");

  useEffect(() => {
    setTab(readTabFromUrl());
    const onHash = () => setTab(readTabFromUrl());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  useEffect(() => {
    fetch(apiUrl("events.php"))
      .then((r) => {
        if (!r.ok) throw new Error("http");
        return r.json();
      })
      .then((json: Live) => {
        setLive(json);
        setStatus("ok");
      })
      .catch(() => setStatus("error"));
  }, []);

  function goTab(id: TocId) {
    setTab(id);
    const url = new URL(window.location.href);
    url.searchParams.delete("tab");
    url.hash = id === "overview" ? "" : id;
    window.history.replaceState({}, "", url.toString());
  }

  const tabs: { id: TocId; label: string }[] = useMemo(
    () => [
      { id: "overview", label: t.eventsPage.tocOverview },
      { id: "schedules", label: t.eventsPage.schedulesTitle },
      { id: "castle", label: t.eventsPage.tocCastle },
      { id: "favela", label: t.eventsPage.tocFavela },
      { id: "war", label: t.eventsPage.tocWar },
      { id: "dtt", label: t.eventsPage.tocDtt },
      { id: "snowball", label: t.eventsPage.tocSnowball },
      { id: "wocf", label: t.eventsPage.tocWocf },
      { id: "patents", label: t.eventsPage.tocPatents },
      { id: "training", label: t.eventsPage.tocTraining },
      { id: "donate", label: t.eventsPage.tocDonate },
    ],
    [t]
  );

  const ranks = showAllRanks ? PATENT_RANKS : PATENT_RANKS.slice(0, 12);
  const emptySlot = t.eventsPage.emptySlot;

  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />
      <main className="mx-auto w-full max-w-5xl flex-1 px-4 py-10 sm:px-6 sm:py-14">
        <h1 className="text-3xl font-semibold tracking-tight">{t.eventsPage.title}</h1>
        <p className="mt-2 max-w-2xl text-muted">{t.eventsPage.subtitle}</p>
        <p className="mt-2 text-sm text-muted">{t.eventsPage.pickEvent}</p>

        <div className="sticky top-14 z-10 -mx-4 mt-6 border-y border-border/60 bg-background/90 px-4 py-3 backdrop-blur sm:-mx-6 sm:px-6">
          <div className="flex flex-wrap gap-2">
            {tabs.map((item) => {
              const active = item.id === tab;
              return (
                <button
                  key={item.id}
                  type="button"
                  onClick={() => goTab(item.id)}
                  className={`rounded-lg border px-2.5 py-1.5 text-xs transition-colors sm:text-sm ${
                    active
                      ? "border-brand/50 bg-brand/15 text-foreground"
                      : "border-border text-muted hover:border-brand/40 hover:text-foreground"
                  }`}
                >
                  {item.label}
                </button>
              );
            })}
          </div>
        </div>

        <div className="mt-8 space-y-6">
          {tab === "overview" && (
            <>
              <Panel>
                <h2 className="text-lg font-semibold">{EVENT_COINS.title}</h2>
                <p className="mt-2 text-sm text-muted">{EVENT_COINS.body}</p>
              </Panel>

              <div className="grid gap-3 sm:grid-cols-2">
                {FEATURED_EVENTS.map((e) => {
                  const target = FEATURED_EVENT_TAB[e.name] ?? "schedules";
                  return (
                    <button
                      key={e.name}
                      type="button"
                      onClick={() => goTab(target)}
                      className="rounded-xl border border-border bg-panel p-4 text-left transition-colors hover:border-brand/50"
                    >
                      <div className="flex items-start justify-between gap-2">
                        <h3 className="font-semibold">{e.name}</h3>
                        <span className="shrink-0 rounded bg-brand/15 px-2 py-0.5 text-[10px] uppercase tracking-wide text-brand">
                          {e.type}
                        </span>
                      </div>
                      <p className="mt-1 text-xs text-muted">{e.when}</p>
                      <p className="mt-2 text-sm text-muted">{e.desc}</p>
                      <span className="mt-3 inline-block text-xs font-medium text-brand">
                        {t.eventsPage.viewDetails}
                      </span>
                    </button>
                  );
                })}
              </div>

              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                {(
                  [
                    ["castle", CASTLE.title, CASTLE.when],
                    ["favela", FAVELA.title, FAVELA.when],
                    ["patents", PATENTS_INFO.title, t.eventsPage.patentTable],
                    ["training", TRAINING.title, t.eventsPage.tocTraining],
                    ["donate", DONATE.title, t.eventsPage.tocDonate],
                    ["schedules", t.eventsPage.schedulesTitle, t.eventsPage.tocInvasions],
                  ] as [TocId, string, string][]
                ).map(([id, title, hint]) => (
                  <button
                    key={id}
                    type="button"
                    onClick={() => goTab(id)}
                    className="rounded-xl border border-border bg-panel p-4 text-left transition-colors hover:border-brand/50"
                  >
                    <h3 className="font-semibold">{title}</h3>
                    <p className="mt-1 text-xs text-muted">{hint}</p>
                    <span className="mt-3 inline-block text-xs font-medium text-brand">
                      {t.eventsPage.viewDetails}
                    </span>
                  </button>
                ))}
              </div>

              <Panel>
                <p className="text-sm text-muted">{TEMPLE_TIP}</p>
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={`${VANTAGENS_IMG}/events.png`}
                  alt="Templo / eventos"
                  className="mx-auto mt-4 max-h-64 w-full max-w-lg rounded-xl border border-border object-cover"
                />
              </Panel>
            </>
          )}

          {tab === "schedules" && (
            <>
              <Panel className="!p-0 overflow-hidden">
                <div className="border-b border-border px-5 py-3 text-sm font-medium">
                  {t.eventsPage.eventsTable}
                </div>
                <div className="overflow-x-auto">
                  <table className="w-full min-w-[640px] text-left text-sm">
                    <thead className="border-b border-border text-muted">
                      <tr>
                        <th className="px-4 py-2 font-medium">{t.eventsPage.colEvent}</th>
                        <th className="px-4 py-2 font-medium">{t.eventsPage.colWhen}</th>
                        <th className="px-4 py-2 font-medium">{t.eventsPage.colDesc}</th>
                        <th className="px-4 py-2 font-medium">{t.eventsPage.colType}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {FEATURED_EVENTS.map((e) => (
                        <tr key={e.name} className="border-t border-border/40 align-top">
                          <td className="px-4 py-3 font-medium">{e.name}</td>
                          <td className="px-4 py-3 text-muted">{e.when}</td>
                          <td className="px-4 py-3 text-muted">{e.desc}</td>
                          <td className="px-4 py-3 text-muted">{e.type}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Panel>
              <div>
                <h2 className="mb-3 text-lg font-semibold">{t.eventsPage.tocInvasions}</h2>
                <ScheduleTable rows={INVASION_SCHEDULE} emptySlot={emptySlot} />
              </div>
              <div>
                <h2 className="mb-3 text-lg font-semibold">{t.eventsPage.tocBosses}</h2>
                <ScheduleTable rows={BOSS_SCHEDULE} emptySlot={emptySlot} />
              </div>
            </>
          )}

          {tab === "castle" && (
            <>
              <Panel>
                <h2 className="text-lg font-semibold">{CASTLE.title}</h2>
                <p className="mt-1 text-xs font-medium text-brand">{CASTLE.when}</p>
                <p className="mt-2 text-sm text-muted">{CASTLE.body}</p>
                <p className="mt-3 text-sm">
                  <span className="text-muted">{t.eventsPage.command}: </span>
                  <code className="rounded bg-background/60 px-2 py-0.5 text-xs">{CASTLE.cmd}</code>
                </p>
                {status === "ok" && live && (
                  <div className="mt-4">
                    <DominionCard
                      label={t.eventsPage.currentOwner}
                      guild={live.castle}
                      empty={t.eventsPage.noOwner}
                    />
                  </div>
                )}
              </Panel>
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={CASTLE.image}
                alt={CASTLE.title}
                className="mx-auto max-h-80 w-full max-w-md rounded-xl border border-border object-cover"
              />
            </>
          )}

          {tab === "favela" && (
            <>
              <Panel>
                <h2 className="text-lg font-semibold">{FAVELA.title}</h2>
                <p className="mt-1 text-xs font-medium text-brand">{FAVELA.when}</p>
                <p className="mt-2 text-sm text-muted">{FAVELA.body}</p>
                <p className="mt-3 text-sm">
                  <span className="text-muted">{t.eventsPage.command}: </span>
                  <code className="rounded bg-background/60 px-2 py-0.5 text-xs">{FAVELA.cmd}</code>
                </p>
                {status === "ok" && live && (
                  <div className="mt-4">
                    <DominionCard
                      label={t.eventsPage.currentOwner}
                      guild={live.favela}
                      empty={t.eventsPage.noOwner}
                    />
                  </div>
                )}
              </Panel>
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={FAVELA.image}
                alt={FAVELA.title}
                className="mx-auto max-h-80 w-full max-w-2xl rounded-xl border border-border object-cover"
              />
            </>
          )}

          {tab === "war" && (
            <>
              <Panel>
                <h2 className="text-lg font-semibold">{WAR_EVENT.title}</h2>
                <p className="mt-2 text-sm text-muted">{WAR_EVENT.body}</p>
                <p className="mt-3 text-sm text-muted">{WAR_EVENT.note}</p>
              </Panel>
              <div className="grid gap-4 sm:grid-cols-2">
                {WAR_EVENT.maps.map((m) => (
                  <Panel key={m.name} className="!p-4">
                    <h3 className="font-semibold">{m.name}</h3>
                    <p className="mt-2 text-sm text-muted">{m.desc}</p>
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={m.image}
                      alt={m.name}
                      className="mt-3 h-40 w-full rounded-lg object-cover"
                    />
                  </Panel>
                ))}
              </div>
            </>
          )}

          {tab === "dtt" && (
            <>
              <Panel>
                <h2 className="text-lg font-semibold">{DTT.title}</h2>
                <p className="mt-2 text-sm text-muted">{DTT.body}</p>
              </Panel>
              <div className="grid gap-4 lg:grid-cols-2">
                <div className="overflow-hidden rounded-xl border border-border">
                  <iframe
                    title="DTT video"
                    src={DTT.video}
                    className="aspect-video w-full"
                    allowFullScreen
                  />
                </div>
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={DTT.mapImage}
                  alt="DTT minimapa"
                  className="h-full max-h-72 w-full rounded-xl border border-border object-contain bg-panel p-2"
                />
              </div>
              <Panel>
                <h3 className="font-semibold">{t.eventsPage.infoTitle}</h3>
                <div className="mt-3 space-y-3">
                  {DTT.sections.map((s) => (
                    <div key={s.title} className="border-t border-border/40 pt-3 first:border-0 first:pt-0">
                      <div className="text-sm font-medium">{s.title}</div>
                      <p className="mt-1 text-sm text-muted">{s.body}</p>
                    </div>
                  ))}
                </div>
              </Panel>
              <Panel>
                <h3 className="font-semibold">Magias Buff</h3>
                <p className="mt-2 text-sm text-muted">{DTT.buffHint}</p>
                <div className="mt-4 grid gap-3 sm:grid-cols-2">
                  {DTT.buffs.map((b) => (
                    <div
                      key={b.monster}
                      className="rounded-lg border border-border/60 bg-background/40 p-3 text-sm"
                    >
                      <div className="font-medium">{b.monster}</div>
                      <div className="mt-1 text-xs text-muted">
                        {b.for} - {b.spell}
                      </div>
                    </div>
                  ))}
                </div>
              </Panel>
              {status === "ok" && live && live.dtt.length > 0 && (
                <Panel className="!p-0 overflow-hidden">
                  <div className="border-b border-border px-5 py-3 text-sm font-medium">
                    {t.eventsPage.dttResults}
                  </div>
                  <div className="divide-y divide-border/40">
                    {live.dtt.map((r, i) => (
                      <div
                        key={`${r.date}-${r.time}-${i}`}
                        className="flex flex-wrap items-center justify-between gap-3 px-5 py-3 text-sm"
                      >
                        <span className="font-mono">
                          <span className="text-sky-400">{r.towersBlue}</span>
                          {" x "}
                          <span className="text-rose-400">{r.towersRed}</span>
                        </span>
                        <span className="text-xs text-muted">
                          {r.date} {r.time} - frags {r.fragsBlue}/{r.fragsRed}
                        </span>
                      </div>
                    ))}
                  </div>
                </Panel>
              )}
            </>
          )}

          {tab === "snowball" && (
            <>
              <Panel>
                <h2 className="text-lg font-semibold">{SNOWBALL.title}</h2>
                <p className="mt-2 text-sm text-muted">{SNOWBALL.body}</p>
              </Panel>
              <div className="overflow-hidden rounded-xl border border-border">
                <iframe
                  title="Snowball video"
                  src={SNOWBALL.video}
                  className="aspect-video w-full"
                  allowFullScreen
                />
              </div>
              <Panel>
                <h3 className="font-semibold">{t.eventsPage.infoTitle}</h3>
                <ul className="mt-3 space-y-2 text-sm">
                  {SNOWBALL.commands.map((c) => (
                    <li
                      key={c.cmd}
                      className="flex flex-col gap-1 border-t border-border/40 pt-2 first:border-0 first:pt-0 sm:flex-row sm:items-start sm:gap-3"
                    >
                      <code className="shrink-0 rounded bg-background/60 px-2 py-0.5 text-xs">
                        {c.cmd}
                      </code>
                      <span className="text-muted">{c.hint}</span>
                    </li>
                  ))}
                </ul>
              </Panel>
              <div>
                <h3 className="mb-3 text-lg font-semibold">{t.eventsPage.topRanking}</h3>
                {status === "ok" && live && live.snowball.top.length > 0 ? (
                  <div className="grid gap-3 sm:grid-cols-3">
                    {live.snowball.top.map((p, i) => {
                      const medal =
                        i === 0
                          ? "text-amber-300"
                          : i === 1
                            ? "text-slate-300"
                            : "text-orange-300";
                      return (
                        <Panel key={p.name} className="!p-4 text-center">
                          <div className={`text-xs font-semibold uppercase tracking-wide ${medal}`}>
                            #{i + 1}
                          </div>
                          <div className="mt-2 flex justify-center">
                            <Outfit look={p.look} size="profile" alt={p.name} />
                          </div>
                          <Link
                            href={`/character/?name=${encodeURIComponent(p.name)}`}
                            className="mt-2 block font-medium text-brand hover:underline"
                          >
                            {p.name}
                          </Link>
                          <div className="mt-1 text-sm text-muted">
                            <span className="font-semibold text-foreground">{p.points}</span>{" "}
                            {t.eventsPage.points}
                          </div>
                        </Panel>
                      );
                    })}
                  </div>
                ) : (
                  <p className="text-sm text-muted">{t.common.empty}</p>
                )}
              </div>
              {status === "ok" && live && live.snowball.winners.length > 0 && (
                <Panel className="!p-0 overflow-hidden">
                  <div className="border-b border-border px-5 py-3 text-sm font-medium">
                    {t.eventsPage.recentWinners}
                  </div>
                  <div className="overflow-x-auto">
                    <table className="w-full text-left text-sm">
                      <thead className="border-b border-border text-muted">
                        <tr>
                          <th className="px-4 py-2 font-medium">{t.eventsPage.colName}</th>
                          <th className="px-4 py-2 font-medium">{t.eventsPage.points}</th>
                          <th className="px-4 py-2 font-medium">{t.eventsPage.colWhen}</th>
                        </tr>
                      </thead>
                      <tbody>
                        {live.snowball.winners.map((w, i) => (
                          <tr key={`${w.name}-${w.date}-${i}`} className="border-t border-border/40">
                            <td className="px-4 py-2">
                              <Link
                                href={`/character/?name=${encodeURIComponent(w.name)}`}
                                className="text-brand hover:underline"
                              >
                                {w.name}
                              </Link>
                            </td>
                            <td className="px-4 py-2 text-muted">{w.score}</td>
                            <td className="px-4 py-2 text-muted">
                              {w.date} - {w.time}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </Panel>
              )}
            </>
          )}

          {tab === "wocf" && (
            <>
              <Panel>
                <h2 className="text-lg font-semibold">{WOCF.title}</h2>
                <p className="mt-2 text-sm text-muted">{WOCF.body}</p>
              </Panel>
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={WOCF.image}
                alt={WOCF.title}
                className="mx-auto max-h-80 w-full max-w-2xl rounded-xl border border-border object-cover"
              />
            </>
          )}

          {tab === "patents" && (
            <>
              <Panel>
                <h2 className="text-lg font-semibold">{PATENTS_INFO.title}</h2>
                <p className="mt-2 text-sm text-muted">{PATENTS_INFO.how}</p>
              </Panel>
              <div className="overflow-hidden rounded-xl border border-border">
                <iframe
                  title="Patentes video"
                  src={PATENTS_INFO.video}
                  className="aspect-video w-full"
                  allowFullScreen
                />
              </div>
              <Panel className="!p-0 overflow-hidden">
                <div className="flex items-center justify-between border-b border-border px-5 py-3">
                  <span className="text-sm font-medium">{t.eventsPage.patentTable}</span>
                  <button
                    type="button"
                    onClick={() => setShowAllRanks((v) => !v)}
                    className="text-xs text-brand hover:underline"
                  >
                    {showAllRanks ? t.eventsPage.showLess : t.eventsPage.showAll}
                  </button>
                </div>
                <div className="overflow-x-auto">
                  <table className="w-full min-w-[480px] text-left text-sm">
                    <thead className="border-b border-border text-muted">
                      <tr>
                        <th className="px-4 py-2 font-medium">{t.eventsPage.colPatent}</th>
                        <th className="px-4 py-2 font-medium">EXP</th>
                        <th className="px-4 py-2 font-medium">GP</th>
                      </tr>
                    </thead>
                    <tbody>
                      {ranks.map((r) => (
                        <tr key={r.level} className="border-t border-border/40">
                          <td className="px-4 py-2">
                            <span className="inline-flex items-center gap-2">
                              {/* eslint-disable-next-line @next/next/no-img-element */}
                              <img
                                src={patenteUrl(r.level)}
                                alt=""
                                width={24}
                                height={24}
                                className="h-6 w-6 object-contain"
                              />
                              {r.name}
                            </span>
                          </td>
                          <td className="px-4 py-2 text-muted">{r.exp.toLocaleString("pt-BR")}</td>
                          <td className="px-4 py-2 text-muted">{r.gp}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Panel>
              <p className="text-sm text-muted">
                <Link
                  href="/highscores/?category=patents"
                  className="font-medium text-brand hover:underline"
                >
                  {t.eventsPage.patentRanking}
                </Link>
                {" - "}
                {t.eventsPage.patentRankingHint}
              </p>
            </>
          )}

          {tab === "training" && (
            <>
              <Panel>
                <h2 className="text-lg font-semibold">{TRAINING.title}</h2>
                <p className="mt-2 text-sm text-muted">{TRAINING.body}</p>
              </Panel>
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={TRAINING.image}
                alt={TRAINING.title}
                className="mx-auto max-h-96 w-full max-w-2xl rounded-xl border border-border object-contain bg-panel"
              />
            </>
          )}

          {tab === "donate" && (
            <>
              <Panel>
                <h2 className="text-lg font-semibold">{DONATE.title}</h2>
                <h3 className="mt-4 font-semibold">{t.eventsPage.whyDonate}</h3>
                <p className="mt-2 text-sm text-muted">{DONATE.why}</p>
                <h3 className="mt-5 font-semibold">{t.eventsPage.perks}</h3>
                <ul className="mt-2 grid list-disc gap-1.5 pl-5 sm:grid-cols-2">
                  {DONATE.perks.map((p) => (
                    <li key={p} className="text-sm text-muted">
                      {p}
                    </li>
                  ))}
                </ul>
              </Panel>
              <Panel>
                <h3 className="font-semibold">{DONATE.promotion.title}</h3>
                <p className="mt-2 text-sm text-muted">{DONATE.promotion.intro}</p>
                <ul className="mt-3 space-y-2 text-sm">
                  {DONATE.promotion.rows.map((r) => (
                    <li
                      key={r.voc}
                      className="flex flex-wrap justify-between gap-2 border-t border-border/40 pt-2 first:border-0 first:pt-0"
                    >
                      <span className="font-medium">{r.voc}</span>
                      <span className="text-muted">{r.bonus}</span>
                    </li>
                  ))}
                </ul>
              </Panel>
              <Panel>
                <h3 className="font-semibold">{t.eventsPage.faq}</h3>
                <div className="mt-3 space-y-3">
                  {DONATE.faq.map((f) => (
                    <div key={f.q}>
                      <div className="text-sm font-medium">{f.q}</div>
                      <p className="mt-1 text-sm text-muted">{f.a}</p>
                    </div>
                  ))}
                </div>
                <p className="mt-4 text-sm">
                  <Link href="/rules" className="text-brand hover:underline">
                    {t.eventsPage.readRules}
                  </Link>
                </p>
              </Panel>
            </>
          )}

          {status === "loading" && tab !== "overview" && (
            <p className="text-sm text-muted">{t.common.loading}</p>
          )}
          {status === "error" && (
            <p className="text-sm text-muted">{t.eventsPage.liveError}</p>
          )}
        </div>
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE