import ContactForm from "@/components/contact-form";

export const metadata = {
  title: "Contact Us",
  description: "Need our help? Get in touch!",
};

const ContactPage = () => {
  return (
    <>
      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
          <h1 className="text-3xl font-bold text-gray-900">Contact Us</h1>
        </div>
      </header>
      <div className="bg-gray-100 mx-auto text-gray-900 px-4 pt-8">
        <div className="grid grid-cols-1 gap-8 max-w-3xl mx-auto">
          <div className="text-gray-900">
            <h2 className="text-xl font-semibold mb-4">Get in Touch</h2>
            <p className="mb-4">
              We would love to hear from you. Please fill out the form below or
              use our contact information.
            </p>

            <h3 className="text-lg font-semibold mb-2">Contact Information</h3>
            <p>Email: sales@techaro.lol</p>
          </div>

          <div className="pb-4">
            <h2 className="text-xl font-semibold mb-4">Contact Form</h2>
            <noscript className="my-2">
              Enable JavaScript to use the contact form. It{"'"}s 2024. Give up.
            </noscript>
            <ContactForm />
          </div>
        </div>
      </div>
    </>
  );
};

export default ContactPage;