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

const contactFields = [
  { name: "name", label: "Name", type: "text", required: true },
  { name: "email", label: "Email", type: "email", required: true },
  { name: "subject", label: "Subject", type: "text", required: true },
  { name: "message", label: "Message", type: "textarea", required: true },
];

export default function ContactPage() {
  return (
    <main className="min-h-screen pt-32">
      <Container className="pb-24">
        <div className="text-center mb-16">
          <Heading>Get in Touch</Heading>
          <Subheading className="mt-4">We're here to help with any questions or custom requests.</Subheading>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
          <div>
            <div className="bg-white p-8 rounded-3xl shadow-sm border">
              <KleapForm formId="contact" title="Send us a message" fields={contactFields} />
            </div>
          </div>

          <div className="space-y-12">
            <div>
              <h3 className="text-2xl font-bold mb-6">Contact Information</h3>
              <div className="space-y-6">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-full bg-neutral-100 flex items-center justify-center flex-shrink-0">
                    {/* Icon */}
                  </div>
                  <div>
                    <p className="font-bold">Our Location</p>
                    <p className="text-neutral-600">123 Fashion Street, Style City, SC 12345</p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-full bg-neutral-100 flex items-center justify-center flex-shrink-0">
                    {/* Icon */}
                  </div>
                  <div>
                    <p className="font-bold">Phone & WhatsApp</p>
                    <p className="text-neutral-600">+1 (555) 123-4567</p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-full bg-neutral-100 flex items-center justify-center flex-shrink-0">
                    {/* Icon */}
                  </div>
                  <div>
                    <p className="font-bold">Email Address</p>
                    <p className="text-neutral-600">hello@solevibe.com</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-neutral-900 text-white p-8 rounded-3xl">
              <h3 className="text-xl font-bold mb-4">Business Hours</h3>
              <ul className="space-y-2 text-neutral-400">
                <li className="flex justify-between"><span>Monday - Friday</span> <span>9:00 AM - 7:00 PM</span></li>
                <li className="flex justify-between"><span>Saturday</span> <span>10:00 AM - 5:00 PM</span></li>
                <li className="flex justify-between"><span>Sunday</span> <span>Closed</span></li>
              </ul>
            </div>
          </div>
        </div>
      </Container>
      <Footer />
    </main>
  );
}