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

export function ContactSection() {
  const fields: KleapFormField[] = [
    { name: "name", label: "Full Name", type: "text", required: true },
    { name: "email", label: "Email Address", type: "email", required: true },
    { name: "service", label: "Interested Service", type: "select", options: [
      "AI Solutions", "Digital Transformation", "Security Services", "Web Design", "App Development", "Cloud Services", "Tax Filing", "Event Security"
    ], required: true },
    { name: "message", label: "How can we help?", type: "textarea", required: true },
  ];

  return (
    <section id="contact" className="py-20">
      <Container>
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <Heading>Get in Touch</Heading>
            <Subheading className="mt-4">
              Ready to transform your operations? Contact us today for a consultation.
            </Subheading>
          </div>
          <div className="bg-white p-8 rounded-2xl shadow-xl border border-neutral-100">
            <KleapForm 
              formId="contact-us" 
              title="Contact Predator AI" 
              fields={fields} 
            />
          </div>
        </div>
      </Container>
    </section>
  );
}