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

export default function ContactPage() {
  const fields = [
    { 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: "vehicle", label: "Vehicle Make & Model", type: "text", required: true },
    { 
      name: "service", 
      label: "Service Interested In", 
      type: "select", 
      options: [
        { label: "Express Detail", value: "express" },
        { label: "Apex Signature", value: "signature" },
        { label: "Ceramic Coating", value: "ceramic" },
        { label: "Paint Correction", value: "correction" },
        { label: "Other", value: "other" }
      ],
      required: true 
    },
    { name: "message", label: "Additional Details", type: "textarea", required: false },
  ];

  return (
    <main className="pt-20">
      <section className="py-24">
        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
            <div>
              <Heading>Book Your Appointment</Heading>
              <Subheading className="mt-4">
                Fill out the form below and we'll get back to you within 24 hours with a quote and availability.
              </Subheading>
              
              <div className="mt-12 space-y-8">
                <div>
                  <h4 className="font-bold text-lg">Location</h4>
                  <p className="text-neutral-600">Serving Cedar Rapids, Marion, Hiawatha, and surrounding areas.</p>
                </div>
                <div>
                  <h4 className="font-bold text-lg">Hours</h4>
                  <p className="text-neutral-600">Monday - Friday: 8:00 AM - 6:00 PM</p>
                  <p className="text-neutral-600">Saturday: 9:00 AM - 4:00 PM</p>
                </div>
                <div>
                  <h4 className="font-bold text-lg">Contact Info</h4>
                  <p className="text-neutral-600">(319) 555-0123</p>
                  <p className="text-neutral-600">hello@apexdetailing.com</p>
                </div>
              </div>
            </div>
            
            <div className="bg-white p-8 rounded-2xl shadow-xl border border-neutral-100">
              <KleapForm 
                formId="contact-apex" 
                title="Booking Request" 
                fields={fields} 
              />
            </div>
          </div>
        </Container>
      </section>
      <Footer />
    </main>
  );
}