import ContactForm from "@/components/contact/ContactForm";
import { MapPin, Phone, Mail, Clock } from "lucide-react";
import Head from "next/head";

const ContactPage = () => {
  return (
    <>
      <Head>
        <title>Contact Us | Badagry Museum</title>
        <meta
          name="description"
          content="Have questions or feedback? Contact the Badagry Museum team. We're here to answer your inquiries about Nigeria's slavery history museum and exhibits."
        />
        <meta
          name="keywords"
          content="contact Badagry Museum, museum inquiries, Nigeria slavery history museum contact, visit information"
        />

        {/* Open Graph / Facebook */}
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://badagrymuseum.org/contact" />
        <meta property="og:title" content="Contact Us | Badagry Museum" />
        <meta
          property="og:description"
          content="Have questions or feedback? Contact the Badagry Museum team. We're here to answer your inquiries about Nigeria's slavery history museum and exhibits."
        />
        <meta
          property="og:image"
          content="https://images.unsplash.com/photo-1574362848149-11496d93a7c7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=600"
        />

        {/* Twitter */}
        <meta property="twitter:card" content="summary_large_image" />
        <meta
          property="twitter:url"
          content="https://badagrymuseum.org/contact"
        />
        <meta property="twitter:title" content="Contact Us | Badagry Museum" />
        <meta
          property="twitter:description"
          content="Have questions or feedback? Contact the Badagry Museum team. We're here to answer your inquiries about Nigeria's slavery history museum and exhibits."
        />
        <meta
          property="twitter:image"
          content="https://images.unsplash.com/photo-1574362848149-11496d93a7c7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=600"
        />
      </Head>

      <section id="contact" className="py-16 bg-secondary">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h1 className="text-3xl font-bold tracking-tight text-primary sm:text-4xl lg:text-5xl font-heading">
              Contact Us
            </h1>
            <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500">
              Have questions or feedback? We'd love to hear from you.
            </p>
          </div>

          <div className="bg-white rounded-xl shadow-xl overflow-hidden">
            <div className="md:flex">
              <div className="md:w-1/2 p-8">
                <h2 className="text-2xl font-bold text-neutral-dark mb-6 font-heading">
                  Send us a Message
                </h2>
                <ContactForm />
              </div>

              <div className="md:w-1/2 bg-neutral-light p-8">
                <h2 className="text-2xl font-bold text-neutral-dark mb-6 font-heading">
                  Visit Us
                </h2>

                <div className="space-y-6">
                  <div className="flex items-start">
                    <MapPin className="h-5 w-5 text-primary mt-1 mr-3" />
                    <div>
                      <h3 className="font-medium text-neutral-dark">Address</h3>
                      <p className="mt-2 text-gray-600">
                        Badagry Heritage Museum
                        <br />
                        Badagry Town
                        <br />
                        Lagos State, Nigeria
                      </p>
                    </div>
                  </div>

                  <div className="flex items-start">
                    <Clock className="h-5 w-5 text-primary mt-1 mr-3" />
                    <div>
                      <h3 className="font-medium text-neutral-dark">
                        Opening Hours
                      </h3>
                      <p className="mt-2 text-gray-600">
                        Monday - Saturday: 9:00 AM - 5:00 PM
                        <br />
                        Sunday: 12:00 PM - 5:00 PM
                      </p>
                    </div>
                  </div>

                  <div className="flex items-start">
                    <div className="flex flex-col space-y-4">
                      <div className="flex items-center">
                        <Phone className="h-5 w-5 text-primary mr-3" />
                        <h3 className="font-medium text-neutral-dark">Phone</h3>
                      </div>
                      <p className="text-gray-600 ml-8">+234 123 456 7890</p>

                      <div className="flex items-center">
                        <Mail className="h-5 w-5 text-primary mr-3" />
                        <h3 className="font-medium text-neutral-dark">Email</h3>
                      </div>
                      <p className="text-gray-600 ml-8">
                        info@badagrymuseum.org
                      </p>
                    </div>
                  </div>

                  <div>
                    <h3 className="font-medium text-neutral-dark mb-2">
                      Connect With Us
                    </h3>
                    <div className="flex space-x-4">
                      <a
                        href="#"
                        className="text-primary hover:text-primary-dark text-xl"
                      >
                        <i className="fab fa-facebook"></i>
                      </a>
                      <a
                        href="#"
                        className="text-primary hover:text-primary-dark text-xl"
                      >
                        <i className="fab fa-twitter"></i>
                      </a>
                      <a
                        href="#"
                        className="text-primary hover:text-primary-dark text-xl"
                      >
                        <i className="fab fa-instagram"></i>
                      </a>
                      <a
                        href="#"
                        className="text-primary hover:text-primary-dark text-xl"
                      >
                        <i className="fab fa-youtube"></i>
                      </a>
                    </div>
                  </div>
                </div>

                <div className="mt-8 h-64 bg-gray-300 rounded-lg relative overflow-hidden">
                  <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63417.70444481659!2d2.847457628906247!3d6.431158800000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x103b42af1e1acfa5%3A0x2ae76039d7fa181c!2sBadagry%2C%20Nigeria!5e0!3m2!1sen!2sus!4v1623845878549!5m2!1sen!2sus"
                    width="100%"
                    height="100%"
                    style={{ border: 0 }}
                    allowFullScreen
                    loading="lazy"
                    title="Badagry Museum Location"
                  ></iframe>
                </div>
              </div>
            </div>
          </div>

          <div className="mt-16 bg-white rounded-xl p-8 shadow-lg">
            <h3 className="text-2xl font-bold text-neutral-dark mb-6 font-heading text-center">
              Frequently Asked Questions
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div>
                <h4 className="text-lg font-medium text-primary mb-2">
                  How long does a typical tour take?
                </h4>
                <p className="text-gray-600 mb-4">
                  A standard tour takes approximately 1.5 hours, while
                  educational and private tours can take 2-3 hours depending on
                  your interest and engagement.
                </p>

                <h4 className="text-lg font-medium text-primary mb-2">
                  Is photography allowed in the museum?
                </h4>
                <p className="text-gray-600 mb-4">
                  Photography is allowed in most areas of the museum for
                  personal use. However, flash photography and commercial
                  photography require prior permission.
                </p>
              </div>
              <div>
                <h4 className="text-lg font-medium text-primary mb-2">
                  Are there accommodations nearby?
                </h4>
                <p className="text-gray-600 mb-4">
                  Yes, there are several hotels and guesthouses in Badagry town.
                  Our staff can provide recommendations based on your
                  preferences and budget.
                </p>

                <h4 className="text-lg font-medium text-primary mb-2">
                  Do I need to book in advance?
                </h4>
                <p className="text-gray-600 mb-4">
                  While walk-ins are welcome, we recommend booking in advance,
                  especially for group visits and special tours, to ensure
                  availability and the best experience.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default ContactPage;
