"use client";

import { useState, useEffect, use } from "react";
import { useAuth } from "@/lib/auth";
import { motion, AnimatePresence } from "framer-motion";
import Navbar from "@/components/layout/Navbar";
import Footer from "@/components/layout/Footer";
import MobileNav from "@/components/layout/MobileNav";
import {
  Star, Shield, Zap, Check, Mail, Phone, AlertCircle, Loader2,
  ChevronDown, ChevronUp, Clock, MessageCircle, HelpCircle,
  Info, Lock, Sparkles, CreditCard, BadgeCheck, Ticket, X
} from "lucide-react";
import { fetchGameDetailClient, fetchPaymentChannels, type GameDetail, type PaymentChannel } from "@/lib/api";
import { getProductInputConfig, FAQ_ITEMS, type InputField } from "@/lib/product-inputs";

function formatRp(n: number) { return `Rp ${n.toLocaleString("id-ID")}`; }

function formatFee(flat: number, percent: number) {
  if (flat && percent) return `${formatRp(flat)} + ${percent}%`;
  if (flat) return formatRp(flat);
  if (percent) return `${percent}%`;
  return "Gratis";
}

const FALLBACK_CHANNELS: (PaymentChannel & { maintenance?: boolean })[] = [
  // ── Real active channels ──
  { code: "QRIS", name: "QRIS by ShopeePay", group: "E-Wallet", type: "direct", icon_url: "https://assets.tripay.co.id/upload/payment-icon/BpE4BPVyIw1605597490.png", fee_flat: 0, fee_percent: 0, min_amount: 1000, max_amount: 5000000, active: true },
  { code: "QRIS2", name: "QRIS", group: "E-Wallet", type: "direct", icon_url: "https://assets.tripay.co.id/upload/payment-icon/8ewGzP6SWe1649667701.png", fee_flat: 0, fee_percent: 0, min_amount: 1000, max_amount: 5000000, active: true },
  { code: "DANA", name: "DANA", group: "E-Wallet", type: "redirect", icon_url: "https://assets.tripay.co.id/upload/payment-icon/sj3UHLu8Tu1655719621.png", fee_flat: 0, fee_percent: 3, min_amount: 1000, max_amount: 10000000, active: true, maintenance: true },
  { code: "OVO", name: "OVO", group: "E-Wallet", type: "redirect", icon_url: "https://assets.tripay.co.id/upload/payment-icon/fH6Y7wDT171586199243.png", fee_flat: 0, fee_percent: 3, min_amount: 1000, max_amount: 10000000, active: true, maintenance: true },
  { code: "SHOPEEPAY", name: "ShopeePay", group: "E-Wallet", type: "redirect", icon_url: "https://assets.tripay.co.id/upload/payment-icon/d204uajhlS1655719774.png", fee_flat: 0, fee_percent: 3, min_amount: 1000, max_amount: 10000000, active: true, maintenance: true },
  { code: "ALFAMART", name: "Alfamart", group: "Convenience Store", type: "direct", icon_url: "https://assets.tripay.co.id/upload/payment-icon/jiGZMKp2RD1583433506.png", fee_flat: 3500, fee_percent: 0, min_amount: 10000, max_amount: 2500000, active: true, maintenance: true },
  { code: "INDOMARET", name: "Indomaret", group: "Convenience Store", type: "direct", icon_url: "https://assets.tripay.co.id/upload/payment-icon/zNzuO5AuLw1583513974.png", fee_flat: 3500, fee_percent: 0, min_amount: 10000, max_amount: 2500000, active: true, maintenance: true },
  // ── Dummy: E-Wallet (maintenance) ──
  { code: "GOPAY", name: "GoPay", group: "E-Wallet", type: "redirect", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjMDBBRUQ2Ii8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjE2IiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5Hb1BheTwvdGV4dD48L3N2Zz4=", fee_flat: 0, fee_percent: 2.5, min_amount: 1000, max_amount: 10000000, active: true, maintenance: true },
  { code: "LINKAJA", name: "LinkAja", group: "E-Wallet", type: "redirect", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjRTMxODM3Ii8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjEzIiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5MaW5rQWphPC90ZXh0Pjwvc3ZnPg==", fee_flat: 0, fee_percent: 2.5, min_amount: 1000, max_amount: 5000000, active: true, maintenance: true },
  // ── Dummy: Virtual Account (maintenance) ──
  { code: "BRIVA", name: "BRI Virtual Account", group: "Virtual Account", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjMDAzRDc5Ii8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjI0IiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5CUkk8L3RleHQ+PC9zdmc+", fee_flat: 4000, fee_percent: 0, min_amount: 10000, max_amount: 50000000, active: true, maintenance: true },
  { code: "BCAVA", name: "BCA Virtual Account", group: "Virtual Account", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjMDAzQTcwIi8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjI0IiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5CQ0E8L3RleHQ+PC9zdmc+", fee_flat: 5500, fee_percent: 0, min_amount: 10000, max_amount: 50000000, active: true, maintenance: true },
  { code: "MANDIRIVA", name: "Mandiri Virtual Account", group: "Virtual Account", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjMDAzMDY2Ii8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjE1IiBmaWxsPSIjRkZCODFDIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5tYW5kaXJpPC90ZXh0Pjwvc3ZnPg==", fee_flat: 4000, fee_percent: 0, min_amount: 10000, max_amount: 50000000, active: true, maintenance: true },
  { code: "BNIVA", name: "BNI Virtual Account", group: "Virtual Account", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjRjA1QTIyIi8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjI0IiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5CTkk8L3RleHQ+PC9zdmc+", fee_flat: 4000, fee_percent: 0, min_amount: 10000, max_amount: 50000000, active: true, maintenance: true },
  { code: "BSIVA", name: "BSI Virtual Account", group: "Virtual Account", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjMDA0QjQ5Ii8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjI0IiBmaWxsPSIjQzRBNTJEIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5CU0k8L3RleHQ+PC9zdmc+", fee_flat: 4000, fee_percent: 0, min_amount: 10000, max_amount: 50000000, active: true, maintenance: true },
  { code: "CIMBVA", name: "CIMB Niaga VA", group: "Virtual Account", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjN0IwRDFFIi8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjIwIiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5DSU1CPC90ZXh0Pjwvc3ZnPg==", fee_flat: 4000, fee_percent: 0, min_amount: 10000, max_amount: 50000000, active: true, maintenance: true },
  { code: "MUAMALATVA", name: "Muamalat VA", group: "Virtual Account", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjN0IyMTdFIi8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjEzIiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5tdWFtYWxhdDwvdGV4dD48L3N2Zz4=", fee_flat: 4000, fee_percent: 0, min_amount: 10000, max_amount: 50000000, active: true, maintenance: true },
  { code: "PERMATAVA", name: "Permata VA", group: "Virtual Account", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjMDA1QkFBIi8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjE0IiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5wZXJtYXRhPC90ZXh0Pjwvc3ZnPg==", fee_flat: 4000, fee_percent: 0, min_amount: 10000, max_amount: 50000000, active: true, maintenance: true },
  { code: "SAMPOERNAVA", name: "Sahabat Sampoerna VA", group: "Virtual Account", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjMUUzQTVGIi8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjEzIiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5TYWhhYmF0PC90ZXh0Pjwvc3ZnPg==", fee_flat: 4000, fee_percent: 0, min_amount: 10000, max_amount: 50000000, active: true, maintenance: true },
  { code: "SINARMASVA", name: "Sinarmas VA", group: "Virtual Account", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjMDA1QkFBIi8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjEzIiBmaWxsPSIjRjc5NDFEIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5TaW5hck1hczwvdGV4dD48L3N2Zz4=", fee_flat: 4000, fee_percent: 0, min_amount: 10000, max_amount: 50000000, active: true, maintenance: true },
  // ── Dummy: Convenience Store extra (maintenance) ──
  { code: "ALFAMIDI", name: "Alfamidi", group: "Convenience Store", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjRUQxQzI0Ii8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjEzIiBmaWxsPSIjRkZEMTAwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5hbGZhbWlkaTwvdGV4dD48L3N2Zz4=", fee_flat: 3500, fee_percent: 0, min_amount: 10000, max_amount: 2500000, active: true, maintenance: true },
  // ── Dummy: Credit Card (maintenance) ──
  { code: "VISA", name: "Visa / Mastercard", group: "Credit Card", type: "redirect", icon_url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgd2lkdGg9Ijc1MCIKICAgaGVpZ2h0PSI0NzEiCiAgIHZpZXdCb3g9IjAgMCA3NTAgNDcxIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxNCIKICAgc29kaXBvZGk6ZG9jbmFtZT0idmlzYS5zdmciCiAgIGlua3NjYXBlOnZlcnNpb249IjAuOTIuMiA1YzNlODBkLCAyMDE3LTA4LTA2Ij4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGExOCI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxNTE1IgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjkyOCIKICAgICBpZD0ibmFtZWR2aWV3MTYiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjAuMzg0IgogICAgIGlua3NjYXBlOmN4PSI4My4zMzMzMzMiCiAgICAgaW5rc2NhcGU6Y3k9IjIzNS41IgogICAgIGlua3NjYXBlOndpbmRvdy14PSIyMzAxIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyOTMiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJQYWdlLTEiIC8+CiAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0OC4yICg0NzMyNykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgPGRlc2MKICAgICBpZD0iZGVzYzIiPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM0IiAvPgogIDxnCiAgICAgaWQ9IlBhZ2UtMSIKICAgICBzdHJva2U9Im5vbmUiCiAgICAgc3Ryb2tlLXdpZHRoPSIxIgogICAgIGZpbGw9Im5vbmUiCiAgICAgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxnCiAgICAgICBpZD0idmlzYSIKICAgICAgIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgIDxyZWN0CiAgICAgICAgIGlkPSJSZWN0YW5nbGUtMSIKICAgICAgICAgZmlsbD0iIzBFNDU5NSIKICAgICAgICAgeD0iMCIKICAgICAgICAgeT0iMCIKICAgICAgICAgd2lkdGg9Ijc1MCIKICAgICAgICAgaGVpZ2h0PSI0NzEiCiAgICAgICAgIHJ4PSI0MCIgLz4KICAgICAgPHBvbHlnb24KICAgICAgICAgaWQ9IlNoYXBlIgogICAgICAgICBmaWxsPSIjRkZGRkZGIgogICAgICAgICBwb2ludHM9IjI3OC4xOTc1IDMzNC4yMjc1IDMxMS41NTg1IDEzOC40NjU1IDM2NC45MTc1IDEzOC40NjU1IDMzMS41MzM1IDMzNC4yMjc1IiAvPgogICAgICA8cGF0aAogICAgICAgICBkPSJNNTI0LjMwNzUsMTQyLjY4NzUgQzUxMy43MzU1LDEzOC43MjE1IDQ5Ny4xNzE1LDEzNC40NjU1IDQ3Ni40ODQ1LDEzNC40NjU1IEM0MjMuNzYwNSwxMzQuNDY1NSAzODYuNjIwNSwxNjEuMDE2NSAzODYuMzA0NSwxOTkuMDY5NSBDMzg2LjAwNzUsMjI3LjE5ODUgNDEyLjgxODUsMjQyLjg5MDUgNDMzLjA1ODUsMjUyLjI1NDUgQzQ1My44Mjc1LDI2MS44NDk1IDQ2MC44MTA1LDI2Ny45Njk1IDQ2MC43MTE1LDI3Ni41Mzc1IEM0NjA1Nzk1LDI4OS42NTk1IDQ0NC4xMjU1LDI5NS42NDU1IDQyOC43ODg1LDI5NS42NDU1IEM0MDcuNDMxNSwyOTUuNjU0NSAzOTYuMDg1NSwyOTIuNjg3NSAzNzguNTYyNSwyODUuMzc4NSBMMzcxLjY4NjUsMjgyLjI2NjUgTDM2NC4xOTc1LDMyNi4wOTA1IEMzNzYuNjYwNSwzMzEuNTU0NSAzOTkuNzA2NSwzMzYuMjg5NSA0MjMuNjM1NSwzMzYuNTM0NSBDNDc5LjcyNDUsMzM2LjUzNDUgNTE2LjEzNjUsMzEwLjI4NzUgNTE2LjU1MDUsMjY5LjY1MjFDMTE2Ljc1MTUsMjQ3LjM4MzUgNTAyLjUzNTUsMjMwLjQzNTUgNDcxLjc1MTUsMjE2LjQ2NDUgQzQ1My4xMDA1LDIwNy40MDg1IDQ0MS42Nzg1LDIwMS4zNjU1IDQ0MS43OTk1LDE5Mi4xOTU1IEM0NDEuNzk5NSwxODQuMDU4NSA0NTEuNDY3NSwxNzUuMzU3NSA0NzIuMzU2NSwxNzUuMzU3NSBDNDg5LjgwNTUsMTc1LjA4NjUgNTAyLjQ0NDUsMTc4Ljg5MTUgNTEyLjI5MjUsMTgyLjg1NzUgTDUxNy4wNzQ1LDE4NS4xMTY1IEw1MjQuMzA3NSwxNDIuNjg3NSIKICAgICAgICAgaWQ9icGF0aDEzIgogICAgICAgICBmaWxsPSIjRkZGRkZGIiAvPgogICAgICA8cGF0aAogICAgICAgICBkPSJNNjYxLjYxNDUsMTM4LjQ2NTUgTDYyMC4zODM1LDEzOC40NjU1IEM2MDcuNjEwNSwxMzguNDY1NSA1OTguMDUyNSwxNDEuOTUxNSA1OTIuNDQyNSwxNTQuNjk5NSBMNTEzLjE5NzUsMzM0LjEwMjUgTDU2OS4yMjg1LDMzNC4xMDI1IEM1NjkuMjI4NSwzMzQuMTAyNSA1NzguMzkwNSwzMDkuOTgwNSA1ODAuNDYyNSwzMDQuNjg0NSBDNTg2LjU4NTUsMzA0LjY4NDUgNjQxLjAxNjUsMzA0Ljc2ODUgNjQ4Ljc5ODUsMzA0Ljc2ODUgQzY1MC4zOTQ1LDMxMS42MjE1IDY1NS4yOTA1LDMzNC4xMDI1IDY1NS4yOTA1LDMzNC4xMDI1IEw3MDQuODAyNSwzMzQuMTAyNSBMNjYxLjYxNDUsMTM4LjQ2NTUgWiBNNTk2LjE5NzUsMjY0Ljg3MjUgQzYwMC42MTA1LDI1My41OTM1IDYxNy40NTY1LDIxMC4xNDk1IDYxNy40NTY1LDIxMC4xNDk1IEM2MTcuMTQxNSwyMTAuNjcwNSA2MjEuODM2NSwxOTguODE1NSA2MjQuNTMxNSwxOTEuNDY1NSBMNjI4LjEzODUsMjA4LjM0MzUgQzYyOC4xMzg1LDIwOC4zNDM1IDYzOC4zNTU1LDI1NS4wNzI1IDY0MC40OTA1LDI2NC44NzE1IEw1OTYuMTk3NSwyNjQuODcxNSBMNTk2LjE5NzUsMjY0Ljg3MjUgWiIKICAgICAgICAgaWQ9IlBhdGgiCiAgICAgICAgIGZpbGw9IiNGRkZGRkYiIC8+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gNDUuODc4OTA2IDEzOC40NjQ4NCBMIDQ1LjE5NzI2NiAxNDIuNTM5MDYgQyA2Ni4yODgyNjMgMTQ3LjY0NDU4IDg1LjEyNjQ2NSAxNTUuMDMyNTcgMTAxLjYxOTE0IDE2NC4yMjQ2MSBMIDE0OC45NjQ4NCAzMzMuOTE2MDIgTCAyMDUuNDE5OTIgMzMzLjg0OTYxIEwgMjg5LjQyMzgzIDEzOC40NjQ4NCBMIDIzMi45MDIzNCAxMzguNDY0ODQgTCAxODAuNjYyMTEgMjcxLjk2MDk0IEwgMTc1LjA5NTcgMjQ0LjgzMjAzIEMgMTc0LjgzODI0IDI0NC4wMDQwOCAxNzQuNTU5NDIgMjQzLjE3MzA0IDE3NC4yNzM0NCAyNDIuMzQxOCBMIDE1Ni4xMDc0MiAxNTQuOTkyMTkgQyAxNTIuODc3NDIgMTQyLjU5NjE5IDE0My41MDg5MiAxMzguODk2ODQgMTMxLjkxOTkyIDEzOC40NjQ4NCBMIDQ1LjE5NzI2NiAxMzguNDY0ODQgeiAiCiAgICAgICAgIGlkPSJwYXRoMTYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjEiIC8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K", fee_flat: 0, fee_percent: 3.5, min_amount: 10000, max_amount: 100000000, active: true, maintenance: true },
  { code: "JCB", name: "JCB", group: "Credit Card", type: "redirect", icon_url: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUwIiBoZWlnaHQ9IjQ3MSIgdmlld0JveD0iMCAwIDc1MCA0NzEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ4LjIgKDQ3MzI3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IHgxPSIwLjAzMTYwNzg1OCUiIHkxPSI0OS45OTk4NTc0JSIgeDI9Ijk5Ljk3NDMxNTMlIiB5Mj0iNDkuOTk5ODU3NCUiIGlkPSJsaW5lYXJHcmFkaWVudC0xIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwN0I0MCIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNTVCMzMwIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iMC40NzE2OTMxNzIlIiB5MT0iNDkuOTk5ODI2JSIgeDI9Ijk5Ljk4NjAwODYlIiB5Mj0iNDkuOTk5ODI2JSIgaWQ9ImxpbmVhckdyYWRpZW50LTIiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMUQyOTcwIiBvZmZzZXQ9IjAlIj48L3N0b3A+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMDZEQkEiIG9mZnNldD0iMTAwJSI+PC9zdG9wPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IHgxPSIwLjExMzg4MDc3MiUiIHkxPSI1MC4wMDA4OTY0JSIgeDI9Ijk5Ljk4NjAwMDMlIiB5Mj0iNTAuMDAwODk2NCUiIGlkPSJsaW5lYXJHcmFkaWVudC0zIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzZFMkIyRiIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRTMwMTM4IiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImpjYiIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0xIiBmaWxsPSIjMEU0Qzk2IiB4PSIwIiB5PSIwIiB3aWR0aD0iNzUwIiBoZWlnaHQ9IjQ3MSIgcng9IjQwIj48L3JlY3Q+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik02MTcuMjQzMTgzLDM0Ni43NjYyODEgQzYxNy4yNDMxODMsMzg4LjM4MDg4NyA1ODMuNTE0ODkyLDQyMi4xMjU5NzQgNTQxLjg4MzQ5LDQyMi4xMjU5NzQgTDEzMi43NTY4MjMsNDIyLjEyNTk3NCBMMTMyLjc1NjgyMywxMjQuMjQ0OTE2IEMxMzIuNzU2ODIzLDgyLjYxODY4MjYgMTY2LjQ4OTg1MSw0OC44NzQ0NTY3IDIwOC4xMjE2ODMsNDguODc0NDU2NyBMNjE3LjI0MzE4Myw0OC44NzQwMjYgTDYxNy4yNDI3NTIsMzQ2Ljc2NjI4MSBMNjE3LjI0MzE4MywzNDYuNzY2MjgxIFoiIGlkPSJwYXRoMzQ5NCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNNDgzLjg1ODg3NCwyNDIuMDQ0Nzk3IEM0OTUuNTQyNjk5LDI0Mi4yOTgyODUgNTA3LjI5NjE4OCwyNDEuNTI4ODA2IDUxOC45MzYwMDQsMjQyLjQ0NDg4MyBDNTMwLjcyMzI0NCwyNDQuNjQ1Njc4IDUzMy41NjM5MTUsMjYyLjQ4Nzg3NCA1MjMuMDkyMzQsMjY4LjMzMjUxMSBDNTE1Ljk1MDc0NiwyNzIuMTgyMTE1IDUwNy40NTk0OTYsMjY5Ljk2NDY5NiA0OTkuNzEzMzI4LDI3MC40NDYyMDggTDQ4My44NTg4NzQsMjcwLjQ0NjIwOCBMNDgzLjg1ODg3NCwyNDIuMDQ0Nzk3IFogTTUyNS42OTE4MjYsMjA5LjkwMDQ4NyBDNTI4LjI4ODQ5MSwyMTkuMDY0Njc5IDUxOS40NTM5MDMsMjI3LjI5MjExOCA1MTAuNjI1OTE3LDIyNi4wMzA1NjYgTDQ4My44NTg4NzQsMjI2LjAzMDU2NiBDNDg0LjA0MTM3NTgsMjE3LjM4ODQ0MSA0ODMuNDkxMzQ1LDIwOC4wMDg5NzMgNDg0LjEzMTA1MywxOTkuODIxNjYzIEM0OTQuODU0OTQyLDIwMC4xMjMzODYgNTA1LjY3OTU3NiwxOTkuMjA1ODQ5IDUxNi4zNDAzOTQsMjAwLjMwMTg1MyBDNTIwLjkyMTc5OSwyMDEuNDUxNTU4IDUyNC43NTM5MzUsMjA1LjIxNzc0MiA1MjUuNjkxODI2LDIwOS45MDA0ODcgWiBNNTkwLjEyMDQxMiw3My45OTcyMjU0IEM1OTAuNjE3ODcyLDkxLjQ5ODQ1NCA1OTAuMTkxNDcxLDEwOS45MjM2NSA1OTAuMzMzNTksMTI3Ljc4MDE5MiBDNTkwLjI5OTEzNywyMDAuMzc2MzU4IDU5MC40MDU5NDIsMjcyLjk3NDE3NCA1OTAuMjc4ODk2LDM0NS41NjkzMDMgQzU5MC44MTA0MiwzNzIuNzc2NTkyIDU2NS42OTY1MjQsMzk2LjQxMzY3OCA1MzguNjc4NzQ5LDM5Ni45NTY2OTQgQzUxMS42MzI5MiwzOTcuMDY4NDUxIDQ4NC41ODQyOTcsMzk2Ljk3MjYyOCA0NTcuNTM3Mzk2LDM5Ny4wMDQ0OTcgTDQ1Ny41MzczOTYsMjg3LjI1MzI5MSBDNDg3LjAwNywyODcuMDk5ODAzIDUxNi40OTYwNCwyODcuNTYxIDU0NS45NTM1MjEsMjg3LjAyMTU5NCBDNTU5LjYyMDcyLDI4Ni4xNjI3NjkgNTc0LjU4NjAyNywyNzcuMTQ1Njk1IDU3NS4yMjMyOCwyNjIuMTA3Mzc0IEM1NzYuODMzNjYxLDI0Ny4wMDU0ODMgNTYyLjU5MjEyOCwyMzYuNTU3MTg1IDU0OS4wNzEwOTYsMjM0LjkwNTY4NCBDNTQzLjg3Mjc3MywyMzQuNzcwNTQyIDU0NC4wMjcxMzIsMjMzLjM5MDg0NiA1NDkuMDcxMDk2LDIzMi43ODg5NzIgQzU2MS45NjMwNywyMzAuMDAyNDgzIDU3Mi4wOTA2NzUsMjE2LjY1NTc4NyA1NjguMjk2Nzg2LDIwMy4yOTAyMjkgQzU2NS4wNjA1MiwxODkuMjMyMzc0IDU0OS41MjM4MzksMTgzLjc5MTQyIDUzNi42MDAzNjYsMTgzLjgxNzc2OCBDNTEwLjI0ODU0OCwxODMuNjM4NjEyIDQ4My44OTEyOTksMTgzLjc5MjM1OSA0NTcuNTM3Mzk2LDE4My43NDE0MUM0NTcuNzA4NTg1LDE2My4yNTI0MDggNDU3LjE4MjkxNiwxNDIuNzQwNjUzIDQ1Ny44MjI3MSwxMjIuMjY3MzY0IEM0NTkuOTEwMzYxLDk1LjU1MTM3NjYgNDg0LjYyODYwMyw3My41MTk1MzE5IDUxMS4yNjk3NTksNzMuOTk3NjU2IEM1MzcuNTUzMTY2LDczLjk5NzM2OTIgNTYzLjgzNzczNyw3My45OTgyMzAxIDU5MC4xMjA0MTIsNzMuOTk3MjI1NCBaIiBpZD0icGF0aDM0OTYiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMSkiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTE1OS43NDA0MjksMTI1LjA0MDQ5OCBDMTYwLjQxMzY4OSw5Ny44NzY2NTkyIDE4NC42Mjg2MTksNzQuNDI5MDI5OSAyMTEuNjE0Nzk3LDc0LjAzMjUzOTggQzIzOC41NTk0OTMsNzMuOTQ5OTY4NiAyNjUuNTA2MjA0LDc0LjAyMDkxMTkgMjkyLjQ1MTY3MSw3My45OTcyMjU0IEMyOTIuMzc3NjQsMTY0Ljg4MjQ4OCAyOTIuNTk5OTA1LDI1NS43NzM2NzIgMjkyLjM0MDMwMSwzNDYuNjU1MjIyIEMyOTEuMzAyMjk4LDM3My40ODg4MDIgMjY3LjM1MDU0OCwzOTYuNDg4NjYxIDI0MC42NjEzNTYsMzk2Ljk2MjI5MiBDMjEzLjY2NTAxNSwzOTcuMDYwOTU3IDE4Ni42NjYyNzUsMzk2Ljk3NjA3NCAxNTkuNjY5MDEyLDM5Ny4wMDQ0OTcgTDE1OS42NjkwMTIsMjgzLjU1MDg3NSBDMTg1Ljg5MTYyMywyODkuNzQ1NDkxIDIxMy4zOTExMzgsMjkyLjM4MjUxOCAyNDAuMTQyNDA2LDI4OC4yNzIyNDIgQzI1Ni4xMzQ1MDksMjg1LjY5NzM2OCAyNzMuNjI5OTM1LDI3Ny44NDgwMjYgMjc5LjA0NDI2MSwyNjEuMjU3NTY3IEMyODMuMDMwMTIyLDI0Ny4wNjYyNjcgMjgwLjc4NTcyMywyMzIuMTMxNjAyIDI4MS4zNzgwMjcsMjE3LjU2NjQ2NSBMMjgxLjM3ODAyNywxODMuNzQxNTQxIEwyMzUuMDgxMjQ2LDE4My43NDE1NDEgQzIzNC44NzMxMDYsMjA2LjExMjE0NSAyMzUuNTA3MjU4LDIyOC41MjI0NDcgMjM0Ljc0NjE0NiwyNTAuODY3MTA3IEMyMzMuNDk3ODUsMjY0LjYwMTIxNCAyMTkuOTAwMTQ3LDI3My4zMjY5OTYgMjA2Ljk0NjQyOCwyNzIuODYxODAxIEMxOTAuODc5NzQ3LDI3My4wMzA1MzUgMTU5LjA0NzU1LDI2MS4yMjE3OTYgMTU5LjA0NzU1LDI2MS4yMjE3OTYgQzE1OC45Njc0OTIsMjE5LjMwNDggMTU5LjUxNDMxNCwxNjYuODE0Mzg1IDE1OS43NDA0MjksMTI1LjA0MDQ5OCBaIiBpZD0icGF0aDM0OTgiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMikiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTMwOS43MTk5OTUsMTk3LjM5MDEzNiBDMzA3LjI4NTc4OCwxOTcuOTA3MzggMzA5LjIyOTE0MSwxODkuMDg5NDU5IDMwOC42MDYyOTgsMTg1Ljc0Mzk2NCBDMzA4Ljc3MjIzMywxNjQuNTkzNjM3IDMwOC4yNjAwNDUsMTQzLjQyMDk1MSAzMDguODg5NzE4LDEyMi4yODU4MjcgQzMxMC45NzI1NDEsOTUuNDU3MDgyNyAzMzUuODgxMjYyLDczLjM3MDExMDUgMzYyLjYyODc0OCw3My45OTc2NTYgTDQ0MS4zOTQ1Niw3My45OTc2NTYgQzQ0MS4zMjA2NTgsMTY0Ljg4MjM0NiA0NDEuNTQyNDkzLDI1NS43NzI5NCA0NDEuMjgzNDA2LDM0Ni42NTM5MzQgQzQ0MC4yNDQ0MTIsMzczLjQ4ODAyNyA0MTYuMjkxMzQ0LDM5Ni40ODcxMDIgMzg5LjYwMjA4NywzOTYuOTYyMjkyIEMzNjIuNjA0NjA1LDM5Ny4wNjE5OTEgMzM1LjYwNDcwNywzOTYuOTc2NTA0IDMwOC42MDYyOTgsMzk3LjAwNDkyOCBMMzA4LjYwNjI5OCwyNzIuNzA3NjI0IEMzMjcuMDQ2NDEsMjg3LjgzNTg0NiAzNTIuMTA1NzM4LDI5MC4xOTIyNDggMzc1LjA3Nzk1MywyOTAuMjMzNDg0IEMzOTIuMzk1MDEsMjkwLjIyNzQ1NSA0MDkuNjExODYxLDI4Ny41NTc4NjUgNDI2LjQyODE0MywyODMuNTYyOTM0IEw0MjYuNDI4MTQzLDI2MC43OTAyOTcgQzQwNy40NzQ2NTgsMjcwLjIzNjYwOSAzODUuMTk0ODA4LDI3Ni4yMzU4MTUgMzY0LjE4NDc0NSwyNzAuODA3OTY2IEMzNDkuNTI5MDUxLDI2Ny4xNTczNjcgMzM4Ljg5MDg5LDI1Mi45OTY2ODMgMzM5LjEyODUxMywyMzcuODcyMjA0IEMzMzcuNDMwMDEsMjIyLjE0MzY4NCAzNDYuNjUyNjMxLDIwNS41MzY4ODUgMzYyLjExMDIzNywyMDAuODYwODU1IEMzODEuMzAwOTIzLDE5NC44NTI1NDUgNDAyLjIxNzc4NywxOTkuNDQ4NDU0IDQyMC4yMDYzNDQsMjA3LjI1ODc5NSBDNDI0LjA2MDUyNiwyMDkuMjc2OTUgNDI3Ljk3MDY2LDIxMS43ODAzNDIgNDI2LjQyODE0MywyMDUuMzM4MDQ0IEw0MjYuNDI4MTQzLDE4Ny40MzgzNTggQzM5Ni4zNDM1ODEsMTgwLjI4MDk1MSAzNjQuMzI2NjQ0LDE3Ny42NDY0MDUgMzM0LjA5OTQzOCwxODUuNDMzNjE5IEMzMjUuMzUxMTkzLDE4Ny45MDE3NzQgMzE2LjgyODE5LDE5MS42NDQ2NDcgMzA5LjcxOTk5NSwxOTcuMzkwMTM2IFoiIGlkPSJwYXRoMzUwMCIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0zKSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==", fee_flat: 0, fee_percent: 3.5, min_amount: 10000, max_amount: 100000000, active: true, maintenance: true },
  // ── Dummy: Cryptocurrency (maintenance) ──
  { code: "BTC", name: "Bitcoin (BTC)", group: "Cryptocurrency", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0iI0Y3OTMxQSIvPjxwYXRoIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTIzLjE4OSAxNC4wMmMuMzE0LTIuMDk2LTEuMjgzLTMuMjIzLTMuNDY1LTMuOTc1bC43MDgtMi44NC0xLjcyOC0uNDMtLjY5IDIuNzY1Yy0uNDU0LS4xMTQtLjkyLS4yMi0xLjM4NS0uMzI2bC42OTUtMi43ODNMMTUuNTk2IDZsLS43MDggMi44MzljLS4zNzYtLjA4Ni0uNzQ2LS4xNy0xLjEwNC0uMjZsLjAwMi0uMDA5LTIuMzg0LS41OTUtLjQ2IDEuODQ2czEuMjgzLjI5NCAxLjI1Ni4zMTJjLjcuMTc1LjgyNi42MzguODA1IDEuMDA2bC0uODA2IDMuMjM1Yy4wNDguMDEyLjExLjAzLjE4LjA1N2wtLjE4My0uMDQ1LTEuMTMgNC41MzJjLS4wODYuMjEyLS4zMDMuNTMxLS43OTMuNDEuMDE4LjAyNS0xLjI1Ni0uMzEzLTEuMjU2LS4zMTNsLS44NTggMS45NzggMi4yNS41NjFjLjQxOC4xMDUuODI4LjIxNSAxLjIzMS4zMThsLS43MTUgMi44NzIgMS43MjcuNDMuNzA4LTIuODRjLjQ3Mi4xMjcuOTMuMjQ1IDEuMzc4LjM1N2wtLjcwNiAyLjgyOCAxLjcyOC40My43MTUtMi44NjZjMi45NDguNTU4IDUuMTY0LjMzMyA2LjA5Ny0yLjMzMy43NTItMi4xNDYtLjAzNy0zLjM4NS0xLjU4OC00LjE5MiAxLjEzLS4yNiAxLjk4LTEuMDAzIDIuMjA3LTIuNTM4em0tMy45NSA1LjUzOGMtLjUzMyAyLjE0Ny00LjE0OC45ODYtNS4zMi42OTVsLjk1LTMuODA1YzEuMTcyLjI5MyA0LjkyOS44NzIgNC4zNyAzLjExem0uNTM1LTUuNTY5Yy0uNDg3IDEuOTUzLTMuNDk1Ljk2LTQuNDcuNzE3bC44Ni0zLjQ1Yy45NzUuMjQzIDQuMTE4LjY5NiAzLjYxIDIuNzMzeiIvPjwvZz48L3N2Zz4=", fee_flat: 0, fee_percent: 1, min_amount: 50000, max_amount: 500000000, active: true, maintenance: true },
  { code: "ETH", name: "Ethereum (ETH)", group: "Cryptocurrency", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0iIzYyN0VFQSIvPjxnIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyI+PHBhdGggZmlsbC1vcGFjaXR5PSIuNjAyIiBkPSJNMTYuNDk4IDR2OC44N2w3LjQ5NyAzLjM1eiIvPjxwYXRoIGQ9Ik0xNi40OTggNEw5IDE2LjIybDcuNDk4LTMuMzV6Ii8+PHBhdGggZmlsbC1vcGFjaXR5PSIuNjAyIiBkPSJNMTYuNDk4IDIxLjk2OHY2LjAyN0wyNCAxNy42MTZ6Ii8+PHBhdGggZD0iTTE2LjQ5OCAyNy45OTV2LTYuMDI4TDkgMTcuNjE2eiIvPjxwYXRoIGZpbGwtb3BhY2l0eT0iLjIiIGQ9Ik0xNi40OTggMjAuNTczbDcuNDk3LTQuMzUzLTcuNDk3LTMuMzQ4eiIvPjxwYXRoIGZpbGwtb3BhY2l0eT0iLjYwMiIgZD0iTTkgMTYuMjJsNy40OTggNC4zNTN2LTcuNzAxeiIvPjwvZz48L2c+PC9zdmc+", fee_flat: 0, fee_percent: 1, min_amount: 50000, max_amount: 500000000, active: true, maintenance: true },
  { code: "USDT", name: "Tether (USDT)", group: "Cryptocurrency", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0iIzI2QTE3QiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy45MjIgMTcuMzgzdi0uMDAyYy0uMTEuMDA4LS42NzcuMDQyLTEuOTQyLjA0Mi0xLjAxIDAtMS43MjEtLjAzLTEuOTcxLS4wNDJ2LjAwM2MtMy44ODgtLjE3MS02Ljc5LS44NDgtNi43OS0xLjY1OCAwLS44MDkgMi45MDItMS40ODYgNi43OS0xLjY2djIuNjQ0Yy4yNTQuMDE4Ljk4Mi4wNjEgMS45ODguMDYxIDEuMjA3IDAgMS44MTItLjA1IDEuOTI1LS4wNnYtMi42NDNjMy44OC4xNzMgNi43NzUuODUgNi43NzUgMS42NTggMCAuODEtMi44OTUgMS40ODUtNi43NzUgMS42NTdtMC0zLjU5di0yLjM2Nmg1LjQxNFY3LjgxOUg4LjU5NXYzLjYwOGg1LjQxNHYyLjM2NWMtNC40LjIwMi03LjcwOSAxLjA3NC03LjcwOSAyLjExOCAwIDEuMDQ0IDMuMzA5IDEuOTE1IDcuNzA5IDIuMTE4djcuNTgyaDMuOTEzdi03LjU4NGM0LjM5My0uMjAyIDcuNjk0LTEuMDczIDcuNjk0LTIuMTE2IDAtMS4wNDMtMy4zMDEtMS45MTQtNy42OTQtMi4xMTciLz48L2c+PC9zdmc+", fee_flat: 0, fee_percent: 0.5, min_amount: 50000, max_amount: 500000000, active: true, maintenance: true },
  { code: "SOL", name: "Solana (SOL)", group: "Cryptocurrency", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIj48Y2lyY2xlIGZpbGw9IiM2NkY5QTEiIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIvPjxwYXRoIGQ9Ik0xOS45MjUgMTkuNjg3YS41OS41OSAwIDAxLjQxNS0uMTdoMTQuMzY2YS4yOS4yOSAwIDAxLjIwNy40OTdsLTIuODM4IDIuODE1YS41OS41OSAwIDAxLS40MTUuMTdINy4yOTRhLjI5MS4yOTEgMCAwMS0uMjA3LS40OThsMi44MzgtMi44MTV6bTAtMTAuNTE3QS41OS41OSAwIDAxMTAuMzQgOWgxNC4zNjZjLjI2MSAwIC4zOTIuMzE0LjIwNy40OThsLTIuODM4IDIuODE1YS41OS41OSAwIDAxLS40MTUuMTdINy4yOTRhLjI5MS4yOTEgMCAwMS0uMjA3LS40OTdMOS45MjUgOS4xN3ptMTIuMTUgNS4yMjVhLjU5LjU5IDAgMDAtLjQxNS0uMTdINy4yOTRhLjI5MS4yOTEgMCAwMC0uMjA3LjQ5OGwyLjgzOCAyLjgxNWMuMTEuMTA5LjI2LjE3LjQxNS4xN2gxNC4zNjZhLjI5MS4yOTEgMCAwMC4yMDctLjQ5OGwtMi44MzgtMi44MTV6IiBmaWxsPSIjRkZGIi8+PC9nPjwvc3ZnPg==", fee_flat: 0, fee_percent: 1, min_amount: 50000, max_amount: 500000000, active: true, maintenance: true },
  { code: "BNB", name: "BNB Chain", group: "Cryptocurrency", type: "direct", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PGcgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTYiIGN5PSIxNiIgcj0iMTYiIGZpbGw9IiNGM0JBMkYiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTIuMTE2IDE0LjQwNEwxNiAxMC41MmwzLjg4NiAzLjg4NiAyLjI2LTIuMjZMMTYgNmwtNi4xNDQgNi4xNDQgMi4yNiAyLjI2ek02IDE2bDIuMjYtMi4yNkwxMC41MiAxNmwtMi4yNiAyLjI2TDYgMTZ6bTYuMTE2IDEuNTk2TDE2IDIxLjQ4bDMuODg2LTMuODg2IDIuMjYgMi4yNTlMMTYgMjZsLTYuMTQ0LTYuMTQ0LS4wMDMtLjAwMyAyLjI2My0yLjI1N3pNMjEuNDggMTZsMi4yNi0yLjI2TDI2IDE2bC0yLjI2IDIuMjZMMjEuNDggMTZ6bS0zLjE4OC0uMDAyaC4wMDJWMTZMMTYgMTguMjk0bC0yLjI5MS0yLjI5LS4wMDQtLjAwNC4wMDQtLjAwMy40MDEtLjQwMi4xOTUtLjE5NUwxNiAxMy43MDZsMi4yOTMgMi4yOTN6Ii8+PC9nPjwvc3ZnPg==", fee_flat: 0, fee_percent: 1, min_amount: 50000, max_amount: 500000000, active: true, maintenance: true },
  // ── Dummy: Paylater (maintenance) ──
  { code: "KREDIVO", name: "Kredivo", group: "Paylater", type: "redirect", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjNDhBNjQ2Ii8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjE0IiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5rcmVkaXZvPC90ZXh0Pjwvc3ZnPg==", fee_flat: 0, fee_percent: 2.6, min_amount: 50000, max_amount: 30000000, active: true, maintenance: true },
  { code: "AKULAKU", name: "Akulaku", group: "Paylater", type: "redirect", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjN0IyRDhFIi8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjE0IiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5ha3VsYWt1PC90ZXh0Pjwvc3ZnPg==", fee_flat: 0, fee_percent: 3, min_amount: 50000, max_amount: 20000000, active: true, maintenance: true },
  { code: "SPAYLATER", name: "SPayLater", group: "Paylater", type: "redirect", icon_url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNjAiIHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNjAiIHJ4PSI4IiBmaWxsPSIjMDBBRUQ2Ii8+PHRleHQgeD0iNjAiIHk9IjM4IiBmb250LWZhbWlseT0iQXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjE2IiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5Hb1BheTwvdGV4dD48L3N2Zz4=", fee_flat: 0, fee_percent: 2.5, min_amount: 50000, max_amount: 10000000, active: true, maintenance: true },
];

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default function GameDetailPage({ params }: { params: any }) {
  const resolvedParams = typeof params?.then === 'function' ? use(params) : params;
  const slug = resolvedParams?.game as string;
  const { user, token } = useAuth();
  const [gameData, setGameData] = useState<GameDetail | null>(null);
  const [channels, setChannels] = useState<PaymentChannel[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  // Form state
  const [formData, setFormData] = useState<Record<string, string>>({});
  const [selectedCode, setSelectedCode] = useState<string | null>(null);
  const [paymentMethod, setPaymentMethod] = useState("");
  const [contactEmail, setContactEmail] = useState("");
  const [contactPhone, setContactPhone] = useState("");
  const [openGroup, setOpenGroup] = useState<string | null>(null);
  const [showNotice, setShowNotice] = useState(false);
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  // Nickname & Order Confirmation
  const [checkingNickname, setCheckingNickname] = useState(false);
  const [nickname, setNickname] = useState<string | null>(null);
  const [showConfirmModal, setShowConfirmModal] = useState(false);
  const [orderLoading, setOrderLoading] = useState(false);

  // Voucher state
  const [voucherCode, setVoucherCode] = useState("");
  const [voucherLoading, setVoucherLoading] = useState(false);
  const [voucherResult, setVoucherResult] = useState<{ success: boolean; message?: string; data?: { code: string; discount_type: string; discount_value: number; discount_amount: number; final_price: number | null } } | null>(null);

  useEffect(() => {
    Promise.all([
      fetchGameDetailClient(slug),
      fetchPaymentChannels().catch(() => []),
    ])
      .then(([game, pay]) => {
        setGameData(game);
        // Merge real API channels with dummy maintenance channels
        const realCodes = new Set(pay.map((c: PaymentChannel) => c.code));
        const dummyChannels = FALLBACK_CHANNELS.filter(c => c.maintenance && !realCodes.has(c.code));
        const realChannels = pay.length > 0 ? pay : FALLBACK_CHANNELS.filter(c => !c.maintenance);
        const merged = [...realChannels, ...dummyChannels];
        setChannels(merged);
        // Auto-open first group
        const firstGroup = merged[0]?.group;
        if (firstGroup) setOpenGroup(firstGroup);
      })
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, [slug]);

  // Auto-fill contact info from user profile
  useEffect(() => {
    if (user) {
      if (user.email && !contactEmail) setContactEmail(user.email);
      if (user.phone && user.wa_linked && !contactPhone) setContactPhone(user.phone);
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [user]);

  const inputConfig = gameData ? getProductInputConfig(slug, gameData.category) : null;
  const selected = gameData?.products.find((p) => p.code === selectedCode);

  const allFieldsFilled = inputConfig?.fields.every(f => !f.required || formData[f.key]?.trim());
  const canProceed = allFieldsFilled && selectedCode && paymentMethod && contactEmail;

  // Check if a channel is maintenance (dummy)
  const maintenanceCodes = new Set(FALLBACK_CHANNELS.filter(c => c.maintenance).map(c => c.code));

  // Group payment channels
  const groupedChannels: Record<string, PaymentChannel[]> = {};
  channels.forEach((ch) => {
    if (!groupedChannels[ch.group]) groupedChannels[ch.group] = [];
    groupedChannels[ch.group].push(ch);
  });

  const handleProceed = async () => {
    if (!canProceed || !selected) return;

    // Only check nickname for game category
    if (gameData?.category === 'game') {
      setCheckingNickname(true);
      try {
        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL }/api/products/check-nickname`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            game: slug,
            user_id: formData.userId,
            zone_id: formData.zoneId || '',
          }),
        });
        const json = await res.json();
        if (json.success && json.data?.nickname) {
          setNickname(json.data.nickname);
        } else {
          setNickname(null);
        }
      } catch (err) {
        console.error('Check nickname failed:', err);
        setNickname(null);
      } finally {
        setCheckingNickname(false);
        setShowConfirmModal(true);
      }
    } else {
      setShowConfirmModal(true);
    }
  };

  // Validate voucher
  const handleValidateVoucher = async () => {
    if (!voucherCode.trim()) return;
    setVoucherLoading(true);
    try {
      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL }/api/orders/validate-voucher`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          code: voucherCode.trim(),
          amount: selected?.sell_price || 0,
          game_slug: slug,
        }),
      });
      const json = await res.json();
      setVoucherResult(json);
    } catch (err) {
      setVoucherResult({ success: false, message: 'Gagal memvalidasi voucher' });
    } finally {
      setVoucherLoading(false);
    }
  };

  const clearVoucher = () => {
    setVoucherCode("");
    setVoucherResult(null);
  };

  const discountAmount = voucherResult?.success ? (voucherResult.data?.discount_amount || 0) : 0;
  const finalPrice = selected ? selected.sell_price - discountAmount : 0;

  const handleFinalSubmit = async () => {
    if (!selected || !paymentMethod) return;
    setOrderLoading(true);
    try {
      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
      if (token) headers['Authorization'] = `Bearer ${token}`;
      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL }/api/orders`, {
        method: 'POST',
        headers,
        body: JSON.stringify({
          product_id: selected.code,
          user_input: formData.userId || formData.email || formData.phone || formData.devices || '',
          user_zone: formData.zoneId || null,
          quantity: 1,
          payment_method: paymentMethod,
          email: contactEmail,
          phone: contactPhone || null,
          nickname: nickname || null,
          promo_code: voucherResult?.success ? voucherResult.data?.code : null,
        }),
      });
      const json = await res.json();
      if (json.success) {
        // Redirect to invoice page or Tripay checkout
        if (json.data.payment?.checkout_url) {
          window.location.href = json.data.payment.checkout_url;
        } else {
          window.location.href = `/invoice?no=${json.data.order.invoice_no}`;
        }
      } else {
        alert(json.message || 'Gagal membuat pesanan');
      }
    } catch (err) {
      alert('Terjadi kesalahan koneksi');
    } finally {
      setOrderLoading(false);
    }
  };

  if (loading) {
    return (
      <>
        <Navbar />
        <main className="max-w-7xl mx-auto px-4 pt-24 pb-24 flex items-center justify-center min-h-[60vh]">
          <div className="text-center">
            <Loader2 size={40} className="mx-auto text-primary animate-spin mb-4" />
            <p className="text-muted">Memuat data...</p>
          </div>
        </main>
        <MobileNav />
      </>
    );
  }

  if (error || !gameData) {
    return (
      <>
        <Navbar />
        <main className="max-w-7xl mx-auto px-4 pt-24 pb-24 flex items-center justify-center min-h-[60vh]">
          <div className="text-center">
            <AlertCircle size={48} className="mx-auto text-red-500 mb-4" />
            <h2 className="font-heading text-xl font-bold text-white mb-2">Game Tidak Ditemukan</h2>
            <p className="text-muted text-sm">{error || "Layanan ini belum tersedia"}</p>
            <a href="/" className="inline-block mt-4 btn-primary text-sm">Kembali</a>
          </div>
        </main>
        <MobileNav />
      </>
    );
  }

  const availableCount = gameData.products.filter(p => p.status === 'available').length;

  return (
    <>
      <Navbar />
      <main className="max-w-7xl mx-auto px-4 pt-20 pb-24 lg:pb-12">

        {/* ═══ Hero Banner — Full Width Bangjeff Style ═══ */}
        <div className="relative rounded-2xl overflow-hidden mb-6 h-64 md:h-80">
          {/* Background layers */}
          <div className="absolute inset-0">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={gameData.icon} alt="" className="w-full h-full object-cover opacity-30 blur-2xl scale-[2]" />
          </div>
          <div className="absolute inset-0 bg-gradient-to-r from-dark via-dark/70 to-dark/40" />
          <div className="absolute inset-0 bg-gradient-to-t from-dark via-transparent to-transparent" />
          <div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-transparent to-secondary/10" />

          {/* Decorative elements */}
          <div className="absolute top-0 right-0 w-72 h-72 bg-primary/5 rounded-full blur-3xl" />
          <div className="absolute bottom-0 left-1/3 w-48 h-48 bg-secondary/5 rounded-full blur-3xl" />

          {/* Content */}
          <div className="relative z-20 flex items-end h-full px-6 md:px-10 pb-8">
            <div className="flex items-center gap-5 md:gap-7">
              <div className="w-24 h-24 md:w-32 md:h-32 rounded-2xl overflow-hidden ring-2 ring-white/20 shadow-2xl shrink-0 bg-dark-surface">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src={gameData.icon} alt={gameData.name} className="w-full h-full object-cover" />
              </div>
              <div>
                <h1 className="font-heading text-2xl md:text-4xl font-black text-white uppercase tracking-wide drop-shadow-lg">
                  {gameData.name}
                </h1>
                <div className="flex items-center gap-2 mt-1.5 mb-3">
                  <div className="flex items-center gap-0.5">
                    {[1,2,3,4,5].map(s => <Star key={s} size={13} className="text-secondary fill-secondary" />)}
                  </div>
                  <span className="text-xs text-white/60">4.9</span>
                  <span className="text-xs text-muted">•</span>
                  <span className="text-xs text-muted">{gameData.products.length} produk</span>
                </div>
                <div className="flex flex-wrap items-center gap-2">
                  <span className="flex items-center gap-1 text-[11px] text-secondary bg-secondary/10 backdrop-blur-sm px-2.5 py-1 rounded-full font-medium border border-secondary/20">
                    <Zap size={11} /> Proses Cepat
                  </span>
                  <span className="flex items-center gap-1 text-[11px] text-blue-400 bg-blue-400/10 backdrop-blur-sm px-2.5 py-1 rounded-full font-medium border border-blue-400/20">
                    <MessageCircle size={11} /> Layanan Chat 24/7
                  </span>
                  <span className="flex items-center gap-1 text-[11px] text-green-400 bg-green-400/10 backdrop-blur-sm px-2.5 py-1 rounded-full font-medium border border-green-400/20">
                    <Shield size={11} /> Pembayaran Aman!
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* ═══ LEFT COLUMN ═══ */}
          <div className="lg:col-span-2 space-y-5">

            {/* ── Step 1: Masukkan Data ── */}
            <div className="glass rounded-2xl overflow-hidden">
              <div className="flex items-center gap-3 px-6 py-4 bg-primary/10 border-b border-primary/20">
                <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-sm font-bold text-white">1</div>
                <h2 className="font-heading text-base font-bold text-white">Masukkan Data Tujuan</h2>
              </div>

              {/* Notice if exists */}
              {inputConfig?.notice && (
                <div className="mx-6 mt-4">
                  <button
                    onClick={() => setShowNotice(!showNotice)}
                    className="w-full flex items-center gap-2 px-4 py-3 rounded-xl bg-yellow-500/10 border border-yellow-500/20 text-yellow-400 text-xs font-medium text-left"
                  >
                    <Info size={14} className="shrink-0" />
                    <span className="flex-1">{inputConfig.noticeTitle || 'Informasi Penting'}</span>
                    {showNotice ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
                  </button>
                  <AnimatePresence>
                    {showNotice && (
                      <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: "auto", opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        className="overflow-hidden"
                      >
                        <div className="px-4 py-3 text-xs text-yellow-200/80 bg-yellow-500/5 rounded-b-xl border-x border-b border-yellow-500/10 whitespace-pre-line leading-relaxed">
                          {inputConfig.notice}
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              )}

              <div className="p-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {inputConfig?.fields.map((field: InputField) => (
                    <div key={field.key} className={inputConfig.fields.length === 1 ? 'md:col-span-2' : ''}>
                      <label className="text-xs text-muted mb-1.5 block font-medium">
                        {field.label} {field.required && <span className="text-red-400">*</span>}
                      </label>
                      <input
                        type={field.type}
                        value={formData[field.key] || ''}
                        onChange={(e) => setFormData({ ...formData, [field.key]: e.target.value })}
                        placeholder={field.placeholder}
                        className="input-field"
                      />
                      {field.info && (
                        <p className="text-[10px] text-muted/60 mt-1.5 leading-relaxed">{field.info}</p>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* ── Step 2: Pilih Nominal ── */}
            <div className="glass rounded-2xl overflow-hidden">
              <div className="flex items-center gap-3 px-6 py-4 bg-primary/10 border-b border-primary/20">
                <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-sm font-bold text-white">2</div>
                <h2 className="font-heading text-base font-bold text-white">Pilih Nominal</h2>
                <span className="ml-auto text-xs text-muted">{availableCount} tersedia</span>
              </div>
              <div className="p-6">
                <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                  {gameData.products.map((product) => {
                    const isAvailable = product.status === 'available';
                    const isSelected = selectedCode === product.code;
                    return (
                      <button
                        key={product.code}
                        disabled={!isAvailable}
                        onClick={() => isAvailable && setSelectedCode(product.code)}
                        className={`relative p-3.5 rounded-xl text-left transition-all border-l-[3px] border ${
                          isSelected
                            ? "border-primary border-l-primary bg-primary/10 shadow-glow-sm"
                            : isAvailable
                            ? "border-dark-border border-l-green-500 bg-dark-surface2 hover:border-primary/50 hover:border-l-primary"
                            : "border-dark-border/40 border-l-red-500/50 bg-dark-surface2/40 opacity-60 cursor-not-allowed"
                        }`}
                      >
                        {/* Stock badge top-right */}
                        <span className={`absolute top-2 right-2 flex items-center gap-1 text-[8px] font-bold px-1.5 py-0.5 rounded-full ${
                          isAvailable ? "bg-green-500/15 text-green-400 border border-green-500/20" : "bg-red-500/15 text-red-400 border border-red-500/20"
                        }`}>
                          <span className={`w-1.5 h-1.5 rounded-full ${isAvailable ? "bg-green-400" : "bg-red-400"}`} />
                          {isAvailable ? "READY" : "KOSONG"}
                        </span>

                        <p className="text-[11px] sm:text-sm font-semibold text-white leading-tight pr-14">{product.name}</p>
                        <div className="flex items-center gap-1.5 mt-2">
                          <p className={`text-xs font-bold ${isAvailable ? "text-primary" : "text-muted"}`}>
                            {formatRp(product.sell_price)}
                          </p>
                          {isAvailable && (
                            <span className="text-[8px] text-secondary bg-secondary/10 px-1.5 py-0.5 rounded-full font-bold flex items-center gap-0.5">
                              <Zap size={7} /> INSTAN
                            </span>
                          )}
                        </div>

                        {isSelected && (
                          <div className="absolute bottom-2 right-2">
                            <Check size={16} className="text-primary" />
                          </div>
                        )}
                      </button>
                    );
                  })}
                </div>
              </div>
            </div>

            {/* ── Step 3: Pilih Pembayaran ── */}
            <div className="glass rounded-2xl overflow-hidden">
              <div className="flex items-center gap-3 px-6 py-4 bg-primary/10 border-b border-primary/20">
                <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-sm font-bold text-white">3</div>
                <h2 className="font-heading text-base font-bold text-white">Pilih Pembayaran</h2>
              </div>
              <div className="p-6 space-y-3">
                {(channels.length > 0 ? Object.entries(groupedChannels) : []).map(([group, items]) => (
                  <div key={group} className="rounded-xl border border-dark-border overflow-hidden">
                    {/* Group header */}
                    <button
                      onClick={() => setOpenGroup(openGroup === group ? null : group)}
                      className="w-full flex items-center justify-between px-4 py-3.5 bg-dark-surface2 hover:bg-dark-surface2/80 transition-colors"
                    >
                      <div className="flex items-center gap-2.5">
                        <CreditCard size={15} className="text-primary" />
                        <span className="text-sm font-bold text-white">{group}</span>
                        <span className="text-[10px] text-muted bg-dark-surface px-2 py-0.5 rounded-full">{items.length} channel</span>
                      </div>
                      <div className="flex items-center gap-3">
                        {/* Mini icon preview */}
                        <div className="hidden sm:flex items-center -space-x-1.5">
                          {items.slice(0, 5).map((ch) => (
                            <div key={ch.code} className="w-7 h-7 rounded-lg border-2 border-dark-surface2 bg-white overflow-hidden">
                              {/* eslint-disable-next-line @next/next/no-img-element */}
                              <img src={ch.icon_url} alt={ch.name} className="w-full h-full object-contain p-0.5" loading="lazy" />
                            </div>
                          ))}
                        </div>
                        {openGroup === group ? <ChevronUp size={16} className="text-muted" /> : <ChevronDown size={16} className="text-muted" />}
                      </div>
                    </button>

                    {/* Channels in group */}
                    <AnimatePresence>
                      {openGroup === group && (
                        <motion.div
                          initial={{ height: 0 }}
                          animate={{ height: "auto" }}
                          exit={{ height: 0 }}
                          className="overflow-hidden"
                        >
                          <div className="grid grid-cols-1 gap-2 p-3">
                            {items.map((ch) => {
                              const isBestPrice = ch.code === 'QRIS' || ch.code === 'QRIS2';
                              const isMaintenance = maintenanceCodes.has(ch.code);
                              return (
                                <button
                                  key={ch.code}
                                  disabled={isMaintenance}
                                  onClick={() => !isMaintenance && setPaymentMethod(ch.code)}
                                  className={`relative flex items-center gap-4 p-4 rounded-xl transition-all border ${
                                    isMaintenance
                                      ? "border-dark-border/40 bg-dark-surface/50 opacity-60 cursor-not-allowed"
                                      : paymentMethod === ch.code
                                      ? "border-primary bg-primary/10 ring-1 ring-primary/20"
                                      : "border-dark-border bg-dark-surface hover:border-primary/30 hover:bg-dark-surface2/50"
                                  }`}
                                >
                                  {/* BEST PRICE tag */}
                                  {isBestPrice && !isMaintenance && (
                                    <span className="absolute -top-1 -right-1 text-[7px] font-black bg-gradient-to-r from-orange-500 to-primary text-white px-2 py-0.5 rounded-bl-lg rounded-tr-xl uppercase tracking-wider shadow-lg">
                                      Best Price
                                    </span>
                                  )}
                                  {/* MAINTENANCE tag */}
                                  {isMaintenance && (
                                    <span className="absolute -top-1 -right-1 text-[7px] font-black bg-gradient-to-r from-yellow-600 to-yellow-500 text-black px-2 py-0.5 rounded-bl-lg rounded-tr-xl uppercase tracking-wider shadow-lg flex items-center gap-0.5">
                                      <AlertCircle size={8} /> Maintenance
                                    </span>
                                  )}

                                  <div className={`w-12 h-12 rounded-xl bg-white flex items-center justify-center shrink-0 overflow-hidden shadow-sm ${isMaintenance ? "grayscale" : ""}`}>
                                    {/* eslint-disable-next-line @next/next/no-img-element */}
                                    <img src={ch.icon_url} alt={ch.name} className="w-9 h-9 object-contain" loading="lazy" />
                                  </div>
                                  <div className="flex-1 text-left">
                                    <p className={`text-sm font-semibold ${isMaintenance ? "text-muted" : "text-white"}`}>{ch.name}</p>
                                    <div className="flex items-center gap-2 mt-0.5">
                                      <span className="text-[10px] text-muted">Biaya: <span className="text-white/70">{formatFee(ch.fee_flat, ch.fee_percent)}</span></span>
                                      <span className="text-[10px] text-muted">•</span>
                                      <span className="text-[10px] text-muted">Max: <span className="text-white/70">{formatRp(ch.max_amount)}</span></span>
                                    </div>
                                  </div>
                                  {paymentMethod === ch.code && !isMaintenance && (
                                    <div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center shrink-0">
                                      <Check size={14} className="text-white" />
                                    </div>
                                  )}
                                </button>
                              );
                            })}
                          </div>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </div>
                ))}
              </div>
            </div>

            {/* ── Step 4: Detail Kontak ── */}
            <div className="glass rounded-2xl overflow-hidden">
              <div className="flex items-center gap-3 px-6 py-4 bg-primary/10 border-b border-primary/20">
                <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-sm font-bold text-white">4</div>
                <h2 className="font-heading text-base font-bold text-white">Detail Kontak</h2>
              </div>
              <div className="p-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="text-xs text-muted mb-1.5 block font-medium">Email <span className="text-red-400">*</span></label>
                    <div className="relative">
                      <Mail size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
                      <input type="email" value={contactEmail} onChange={(e) => setContactEmail(e.target.value)} placeholder="email@example.com" className="input-field pl-10" />
                    </div>
                  </div>
                  <div>
                    <label className="text-xs text-muted mb-1.5 block font-medium">WhatsApp <span className="text-muted">(opsional)</span></label>
                    <div className="relative">
                      <Phone size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
                      <input type="text" value={contactPhone} onChange={(e) => setContactPhone(e.target.value)} placeholder="081234567890" className="input-field pl-10" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ═══ RIGHT SIDEBAR ═══ */}
          <div className="lg:col-span-1 space-y-5">
            <div className="lg:sticky lg:top-20 space-y-5">

              {/* Ulasan & Rating */}
              <div className="glass rounded-2xl p-5">
                <h3 className="text-xs font-semibold text-muted uppercase tracking-wider mb-3">Ulasan dan Rating</h3>
                <div className="flex items-center gap-3">
                  <span className="text-4xl font-heading font-black text-primary">4.99</span>
                  <div className="flex flex-col">
                    <div className="flex items-center gap-0.5">
                      {[1,2,3,4,5].map(s => <Star key={s} size={16} className="text-secondary fill-secondary" />)}
                    </div>
                    <span className="text-[10px] text-muted mt-0.5">Berdasarkan total 61.66jt rating</span>
                  </div>
                </div>
              </div>

              {/* Ringkasan Pesanan */}
              <div className="glass rounded-2xl p-5">
                <h3 className="font-heading text-sm font-bold text-white mb-4 flex items-center gap-2">
                  <Sparkles size={14} className="text-primary" />
                  Ringkasan Pesanan
                </h3>
                {selected ? (
                  <div className="space-y-3">
                    <div className="flex justify-between text-sm"><span className="text-muted">Game</span><span className="text-white font-medium">{gameData.name}</span></div>
                    <div className="flex justify-between text-sm"><span className="text-muted">Item</span><span className="text-white font-medium text-right max-w-[60%] leading-tight">{selected.name}</span></div>
                    {paymentMethod && <div className="flex justify-between text-sm"><span className="text-muted">Pembayaran</span><span className="text-white font-medium">{paymentMethod}</span></div>}

                    {/* Voucher Input */}
                    <div className="border-t border-dark-border pt-3">
                      <label className="text-[10px] text-muted font-medium mb-1.5 block uppercase tracking-wider">Kode Voucher</label>
                      {voucherResult?.success ? (
                        <div className="flex items-center justify-between bg-green-500/10 border border-green-500/20 rounded-xl px-3 py-2.5">
                          <div className="flex items-center gap-2">
                            <Ticket size={14} className="text-green-400" />
                            <div>
                              <span className="text-xs font-bold text-green-400">{voucherResult.data?.code}</span>
                              <span className="text-[10px] text-green-400/70 ml-2">
                                -{voucherResult.data?.discount_type === 'percent' ? `${voucherResult.data?.discount_value}%` : formatRp(voucherResult.data?.discount_value || 0)}
                              </span>
                            </div>
                          </div>
                          <button onClick={clearVoucher} className="p-1 rounded hover:bg-white/10 text-green-400"><X size={12} /></button>
                        </div>
                      ) : (
                        <div className="flex gap-2">
                          <input
                            value={voucherCode}
                            onChange={(e) => { setVoucherCode(e.target.value.toUpperCase()); setVoucherResult(null); }}
                            placeholder="Masukkan kode"
                            className="flex-1 bg-dark-surface border border-dark-border rounded-xl px-3 py-2.5 text-xs text-white placeholder:text-muted/40 focus:outline-none focus:border-primary/50 transition-all"
                            onKeyDown={(e) => e.key === 'Enter' && handleValidateVoucher()}
                          />
                          <button
                            onClick={handleValidateVoucher}
                            disabled={!voucherCode.trim() || voucherLoading}
                            className="px-3.5 py-2.5 rounded-xl bg-primary/10 border border-primary/20 text-primary text-xs font-bold hover:bg-primary/20 transition-all disabled:opacity-40 disabled:cursor-not-allowed"
                          >
                            {voucherLoading ? <Loader2 size={12} className="animate-spin" /> : 'Cek'}
                          </button>
                        </div>
                      )}
                      {voucherResult && !voucherResult.success && (
                        <p className="text-[10px] text-red-400 mt-1.5 flex items-center gap-1"><AlertCircle size={10} />{voucherResult.message}</p>
                      )}
                    </div>

                    {/* Price Summary */}
                    <div className="border-t border-dark-border pt-3 space-y-2">
                      <div className="flex justify-between text-sm">
                        <span className="text-muted">Harga</span>
                        <span className={`font-medium ${discountAmount > 0 ? 'text-muted line-through text-xs' : 'text-white'}`}>{formatRp(selected.sell_price)}</span>
                      </div>
                      {discountAmount > 0 && (
                        <div className="flex justify-between text-sm">
                          <span className="text-green-400 flex items-center gap-1"><Ticket size={10} />Diskon</span>
                          <span className="text-green-400 font-bold">-{formatRp(discountAmount)}</span>
                        </div>
                      )}
                      <div className="flex justify-between">
                        <span className="text-sm text-muted">Total</span>
                        <span className="text-xl font-heading font-bold text-primary">{formatRp(finalPrice)}</span>
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="text-center py-8">
                    <AlertCircle size={28} className="mx-auto text-muted/40 mb-2" />
                    <p className="text-xs text-muted">Belum ada item produk yang dipilih.</p>
                  </div>
                )}
                <button 
                  onClick={handleProceed}
                  disabled={!canProceed || checkingNickname} 
                  className={`w-full mt-5 py-3.5 rounded-xl font-semibold text-sm flex items-center justify-center gap-2 transition-all ${
                    canProceed ? "btn-primary shadow-glow-sm" : "bg-dark-surface2 text-muted cursor-not-allowed border border-dark-border"
                  }`}
                >
                  {checkingNickname ? (
                    <Loader2 size={16} className="animate-spin" />
                  ) : (
                    <MessageCircle size={16} />
                  )}
                  {checkingNickname ? "Mengecek ID..." : canProceed ? "Pesan Sekarang!" : "Lengkapi Data"}
                </button>
                <div className="flex items-center gap-2 mt-3 justify-center">
                  <Lock size={12} className="text-green-500" />
                  <span className="text-[10px] text-muted">Transaksi aman & terenkripsi</span>
                </div>
              </div>

              {/* Butuh Bantuan? */}
              <div className="glass rounded-2xl p-5">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-xl bg-green-500/10 flex items-center justify-center">
                    <MessageCircle size={18} className="text-green-400" />
                  </div>
                  <div>
                    <h4 className="text-sm font-bold text-white">Butuh Bantuan?</h4>
                    <p className="text-[10px] text-muted">Kamu bisa hubungi admin disini.</p>
                  </div>
                </div>
                <a
                  href="https://wa.me/6281359123789"
                  target="_blank"
                  rel="noopener"
                  className="mt-3 w-full flex items-center justify-center gap-2 py-2.5 rounded-xl bg-green-500/10 border border-green-500/20 text-green-400 text-xs font-semibold hover:bg-green-500/20 transition-colors"
                >
                  <MessageCircle size={14} />
                  Chat WhatsApp
                </a>
              </div>

              {/* Delivery Info */}
              <div className="glass rounded-2xl p-5">
                <div className="flex items-center gap-2 mb-3">
                  <Clock size={14} className="text-primary" />
                  <h4 className="text-xs font-bold text-white uppercase tracking-wider">Info Pengiriman</h4>
                </div>
                <div className="space-y-2">
                  <div className="flex items-start gap-2">
                    <BadgeCheck size={12} className="text-green-400 mt-0.5 shrink-0" />
                    <p className="text-[11px] text-muted leading-relaxed">Pengiriman akun/item berlangsung <span className="text-white font-medium">maksimal 30 menit</span>.</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <BadgeCheck size={12} className="text-green-400 mt-0.5 shrink-0" />
                    <p className="text-[11px] text-muted leading-relaxed">Game top-up biasanya <span className="text-white font-medium">instan (1-5 menit)</span>.</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <BadgeCheck size={12} className="text-yellow-400 mt-0.5 shrink-0" />
                    <p className="text-[11px] text-muted leading-relaxed">Jika lebih dari 30 menit, hubungi <span className="text-primary font-medium">admin via WhatsApp</span>.</p>
                  </div>
                </div>
              </div>

              {/* FAQ */}
              <div className="glass rounded-2xl p-5">
                <div className="flex items-center gap-2 mb-4">
                  <HelpCircle size={14} className="text-primary" />
                  <h4 className="text-xs font-bold text-white uppercase tracking-wider">FAQ</h4>
                </div>
                <div className="space-y-2">
                  {FAQ_ITEMS.map((item, i) => (
                    <div key={i} className="rounded-xl border border-dark-border overflow-hidden">
                      <button
                        onClick={() => setOpenFaq(openFaq === i ? null : i)}
                        className="w-full flex items-center justify-between px-4 py-3 bg-dark-surface2/50 hover:bg-dark-surface2 transition-colors text-left"
                      >
                        <span className="text-xs font-medium text-white pr-2">{item.q}</span>
                        {openFaq === i ? <ChevronUp size={14} className="text-muted shrink-0" /> : <ChevronDown size={14} className="text-muted shrink-0" />}
                      </button>
                      <AnimatePresence>
                        {openFaq === i && (
                          <motion.div
                            initial={{ height: 0, opacity: 0 }}
                            animate={{ height: "auto", opacity: 1 }}
                            exit={{ height: 0, opacity: 0 }}
                            className="overflow-hidden"
                          >
                            <p className="px-4 py-3 text-[11px] text-muted leading-relaxed border-t border-dark-border/50">
                              {item.a}
                            </p>
                          </motion.div>
                        )}
                      </AnimatePresence>
                    </div>
                  ))}
                </div>
              </div>

            </div>
          </div>
        </div>
      </main>
      <Footer />
      <MobileNav />

      {/* ── Confirmation Modal ── */}
      <AnimatePresence>
        {showConfirmModal && (
          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
            <motion.div 
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => !orderLoading && setShowConfirmModal(false)}
              className="absolute inset-0 bg-dark/80 backdrop-blur-sm"
            />
            <motion.div
              initial={{ opacity: 0, scale: 0.9, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.9, y: 20 }}
              className="relative w-full max-w-md bg-dark-surface border border-dark-border rounded-2xl shadow-2xl overflow-hidden"
            >
              <div className="bg-primary/10 border-b border-primary/20 px-6 py-4 flex items-center justify-between">
                <h3 className="font-heading text-base font-bold text-white flex items-center gap-2">
                  <BadgeCheck size={18} className="text-primary" /> Konfirmasi Pesanan
                </h3>
                <button onClick={() => !orderLoading && setShowConfirmModal(false)} className="text-muted hover:text-white transition-colors">
                  <Info size={18} />
                </button>
              </div>

              <div className="p-6 space-y-4">
                <div className="bg-dark-surface2/50 rounded-xl p-4 border border-dark-border space-y-3">
                  <div className="flex justify-between items-center text-xs">
                    <span className="text-muted">Layanan</span>
                    <span className="text-white font-bold">{gameData.name}</span>
                  </div>
                  <div className="flex justify-between items-center text-xs">
                    <span className="text-muted">Item</span>
                    <span className="text-white font-bold">{selected?.name}</span>
                  </div>
                  <div className="flex justify-between items-center text-xs border-t border-dark-border pt-2 mt-2">
                    <span className="text-muted">Target ID</span>
                    <span className="text-primary font-mono font-bold tracking-wider">
                      {formData.userId || formData.email || formData.phone || formData.devices}
                      {formData.zoneId && ` (${formData.zoneId})`}
                    </span>
                  </div>

                  {/* Nickname Result */}
                  <div className={`flex justify-between items-center p-2 rounded-lg ${nickname ? 'bg-green-500/10 border border-green-500/20' : 'bg-amber-500/10 border border-amber-500/20'}`}>
                    <span className="text-[10px] font-bold text-muted uppercase">Nickname</span>
                    <span className={`text-xs font-black ${nickname ? 'text-green-400' : 'text-amber-400'}`}>
                      {nickname || 'TIDAK DITEMUKAN'}
                    </span>
                  </div>
                  {!nickname && gameData.category === 'game' && (
                    <p className="text-[9px] text-amber-400/80 leading-tight italic">
                      *Nickname tidak ditemukan. Pastikan ID & Zone ID sudah benar sebelum melanjutkan.
                    </p>
                  )}
                </div>

                <div className="space-y-2">
                  <div className="flex justify-between items-center text-xs px-2">
                    <span className="text-muted">Metode Pembayaran</span>
                    <span className="text-white font-medium">{paymentMethod}</span>
                  </div>
                  <div className="flex justify-between items-center px-4 py-3 bg-primary/5 rounded-xl border border-primary/20">
                    <span className="text-sm font-medium text-white">Total Bayar</span>
                    <span className="text-lg font-heading font-black text-primary">{formatRp(selected?.sell_price || 0)}</span>
                  </div>
                </div>

                <div className="flex gap-3 pt-2">
                  <button 
                    disabled={orderLoading}
                    onClick={() => setShowConfirmModal(false)} 
                    className="flex-1 py-3 rounded-xl bg-dark-surface2 border border-dark-border text-white text-xs font-bold hover:bg-dark-surface transition-colors disabled:opacity-50"
                  >
                    Batal
                  </button>
                  <button 
                    disabled={orderLoading}
                    onClick={handleFinalSubmit}
                    className="flex-[2] py-3 rounded-xl bg-primary hover:bg-primary-hover text-dark text-xs font-black transition-all shadow-glow-sm flex items-center justify-center gap-2 disabled:opacity-50"
                  >
                    {orderLoading ? <Loader2 size={14} className="animate-spin" /> : <Zap size={14} />}
                    {orderLoading ? "Memproses..." : "Konfirmasi & Bayar"}
                  </button>
                </div>
              </div>
              
              <div className="px-6 py-3 bg-dark-surface2/30 border-t border-dark-border text-center">
                <p className="text-[9px] text-muted leading-relaxed">
                  Dengan mengklik Konfirmasi, Anda menyetujui seluruh Ketentuan Layanan kami.
                </p>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </>
  );
}