"use client";

import ThemedLayout from "@/components/layouts/ThemedLayout";
import { getMerchantBtcAddress, isMerchantBtcConfigured } from "@/lib/merchantBtc";

export default function PayPalMarket() {
  const btcAddr = getMerchantBtcAddress();
  const btcReady = isMerchantBtcConfigured();

  const wallets = [
    { id: 1, balance: "$1,240.00", price: "0.002 BTC", type: "Personal" },
    { id: 2, balance: "$3,500.00", price: "0.005 BTC", type: "Business" },
    { id: 3, balance: "$8,900.00", price: "0.012 BTC", type: "Business Premier" },
    { id: 4, balance: "$12,000.00", price: "0.018 BTC", type: "Corporate" },
  ];

  return (
    <ThemedLayout theme="retro" title="The Wallet Exchange">
      <div className="max-w-4xl mx-auto pt-12 font-mono text-[#0f0]">
        <header className="border-b-4 border-[#0f0] pb-8 mb-12">
          <h1 className="text-5xl font-black uppercase tracking-tighter">The Wallet Exchange</h1>
          <p className="text-sm mt-4">Verified PayPal Wallets. Instant Delivery.</p>
        </header>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
          {wallets.map(w => (
            <div key={w.id} className="border-2 border-[#0f0] p-8 bg-black/40 hover:bg-[#0f0]/10 transition-all">
              <div className="flex justify-between items-start mb-6">
                <div className="text-3xl font-bold">{w.balance}</div>
                <div className="text-[10px] bg-[#0f0] text-black px-2 py-1 font-bold uppercase">{w.type}</div>
              </div>
              <div className="space-y-2 text-xs opacity-60 mb-8">
                <div>{">"} Verified Email: YES</div>
                <div>{">"} Linked Bank: YES</div>
                <div>{">"} Transaction History: 12+ Months</div>
              </div>
              <div className="flex justify-between items-center">
                <div className="text-xl font-bold">{w.price}</div>
                <button className="bg-[#0f0] text-black px-6 py-2 font-bold uppercase text-xs hover:bg-[#0f0]/80 transition-all">
                  Buy Now
                </button>
              </div>
            </div>
          ))}
        </div>

        <div className="bg-[#0f0]/10 border-2 border-[#0f0] p-8 mb-12">
          <h3 className="text-xl font-bold mb-4 uppercase">Payment Instructions</h3>
          <p className="text-xs mb-6 leading-relaxed">
            Bitcoin payments use the same merchant address as CyberLux checkout. After the transaction is
            confirmed on-chain, verify the txid on the checkout page to add USD to your spendable balance.
          </p>
          <div className="bg-black text-white p-4 font-bold break-all mb-4 border border-[#0f0] text-[11px] leading-relaxed">
            {btcReady ? btcAddr : "[Set NEXT_PUBLIC_MERCHANT_BTC_ADDRESS in .env.local]"}
          </div>
          <div className="flex items-center gap-4 opacity-50">
            <div className="w-10 h-10 border-2 border-[#0f0] flex items-center justify-center font-bold">E</div>
            <div className="text-[8px] uppercase">
              Escrow Assured<br />by ShadowGuard™
            </div>
          </div>
        </div>

        <div className="text-center text-[10px] opacity-40 uppercase tracking-widest">
          Node 24 // Shadow Network // Est. 2024
        </div>
      </div>
    </ThemedLayout>
  );
}