Update app/payment/page.tsx

app/payment/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+import { useSearchParams, useRouter } from "next/navigation";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { CheckCircle2, Copy, QrCode } from "lucide-react";
+
+import { NavBar } from "@/components/navbar";
+import { Footer } from "@/components/footer";
+
+export default function PaymentPage() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const orderId = searchParams.get("orderId");
+
+  const handleConfirm = () => {
+    // Simulate payment confirmation
+    const order = JSON.parse(localStorage.getItem(`order_${orderId}`) || "{}");
+    order.status = "Pagado";
+    order.trackingNumber = "PAL-" + Math.random().toString(36).substring(2, 10).toUpperCase();
+    localStorage.setItem(`order_${orderId}`, JSON.stringify(order));
+    router.push(`/success?orderId=${orderId}`);
+  };
+
+  return (
+    <main>
+      <NavBar />
+      <Container className="py-32 max-w-2xl">
+      <Card className="border-2 border-blue-100">
+        <CardHeader className="text-center">
+          <Heading className="text-2xl">Instrucciones de Pago</Heading>
+          <p className="text-neutral-500">Orden: #{orderId}</p>
+        </CardHeader>
+        <CardContent className="space-y-8">
+          <div className="p-6 bg-blue-50 rounded-xl space-y-4">
+            <h3 className="font-bold flex items-center gap-2">
+              <QrCode className="w-5 h-5" /> Pago con Binance (USDT)
+            </h3>
+            <div className="bg-white p-3 rounded border font-mono text-sm break-all">
+              TY7x9v2B8n1m4K5L6P3Q2W1E0R9T8Y7U6I
+            </div>
+            <Button variant="outline" size="sm" className="w-full gap-2">
+              <Copy className="w-4 h-4" /> Copiar Wallet
+            </Button>
+          </div>
+
+          <div className="p-6 bg-neutral-50 rounded-xl space-y-4">
+            <h3 className="font-bold">Transferencia Bancaria / ACH</h3>
+            <div className="text-sm space-y-1">
+              <p><strong>Banco:</strong> Chase Bank / BBVA</p>
+              <p><strong>Cuenta:</strong> 1234567890</p>
+              <p><strong>CLABE:</strong> 012345678901234567</p>
+              <p><strong>Beneficiario:</strong> EL PALACIO DE TENI LLC</p>
+            </div>
+          </div>
+
+          <div className="text-center space-y-4">
+            <p className="text-sm text-neutral-600">
+              Una vez realizado el pago, haz clic en el botón de abajo para confirmar. 
+              Nuestro sistema verificará la transacción en minutos.
+            </p>
+            <Button onClick={handleConfirm} className="w-full h-14 text-lg bg-green-600 hover:bg-green-700">
+              Ya realicé mi pago
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+      </Container>
+      <Footer />
+    </main>
+  );
+}