"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Footer } from "@/components/footer";
import { KleapForm } from "@/components/kleap-form";

const bookingFields = [
  {
    name: "name",
    label: "Full Name",
    type: "text",
    required: true,
  },
  {
    name: "email",
    label: "Email Address",
    type: "email",
    required: true,
  },
  {
    name: "phone",
    label: "Phone Number",
    type: "tel",
    required: true,
  },
  {
    name: "service",
    label: "Service Type",
    type: "select",
    required: true,
    options: [
      { label: "Custom Shoe Order", value: "custom" },
      { label: "Professional Fitting", value: "fitting" },
      { label: "Style Consultation", value: "consultation" },
    ],
  },
  {
    name: "date",
    label: "Preferred Date",
    type: "text", // Using text for simplicity in this template, usually a date picker
    required: true,
  },
  {
    name: "time",
    label: "Preferred Time",
    type: "select",
    required: true,
    options: [
      { label: "Morning (9AM - 12PM)", value: "morning" },
      { label: "Afternoon (12PM - 4PM)", value: "afternoon" },
      { label: "Evening (4PM - 7PM)", value: "evening" },
    ],
  },
  {
    name: "notes",
    label: "Additional Notes",
    type: "textarea",
    required: false,
  },
];

export default function BookingPage() {
  return (
    <main className="min-h-screen pt-32">
      <Container className="max-w-4xl pb-24">
        <div className="text-center mb-16">
          <Heading>Book a Fitting</Heading>
          <Subheading className="mt-4">
            Schedule a personalized session with our footwear experts.
          </Subheading>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
          <div className="lg:col-span-2 bg-white p-8 rounded-3xl shadow-sm border">
            <KleapForm 
              formId="booking" 
              title="Book Your Session" 
              fields={bookingFields} 
            />
          </div>
          
          <div className="space-y-8">
            <div className="bg-neutral-50 p-6 rounded-2xl border">
              <h3 className="font-bold text-lg mb-4">Why book a fitting?</h3>
              <ul className="space-y-4 text-sm text-neutral-600">
                <li className="flex gap-3">
                  <span className="text-primary font-bold">01</span>
                  Precise measurements for ultimate comfort.
                </li>
                <li className="flex gap-3">
                  <span className="text-primary font-bold">02</span>
                  Expert advice on styles that suit your gait.
                </li>
                <li className="flex gap-3">
                  <span className="text-primary font-bold">03</span>
                  Early access to new collections.
                </li>
              </ul>
            </div>
            
            <div className="bg-neutral-900 text-white p-6 rounded-2xl">
              <h3 className="font-bold text-lg mb-4">Need help?</h3>
              <p className="text-sm text-neutral-400 mb-4">
                If you have any questions about our custom services, feel free to reach out.
              </p>
              <p className="font-bold">+1 (555) 123-4567</p>
              <p className="text-sm text-neutral-400">support@solevibe.com</p>
            </div>
          </div>
        </div>
      </Container>
      <Footer />
    </main>
  );
}