feat: add AFC Store with MercadoPago purchases and prize redemption

Players can now buy AfterCoin with real money (MercadoPago Checkout Pro,
$15 MXN/AFC) and redeem AFC for gift cards or cash withdrawals. Admin
fulfills redemptions manually.

- Bridge: payments + redemptions tables, CRUD routes, PATCH auth
- Next.js API: verify-disk, balance, create-preference, webhook (idempotent
  minting with HMAC signature verification), redeem, payment/redemption history
- Frontend: hub, buy flow (4 packages + custom), redeem flow (gift cards +
  cash out), success/failure/pending pages, history with tabs, 8 components
- i18n: full English + Spanish translations
- Infra: nginx /api/afc/ → Next.js, docker-compose env vars, .env.example

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/app/[locale]/afc/buy/failure/page.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import Link from "next/link";
+import { useLocale, useTranslations } from "next-intl";
+
+export default function BuyFailurePage() {
+  const t = useTranslations("afc");
+  const locale = useLocale();
+
+  return (
+    <div className="max-w-lg mx-auto px-4 py-20 text-center">
+      <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-red-500/15 border-2 border-red-500/30 flex items-center justify-center">
+        <span className="text-4xl">✕</span>
+      </div>
+      <h1 className="text-3xl font-bold mb-3 text-white">{t("payment_failure_title")}</h1>
+      <p className="text-gray-400 mb-8">{t("payment_failure_description")}</p>
+      <div className="flex flex-col sm:flex-row gap-3 justify-center">
+        <Link
+          href={`/${locale}/afc/buy`}
+          className="px-6 py-3 bg-amber-500 hover:bg-amber-400 text-black font-semibold rounded-xl transition-colors"
+        >
+          {t("try_again")}
+        </Link>
+        <Link
+          href={`/${locale}/afc`}
+          className="px-6 py-3 bg-gray-800 hover:bg-gray-700 text-white font-semibold rounded-xl transition-colors"
+        >
+          {t("back_to_store")}
+        </Link>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/[locale]/afc/buy/page.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useLocale, useTranslations } from "next-intl";
+import { useDiskId } from "@/hooks/useDiskId";
+import { createPreference } from "@/lib/afc";
+import { DiskIdInput } from "@/components/afc/DiskIdInput";
+import { BalanceDisplay } from "@/components/afc/BalanceDisplay";
+import { AfcPackageCard } from "@/components/afc/AfcPackageCard";
+
+const PRICE_PER_AFC = 15;
+
+const PACKAGES = [
+  { amount: 10, popular: false },
+  { amount: 25, popular: true },
+  { amount: 50, popular: false },
+  { amount: 100, popular: false },
+];
+
+export default function BuyAfcPage() {
+  const t = useTranslations("afc");
+  const locale = useLocale();
+  const disk = useDiskId();
+  const [customAmount, setCustomAmount] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleBuy(amount: number) {
+    if (!disk.verified || !disk.diskId) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await createPreference(disk.diskId, amount);
+      // Redirect to MercadoPago checkout
+      window.location.href = data.initPoint;
+    } catch (e: any) {
+      setError(e.message);
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto px-4 py-12">
+      {/* Back */}
+      <Link
+        href={`/${locale}/afc`}
+        className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-gray-300 transition-colors mb-8"
+      >
+        ← {t("back_to_store")}
+      </Link>
+
+      <h1 className="text-3xl font-bold mb-2">{t("buy_title")}</h1>
+      <p className="text-gray-400 mb-8">{t("buy_subtitle")}</p>
+
+      {/* Disk ID */}
+      <div className="mb-8">
+        <DiskIdInput
+          diskId={disk.diskId}
+          onChange={disk.setDiskId}
+          onVerify={() => disk.verify(disk.diskId)}
+          loading={disk.loading}
+          verified={disk.verified}
+          playerName={disk.playerName}
+          error={disk.error}
+          onClear={disk.clear}
+        />
+      </div>
+
+      {disk.verified && (
+        <>
+          {/* Balance */}
+          <div className="mb-8">
+            <BalanceDisplay balance={disk.balance} compact />
+          </div>
+
+          {/* Packages */}
+          <div className="space-y-3 mb-8">
+            <h2 className="text-lg font-semibold text-white mb-4">{t("select_package")}</h2>
+            {PACKAGES.map((pkg) => (
+              <AfcPackageCard
+                key={pkg.amount}
+                amount={pkg.amount}
+                priceMxn={pkg.amount * PRICE_PER_AFC}
+                popular={pkg.popular}
+                loading={loading}
+                onSelect={() => handleBuy(pkg.amount)}
+              />
+            ))}
+          </div>
+
+          {/* Custom amount */}
+          <div className="bg-gray-900 border border-white/5 rounded-2xl p-6">
+            <h3 className="text-sm font-medium text-gray-400 mb-3">{t("custom_amount")}</h3>
+            <div className="flex gap-3">
+              <div className="flex-1 relative">
+                <input
+                  type="number"
+                  min="1"
+                  value={customAmount}
+                  onChange={(e) => setCustomAmount(e.target.value)}
+                  placeholder="AFC"
+                  className="w-full bg-gray-800 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-gray-600 focus:outline-none focus:border-amber-500/50 transition-all"
+                />
+                {customAmount && Number(customAmount) > 0 && (
+                  <span className="absolute right-4 top-1/2 -translate-y-1/2 text-sm text-gray-500">
+                    = ${Number(customAmount) * PRICE_PER_AFC} MXN
+                  </span>
+                )}
+              </div>
+              <button
+                onClick={() => {
+                  const amt = Number(customAmount);
+                  if (amt >= 1) handleBuy(amt);
+                }}
+                disabled={loading || !customAmount || Number(customAmount) < 1}
+                className="px-6 py-3 bg-amber-500 hover:bg-amber-400 disabled:bg-gray-700 disabled:text-gray-500 text-black font-semibold rounded-xl transition-colors"
+              >
+                {t("buy")}
+              </button>
+            </div>
+          </div>
+
+          {error && (
+            <div className="mt-4 bg-red-500/10 border border-red-500/30 rounded-xl p-4 text-sm text-red-400">
+              {error}
+            </div>
+          )}
+
+          {/* Payment info */}
+          <p className="mt-6 text-xs text-gray-600 text-center">
+            {t("payment_info")}
+          </p>
+        </>
+      )}
+    </div>
+  );
+}

apps/web/src/app/[locale]/afc/buy/pending/page.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import Link from "next/link";
+import { useLocale, useTranslations } from "next-intl";
+import { useSearchParams } from "next/navigation";
+
+export default function BuyPendingPage() {
+  const t = useTranslations("afc");
+  const locale = useLocale();
+  const searchParams = useSearchParams();
+  const paymentId = searchParams.get("payment_id");
+
+  return (
+    <div className="max-w-lg mx-auto px-4 py-20 text-center">
+      <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-yellow-500/15 border-2 border-yellow-500/30 flex items-center justify-center">
+        <span className="text-4xl">⏳</span>
+      </div>
+      <h1 className="text-3xl font-bold mb-3 text-white">{t("payment_pending_title")}</h1>
+      <p className="text-gray-400 mb-2">{t("payment_pending_description")}</p>
+      {paymentId && (
+        <p className="text-xs text-gray-600 mb-8 font-mono">ID: {paymentId}</p>
+      )}
+      <div className="flex flex-col sm:flex-row gap-3 justify-center">
+        <Link
+          href={`/${locale}/afc/history`}
+          className="px-6 py-3 bg-amber-500 hover:bg-amber-400 text-black font-semibold rounded-xl transition-colors"
+        >
+          {t("view_history")}
+        </Link>
+        <Link
+          href={`/${locale}/afc`}
+          className="px-6 py-3 bg-gray-800 hover:bg-gray-700 text-white font-semibold rounded-xl transition-colors"
+        >
+          {t("back_to_store")}
+        </Link>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/[locale]/afc/buy/success/page.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import Link from "next/link";
+import { useLocale, useTranslations } from "next-intl";
+import { useSearchParams } from "next/navigation";
+
+export default function BuySuccessPage() {
+  const t = useTranslations("afc");
+  const locale = useLocale();
+  const searchParams = useSearchParams();
+  const paymentId = searchParams.get("payment_id");
+
+  return (
+    <div className="max-w-lg mx-auto px-4 py-20 text-center">
+      <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-green-500/15 border-2 border-green-500/30 flex items-center justify-center">
+        <span className="text-4xl">✓</span>
+      </div>
+      <h1 className="text-3xl font-bold mb-3 text-white">{t("payment_success_title")}</h1>
+      <p className="text-gray-400 mb-2">{t("payment_success_description")}</p>
+      {paymentId && (
+        <p className="text-xs text-gray-600 mb-8 font-mono">ID: {paymentId}</p>
+      )}
+      <div className="flex flex-col sm:flex-row gap-3 justify-center">
+        <Link
+          href={`/${locale}/afc`}
+          className="px-6 py-3 bg-amber-500 hover:bg-amber-400 text-black font-semibold rounded-xl transition-colors"
+        >
+          {t("back_to_store")}
+        </Link>
+        <Link
+          href={`/${locale}/afc/history`}
+          className="px-6 py-3 bg-gray-800 hover:bg-gray-700 text-white font-semibold rounded-xl transition-colors"
+        >
+          {t("view_history")}
+        </Link>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/[locale]/afc/history/page.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { useLocale, useTranslations } from "next-intl";
+import { useDiskId } from "@/hooks/useDiskId";
+import { getPaymentHistory, getRedemptionHistory } from "@/lib/afc";
+import type { Payment, Redemption } from "@/lib/afc";
+import { DiskIdInput } from "@/components/afc/DiskIdInput";
+import { BalanceDisplay } from "@/components/afc/BalanceDisplay";
+import { PaymentHistoryTable } from "@/components/afc/PaymentHistoryTable";
+import { RedemptionHistoryTable } from "@/components/afc/RedemptionHistoryTable";
+
+type Tab = "payments" | "redemptions";
+
+export default function HistoryPage() {
+  const t = useTranslations("afc");
+  const locale = useLocale();
+  const disk = useDiskId();
+  const [tab, setTab] = useState<Tab>("payments");
+  const [payments, setPayments] = useState<Payment[]>([]);
+  const [redemptions, setRedemptions] = useState<Redemption[]>([]);
+  const [loadingData, setLoadingData] = useState(false);
+
+  useEffect(() => {
+    if (!disk.verified || !disk.diskId) return;
+    setLoadingData(true);
+    Promise.all([
+      getPaymentHistory(disk.diskId).then((d) => setPayments(d.payments || [])).catch(() => {}),
+      getRedemptionHistory(disk.diskId).then((d) => setRedemptions(d.redemptions || [])).catch(() => {}),
+    ]).finally(() => setLoadingData(false));
+  }, [disk.verified, disk.diskId]);
+
+  return (
+    <div className="max-w-3xl mx-auto px-4 py-12">
+      <Link
+        href={`/${locale}/afc`}
+        className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-gray-300 transition-colors mb-8"
+      >
+        ← {t("back_to_store")}
+      </Link>
+
+      <h1 className="text-3xl font-bold mb-2">{t("history_title")}</h1>
+      <p className="text-gray-400 mb-8">{t("history_subtitle")}</p>
+
+      {/* Disk ID */}
+      <div className="mb-8">
+        <DiskIdInput
+          diskId={disk.diskId}
+          onChange={disk.setDiskId}
+          onVerify={() => disk.verify(disk.diskId)}
+          loading={disk.loading}
+          verified={disk.verified}
+          playerName={disk.playerName}
+          error={disk.error}
+          onClear={disk.clear}
+        />
+      </div>
+
+      {disk.verified && (
+        <>
+          <div className="mb-8">
+            <BalanceDisplay balance={disk.balance} compact />
+          </div>
+
+          {/* Tabs */}
+          <div className="flex gap-1 bg-gray-900 rounded-xl p-1 mb-6">
+            <button
+              onClick={() => setTab("payments")}
+              className={`flex-1 py-2.5 text-sm font-medium rounded-lg transition-colors ${
+                tab === "payments"
+                  ? "bg-amber-500 text-black"
+                  : "text-gray-400 hover:text-white"
+              }`}
+            >
+              {t("purchases")} ({payments.length})
+            </button>
+            <button
+              onClick={() => setTab("redemptions")}
+              className={`flex-1 py-2.5 text-sm font-medium rounded-lg transition-colors ${
+                tab === "redemptions"
+                  ? "bg-amber-500 text-black"
+                  : "text-gray-400 hover:text-white"
+              }`}
+            >
+              {t("redemptions")} ({redemptions.length})
+            </button>
+          </div>
+
+          {loadingData ? (
+            <div className="text-center py-12 text-gray-500">{t("loading")}</div>
+          ) : tab === "payments" ? (
+            <PaymentHistoryTable payments={payments} />
+          ) : (
+            <RedemptionHistoryTable redemptions={redemptions} />
+          )}
+        </>
+      )}
+    </div>
+  );
+}

apps/web/src/app/[locale]/afc/page.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import Link from "next/link";
+import { useLocale, useTranslations } from "next-intl";
+import { useDiskId } from "@/hooks/useDiskId";
+import { DiskIdInput } from "@/components/afc/DiskIdInput";
+import { BalanceDisplay } from "@/components/afc/BalanceDisplay";
+
+export default function AfcHubPage() {
+  const t = useTranslations("afc");
+  const locale = useLocale();
+  const disk = useDiskId();
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-12">
+      {/* Header */}
+      <div className="text-center mb-12">
+        <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center shadow-lg shadow-amber-500/20">
+          <span className="text-3xl font-bold text-black">A</span>
+        </div>
+        <h1 className="text-4xl font-bold mb-3">{t("store_title")}</h1>
+        <p className="text-gray-400 text-lg max-w-xl mx-auto">
+          {t("store_subtitle")}
+        </p>
+      </div>
+
+      {/* Disk ID */}
+      <div className="mb-10">
+        <DiskIdInput
+          diskId={disk.diskId}
+          onChange={disk.setDiskId}
+          onVerify={() => disk.verify(disk.diskId)}
+          loading={disk.loading}
+          verified={disk.verified}
+          playerName={disk.playerName}
+          error={disk.error}
+          onClear={disk.clear}
+        />
+      </div>
+
+      {/* Balance */}
+      {disk.verified && (
+        <div className="mb-10">
+          <BalanceDisplay balance={disk.balance} />
+        </div>
+      )}
+
+      {/* Action cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <Link
+          href={`/${locale}/afc/buy`}
+          className="group block bg-gray-900 rounded-2xl p-8 border border-white/5 hover:border-amber-500/40 transition-all duration-200 hover:shadow-lg hover:shadow-amber-500/5"
+        >
+          <div className="w-12 h-12 rounded-xl bg-green-500/10 flex items-center justify-center mb-4 group-hover:bg-green-500/20 transition-colors">
+            <span className="text-2xl">+</span>
+          </div>
+          <h2 className="text-xl font-bold mb-2 text-white">{t("buy_title")}</h2>
+          <p className="text-gray-500 text-sm">{t("buy_description")}</p>
+        </Link>
+
+        <Link
+          href={`/${locale}/afc/redeem`}
+          className="group block bg-gray-900 rounded-2xl p-8 border border-white/5 hover:border-amber-500/40 transition-all duration-200 hover:shadow-lg hover:shadow-amber-500/5"
+        >
+          <div className="w-12 h-12 rounded-xl bg-amber-500/10 flex items-center justify-center mb-4 group-hover:bg-amber-500/20 transition-colors">
+            <span className="text-2xl">★</span>
+          </div>
+          <h2 className="text-xl font-bold mb-2 text-white">{t("redeem_title")}</h2>
+          <p className="text-gray-500 text-sm">{t("redeem_description")}</p>
+        </Link>
+
+        <Link
+          href={`/${locale}/afc/history`}
+          className="group block bg-gray-900 rounded-2xl p-8 border border-white/5 hover:border-amber-500/40 transition-all duration-200 hover:shadow-lg hover:shadow-amber-500/5"
+        >
+          <div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-4 group-hover:bg-blue-500/20 transition-colors">
+            <span className="text-2xl">≡</span>
+          </div>
+          <h2 className="text-xl font-bold mb-2 text-white">{t("history_title")}</h2>
+          <p className="text-gray-500 text-sm">{t("history_description")}</p>
+        </Link>
+      </div>
+
+      {/* Info */}
+      <div className="mt-12 bg-gray-900/50 border border-white/5 rounded-2xl p-6 text-sm text-gray-500">
+        <p>{t("store_info")}</p>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/[locale]/afc/redeem/page.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useLocale, useTranslations } from "next-intl";
+import { useDiskId } from "@/hooks/useDiskId";
+import { redeemAfc } from "@/lib/afc";
+import { DiskIdInput } from "@/components/afc/DiskIdInput";
+import { BalanceDisplay } from "@/components/afc/BalanceDisplay";
+import { PrizeCard } from "@/components/afc/PrizeCard";
+import { RedeemForm } from "@/components/afc/RedeemForm";
+
+interface Prize {
+  icon: string;
+  brand: string;
+  label: string;
+  costAfc: number;
+  valueMxn: number;
+  prizeType: string;
+  prizeDetail: string;
+}
+
+const GIFT_CARDS: Prize[] = [
+  { icon: "🎮", brand: "Steam", label: "$200 MXN", costAfc: 14, valueMxn: 200, prizeType: "gift_card", prizeDetail: "Steam $200 MXN" },
+  { icon: "🎮", brand: "Steam", label: "$500 MXN", costAfc: 34, valueMxn: 500, prizeType: "gift_card", prizeDetail: "Steam $500 MXN" },
+  { icon: "🎮", brand: "Steam", label: "$1,000 MXN", costAfc: 67, valueMxn: 1000, prizeType: "gift_card", prizeDetail: "Steam $1,000 MXN" },
+  { icon: "🟢", brand: "Xbox", label: "$200 MXN", costAfc: 14, valueMxn: 200, prizeType: "gift_card", prizeDetail: "Xbox $200 MXN" },
+  { icon: "🟢", brand: "Xbox", label: "$500 MXN", costAfc: 34, valueMxn: 500, prizeType: "gift_card", prizeDetail: "Xbox $500 MXN" },
+  { icon: "🔵", brand: "PlayStation", label: "$200 MXN", costAfc: 14, valueMxn: 200, prizeType: "gift_card", prizeDetail: "PlayStation $200 MXN" },
+  { icon: "🔵", brand: "PlayStation", label: "$500 MXN", costAfc: 14, valueMxn: 500, prizeType: "gift_card", prizeDetail: "PlayStation $500 MXN" },
+  { icon: "📦", brand: "Amazon", label: "$200 MXN", costAfc: 14, valueMxn: 200, prizeType: "gift_card", prizeDetail: "Amazon $200 MXN" },
+  { icon: "📦", brand: "Amazon", label: "$500 MXN", costAfc: 34, valueMxn: 500, prizeType: "gift_card", prizeDetail: "Amazon $500 MXN" },
+];
+
+const CASH_OUT: Prize[] = [
+  { icon: "🏦", brand: "Banco (CLABE)", label: "$750+ MXN", costAfc: 50, valueMxn: 750, prizeType: "bank_transfer", prizeDetail: "Transferencia bancaria $750 MXN" },
+  { icon: "💳", brand: "MercadoPago", label: "$750+ MXN", costAfc: 50, valueMxn: 750, prizeType: "mercadopago", prizeDetail: "Retiro MercadoPago $750 MXN" },
+];
+
+export default function RedeemPage() {
+  const t = useTranslations("afc");
+  const locale = useLocale();
+  const disk = useDiskId();
+  const [selected, setSelected] = useState<Prize | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleRedeem(deliveryInfo: string) {
+    if (!selected || !disk.diskId) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await redeemAfc({
+        diskId: disk.diskId,
+        amountAfc: selected.costAfc,
+        prizeType: selected.prizeType,
+        prizeDetail: selected.prizeDetail,
+        deliveryInfo,
+      });
+      setSuccess(true);
+      disk.refreshBalance();
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (success) {
+    return (
+      <div className="max-w-lg mx-auto px-4 py-20 text-center">
+        <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-green-500/15 border-2 border-green-500/30 flex items-center justify-center">
+          <span className="text-4xl">✓</span>
+        </div>
+        <h1 className="text-3xl font-bold mb-3">{t("redeem_success_title")}</h1>
+        <p className="text-gray-400 mb-8">{t("redeem_success_description")}</p>
+        <div className="flex flex-col sm:flex-row gap-3 justify-center">
+          <Link
+            href={`/${locale}/afc/history`}
+            className="px-6 py-3 bg-amber-500 hover:bg-amber-400 text-black font-semibold rounded-xl transition-colors"
+          >
+            {t("view_history")}
+          </Link>
+          <Link
+            href={`/${locale}/afc`}
+            className="px-6 py-3 bg-gray-800 hover:bg-gray-700 text-white font-semibold rounded-xl transition-colors"
+          >
+            {t("back_to_store")}
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto px-4 py-12">
+      <Link
+        href={`/${locale}/afc`}
+        className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-gray-300 transition-colors mb-8"
+      >
+        ← {t("back_to_store")}
+      </Link>
+
+      <h1 className="text-3xl font-bold mb-2">{t("redeem_title")}</h1>
+      <p className="text-gray-400 mb-8">{t("redeem_subtitle")}</p>
+
+      {/* Disk ID */}
+      <div className="mb-8">
+        <DiskIdInput
+          diskId={disk.diskId}
+          onChange={disk.setDiskId}
+          onVerify={() => disk.verify(disk.diskId)}
+          loading={disk.loading}
+          verified={disk.verified}
+          playerName={disk.playerName}
+          error={disk.error}
+          onClear={disk.clear}
+        />
+      </div>
+
+      {disk.verified && (
+        <>
+          <div className="mb-8">
+            <BalanceDisplay balance={disk.balance} />
+          </div>
+
+          {selected ? (
+            <RedeemForm
+              prizeType={selected.prizeType}
+              prizeDetail={selected.prizeDetail}
+              costAfc={selected.costAfc}
+              onSubmit={handleRedeem}
+              onCancel={() => setSelected(null)}
+              loading={loading}
+            />
+          ) : (
+            <>
+              {/* Gift Cards */}
+              <h2 className="text-lg font-semibold text-white mb-4">{t("gift_cards")}</h2>
+              <div className="space-y-3 mb-8">
+                {GIFT_CARDS.map((prize, i) => (
+                  <PrizeCard
+                    key={i}
+                    icon={prize.icon}
+                    brand={prize.brand}
+                    label={prize.label}
+                    costAfc={prize.costAfc}
+                    valueMxn={prize.valueMxn}
+                    disabled={disk.balance !== null && disk.balance < prize.costAfc}
+                    onSelect={() => setSelected(prize)}
+                  />
+                ))}
+              </div>
+
+              {/* Cash Out */}
+              <h2 className="text-lg font-semibold text-white mb-4">{t("cash_out")}</h2>
+              <div className="space-y-3">
+                {CASH_OUT.map((prize, i) => (
+                  <PrizeCard
+                    key={i}
+                    icon={prize.icon}
+                    brand={prize.brand}
+                    label={prize.label}
+                    costAfc={prize.costAfc}
+                    valueMxn={prize.valueMxn}
+                    disabled={disk.balance !== null && disk.balance < prize.costAfc}
+                    onSelect={() => setSelected(prize)}
+                  />
+                ))}
+              </div>
+            </>
+          )}
+
+          {error && (
+            <div className="mt-4 bg-red-500/10 border border-red-500/30 rounded-xl p-4 text-sm text-red-400">
+              {error}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}