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

export default function ContactPage() {
  const contactFields = [
    {
      name: "name",
      label: "Full Name",
      type: "text" as const,
      required: true,
      placeholder: "John Doe",
    },
    {
      name: "email",
      label: "Email Address",
      type: "email" as const,
      required: true,
      placeholder: "john@example.com",
    },
    {
      name: "phone",
      label: "Phone Number",
      type: "tel" as const,
      placeholder: "+1 (555) 000-0000",
    },
    {
      name: "subject",
      label: "Subject",
      type: "text" as const,
      required: true,
      placeholder: "How can we help?",
    },
    {
      name: "message",
      label: "Message",
      type: "textarea" as const,
      required: true,
      placeholder: "Tell us more about your inquiry...",
    },
  ];

  return (
    <>
      <section className="py-12 border-b">
        <Container>
          <Heading className="mb-2">Contact Us</Heading>
          <p className="text-neutral-600 dark:text-neutral-400">
            We'd love to hear from you. Send us a message and we'll respond as soon as possible.
          </p>
        </Container>
      </section>

      <section className="py-20">
        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div>
              <h2 className="text-2xl font-bold mb-6">Get in Touch</h2>
              <div className="space-y-6">
                <div>
                  <h3 className="font-semibold mb-2">📍 Visit Our Showroom</h3>
                  <p className="text-neutral-600 dark:text-neutral-400">
                    123 Furniture Street<br />
                    Design District, NY 10001<br />
                    United States
                  </p>
                </div>
                <div>
                  <h3 className="font-semibold mb-2">📞 Call Us</h3>
                  <p className="text-neutral-600 dark:text-neutral-400">
                    +1 (555) 123-4567<br />
                    Mon-Fri: 9am - 6pm EST
                  </p>
                </div>
                <div>
                  <h3 className="font-semibold mb-2">✉️ Email Us</h3>
                  <p className="text-neutral-600 dark:text-neutral-400">
                    support@furnihome.com<br />
                    sales@furnihome.com
                  </p>
                </div>
                <div>
                  <h3 className="font-semibold mb-2">💬 Live Chat</h3>
                  <p className="text-neutral-600 dark:text-neutral-400">
                    Available Mon-Fri: 9am - 6pm EST<br />
                    Click the chat icon in the bottom right
                  </p>
                </div>
              </div>
            </div>
            <div>
              <KleapForm
                formId="contact"
                title="Send us a message"
                fields={contactFields}
              />
            </div>
          </div>
        </Container>
      </section>

      <Footer />
    </>
  );
}