app-hopping-chameleon-beam/app/booking/page.tsx

"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Calendar as CalendarIcon, Clock, CreditCard, QrCode, Wallet } from "lucide-react";
import Link from "next/link";
import { useState } from "react";

export default function BookingPage() {
  const [step, setStep] = useState(1);

  return (
    <main className="min-h-screen bg-neutral-50 pt-32 pb-20">
      <Container className="max-w-4xl">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="md:col-span-2 space-y-6">
            <Heading>Booking Sesi Mentoring</Heading>
            
            {/* Step 1: Schedule */}
            <Card className="border-none shadow-sm">
              <CardContent className="p-8">
                <div className="flex items-center gap-3 mb-6">
                  <div className="w-8 h-8 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold">1</div>
                  <h3 className="text-xl font-bold">Pilih Jadwal & Durasi</h3>
                </div>

                <div className="space-y-8">
                  <div className="space-y-4">
                    <Label>Pilih Durasi</Label>
                    <RadioGroup defaultValue="60" className="grid grid-cols-3 gap-4">
                      {["30", "45", "60"].map((min) => (
                        <div key={min}>
                          <RadioGroupItem value={min} id={`m${min}`} className="peer sr-only" />
                          <Label
                            htmlFor={`m${min}`}
                            className="flex flex-col items-center justify-center rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent peer-data-[state=checked]:border-indigo-600 cursor-pointer"
                          >
                            <span className="font-bold">{min} Menit</span>
                          </Label>
                        </div>
                      ))}
                    </RadioGroup>
                  </div>

                  <div className="space-y-4">
                    <Label>Pilih Tanggal (UI Only)</Label>
                    <div className="grid grid-cols-4 gap-2">
                      {[15, 16, 17, 18].map((day) => (
                        <div key={day} className={`p-3 text-center rounded-lg border-2 cursor-pointer ${day === 16 ? 'border-indigo-600 bg-indigo-50' : 'border-neutral-100'}`}>
                          <div className="text-xs text-neutral-500">Okt</div>
                          <div className="text-lg font-bold">{day}</div>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div className="space-y-4">
                    <Label>Pilih Jam</Label>
                    <div className="grid grid-cols-3 gap-2">
                      {["19:00", "20:00", "21:00"].map((time) => (
                        <div key={time} className={`p-3 text-center rounded-lg border-2 cursor-pointer ${time === '19:00' ? 'border-indigo-600 bg-indigo-50' : 'border-neutral-100'}`}>
                          <span className="font-medium">{time}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Step 2: Payment */}
            <Card className="border-none shadow-sm">
              <CardContent className="p-8">
                <div className="flex items-center gap-3 mb-6">
                  <div className="w-8 h-8 rounded-full bg-neutral-200 text-neutral-600 flex items-center justify-center font-bold">2</div>
                  <h3 className="text-xl font-bold">Metode Pembayaran</h3>
                </div>

                <RadioGroup defaultValue="qris" className="space-y-3">
                  <div className="flex items-center justify-between p-4 border rounded-xl cursor-pointer hover:bg-neutral-50">
                    <div className="flex items-center gap-3">
                      <RadioGroupItem value="qris" id="qris" />
                      <Label htmlFor="qris" className="font-medium cursor-pointer">QRIS (Gopay, OVO, Dana)</Label>
                    </div>
                    <QrCode className="w-5 h-5 text-neutral-400" />
                  </div>
                  <div className="flex items-center justify-between p-4 border rounded-xl cursor-pointer hover:bg-neutral-50">
                    <div className="flex items-center gap-3">
                      <RadioGroupItem value="va" id="va" />
                      <Label htmlFor="va" className="font-medium cursor-pointer">Virtual Account</Label>
                    </div>
                    <CreditCard className="w-5 h-5 text-neutral-400" />
                  </div>
                  <div className="flex items-center justify-between p-4 border rounded-xl cursor-pointer hover:bg-neutral-50">
                    <div className="flex items-center gap-3">
                      <RadioGroupItem value="wallet" id="wallet" />
                      <Label htmlFor="wallet" className="font-medium cursor-pointer">E-Wallet Langsung</Label>
                    </div>
                    <Wallet className="w-5 h-5 text-neutral-400" />
                  </div>
                </RadioGroup>
              </CardContent>
            </Card>
          </div>

          <div className="md:col-span-1">
            <Card className="border-none shadow-lg sticky top-32">
              <CardContent className="p-6">
                <h3 className="font-bold text-lg mb-6">Ringkasan Pesanan</h3>
                
                <div className="flex gap-4 mb-6">
                  <img src="https://i.pravatar.cc/100?u=budi" className="w-12 h-12 rounded-lg object-cover" />
                  <div>
                    <div className="font-bold">Budi Santoso</div>
                    <div className="text-xs text-neutral-500">Senior Product Manager</div>
                  </div>
                </div>

                <div className="space-y-3 text-sm mb-8">
                  <div className="flex justify-between">
                    <span className="text-neutral-500">Jadwal</span>
                    <span className="font-medium">16 Okt, 19:00</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-neutral-500">Durasi</span>
                    <span className="font-medium">60 Menit</span>
                  </div>
                  <div className="pt-3 border-t flex justify-between text-base">
                    <span className="text-neutral-500">Total Bayar</span>
                    <span className="font-bold text-indigo-600">Rp 250.000</span>
                  </div>
                </div>

                <Button className="w-full h-12 bg-indigo-600 hover:bg-indigo-700" asChild>
                  <Link href="/pre-session">Bayar & Konfirmasi</Link>
                </Button>
                
                <p className="text-center text-[10px] text-neutral-400 mt-4">
                  Dengan membayar, kamu menyetujui Syarat & Ketentuan Mentora.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </Container>
    </main>
  );
}