"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { KleapForm, KleapFormField } from "@/components/kleap-form";
import { Footer } from "@/components/footer";
import { Card } from "@/components/ui/card";
import { motion } from "framer-motion";

export default function ContactPage() {
  const fields: KleapFormField[] = [
    { 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: "Full Interior Deep Clean ($80)", value: "interior" },
        { label: "Exterior Hand Wash ($40)", value: "exterior" },
        { label: "Wheel & Tire Shine ($25)", value: "wheels" },
        { label: "Full Detail Package ($110)", value: "full" }
      ],
      required: true 
    },
    { name: "message", label: "Preferred Date & Time", 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">
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
            >
              <Heading>Book Your Detail</Heading>
              <Subheading className="mt-4">
                Fill out the form below and I'll get back to you within 2 hours with a quote and availability.
              </Subheading>
              
              <div className="mt-12 space-y-8">
                <Card className="p-6 border-neutral-200 dark:border-neutral-800">
                  <h4 className="font-bold text-lg">Location</h4>
                  <p className="text-neutral-600 dark:text-neutral-400">Serving Cedar Rapids, IA and surrounding areas. I come to you!</p>
                </Card>
                <Card className="p-6 border-neutral-200 dark:border-neutral-800">
                  <h4 className="font-bold text-lg">Hours</h4>
                  <p className="text-neutral-600 dark:text-neutral-400">Mon-Fri: 4:00 PM - 8:00 PM</p>
                  <p className="text-neutral-600 dark:text-neutral-400">Sat-Sun: 8:00 AM - 8:00 PM</p>
                </Card>
                <div className="p-6 bg-blue-600 text-white rounded-2xl shadow-lg">
                  <h4 className="font-bold text-lg mb-2">💳 Secure Payments</h4>
                  <p className="text-sm opacity-90">After we confirm your time, I'll send a secure Stripe payment link to your email to lock in your spot.</p>
                </div>
              </div>
            </motion.div>
            
            <motion.div 
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              className="bg-white dark:bg-neutral-950 p-8 rounded-2xl shadow-2xl border border-neutral-100 dark:border-neutral-800"
            >
              <KleapForm 
                formId="booking-apex" 
                title="Booking Request" 
                fields={fields} 
              />
            </motion.div>
          </div>
        </Container>
      </section>
      <Footer />
    </main>
  );
}