"use client";

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

export function Reservation() {
  const fields = [
    { name: "name", label: "Full Name", type: "text", required: true, placeholder: "John Doe" },
    { name: "email", label: "Email Address", type: "email", required: true, placeholder: "john@example.com" },
    { name: "phone", label: "Phone Number", type: "tel", required: true, placeholder: "+33 1 23 45 67 89" },
    { name: "date", label: "Date", type: "date", required: true },
    { name: "time", label: "Time", type: "time", required: true },
    { name: "guests", label: "Number of Guests", type: "number", required: true, placeholder: "2" },
    { name: "requests", label: "Special Requests", type: "textarea", required: false, placeholder: "Allergies, special occasion..." },
  ];

  return (
    <section id="reservation" className="py-20 bg-amber-50">
      <Container>
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div>
            <Heading className="text-4xl font-serif text-stone-900 mb-6">Reserve Your Table</Heading>
            <Subheading className="text-stone-600 mb-8">
              Join us for an unforgettable dining experience. For parties larger than 8, please contact us directly.
            </Subheading>
            <div className="space-y-4 text-stone-700">
              <p><strong>Dress Code:</strong> Smart Casual</p>
              <p><strong>Cancellation Policy:</strong> Please cancel at least 24 hours in advance.</p>
            </div>
          </div>
          
          <div className="bg-white p-8 rounded-xl shadow-lg border border-amber-100">
            <KleapForm 
              formId="reservation" 
              title="Table Reservation" 
              fields={fields} 
              submitText="Book Now"
              className="space-y-4"
            />
          </div>
        </div>
      </Container>
    </section>
  );
}