app-dreamy-armadillo-flit/app/checkout/page.tsx

"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Footer } from "@/components/footer";
import { CheckCircle2 } from "lucide-react";
import { useState } from "react";
import Link from "next/link";

export default function CheckoutPage() {
  const [isOrdered, setIsOrdered] = useState(false);

  if (isOrdered) {
    return (
      <main className="min-h-screen bg-neutral-50">
        <Container className="py-20 text-center">
          <div className="bg-white p-12 rounded-3xl shadow-sm max-w-md mx-auto">
            <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <CheckCircle2 className="w-10 h-10 text-green-600" />
            </div>
            <Heading level={2} className="text-2xl mb-4">Order Placed Successfully!</Heading>
            <p className="text-neutral-500 mb-8">Thank you for shopping with BharatStore. Your order #BS-12345 is being processed.</p>
            <Button asChild className="rounded-full px-8">
              <Link href="/">Back to Home</Link>
            </Button>
          </div>
        </Container>
        <Footer />
      </main>
    );
  }

  return (
    <main className="min-h-screen bg-neutral-50">
      <Container className="py-12">
        <Heading className="mb-8">Checkout</Heading>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2 space-y-6">
            <div className="bg-white p-8 rounded-3xl shadow-sm">
              <h3 className="font-bold text-xl mb-6">Shipping Address</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="name">Full Name</Label>
                  <Input id="name" placeholder="John Doe" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="phone">Phone Number</Label>
                  <Input id="phone" placeholder="+91 98765 43210" />
                </div>
                <div className="md:col-span-2 space-y-2">
                  <Label htmlFor="address">Address</Label>
                  <Input id="address" placeholder="House No, Street, Area" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="city">City</Label>
                  <Input id="city" placeholder="Mumbai" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="pincode">Pincode</Label>
                  <Input id="pincode" placeholder="400001" />
                </div>
              </div>
            </div>

            <div className="bg-white p-8 rounded-3xl shadow-sm">
              <h3 className="font-bold text-xl mb-6">Payment Method</h3>
              <div className="space-y-4">
                <div className="flex items-center p-4 border rounded-2xl cursor-pointer hover:border-blue-600 transition-colors">
                  <input type="radio" name="payment" id="upi" className="mr-3" defaultChecked />
                  <Label htmlFor="upi" className="flex-1 cursor-pointer font-medium">UPI (Google Pay, PhonePe, Paytm)</Label>
                </div>
                <div className="flex items-center p-4 border rounded-2xl cursor-pointer hover:border-blue-600 transition-colors">
                  <input type="radio" name="payment" id="card" className="mr-3" />
                  <Label htmlFor="card" className="flex-1 cursor-pointer font-medium">Credit / Debit Card</Label>
                </div>
                <div className="flex items-center p-4 border rounded-2xl cursor-pointer hover:border-blue-600 transition-colors">
                  <input type="radio" name="payment" id="cod" className="mr-3" />
                  <Label htmlFor="cod" className="flex-1 cursor-pointer font-medium">Cash on Delivery</Label>
                </div>
              </div>
            </div>
          </div>

          <div className="lg:col-span-1">
            <div className="bg-white p-6 rounded-3xl shadow-sm sticky top-24">
              <h3 className="font-bold text-lg mb-6">Order Summary</h3>
              <div className="space-y-4 mb-6">
                <div className="flex justify-between text-neutral-600">
                  <span>Items Total</span>
                  <span>₹2,499</span>
                </div>
                <div className="flex justify-between text-neutral-600">
                  <span>Delivery</span>
                  <span className="text-green-600 font-medium">FREE</span>
                </div>
                <div className="pt-4 border-t flex justify-between font-bold text-xl text-neutral-900">
                  <span>Total Payable</span>
                  <span>₹2,499</span>
                </div>
              </div>
              <Button onClick={() => setIsOrdered(true)} className="w-full rounded-full py-6 text-lg">
                Place Order
              </Button>
            </div>
          </div>
        </div>
      </Container>
      <Footer />
    </main>
  );
}