From a36d1ac6c87a05682228f7d0857d8d46666e69ad Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Fri, 16 Jan 2026 16:33:09 +0000
Subject: [PATCH] Update app/checkout/page.tsx

---
 app/checkout/page.tsx | 119 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 app/checkout/page.tsx

diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
new file mode 100644
index 0000000..a5f1cc3
--- /dev/null
+++ b/app/checkout/page.tsx
@@ -0,0 +1,119 @@
+"use client";
+import { useState } from "react";
+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 { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { NavBar } from "@/components/navbar";
+import { Footer } from "@/components/footer";
+
+const products = {
+  ultra: { name: "👑 ULTRA", price: 16000 },
+  mega: { name: "💎 MEGA", price: 9500 },
+  premium: { name: "⭐ PREMIUM", price: 4800 },
+  basico: { name: "🔹 Básico", price: 2900 },
+  esencia: { name: "🟢 ESENCIA", price: 1650 },
+  origen: { name: "🔵 ORIGEN", price: 1250 },
+  raiz: { name: "🟡 RAÍZ", price: 950 },
+  mini: { name: "🔴 Mini", price: 650 },
+};
+
+export default function CheckoutPage() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const planId = (searchParams.get("plan") as keyof typeof products) || "mini";
+  const product = products[planId];
+
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    address: "",
+    paymentMethod: "card",
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const orderId = Math.random().toString(36).substring(7).toUpperCase();
+    localStorage.setItem(`order_${orderId}`, JSON.stringify({
+      ...formData,
+      product: product.name,
+      price: product.price,
+      status: "Pendiente",
+      date: new Date().toISOString(),
+    }));
+    router.push(`/payment?orderId=${orderId}`);
+  };
+
+  return (
+    <main>
+      <NavBar />
+      <Container className="py-32">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          <div>
+            <Heading className="mb-8">Finalizar Pedido</Heading>
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="space-y-2">
+                <Label htmlFor="name">Nombre Completo</Label>
+                <Input id="name" required value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="email">Correo Electrónico</Label>
+                <Input id="email" type="email" required value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="phone">Teléfono / WhatsApp</Label>
+                <Input id="phone" type="tel" required value={formData.phone} onChange={(e) => setFormData({...formData, phone: e.target.value})} />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="address">Dirección de Envío Completa</Label>
+                <Input id="address" required value={formData.address} onChange={(e) => setFormData({...formData, address: e.target.value})} />
+              </div>
+              <div className="space-y-2">
+                <Label>Método de Pago</Label>
+                <Select value={formData.paymentMethod} onValueChange={(v) => setFormData({...formData, paymentMethod: v})}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Selecciona un método" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="card">Tarjeta de Crédito/Débito</SelectItem>
+                    <SelectItem value="binance">Binance (USDT)</SelectItem>
+                    <SelectItem value="oxxo">OXXO (QR)</SelectItem>
+                    <SelectItem value="transfer">Transferencia Bancaria / ACH</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <Button type="submit" className="w-full">Continuar al Pago</Button>
+            </form>
+          </div>
+
+          <div>
+            <Card>
+              <CardHeader>
+                <CardTitle>Resumen del Pedido</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex justify-between border-b pb-4">
+                  <span>Producto:</span>
+                  <span className="font-bold">{product.name}</span>
+                </div>
+                <div className="flex justify-between text-2xl font-bold pt-4">
+                  <span>Total:</span>
+                  <span>${product.price.toLocaleString()} USD</span>
+                </div>
+                <p className="text-sm text-neutral-500 italic">
+                  * El precio en MXN se calculará al tipo de cambio del día durante el pago.
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </Container>
+      <Footer />
+    </main>
+  );
+}